Update src/app/page.tsx

Merge version_2 into main
2026-04-03 18:44:29 +00:00 · 2026-04-03 18:44:00 +00:00 · 2026-04-03 18:16:58 +00:00 · 2026-04-03 18:16:52 +00:00 · 2026-04-03 18:14:48 +00:00
1 changed files with 86 additions and 312 deletions
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -6,7 +6,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroBillboardTestimonial from '@/components/sections/hero/HeroBillboardTestimonial';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
+import CardStack from '@/components/cardStack/CardStack';
 import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
 import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
 import { Sparkles } from "lucide-react";
@@ -26,323 +26,97 @@ export default function LandingPage() {
        headingFontWeight="light"
    >
      <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Collections",
-          id: "products",
-        },
-        {
-          name: "Our Story",
-          id: "about",
-        },
-        {
-          name: "Testimonials",
-          id: "testimonials",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
-      ]}
-      brandName="MOGWARDS"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+            <NavbarStyleCentered
+              navItems={[
+                { name: "Collections", id: "products" },
+                { name: "Our Story", id: "about" },
+                { name: "Testimonials", id: "testimonials" },
+                { name: "Contact", id: "contact" },
+              ]}
+              brandName="MOGWARDS"
+            />
+        </div>

-  <div id="hero" data-section="hero">
-      <HeroBillboardTestimonial
-      useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      title="Timeless Radiance"
-      description="Experience the pinnacle of luxury skincare with MOGWARDS. Formulated for the modern visionary, our collection brings nature and science together."
-      testimonials={[
-        {
-          name: "Elena R.",
-          handle: "@elena_skincare",
-          testimonial: "The glow is undeniable. A true luxury ritual.",
-          rating: 5,
-          imageSrc: "https://pixabay.com/get/g6b0dacd8dbfafacff23699d7b43a801a384d9561b4c2d0ba68e2753c350c3f1571119e02c74f4f8130f5fa01ef9e46d95961f31d8d3d7dbc291364ca88356347_1280.jpg?_wi=1",
-          imageAlt: "luxury skincare bottle flat lay",
-        },
-        {
-          name: "Marcus T.",
-          handle: "@marc_dermal",
-          testimonial: "Exquisite ingredients. My skin has never felt healthier.",
-          rating: 5,
-          imageSrc: "https://pixabay.com/get/g368216becb074aa1e0d3f27b05633c0ae038183ce3b4561531cd852d6ab5073a37ed365a2fcfafd3af81fb786b29eaaebfdcc3e4bc096fcc2e608882ad3678be_1280.jpg?_wi=1",
-          imageAlt: "luxury skincare facial cream jar",
-        },
-        {
-          name: "Sophia L.",
-          handle: "@sophia_glow",
-          testimonial: "Worth every drop. MOGWARDS changed my morning routine.",
-          rating: 5,
-          imageSrc: "https://pixabay.com/get/g8608b56adc49effefdfeaa49b1f62aa8d029bb6920c656e2c7100acd24914226c41ce437b10a17dfe17ece0dd18d136177feaf17f13a6afd14b2f2375429b068_1280.jpg?_wi=1",
-          imageAlt: "luxury face oil bottle",
-        },
-        {
-          name: "James P.",
-          handle: "@james_luxury",
-          testimonial: "Unparalleled sophistication and results.",
-          rating: 5,
-          imageSrc: "https://pixabay.com/get/g8d2fd7cd21397df63b4e44957053f9457d682282eaf65dbc15b1e09d2b9db5977a787ee730ba10d6739372c7ef28f96cab5517cd699492c04d0637282ceec548_1280.jpg?_wi=1",
-          imageAlt: "skincare cream jar luxury",
-        },
-        {
-          name: "Chloe P.",
-          handle: "@chloe_skincare",
-          testimonial: "Simply the best, my skin feels revitalized every day.",
-          rating: 5,
-          imageSrc: "https://pixabay.com/get/g0cfab0069250e7b1410d6ddc67ecbed202ffa5cbbc63561e05d1b5ea9e1707accc6449eab8aec43e085309329ad40e439ef8d95390446f9d6bd788123322ced4_1280.jpg?_wi=1",
-          imageAlt: "serum dropper bottle glass",
-        },
-      ]}
-      imageSrc="https://pixabay.com/get/g6b0dacd8dbfafacff23699d7b43a801a384d9561b4c2d0ba68e2753c350c3f1571119e02c74f4f8130f5fa01ef9e46d95961f31d8d3d7dbc291364ca88356347_1280.jpg?_wi=2"
-      imageAlt="Mogwards luxury skincare showcase"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        {
-          src: "https://pixabay.com/get/g5b1db652928d68ff020bf812a03b0af70e855ee3cf10d0b38eb35aa4466accb3ab425aea7a58a1bc644a87a11e5c18f40cef0816056305c98afa9e79dd75c84a_1280.jpg",
-          alt: "Customer 1",
-        },
-        {
-          src: "https://pixabay.com/get/g6b5734eec62fe010fa9f1d0fd13340cdedc9b0cd6a7598be4aeab4aeecaaa4cafb15e35064b13ae3864b0f71f02b7364094bb653afde091ef64ea92e8ae52c53_1280.jpg",
-          alt: "Customer 2",
-        },
-        {
-          src: "https://pixabay.com/get/g2fc2757936de0e124fe774105d89202a613291f70b917e571c52fba9a5acfb77b41f8f1bd8b1d754c3f1df05a21632e64a50c4b80899ef45ef1bf601b00f933a_1280.jpg",
-          alt: "Customer 3",
-        },
-        {
-          src: "https://pixabay.com/get/gd43ea4fe136ee403b95e220397efcbacf6247df42814705bdbe650103485a7dfdbdc2de1b634c4c483ec2b53ed5458214d262cefaddced6bd0a34ebc035cd90c_1280.jpg",
-          alt: "Customer 4",
-        },
-        {
-          src: "https://pixabay.com/get/g239b88693b54288c9847aa1502983820882b39d0ba890899b75f510da7e68147a22fdec4dccb20e389a69be84ac46a87255b5e915ae1c724c213bad76f8d0bdc_1280.jpg",
-          alt: "Customer 5",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Cruelty-Free",
-        },
-        {
-          type: "text",
-          text: "Ethically Sourced",
-        },
-        {
-          type: "text",
-          text: "Organic Ingredients",
-        },
-        {
-          type: "text",
-          text: "Sustainable Packaging",
-        },
-        {
-          type: "text",
-          text: "Dermatologist Tested",
-        },
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+            <HeroBillboardTestimonial
+              useInvertedBackground={true}
+              background={{ variant: "sparkles-gradient" }}
+              title="Timeless Radiance"
+              description="Experience the pinnacle of luxury skincare with MOGWARDS. Formulated for the modern visionary, our collection brings nature and science together."
+              testimonials={[
+                { name: "Elena R.", handle: "@elena_skincare", testimonial: "The glow is undeniable. A true luxury ritual.", rating: 5 },
+                { name: "Marcus T.", handle: "@marc_dermal", testimonial: "Exquisite ingredients. My skin has never felt healthier.", rating: 5 },
+              ]}
+              imageSrc="https://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=1200"
+              imageAlt="Mogwards luxury skincare showcase"
+              mediaAnimation="blur-reveal"
+            />
+        </div>

