Update src/app/styles/variables.css

src/app/page.tsx

@@ -19,7 +19,7 @@ export default function LandingPage() {
         borderRadius="rounded"
         contentWidth="medium"
         sizing="largeSmallSizeMediumTitles"
-        background="grid"
+        background="fluid"
         cardStyle="soft-shadow"
         primaryButtonStyle="shadow"
         secondaryButtonStyle="solid"
@@ -30,21 +30,13 @@ export default function LandingPage() {
       <NavbarLayoutFloatingOverlay
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "#hero"},
-          id: "#hero",
-        },
         {
-          name: "Shop",
+          name: "Shop",          id: "#products"},
-          id: "#products",
-        },
         {
-          name: "Benefits",
+          name: "Benefits",          id: "#features"},
-          id: "#features",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "#contact"},
-          id: "#contact",
-        },
       ]}
       brandName="TrendStyle"
     />
@@ -53,71 +45,44 @@ export default function LandingPage() {
   <div id="hero" data-section="hero">
       <HeroSplitKpi
       background={{
-        variant: "gradient-bars",
+        variant: "rotated-rays-animated-grid"}}
-      }}
       title="Style That Speaks Volume"
       description="Discover curated collections of watches, shoes, and apparel at unbeatable prices. Your journey to premium style starts here."
       kpis={[
         {
-          value: "10k+",
+          value: "10k+",          label: "Happy Customers"},
-          label: "Happy Customers",
-        },
         {
-          value: "200+",
+          value: "200+",          label: "Styles Weekly"},
-          label: "Styles Weekly",
-        },
         {
-          value: "4.9",
+          value: "4.9",          label: "Rating Score"},
-          label: "Rating Score",
-        },
       ]}
       enableKpiAnimation={true}
       imageSrc="http://img.b2bpic.net/free-photo/still-life-spring-wardrobe-switch_23-2150478953.jpg"
       mediaAnimation="slide-up"
       avatars={[
         {
-          src: "http://img.b2bpic.net/free-photo/clothes-bed-fast-fashion-concept-high-angle_23-2149726121.jpg",
+          src: "http://img.b2bpic.net/free-photo/clothes-bed-fast-fashion-concept-high-angle_23-2149726121.jpg",          alt: "Customer 1"},
-          alt: "Customer 1",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151487073.jpg",
+          src: "http://img.b2bpic.net/free-photo/digital-art-style-fashion-design-sketch-paper_23-2151487073.jpg",          alt: "Customer 2"},
-          alt: "Customer 2",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/lifestyle-leisure-recreation-activity-icon_53876-21314.jpg",
+          src: "http://img.b2bpic.net/free-photo/lifestyle-leisure-recreation-activity-icon_53876-21314.jpg",          alt: "Customer 3"},
-          alt: "Customer 3",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/top-view-tablet-surrounded-by-accesories_23-2148135550.jpg",
+          src: "http://img.b2bpic.net/free-photo/top-view-tablet-surrounded-by-accesories_23-2148135550.jpg",          alt: "Customer 4"},
-          alt: "Customer 4",
-        },
         {
-          src: "http://img.b2bpic.net/free-photo/man-standing-front-motorbike-using-smartphone_23-2147860935.jpg",
+          src: "http://img.b2bpic.net/free-photo/man-standing-front-motorbike-using-smartphone_23-2147860935.jpg",          alt: "Customer 5"},
-          alt: "Customer 5",
-        },
       ]}
       avatarText="Join 10,000+ satisfied trendsetters"
       marqueeItems={[
         {
-          type: "text",
+          type: "text",          text: "Premium Quality"},
-          text: "Premium Quality",
-        },
         {
-          type: "text",
+          type: "text",          text: "Latest Trends"},
-          text: "Latest Trends",
-        },
         {
-          type: "text",
+          type: "text",          text: "Secure Checkout"},
-          text: "Secure Checkout",
-        },
         {
-          type: "text",
+          type: "text",          text: "Fast Shipping"},
-          text: "Fast Shipping",
-        },
         {
-          type: "text",
+          type: "text",          text: "Easy Returns"},
-          text: "Easy Returns",
-        },
       ]}
     />
   </div>
