Update src/app/styles/variables.css

Merge version_1 into main

src/app/page.tsx

@@ -28,14 +28,10 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleFullscreen
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",          id: "hero"},
+        { name: "About", id: "about" },
-        {
+        { name: "Shop", id: "products" },
-          name: "About",          id: "about"},
+        { name: "Contact", id: "contact" },
-        {
-          name: "Shop",          id: "products"},
-        {
-          name: "Contact",          id: "contact"},
       ]}
       brandName="loops×knots"
     />
@@ -43,50 +39,33 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitKpi
-      background={{
+      background={{ variant: "sparkles-gradient" }}
-        variant: "sparkles-gradient"}}
       title="Crafting the Future of Crochet"
       description="Where tradition meets digital innovation. loops×knots brings you artisan-crafted, futuristic fiber art for the modern era."
       kpis={[
-        {
+        { value: "500+", label: "Projects Completed" },
-          value: "500+",          label: "Projects Completed"},
+        { value: "100%", label: "Handmade Quality" },
-        {
+        { value: "1.2k", label: "Happy Knots" },
-          value: "100%",          label: "Handmade Quality"},
-        {
-          value: "1.2k",          label: "Happy Knots"},
       ]}
       enableKpiAnimation={true}
-      buttons={[
+      buttons={[{ text: "Explore Shop", href: "#products" }]}
-        {
-          text: "Explore Shop",          href: "#products"},
-      ]}
       imageSrc="http://img.b2bpic.net/free-photo/close-up-cozy-texture-clothing_23-2149432477.jpg"
       imageAlt="Futuristic crochet art"
       mediaAnimation="slide-up"
       avatars={[
-        {
+        { src: "http://img.b2bpic.net/free-photo/people-building-their-own-dried-arrangement_23-2149697712.jpg", alt: "Customer 1" },
-          src: "http://img.b2bpic.net/free-photo/people-building-their-own-dried-arrangement_23-2149697712.jpg",          alt: "Customer 1"},
+        { src: "http://img.b2bpic.net/free-photo/mothers-day-concept-with-breakfast_23-2147791444.jpg", alt: "Customer 2" },
-        {
+        { src: "http://img.b2bpic.net/free-photo/front-view-blonde-woman-painting_23-2148483101.jpg", alt: "Customer 3" },
-          src: "http://img.b2bpic.net/free-photo/mothers-day-concept-with-breakfast_23-2147791444.jpg",          alt: "Customer 2"},
+        { src: "http://img.b2bpic.net/free-photo/beautiful-handmade-dreamcatcher_23-2149181328.jpg", alt: "Customer 4" },
-        {
+        { src: "http://img.b2bpic.net/free-photo/full-shot-woman-knitting-couch_23-2149311017.jpg", alt: "Customer 5" },
-          src: "http://img.b2bpic.net/free-photo/front-view-blonde-woman-painting_23-2148483101.jpg",          alt: "Customer 3"},
-        {
-          src: "http://img.b2bpic.net/free-photo/beautiful-handmade-dreamcatcher_23-2149181328.jpg",          alt: "Customer 4"},
-        {
-          src: "http://img.b2bpic.net/free-photo/full-shot-woman-knitting-couch_23-2149311017.jpg",          alt: "Customer 5"},
       ]}
       avatarText="Join our community of fiber artists"
       marqueeItems={[
-        {
+        { type: "text", text: "Future-Proof Design" },
-          type: "text",          text: "Future-Proof Design"},
+        { type: "text", text: "Sustainable Materials" },
-        {
+        { type: "text", text: "Artisan Crafted" },
-          type: "text",          text: "Sustainable Materials"},
+        { type: "text", text: "Global Shipping" },
-        {
+        { type: "text", text: "Modern Aesthetic" },
-          type: "text",          text: "Artisan Crafted"},
-        {
-          type: "text",          text: "Global Shipping"},
-        {
-          type: "text",          text: "Modern Aesthetic"},
       ]}
     />
   </div>
