Merge branch 'harini-1597-homepage'

Author: Sanchitbajaj02

public/assets/imgA.png

@@ -99,7 +99,93 @@ function HomePage({ accountId }: { accountId: string | undefined }) {
               }}
             >
               <Image
-                src="/assets/palettegram-for.png"
+                src="/assets/imgA.png"
+                alt="What is palettegram section"
+                loading="lazy"
+                width={600}
+                height={500}
+                className="mx-auto rounded"
+              />
+            </motion.div>
+          </figure>
+          <article>
+            <motion.h1
+              initial={{ opacity: 0, x: 100 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 1,
+                type: "spring",
+                stiffness: 80,
+                delay: 0,
+              }}
+              className="text-3xl md:text-6xl text-center font-extrabold tracking-wide text-black dark:text-white md:text-right"
+            >
+              What is Palettegram?
+            </motion.h1>
+            <motion.p
+              initial={{ opacity: 0, x: 100 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 0.5,
+                type: "spring",
+                stiffness: 80,
+                delay: 0.1,
+              }}
+              className="text-xl md:text-2xl text-center my-8 text-black dark:text-white md:text-right"
+            >
+              A social media platform built exclusively for design professionals to share, discover and discuss cutting-edge UI/UX designs and color palettes.
+            </motion.p>
+          </article>
+        </section>
+
+        <section className="flex flex-col items-center mt-32 mb-32 gap-4 md:flex-row md:justify-between">
+          <article>
+            <motion.h1
+              initial={{ opacity: 0, x: 100 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 1,
+                type: "spring",
+                stiffness: 110,
+                delay: 0,
+              }}
+              className="text-3xl font-bold text-center tracking-wide text-secondary dark:text-white md:text-6xl md:text-left"
+            >
+              Who is it for?
+            </motion.h1>
+            <motion.p
+              initial={{ opacity: 0, x: -100 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 0.5,
+                type: "spring",
+                stiffness: 110,
+                delay: 0.1,
+              }}
+              className="text-xl my-6 font-medium text-center text-secondary dark:text-white md:text-2xl md:text-left"
+            >
+              Are you a developer looking for design inspiration for your next website? Browse through a variety of styles by other developers and get inspired!
+            </motion.p>
+          </article>
+
+          <figure className="w-[70%]">
+            <motion.div
+              initial={{ opacity: 0, x: -100 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 0.5,
+                type: "spring",
+                stiffness: 80,
+                delay: 0.2,
+              }}
+            >
+              <Image
+                src="/assets/imgB.png"
                 alt="Who is palettegram for section"
                 loading="lazy"
                 width={600}
@@ -108,6 +194,31 @@ function HomePage({ accountId }: { accountId: string | undefined }) {
               />
             </motion.div>
           </figure>
+        </section>
+        
+        <section className="flex items-center flex-col-reverse md:flex-row gap-4 mt-32 mb-32">
+          <figure className="w-[70%]">
+            <motion.div
+              initial={{ opacity: 0, x: -100 }}
+              whileInView={{ opacity: 1, x: 0 }}
+              viewport={{ once: true }}
+              transition={{
+                duration: 0.5,
+                type: "spring",
+                stiffness: 80,
+                delay: 0.2,
+              }}
+            >
+              <Image
+                src="/assets/imgC.png"
+                alt="What you can do section"
+                loading="lazy"
+                width={600}
+                height={500}
+                className="mx-auto rounded"
+              />
+            </motion.div>
+          </figure>
           <article>
             <motion.h1
               initial={{ opacity: 0, x: 100 }}
@@ -121,7 +232,7 @@ function HomePage({ accountId }: { accountId: string | undefined }) {
               }}
               className="text-3xl md:text-6xl text-center font-extrabold tracking-wide text-black dark:text-white md:text-right"
             >
-              Who is <br /> Palettegram for?
+              Create, Showcase Collaborate
             </motion.h1>
             <motion.p
               initial={{ opacity: 0, x: 100 }}
@@ -135,11 +246,11 @@ function HomePage({ accountId }: { accountId: string | undefined }) {
               }}
               className="text-xl md:text-2xl text-center my-8 text-black dark:text-white md:text-right"
             >
-              Anyone who wants to share their designs and color palettes to get the review among the
-              professionals.
+              Show off your design talent through projects, blogs and get feedback from other developers. Partner up with others, be a part of a collaborative community. 
             </motion.p>
           </article>
         </section>
+
       </main>
     </>
   );