-  <div id="about" data-section="about">
-      <TestimonialAboutCard
-      useInvertedBackground={false}
-      tag="Our Philosophy"
-      title="Where Nature Meets Innovation"
-      description="MOGWARDS was founded to redefine the standard of luxury skincare. We believe that true beauty is cultivated through precision, integrity, and the finest organic essences."
-      subdescription="Every ingredient is ethically sourced and meticulously blended, ensuring unparalleled performance and a sensory journey like no other."
-      icon={Sparkles}
-      imageSrc="https://pixabay.com/get/g368216becb074aa1e0d3f27b05633c0ae038183ce3b4561531cd852d6ab5073a37ed365a2fcfafd3af81fb786b29eaaebfdcc3e4bc096fcc2e608882ad3678be_1280.jpg?_wi=2"
-      mediaAnimation="slide-up"
-    />
-  </div>
+        <div id="about" data-section="about">
+            <TestimonialAboutCard
+              useInvertedBackground={false}
+              tag="Our Philosophy"
+              title="Where Nature Meets Innovation"
+              description="MOGWARDS was founded to redefine the standard of luxury skincare. We believe that true beauty is cultivated through precision, integrity, and the finest organic essences."
+              subdescription="Every ingredient is ethically sourced and meticulously blended, ensuring unparalleled performance and a sensory journey like no other."
+              icon={Sparkles}
+              imageSrc="https://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=1200"
+              mediaAnimation="slide-up"
+            />
+        </div>