@@ -130,41 +95,17 @@ export default function LandingPage() {
       useInvertedBackground={false}
       products={[
         {
-          id: "1",
+          id: "1",          name: "Classic Minimal Watch",          price: "$129",          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-watch-his-hand_158595-3821.jpg"},
-          name: "Classic Minimal Watch",
-          price: "$129",
-          imageSrc: "http://img.b2bpic.net/free-photo/man-looking-watch-his-hand_158595-3821.jpg",
-        },
         {
-          id: "2",
+          id: "2",          name: "Urban Leather Sneakers",          price: "$89",          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-female-red-dress-talks-mobile-telephone-outdoors_181624-52966.jpg"},
-          name: "Urban Leather Sneakers",
-          price: "$89",
-          imageSrc: "http://img.b2bpic.net/free-photo/vertical-shot-young-female-red-dress-talks-mobile-telephone-outdoors_181624-52966.jpg",
-        },
         {
-          id: "3",
+          id: "3",          name: "Premium Cotton Shirt",          price: "$45",          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-walking-church_23-2150755567.jpg"},
-          name: "Premium Cotton Shirt",
-          price: "$45",
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-man-walking-church_23-2150755567.jpg",
-        },
         {
-          id: "4",
+          id: "4",          name: "Pro Training Shoes",          price: "$110",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-stylish-footwear_23-2148320247.jpg"},
-          name: "Pro Training Shoes",
-          price: "$110",
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-stylish-footwear_23-2148320247.jpg",
-        },
         {
-          id: "5",
+          id: "5",          name: "Luxury Leather Wallet",          price: "$65",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-storage-devices-bed_23-2149319354.jpg"},
-          name: "Luxury Leather Wallet",
-          price: "$65",
-          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-storage-devices-bed_23-2149319354.jpg",
-        },
         {
-          id: "6",
+          id: "6",          name: "Summer Casual Tee",          price: "$35",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-attractive-smiling-modern-stylish-man-casual-cloth-hat-sunglasses-standing-near-wall_158538-14088.jpg"},
-          name: "Summer Casual Tee",
-          price: "$35",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-attractive-smiling-modern-stylish-man-casual-cloth-hat-sunglasses-standing-near-wall_158538-14088.jpg",
-        },
       ]}
       title="Shop Our Best Sellers"
       description="Handpicked accessories and apparel curated for the modern trendsetter."
@@ -179,20 +120,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       features={[
         {
-          title: "Rapid Delivery",
+          title: "Rapid Delivery",          description: "Get your favorite styles delivered to your doorstep in record time.",          imageSrc: "http://img.b2bpic.net/free-photo/delivery-boxes-watches-with-santa-hat-optimization-delivery-logistics-transport-company_493343-29831.jpg"},
-          description: "Get your favorite styles delivered to your doorstep in record time.",
-          imageSrc: "http://img.b2bpic.net/free-photo/delivery-boxes-watches-with-santa-hat-optimization-delivery-logistics-transport-company_493343-29831.jpg",
-        },
         {
-          title: "Secure Payments",
+          title: "Secure Payments",          description: "Shop with peace of mind using our encrypted payment gateways.",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-lock-with-credit-cards-password_23-2148578099.jpg"},
-          description: "Shop with peace of mind using our encrypted payment gateways.",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-lock-with-credit-cards-password_23-2148578099.jpg",
-        },
         {
-          title: "Quality Assured",
+          title: "Quality Assured",          description: "Every item undergoes rigorous quality checks before it leaves our facility.",          imageSrc: "http://img.b2bpic.net/free-photo/business-man-showing-ok-sign_23-2148479592.jpg"},
-          description: "Every item undergoes rigorous quality checks before it leaves our facility.",
-          imageSrc: "http://img.b2bpic.net/free-photo/business-man-showing-ok-sign_23-2148479592.jpg",
-        },
       ]}
       title="Why TrendStyle?"
       description="We blend quality, speed, and trust to deliver a superior shopping experience."
