Update src/app/styles/variables.css

src/app/page.tsx

@@ -19,10 +19,10 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="mediumSmall"
         sizing="medium"
-        background="noise"
+        background="fluid"
-        cardStyle="subtle-shadow"
+        cardStyle="glass-elevated"
-        primaryButtonStyle="diagonal-gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="layered"
+        secondaryButtonStyle="glass"
         headingFontWeight="bold"
     >
       <ReactLenis root>
@@ -30,21 +30,13 @@ export default function LandingPage() {
       <NavbarStyleCentered
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "hero"},
-          id: "hero",
-        },
         {
-          name: "Products",
+          name: "Products",          id: "products"},
-          id: "products",
-        },
         {
-          name: "Trust",
+          name: "Trust",          id: "metrics"},
-          id: "metrics",
-        },
         {
-          name: "Reviews",
+          name: "Reviews",          id: "testimonials"},
-          id: "testimonials",
-        },
       ]}
       brandName="MBROT"
     />
@@ -56,82 +48,44 @@ export default function LandingPage() {
       description="Redefining the modern wardrobe for the conscious individual. Premium quality, timeless design."
       buttons={[
         {
-          text: "Shop Now",
+          text: "Shop Now",          href: "#products"},
-          href: "#products",
-        },
         {
-          text: "View Lookbook",
+          text: "View Lookbook",          href: "#"},
-          href: "#",
-        },
       ]}
       slides={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453348.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-portrait-teenager-woman_23-2149453348.jpg",          imageAlt: "Streetwear Model"},
-          imageAlt: "Streetwear Model",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-black-outfit_23-2151044540.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-posing-with-black-outfit_23-2151044540.jpg",          imageAlt: "Front view woman posing with black outfit"},
-          imageAlt: "Front view woman posing with black outfit",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/interested-african-man-chilling-stairs-inspired-guy-black-attire-sitting-steps-thinking-about-something_197531-22075.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/interested-african-man-chilling-stairs-inspired-guy-black-attire-sitting-steps-thinking-about-something_197531-22075.jpg",          imageAlt: "Interested african man chilling on stairs"},
-          imageAlt: "Interested african man chilling on stairs",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-couple-posing-black-white_23-2149735213.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-couple-posing-black-white_23-2149735213.jpg",          imageAlt: "Front view couple posing black and white"},
-          imageAlt: "Front view couple posing black and white",
-        },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512085.jpg",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-standing-universe-texture-projection_23-2149512085.jpg",          imageAlt: "Young woman standing in universe texture projection"},
-          imageAlt: "Young woman standing in universe texture projection",
-        },
       ]}
     />
   </div>
 
   <div id="products" data-section="products">
       <ProductCardThree
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
       gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       products={[
         {
-          id: "p1",
+          id: "p1",          name: "Heavyweight Hoodie",          price: "£120",          imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-holding-plant-with-dark-curtain_23-2149640628.jpg"},
-          name: "Heavyweight Hoodie",
-          price: "£120",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-s-hands-holding-plant-with-dark-curtain_23-2149640628.jpg",
-        },
         {
-          id: "p2",
+          id: "p2",          name: "Oversized Tee",          price: "£45",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-creating-vision-board_23-2150061907.jpg"},
-          name: "Oversized Tee",
-          price: "£45",
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-woman-creating-vision-board_23-2150061907.jpg",
-        },
         {
-          id: "p3",
+          id: "p3",          name: "Cargo Trousers",          price: "£145",          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-fashion-boutique-template_23-2150632564.jpg"},
-          name: "Cargo Trousers",
-          price: "£145",
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-fashion-boutique-template_23-2150632564.jpg",
-        },
         {
-          id: "p4",
+          id: "p4",          name: "Technical Jacket",          price: "£280",          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-earphones_23-2149429040.jpg"},
-          name: "Technical Jacket",
-          price: "£280",
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-with-earphones_23-2149429040.jpg",
-        },
         {
-          id: "p5",
+          id: "p5",          name: "Leather Chelsea Boots",          price: "£320",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-representing-virgo-zodiac-sign_23-2151006272.jpg"},
-          name: "Leather Chelsea Boots",
-          price: "£320",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-representing-virgo-zodiac-sign_23-2151006272.jpg",
-        },
         {
-          id: "p6",
+          id: "p6",          name: "Minimalist Cap",          price: "£35",          imageSrc: "http://img.b2bpic.net/free-vector/elegant-photographer-instagram-story-template-pack_742173-7697.jpg"},
-          name: "Minimalist Cap",
-          price: "£35",
-          imageSrc: "http://img.b2bpic.net/free-vector/elegant-photographer-instagram-story-template-pack_742173-7697.jpg",
-        },
       ]}
       title="Featured Collections"
       description="Discover our latest seasonal staples, designed for durability and refined style."
