Merge version_3 into main

Merge version_3 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactSplit from '@/components/sections/contact/ContactSplit';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FaqSplitText from '@/components/sections/faq/FaqSplitText';
 import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
-import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
+import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
@@ -33,21 +33,13 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "Collection",
+          name: "Collection",          id: "products"},
-          id: "products",
-        },
         {
-          name: "Story",
+          name: "Story",          id: "about"},
-          id: "about",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "contact"},
-          id: "contact",
-        },
       ]}
       brandName="SparkleBoutique"
     />
@@ -56,41 +48,26 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroBillboardGallery
       background={{
-        variant: "sparkles-gradient",
+        variant: "sparkles-gradient"}}
-      }}
       title="Sparkle & Shine"
       description="Discover our hand-picked collection of elegant silver pieces crafted for the modern, feminine soul. Add a touch of magic to your everyday look."
       buttons={[
         {
-          text: "Shop Collections",
+          text: "Shop the Collection",          href: "#products"},
-          href: "#products",
-        },
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/jewelry-lifestyle-flat-layout-with-place-text-jewellery-background-mockup-banner-fashion-accessories_460848-12591.jpg?_wi=1",
+          imageSrc: "http://img.b2bpic.net/free-photo/jewelry-lifestyle-flat-layout-with-place-text-jewellery-background-mockup-banner-fashion-accessories_460848-12591.jpg?_wi=1",          imageAlt: "Silver Jewllery"},
-          imageAlt: "Silver Jewllery",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-crystalline-water-oil-drops_23-2148227285.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-crystalline-water-oil-drops_23-2148227285.jpg",          imageAlt: "Silver Jewllery"},
-          imageAlt: "Silver Jewllery",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-beautiful-diamond-ring-white-surface_181624-57589.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-beautiful-diamond-ring-white-surface_181624-57589.jpg",          imageAlt: "Silver Jewllery"},
-          imageAlt: "Silver Jewllery",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-fashion-lifestyle-concept_23-2148229258.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-fashion-lifestyle-concept_23-2148229258.jpg",          imageAlt: "Silver Jewllery"},
-          imageAlt: "Silver Jewllery",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/jewelry-lifestyle-flat-layout-with-place-text-jewellery-background-mockup-banner-fashion-accessories_460848-12592.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/jewelry-lifestyle-flat-layout-with-place-text-jewellery-background-mockup-banner-fashion-accessories_460848-12592.jpg",          imageAlt: "Silver Jewllery"},
-          imageAlt: "Silver Jewllery",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/pink-model-career-kit-arrangement_23-2150083976.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/pink-model-career-kit-arrangement_23-2150083976.jpg",          imageAlt: "Silver Jewllery"},
-          imageAlt: "Silver Jewllery",
-        },
       ]}
       mediaAnimation="blur-reveal"
     />
@@ -102,9 +79,7 @@ export default function LandingPage() {
       title="Crafted with Love & Glitter"
       buttons={[
         {
-          text: "Our Story",
+          text: "Our Story",          href: "#"},
-          href: "#",
-        },
       ]}
     />
   </div>