@@ -206,40 +138,15 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "1",
+          id: "1",          name: "Sarah Miller",          role: "Creative Lead",          testimonial: "The quality of these products is simply unmatched for the price point.",          imageSrc: "http://img.b2bpic.net/free-photo/woman-films-vlog-praising-bio-local-shop_482257-81629.jpg"},
-          name: "Sarah Miller",
-          role: "Creative Lead",
-          testimonial: "The quality of these products is simply unmatched for the price point.",
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-films-vlog-praising-bio-local-shop_482257-81629.jpg",
-        },
         {
-          id: "2",
+          id: "2",          name: "David Chan",          role: "Fashion Blogger",          testimonial: "Finally, a store that stays on top of the latest trends perfectly.",          imageSrc: "http://img.b2bpic.net/free-photo/aged-woman-red-wear-with-upped-hands_23-2148036513.jpg"},
-          name: "David Chan",
-          role: "Fashion Blogger",
-          testimonial: "Finally, a store that stays on top of the latest trends perfectly.",
-          imageSrc: "http://img.b2bpic.net/free-photo/aged-woman-red-wear-with-upped-hands_23-2148036513.jpg",
-        },
         {
-          id: "3",
+          id: "3",          name: "Emily Russo",          role: "Designer",          testimonial: "Super fast shipping and everything I bought fit perfectly. Highly recommend!",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-carnival-mask_23-2148044172.jpg"},
-          name: "Emily Russo",
-          role: "Designer",
-          testimonial: "Super fast shipping and everything I bought fit perfectly. Highly recommend!",
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-woman-with-carnival-mask_23-2148044172.jpg",
-        },
         {
-          id: "4",
+          id: "4",          name: "Mark Wilson",          role: "Marketing Pro",          testimonial: "The buying experience was seamless and the wallet I bought looks incredible.",          imageSrc: "http://img.b2bpic.net/free-photo/surprised-girl-with-laptop-girl-laptop-technology-concept_169016-64954.jpg"},
-          name: "Mark Wilson",
-          role: "Marketing Pro",
-          testimonial: "The buying experience was seamless and the wallet I bought looks incredible.",
-          imageSrc: "http://img.b2bpic.net/free-photo/surprised-girl-with-laptop-girl-laptop-technology-concept_169016-64954.jpg",
-        },
         {
-          id: "5",
+          id: "5",          name: "Jenna Foster",          role: "Architect",          testimonial: "TrendStyle is my new go-to for quality apparel and daily essentials.",          imageSrc: "http://img.b2bpic.net/free-photo/rebel-model-posing-studio_23-2148376748.jpg"},
-          name: "Jenna Foster",
-          role: "Architect",
-          testimonial: "TrendStyle is my new go-to for quality apparel and daily essentials.",
-          imageSrc: "http://img.b2bpic.net/free-photo/rebel-model-posing-studio_23-2148376748.jpg",
-        },
       ]}
       title="Loved by Shoppers"
       description="Hear what our style-forward community says about their experience."
@@ -253,22 +160,14 @@ export default function LandingPage() {
       description="Questions about our products or your orders? We're here to help."
       inputs={[
         {
-          name: "name",
+          name: "name",          type: "text",          placeholder: "Your Name",          required: true,
-          type: "text",
-          placeholder: "Your Name",
-          required: true,
         },
         {
-          name: "email",
+          name: "email",          type: "email",          placeholder: "Email Address",          required: true,
-          type: "email",
-          placeholder: "Email Address",
-          required: true,
         },
       ]}
       textarea={{
-        name: "message",
+        name: "message",        placeholder: "How can we assist you?",        rows: 4,
-        placeholder: "How can we assist you?",
-        rows: 4,
         required: true,
       }}
       imageSrc="http://img.b2bpic.net/free-photo/copy-space-family-separation-paper_23-2148536052.jpg"
@@ -282,23 +181,17 @@ export default function LandingPage() {
       socialLinks={[
         {
           icon: Instagram,
-          href: "https://instagram.com",
+          href: "https://instagram.com",          ariaLabel: "Instagram"},
-          ariaLabel: "Instagram",
-        },
         {
           icon: Twitter,
-          href: "https://twitter.com",
+          href: "https://twitter.com",          ariaLabel: "Twitter"},
-          ariaLabel: "Twitter",
-        },
         {
           icon: Facebook,
-          href: "https://facebook.com",
+          href: "https://facebook.com",          ariaLabel: "Facebook"},
-          ariaLabel: "Facebook",
-        },
       ]}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #0a0a0a;
-  --card: #f9f9f9;
+  --card: #1a1a1a;
-  --foreground: #000612e6;
+  --foreground: #ffffff;
-  --primary-cta: #106EFB;
+  --primary-cta: #1f7cff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #010101;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --accent: #1f7cff;
-  --background-accent: #106EFB;
+  --background-accent: #f96b2f;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);