-  <div id="products" data-section="products">
-      <ProductCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      gridVariant="four-items-2x2-equal-grid"
-      useInvertedBackground={true}
-      products={[
-        {
-          id: "p1",
-          brand: "MOGWARDS",
-          name: "Radiance Oil",
-          price: "$125",
-          rating: 5,
-          reviewCount: "120",
-          imageSrc: "https://pixabay.com/get/g8608b56adc49effefdfeaa49b1f62aa8d029bb6920c656e2c7100acd24914226c41ce437b10a17dfe17ece0dd18d136177feaf17f13a6afd14b2f2375429b068_1280.jpg?_wi=2",
-        },
-        {
-          id: "p2",
-          brand: "MOGWARDS",
-          name: "Day Cream",
-          price: "$95",
-          rating: 5,
-          reviewCount: "85",
-          imageSrc: "https://pixabay.com/get/g8d2fd7cd21397df63b4e44957053f9457d682282eaf65dbc15b1e09d2b9db5977a787ee730ba10d6739372c7ef28f96cab5517cd699492c04d0637282ceec548_1280.jpg?_wi=2",
-        },
-        {
-          id: "p3",
-          brand: "MOGWARDS",
-          name: "Night Serum",
-          price: "$150",
-          rating: 5,
-          reviewCount: "210",
-          imageSrc: "https://pixabay.com/get/g0cfab0069250e7b1410d6ddc67ecbed202ffa5cbbc63561e05d1b5ea9e1707accc6449eab8aec43e085309329ad40e439ef8d95390446f9d6bd788123322ced4_1280.jpg?_wi=2",
-        },
-        {
-          id: "p4",
-          brand: "MOGWARDS",
-          name: "Cleansing Gel",
-          price: "$65",
-          rating: 4,
-          reviewCount: "95",
-          imageSrc: "https://pixabay.com/get/ge42c5e8b73bcef2cbc7885f85234f6cc8ea211357ec8ae062bd719e87af4727e21042ec9520907cd2972d36ea81a3e7e565333ae48946ebe0cf8ce0dbf10af93_1280.jpg",
-        },
-        {
-          id: "p5",
-          brand: "MOGWARDS",
-          name: "Eye Concentrate",
-          price: "$110",
-          rating: 5,
-          reviewCount: "67",
-          imageSrc: "https://pixabay.com/get/ga77f392099200741a3892169b216f4b5648d72b94b91ba4003de27c95762e50fa1942caefdbce59f944705669a55e3d55794ddfb921fb44ed24c429db9960696_1280.jpg",
-        },
-        {
-          id: "p6",
-          brand: "MOGWARDS",
-          name: "Hydration Mist",
-          price: "$55",
-          rating: 5,
-          reviewCount: "140",
-          imageSrc: "https://pixabay.com/get/ge40576f349e11e4bf1674c8dd5040685869de005432ea4d12696dcdb67929540385d0468013b4271dd9446f1662f120788f79dd2c797d3de2103619e555289dc_1280.jpg",
-        },
-      ]}
-      title="The Collection"
-      description="Discover our curated selection of high-performance skincare essentials."
-    />
-  </div>
+        <div id="products" data-section="products">
+            <CardStack
+              animationType="blur-reveal"
+              textboxLayout="default"
+              gridVariant="four-items-2x2-equal-grid"
+              useInvertedBackground={true}
+              title="The Collection"
+              description="Discover our curated selection of high-performance skincare essentials."
+            >
+              <div className="bg-white/5 p-6 rounded-xl">Product 1</div>
+              <div className="bg-white/5 p-6 rounded-xl">Product 2</div>
+              <div className="bg-white/5 p-6 rounded-xl">Product 3</div>
+              <div className="bg-white/5 p-6 rounded-xl">Product 4</div>
+            </CardStack>
+        </div>