@@ -117,47 +92,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "1",
+          id: "1",          name: "Silver Moonlight Ring",          price: "$85",          variant: "925 Silver",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-aesthetic-silver-earrings_23-2149846572.jpg?_wi=1"},
-          name: "Silver Moonlight Ring",
-          price: "$85",
-          variant: "925 Silver",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-aesthetic-silver-earrings_23-2149846572.jpg?_wi=1",
-        },
         {
-          id: "2",
+          id: "2",          name: "Dainty Star Necklace",          price: "$120",          variant: "Sterling Silver",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-ferromagnetic-mirrored-metal-with-blurred-elements_23-2148253535.jpg?_wi=1"},
-          name: "Dainty Star Necklace",
-          price: "$120",
-          variant: "Sterling Silver",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-ferromagnetic-mirrored-metal-with-blurred-elements_23-2148253535.jpg?_wi=1",
-        },
         {
-          id: "3",
+          id: "3",          name: "Glitter Drop Earrings",          price: "$65",          variant: "Silver Plated",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-gold-plated-bracelet-ring-set-with-crystal-black-table_140725-12895.jpg?_wi=1"},
-          name: "Glitter Drop Earrings",
-          price: "$65",
-          variant: "Silver Plated",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-gold-plated-bracelet-ring-set-with-crystal-black-table_140725-12895.jpg?_wi=1",
-        },
         {
-          id: "4",
+          id: "4",          name: "Classic Chain Bracelet",          price: "$95",          variant: "925 Silver",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-silver-tin-can_23-2148785202.jpg"},
-          name: "Classic Chain Bracelet",
-          price: "$95",
-          variant: "925 Silver",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-silver-tin-can_23-2148785202.jpg",
-        },
         {
-          id: "5",
+          id: "5",          name: "Crystal Silver Studs",          price: "$45",          variant: "Silver Plated",          imageSrc: "http://img.b2bpic.net/free-photo/human-hand-holding-toy-bauble_23-2147964523.jpg"},
-          name: "Crystal Silver Studs",
-          price: "$45",
-          variant: "Silver Plated",
-          imageSrc: "http://img.b2bpic.net/free-photo/human-hand-holding-toy-bauble_23-2147964523.jpg",
-        },
         {
-          id: "6",
+          id: "6",          name: "Minimalist Hoop Ring",          price: "$70",          variant: "925 Silver",          imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-wedding-ring-wooden-surface_181624-60193.jpg"},
-          name: "Minimalist Hoop Ring",
-          price: "$70",
-          variant: "925 Silver",
-          imageSrc: "http://img.b2bpic.net/free-photo/selective-focus-shot-wedding-ring-wooden-surface_181624-60193.jpg",
-        },
       ]}
       title="New Arrivals"
       description="Exquisite silver jewellery pieces, meticulously selected for their shimmer and style."
@@ -171,34 +116,16 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "f1",
+          id: "f1",          label: "Quality",          title: "Premium 925 Silver",          items: [
-          label: "Quality",
+            "Genuine materials",            "High durability",            "Nickel-free"],
-          title: "Premium 925 Silver",
-          items: [
-            "Genuine materials",
-            "High durability",
-            "Nickel-free",
-          ],
         },
         {
-          id: "f2",
+          id: "f2",          label: "Design",          title: "Feminine Aesthetic",          items: [
-          label: "Design",
+            "Girly chic style",            "Trend-focused",            "Sophisticated"],
-          title: "Feminine Aesthetic",
-          items: [
-            "Girly chic style",
-            "Trend-focused",
-            "Sophisticated",
-          ],
         },
         {
-          id: "f3",
+          id: "f3",          label: "Care",          title: "Gift-Ready Packaging",          items: [
-          label: "Care",
+            "Beautiful pink box",            "Includes polishing cloth",            "Ready to gift"],
-          title: "Gift-Ready Packaging",
-          items: [
-            "Beautiful pink box",
-            "Includes polishing cloth",
-            "Ready to gift",
-          ],
         },
       ]}
       title="Why Choose SparkleBoutique?"