@@ -108,24 +87,12 @@ export default function LandingPage() {
       gridVariant="uniform-all-items-equal"
       useInvertedBackground={false}
       products={[
-        {
+        { id: "1", brand: "loops×knots", name: "Cyber-Knit Scarf", price: "$85", rating: 5, reviewCount: "12", imageSrc: "http://img.b2bpic.net/free-photo/cozy-warm-knitted-sweaters-pastel-colors-close-up_169016-11429.jpg" },
-          id: "1",          brand: "loops×knots",          name: "Cyber-Knit Scarf",          price: "$85",          rating: 5,
+        { id: "2", brand: "loops×knots", name: "Neon Weave Pot", price: "$45", rating: 5, reviewCount: "8", imageSrc: "http://img.b2bpic.net/free-photo/cozy-home-composition-with-threads-knitting_169016-28361.jpg" },
-          reviewCount: "12",          imageSrc: "http://img.b2bpic.net/free-photo/cozy-warm-knitted-sweaters-pastel-colors-close-up_169016-11429.jpg"},
+        { id: "3", brand: "loops×knots", name: "Digital Fringe Bag", price: "$120", rating: 4, reviewCount: "24", imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-empty-notebook-pencil-woman-s-accessories-black-concept-top-view-isolated-white-background_1428-524.jpg" },
-        {
+        { id: "4", brand: "loops×knots", name: "Glitch Texture Throw", price: "$250", rating: 5, reviewCount: "5", imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-knitted-element-yarn-heart-made-threads_169016-52051.jpg" },
-          id: "2",          brand: "loops×knots",          name: "Neon Weave Pot",          price: "$45",          rating: 5,
+        { id: "5", brand: "loops×knots", name: "Tech-Thread Headband", price: "$30", rating: 4, reviewCount: "19", imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-red-haired-woman-with-headphones_273609-14527.jpg" },
-          reviewCount: "8",          imageSrc: "http://img.b2bpic.net/free-photo/cozy-home-composition-with-threads-knitting_169016-28361.jpg"},
+        { id: "6", brand: "loops×knots", name: "Data-Flow Wall Art", price: "$180", rating: 5, reviewCount: "10", imageSrc: "http://img.b2bpic.net/free-photo/knitting-wool-thread-close-up_23-2148923296.jpg" },
-        {
-          id: "3",          brand: "loops×knots",          name: "Digital Fringe Bag",          price: "$120",          rating: 4,
-          reviewCount: "24",          imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-empty-notebook-pencil-woman-s-accessories-black-concept-top-view-isolated-white-background_1428-524.jpg"},
-        {
-          id: "4",          brand: "loops×knots",          name: "Glitch Texture Throw",          price: "$250",          rating: 5,
-          reviewCount: "5",          imageSrc: "http://img.b2bpic.net/free-photo/cozy-composition-with-knitted-element-yarn-heart-made-threads_169016-52051.jpg"},
-        {
-          id: "5",          brand: "loops×knots",          name: "Tech-Thread Headband",          price: "$30",          rating: 4,
-          reviewCount: "19",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-red-haired-woman-with-headphones_273609-14527.jpg"},
-        {
-          id: "6",          brand: "loops×knots",          name: "Data-Flow Wall Art",          price: "$180",          rating: 5,
-          reviewCount: "10",          imageSrc: "http://img.b2bpic.net/free-photo/knitting-wool-thread-close-up_23-2148923296.jpg"},
       ]}
       title="Curated Collections"
       description="Shop our limited-edition fiber creations."
@@ -139,21 +106,11 @@ export default function LandingPage() {
       useInvertedBackground={true}
       animationType="slide-up"
       testimonials={[
-        {
+        { id: "1", name: "Elena R.", role: "Collector", company: "NYC", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/people-building-their-own-dried-arrangement_23-2149697712.jpg" },
-          id: "1",          name: "Elena R.",          role: "Collector",          company: "NYC",          rating: 5,
+        { id: "2", name: "Marcus T.", role: "Designer", company: "London", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/mothers-day-concept-with-breakfast_23-2147791444.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/people-building-their-own-dried-arrangement_23-2149697712.jpg"},
+        { id: "3", name: "Sarah W.", role: "Artist", company: "Berlin", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/front-view-blonde-woman-painting_23-2148483101.jpg" },
-        {
+        { id: "4", name: "Jia K.", role: "Architect", company: "Tokyo", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-handmade-dreamcatcher_23-2149181328.jpg" },
-          id: "2",          name: "Marcus T.",          role: "Designer",          company: "London",          rating: 5,
+        { id: "5", name: "Liam P.", role: "Developer", company: "SF", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-knitting-couch_23-2149311017.jpg" },
-          imageSrc: "http://img.b2bpic.net/free-photo/mothers-day-concept-with-breakfast_23-2147791444.jpg"},
-        {
-          id: "3",          name: "Sarah W.",          role: "Artist",          company: "Berlin",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/front-view-blonde-woman-painting_23-2148483101.jpg"},
-        {
-          id: "4",          name: "Jia K.",          role: "Architect",          company: "Tokyo",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-handmade-dreamcatcher_23-2149181328.jpg"},
-        {
-          id: "5",          name: "Liam P.",          role: "Developer",          company: "SF",          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-knitting-couch_23-2149311017.jpg"},
       ]}
       title="Loved by the Community"
       description="Hear what our amazing knitters and collectors have to say."
@@ -163,28 +120,22 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactCTA
       useInvertedBackground={false}
-      background={{
+      background={{ variant: "plain" }}
-        variant: "plain"}}
       tag="Let's connect"
       title="Want a custom creation?"
       description="Drop us a message and let's bring your crochet dream to life."
-      buttons={[
+      buttons={[{ text: "Email Us", href: "mailto:hello@loopsknots.com" }]}
-        {
-          text: "Email Us",          href: "mailto:hello@loopsknots.com"},
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="loops×knots"
-      leftLink={{
+      leftLink={{ text: "Instagram", href: "https://instagram.com" }}
-        text: "Instagram",        href: "https://instagram.com"}}
+      rightLink={{ text: "Privacy Policy", href: "#" }}
-      rightLink={{
-        text: "Privacy Policy",        href: "#"}}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0a0a0a;
+  --background: #fbfbf2;
-  --card: #1a1a1a;
+  --card: #f0ede5;
-  --foreground: #f8f5ffe6;
+  --foreground: #4a4440;
-  --primary-cta: #c89bff;
+  --primary-cta: #a8b59f;
   --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #dcdbd3;
   --secondary-cta-text: #f8f5ffe6;
-  --accent: #737373;
+  --accent: #e6d7d3;
-  --background-accent: #737373;
+  --background-accent: #f2e9e4;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);