Merge version_3 into main

Merge version_3 into main

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,171 +26,96 @@ 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://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=800",          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://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=800",          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://images.unsplash.com/photo-1556228578-0d85b1a4d571?q=80&w=800",          imageAlt: "luxury face oil bottle"},
-        {
-          name: "James P.",          handle: "@james_luxury",          testimonial: "Unparalleled sophistication and results.",          rating: 5,
-          imageSrc: "https://images.unsplash.com/photo-1612817288484-6f916006741a?q=80&w=800",          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://images.unsplash.com/photo-1571781926291-c4a7e3021b3d?q=80&w=800",          imageAlt: "serum dropper bottle glass"},
-      ]}
-      imageSrc="https://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=1200"
-      imageAlt="Mogwards luxury skincare showcase"
-      mediaAnimation="blur-reveal"
-      avatars={[
-        { src: "https://i.pravatar.cc/150?u=1", alt: "Customer 1" },
-        { src: "https://i.pravatar.cc/150?u=2", alt: "Customer 2" },
-        { src: "https://i.pravatar.cc/150?u=3", alt: "Customer 3" },
-        { src: "https://i.pravatar.cc/150?u=4", alt: "Customer 4" },
-        { src: "https://i.pravatar.cc/150?u=5", 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://images.unsplash.com/photo-1608248543803-ba4f8c70a0b9?q=80&w=1200"
-      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://images.unsplash.com/photo-1615397349754-cfa2066a298e?q=80&w=600"},
-        {
-          id: "p2",          brand: "MOGWARDS",          name: "Day Cream",          price: "$95",          rating: 5,
-          reviewCount: "85",          imageSrc: "https://images.unsplash.com/photo-1570177759628-98e3b782c5e5?q=80&w=600"},
-        {
-          id: "p3",          brand: "MOGWARDS",          name: "Night Serum",          price: "$150",          rating: 5,
-          reviewCount: "210",          imageSrc: "https://images.unsplash.com/photo-1556228578-0d85b1a4d571?q=80&w=600"},
-        {
-          id: "p4",          brand: "MOGWARDS",          name: "Cleansing Gel",          price: "$65",          rating: 4,
-          reviewCount: "95",          imageSrc: "https://images.unsplash.com/photo-1598440947619-2c35fc95f088?q=80&w=600"},
-        {
-          id: "p5",          brand: "MOGWARDS",          name: "Eye Concentrate",          price: "$110",          rating: 5,
-          reviewCount: "67",          imageSrc: "https://images.unsplash.com/photo-1612817288484-6f916006741a?q=80&w=600"},
-        {
-          id: "p6",          brand: "MOGWARDS",          name: "Hydration Mist",          price: "$55",          rating: 5,
-          reviewCount: "140",          imageSrc: "https://images.unsplash.com/photo-1571781926291-c4a7e3021b3d?q=80&w=600"},
-      ]}
-      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://i.pravatar.cc/150?u=1"},
-        {
-          id: "2",          title: "Simply Luxury",          quote: "The packaging, the scent, the results—perfection.",          name: "Elena R.",          role: "Brand Ambassador",          imageSrc: "https://i.pravatar.cc/150?u=2"},
-        {
-          id: "3",          title: "Gold Standard",          quote: "MOGWARDS is in a league of its own.",          name: "Mark D.",          role: "Skincare Expert",          imageSrc: "https://i.pravatar.cc/150?u=3"},
-        {
-          id: "4",          title: "Essential Ritual",          quote: "I cannot start my day without it.",          name: "Chloe P.",          role: "Artist",          imageSrc: "https://i.pravatar.cc/150?u=4"},
-        {
-          id: "5",          title: "Radiant Health",          quote: "My skin has been forever changed.",          name: "Lucas K.",          role: "Entrepreneur",          imageSrc: "https://i.pravatar.cc/150?u=5"},
-      ]}
-      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>
   );