@@ -212,60 +139,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "Alice M.",          date: "Jan 2025",          title: "Love it!",          quote: "The most beautiful silver pieces I own.",          tag: "Silver",          avatarSrc: "http://img.b2bpic.net/free-photo/grateful-charming-blond-european-25s-woman-silver-party-dress-press-palms-heart-feel-thankful-appreciate-effort-cherish-romantic-gesture-receive-flattering-compliments-gifts-smiling-happily_1258-308442.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/jewelry-lifestyle-flat-layout-with-place-text-jewellery-background-mockup-banner-fashion-accessories_460848-12591.jpg?_wi=2",          imageAlt: "happy customer wearing jewellery"},
-          name: "Alice M.",
-          date: "Jan 2025",
-          title: "Love it!",
-          quote: "The most beautiful silver pieces I own.",
-          tag: "Silver",
-          avatarSrc: "http://img.b2bpic.net/free-photo/grateful-charming-blond-european-25s-woman-silver-party-dress-press-palms-heart-feel-thankful-appreciate-effort-cherish-romantic-gesture-receive-flattering-compliments-gifts-smiling-happily_1258-308442.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/jewelry-lifestyle-flat-layout-with-place-text-jewellery-background-mockup-banner-fashion-accessories_460848-12591.jpg?_wi=2",
-          imageAlt: "happy customer wearing jewellery",
-        },
         {
-          id: "2",
+          id: "2",          name: "Bella K.",          date: "Dec 2024",          title: "Stunning!",          quote: "Sparkles like no other. Simply amazing.",          tag: "Gift",          avatarSrc: "http://img.b2bpic.net/free-photo/charming-girl-stands-ballcony_8353-5669.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/flower-bouquet-fountain-pen-envelope-paperclip-macaroons-marble-textured-background_23-2147940342.jpg",          imageAlt: "happy customer wearing jewellery"},
-          name: "Bella K.",
-          date: "Dec 2024",
-          title: "Stunning!",
-          quote: "Sparkles like no other. Simply amazing.",
-          tag: "Gift",
-          avatarSrc: "http://img.b2bpic.net/free-photo/charming-girl-stands-ballcony_8353-5669.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/flower-bouquet-fountain-pen-envelope-paperclip-macaroons-marble-textured-background_23-2147940342.jpg",
-          imageAlt: "happy customer wearing jewellery",
-        },
         {
-          id: "3",
+          id: "3",          name: "Chloe S.",          date: "Dec 2024",          title: "So girly!",          quote: "Absolutely obsessed with these pink details.",          tag: "Style",          avatarSrc: "http://img.b2bpic.net/free-photo/glad-african-american-young-woman-rests-alone-coffee-shop-has-delighted-look-rests-after-work-laptop-computer-has-positive-expression_273609-3414.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-aesthetic-silver-earrings_23-2149846572.jpg?_wi=2",          imageAlt: "happy customer wearing jewellery"},
-          name: "Chloe S.",
-          date: "Dec 2024",
-          title: "So girly!",
-          quote: "Absolutely obsessed with these pink details.",
-          tag: "Style",
-          avatarSrc: "http://img.b2bpic.net/free-photo/glad-african-american-young-woman-rests-alone-coffee-shop-has-delighted-look-rests-after-work-laptop-computer-has-positive-expression_273609-3414.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-aesthetic-silver-earrings_23-2149846572.jpg?_wi=2",
-          imageAlt: "happy customer wearing jewellery",
-        },
         {
-          id: "4",
+          id: "4",          name: "Diana P.",          date: "Nov 2024",          title: "Excellent Quality",          quote: "Worth every penny. Stunning design.",          tag: "Premium",          avatarSrc: "http://img.b2bpic.net/free-photo/positive-young-hippy-woman-with-joyful-expression-points-aside-dressed-stylish-headband-denim-overalls_273609-17257.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-ferromagnetic-mirrored-metal-with-blurred-elements_23-2148253535.jpg?_wi=2",          imageAlt: "happy customer wearing jewellery"},
-          name: "Diana P.",
-          date: "Nov 2024",
-          title: "Excellent Quality",
-          quote: "Worth every penny. Stunning design.",
-          tag: "Premium",
-          avatarSrc: "http://img.b2bpic.net/free-photo/positive-young-hippy-woman-with-joyful-expression-points-aside-dressed-stylish-headband-denim-overalls_273609-17257.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-ferromagnetic-mirrored-metal-with-blurred-elements_23-2148253535.jpg?_wi=2",
-          imageAlt: "happy customer wearing jewellery",
-        },
         {
-          id: "5",
+          id: "5",          name: "Emma R.",          date: "Oct 2024",          title: "Perfect!",          quote: "The gift packaging is just as pretty as the ring.",          tag: "Packaging",          avatarSrc: "http://img.b2bpic.net/free-photo/attractive-excited-happy-charming-blond-girl-attend-luxurious-party-see-famous-person-feel-lucky_1258-228521.jpg",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-gold-plated-bracelet-ring-set-with-crystal-black-table_140725-12895.jpg?_wi=2",          imageAlt: "happy customer wearing jewellery"},
-          name: "Emma R.",
-          date: "Oct 2024",
-          title: "Perfect!",
-          quote: "The gift packaging is just as pretty as the ring.",
-          tag: "Packaging",
-          avatarSrc: "http://img.b2bpic.net/free-photo/attractive-excited-happy-charming-blond-girl-attend-luxurious-party-see-famous-person-feel-lucky_1258-228521.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-gold-plated-bracelet-ring-set-with-crystal-black-table_140725-12895.jpg?_wi=2",
-          imageAlt: "happy customer wearing jewellery",
-        },
       ]}
       title="Words From Our Stars"
       description="Join our community of happy jewellery lovers."