-  <div id="testimonials" data-section="testimonials">
-      <TestimonialCardTen
-      textboxLayout="default"
-      useInvertedBackground={false}
-      testimonials={[
-        {
-          id: "1",
-          title: "Transformative",
-          quote: "I've never felt more radiant.",
-          name: "Sarah J.",
-          role: "Client",
-          imageSrc: "https://pixabay.com/get/g5b1db652928d68ff020bf812a03b0af70e855ee3cf10d0b38eb35aa4466accb3ab425aea7a58a1bc644a87a11e5c18f40cef0816056305c98afa9e79dd75c84a_1280.jpg",
-        },
-        {
-          id: "2",
-          title: "Simply Luxury",
-          quote: "The packaging, the scent, the results—perfection.",
-          name: "Elena R.",
-          role: "Brand Ambassador",
-          imageSrc: "https://pixabay.com/get/g6b5734eec62fe010fa9f1d0fd13340cdedc9b0cd6a7598be4aeab4aeecaaa4cafb15e35064b13ae3864b0f71f02b7364094bb653afde091ef64ea92e8ae52c53_1280.jpg",
-        },
-        {
-          id: "3",
-          title: "Gold Standard",
-          quote: "MOGWARDS is in a league of its own.",
-          name: "Mark D.",
-          role: "Skincare Expert",
-          imageSrc: "https://pixabay.com/get/g2fc2757936de0e124fe774105d89202a613291f70b917e571c52fba9a5acfb77b41f8f1bd8b1d754c3f1df05a21632e64a50c4b80899ef45ef1bf601b00f933a_1280.jpg",
-        },
-        {
-          id: "4",
-          title: "Essential Ritual",
-          quote: "I cannot start my day without it.",
-          name: "Chloe P.",
-          role: "Artist",
-          imageSrc: "https://pixabay.com/get/gd43ea4fe136ee403b95e220397efcbacf6247df42814705bdbe650103485a7dfdbdc2de1b634c4c483ec2b53ed5458214d262cefaddced6bd0a34ebc035cd90c_1280.jpg",
-        },
-        {
-          id: "5",
-          title: "Radiant Health",
-          quote: "My skin has been forever changed.",
-          name: "Lucas K.",
-          role: "Entrepreneur",
-          imageSrc: "https://pixabay.com/get/g239b88693b54288c9847aa1502983820882b39d0ba890899b75f510da7e68147a22fdec4dccb20e389a69be84ac46a87255b5e915ae1c724c213bad76f8d0bdc_1280.jpg",
-        },
-      ]}
-      title="A Legacy of Glow"
-      description="Don't just take our word for it."
-    />
-  </div>
+        <div id="testimonials" data-section="testimonials">
+            <TestimonialCardTen
+              textboxLayout="default"
+              useInvertedBackground={false}
+              testimonials={[
+                { id: "1", title: "Transformative", quote: "I've never felt more radiant.", name: "Sarah J.", role: "Client" },
+                { id: "2", title: "Simply Luxury", quote: "The packaging, the scent, the results—perfection.", name: "Elena R.", role: "Brand Ambassador" },
+              ]}
+              title="A Legacy of Glow"
+              description="Don't just take our word for it."
+            />
+        </div>

-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "radial-gradient",
-      }}
-      tag="Let's Connect"
-      title="Experience MOGWARDS"
-      description="Ready to begin your skincare journey? Get in touch with our concierge team for personalized recommendations."
-      buttons={[
-        {
-          text: "Inquire Now",
-          href: "#",
-        },
-      ]}
-    />
-  </div>
+        <div id="contact" data-section="contact">
+            <ContactCTA
+              useInvertedBackground={true}
+              background={{ variant: "radial-gradient" }}
+              tag="Let's Connect"
+              title="Experience MOGWARDS"
+              description="Ready to begin your skincare journey? Get in touch with our concierge team for personalized recommendations."
+              buttons={[{ text: "Inquire Now", href: "#" }]}
+            />
+        </div>

-  <div id="footer" data-section="footer">
-      <FooterLogoEmphasis
-      columns={[
-        {
-          items: [
-            {
-              label: "Collections",
-              href: "#products",
-            },
-            {
-              label: "About",
-              href: "#about",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "Concierge",
-              href: "#",
-            },
-          ],
-        },
-        {
-          items: [
-            {
-              label: "Privacy",
-              href: "#",
-            },
-            {
-              label: "Terms",
-              href: "#",
-            },
-          ],
-        },
-      ]}
-      logoText="MOGWARDS"
-    />
-  </div>
+        <div id="footer" data-section="footer">
+            <FooterLogoEmphasis
+              columns={[
+                { items: [{ label: "Collections", href: "#products" }, { label: "About", href: "#about" }] },
+                { items: [{ label: "Contact", href: "#contact" }] }
+              ]}
+              logoText="MOGWARDS"
+            />
+        </div>
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
Author	SHA1	Message	Date
bender	e6c4d6e2d8	Update src/app/page.tsx	2026-04-03 18:44:29 +00:00
bender	5fed17e43f	Update src/app/page.tsx	2026-04-03 18:44:00 +00:00
bender	8aa837a03d	Merge version_2 into main Merge version_2 into main	2026-04-03 18:16:58 +00:00
bender	be0ee40354	Update src/app/page.tsx	2026-04-03 18:16:52 +00:00
bender	79e8fa67a6	Merge version_1 into main Merge version_1 into main	2026-04-03 18:14:48 +00:00