@@ -140,89 +94,49 @@ export default function LandingPage() {
 
   <div id="metrics" data-section="metrics">
       <MetricCardFourteen
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Our Standards"
       tag="Quality Assured"
       metrics={[
         {
-          id: "m1",
+          id: "m1",          value: "100%",          description: "Ethically Sourced Fabric"},
-          value: "100%",
-          description: "Ethically Sourced Fabric",
-        },
         {
-          id: "m2",
+          id: "m2",          value: "24h",          description: "Priority Dispatch UK"},
-          value: "24h",
-          description: "Priority Dispatch UK",
-        },
         {
-          id: "m3",
+          id: "m3",          value: "12mo",          description: "Extended Product Guarantee"},
-          value: "12mo",
-          description: "Extended Product Guarantee",
-        },
       ]}
     />
   </div>
 
   <div id="testimonials" data-section="testimonials">
       <TestimonialCardSixteen
-      animationType="slide-up"
+      animationType="blur-reveal"
       textboxLayout="default"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          name: "Alex Rivers",          role: "Creative Lead",          company: "Studio X",          rating: 5,
-          name: "Alex Rivers",
+          imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-young-girl-business-clothes-posing-light-background-studio-concept-stylish-clothes-sophistication_78826-3394.jpg"},
-          role: "Creative Lead",
-          company: "Studio X",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/attractive-stylish-young-girl-business-clothes-posing-light-background-studio-concept-stylish-clothes-sophistication_78826-3394.jpg",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Sarah Jenkins",          role: "Director",          company: "Brand Co",          rating: 5,
-          name: "Sarah Jenkins",
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting-chair_23-2149213192.jpg"},
-          role: "Director",
-          company: "Brand Co",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-sitting-chair_23-2149213192.jpg",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "Mark Owen",          role: "Freelancer",          company: "Self",          rating: 5,
-          name: "Mark Owen",
+          imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-white-shirt_158595-1014.jpg"},
-          role: "Freelancer",
-          company: "Self",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/fashion-photo-young-magnificent-woman-white-shirt_158595-1014.jpg",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "Elena Voss",          role: "Designer",          company: "Agency Ltd",          rating: 5,
-          name: "Elena Voss",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg"},
-          role: "Designer",
-          company: "Agency Ltd",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-stylish-woman-posing-fashionable-outfit_23-2149021812.jpg",
-        },
         {
-          id: "t5",
+          id: "t5",          name: "Tom Baker",          role: "Architect",          company: "Firm One",          rating: 5,
-          name: "Tom Baker",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-sitting-couch_23-2148415817.jpg"},
-          role: "Architect",
-          company: "Firm One",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-sitting-couch_23-2148415817.jpg",
-        },
       ]}
       kpiItems={[
         {
-          value: "4.9/5",
+          value: "4.9/5",          label: "Customer Rating"},
-          label: "Customer Rating",
-        },
         {
-          value: "10k+",
+          value: "10k+",          label: "Happy Clients"},
-          label: "Happy Clients",
-        },
         {
-          value: "Global",
+          value: "Global",          label: "Shipping"},
-          label: "Shipping",
-        },
       ]}
       title="Community Voices"
       description="See why our customers trust the brand."
@@ -231,18 +145,15 @@ export default function LandingPage() {
 
   <div id="contact" data-section="contact">
       <ContactCTA
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       background={{
-        variant: "plain",
+        variant: "sparkles-gradient"}}
-      }}
       tag="Support"
       title="Need Assistance?"
       description="Our team is here to help with sizing, shipping, or returns."
       buttons={[
         {
-          text: "Get in Touch",
+          text: "Get in Touch",          href: "mailto:hello@mbrot.com"},
-          href: "mailto:hello@mbrot.com",
-        },
       ]}
     />
   </div>
@@ -254,14 +165,10 @@ export default function LandingPage() {
       socialLinks={[
         {
           icon: Instagram,
-          href: "#",
+          href: "#",          ariaLabel: "Instagram"},
-          ariaLabel: "Instagram",
-        },
         {
           icon: Twitter,
-          href: "#",
+          href: "#",          ariaLabel: "Twitter"},
-          ariaLabel: "Twitter",
-        },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0A0A0A;
+  --background: #050505;
-  --card: #161616;
+  --card: #101010;
-  --foreground: #FFFFFF;
+  --foreground: #f0f0f0;
-  --primary-cta: #FF8C42;
+  --primary-cta: #ffffff;
   --primary-cta-text: #0A0A0A;
-  --secondary-cta: #0A0A0A;
+  --secondary-cta: #1c1c1c;
   --secondary-cta-text: #FFFFFF;
-  --accent: #FF8C42;
+  --accent: #333333;
-  --background-accent: #1A1A1A;
+  --background-accent: #1a1a1a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);