@@ -279,22 +161,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "m1",
+          id: "m1",          title: "Happy Clients",          value: "5,000+",          icon: Star,
-          title: "Happy Clients",
-          value: "5,000+",
-          icon: Star,
         },
         {
-          id: "m2",
+          id: "m2",          title: "Jewellery Sold",          value: "12,000+",          icon: Sparkles,
-          title: "Jewellery Sold",
-          value: "12,000+",
-          icon: Sparkles,
         },
         {
-          id: "m3",
+          id: "m3",          title: "Unique Designs",          value: "150+",          icon: Diamond,
-          title: "Unique Designs",
-          value: "150+",
-          icon: Diamond,
         },
       ]}
       title="Our Impact"
@@ -307,20 +180,11 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "q1",
+          id: "q1",          title: "Do you use real silver?",          content: "Yes, we focus on high-quality 925 sterling silver."},
-          title: "Do you use real silver?",
-          content: "Yes, we focus on high-quality 925 sterling silver.",
-        },
         {
-          id: "q2",
+          id: "q2",          title: "Can I return items?",          content: "Absolutely! We have a 30-day return policy."},
-          title: "Can I return items?",
-          content: "Absolutely! We have a 30-day return policy.",
-        },
         {
-          id: "q3",
+          id: "q3",          title: "Do you ship worldwide?",          content: "Yes, we ship globally."},
-          title: "Do you ship worldwide?",
-          content: "Yes, we ship globally.",
-        },
       ]}
       sideTitle="Frequently Asked"
       faqsAnimation="slide-up"
@@ -328,55 +192,49 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactSplit
+      <ContactCenter
+      tag="Contact Us"
+      title="Get in Touch"
+      description="We're here to help with any questions, inquiries, or style advice you need. Reach out and let's sparkle together."
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain",
+      buttonText="Send Message"
-      }}
+      onSubmit={(email) => console.log("Form submitted", email)}
-      tag="Join Us"
-      title="Stay Sparkly"
-      description="Subscribe to our newsletter for exclusive offers and new collection sneak peeks."
-      imageSrc="http://img.b2bpic.net/free-photo/view-elegant-luxurious-wedding-stationery-planner-resources_23-2150166943.jpg"
-      mediaAnimation="slide-up"
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterBaseCard
+      <FooterBase
       logoText="SparkleBoutique"
       columns={[
         {
-          title: "Shop",
+          title: "Shop",          items: [
-          items: [
             {
-              label: "Rings",
+              label: "Rings",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Necklaces",
+              label: "Necklaces",              href: "#"},
-              href: "#",
-            },
             {
-              label: "Earrings",
+              label: "Earrings",              href: "#"},
-              href: "#",
-            },
           ],
         },
         {
-          title: "Support",
+          title: "Support",          items: [
-          items: [
             {
-              label: "Returns",
+              label: "Returns",              href: "#"},
-              href: "#",
+            {
+              label: "Shipping",              href: "#"},
+            {
+              label: "Contact",              href: "#"},
+          ],
         },
         {
-              label: "Shipping",
+          title: "Connect",          items: [
-              href: "#",
-            },
             {
-              label: "Contact",
+              label: "Instagram",              href: "#"},
-              href: "#",
+            {
-            },
+              label: "Facebook",              href: "#"},
+            {
+              label: "TikTok",              href: "#"},
           ],
         },
       ]}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #fdf2f8;
+  --background: #fdf8f6;
   --card: #ffffff;
-  --foreground: #500724;
+  --foreground: #4a3728;
-  --primary-cta: #db2777;
+  --primary-cta: #c17f59;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #fce7f3;
+  --secondary-cta: #f3e5db;
   --secondary-cta-text: #831843;
-  --accent: #c084fc;
+  --accent: #dcbfae;
-  --background-accent: #fbcfe8;
+  --background-accent: #f7ece6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);