Update src/app/products/page.tsx

Merge version_3 into main

src/app/about/page.tsx

@@ -26,31 +26,19 @@ export default function LandingPage() {
       <NavbarLayoutFloatingInline
       navItems={[
         {
-          name: "Home",
-          id: "/",
-        },
+          name: "Home",          id: "/"},
         {
-          name: "Products",
-          id: "/products",
-        },
+          name: "Products",          id: "/products"},
         {
-          name: "About",
-          id: "/about",
-        },
+          name: "About",          id: "/about"},
         {
-          name: "Contact",
-          id: "/contact",
-        },
+          name: "Contact",          id: "/contact"},
         {
-          name: "Shop",
-          id: "/shop",
-        },
+          name: "Shop",          id: "/shop"},
       ]}
       brandName="FLAXR"
       button={{
-        text: "Shop Now",
-        href: "/shop",
-      }}
+        text: "Shop Now",        href: "/shop"}}
       animateOnLoad={true}
     />
   </div>
@@ -61,22 +49,13 @@ export default function LandingPage() {
       useInvertedBackground={false}
       faqs={[
         {
-          id: "vision",
-          title: "Our Vision: Redefining Interaction",
-          content: "FLAXR envisions a future where human-computer interaction is seamless, intuitive, and deeply personal. We craft tools that don't just perform tasks but enhance your capabilities and elevate your experience.",
-        },
+          id: "vision",          title: "Our Vision: Redefining Interaction",          content: "FLAXR envisions a future where human-computer interaction is seamless, intuitive, and deeply personal. We craft tools that don't just perform tasks but enhance your capabilities and elevate your experience."},
         {
-          id: "craftsmanship",
-          title: "The Art of Craftsmanship",
-          content: "Every FLAXR keyboard is a masterpiece of engineering, meticulously designed and built from the finest materials. Our commitment to craftsmanship ensures unparalleled quality, durability, and a premium feel in every touch.",
-        },
+          id: "craftsmanship",          title: "The Art of Craftsmanship",          content: "Every FLAXR keyboard is a masterpiece of engineering, meticulously designed and built from the finest materials. Our commitment to craftsmanship ensures unparalleled quality, durability, and a premium feel in every touch."},
         {
-          id: "innovation",
-          title: "Driven by Innovation",
-          content: "Innovation is the heartbeat of FLAXR. We continuously push the boundaries of mechanical keyboard technology, from hot-swappable switches to advanced connectivity, ensuring you're always ahead of the curve.",
-        },
+          id: "innovation",          title: "Driven by Innovation",          content: "Innovation is the heartbeat of FLAXR. We continuously push the boundaries of mechanical keyboard technology, from hot-swappable switches to advanced connectivity, ensuring you're always ahead of the curve."},
       ]}
-      imageSrc="http://img.b2bpic.net/free-photo/businessman-businesswomen-working-with-laptops_74855-2591.jpg"
+      imageSrc="https://dummyimage.com/800x600/000/fff&text=FLAXR_team_designing_keyboard"
       imageAlt="FLAXR team collaborating on keyboard design"
       mediaAnimation="slide-up"
       title="Our Commitment to Excellence"
@@ -90,15 +69,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       names={[
-        "IGN",
-        "PC Gamer",
-        "TechRadar",
-        "Gamespot",
-        "CNET",
-        "Digital Trends",
-        "Tom's Guide",
-        "Esports Insider",
-      ]}
+        "IGN",        "PC Gamer",        "TechRadar",        "Gamespot",        "CNET",        "Digital Trends",        "Tom's Guide",        "Esports Insider"]}
       title="Trusted by Industry Leaders"
       description="FLAXR is the keyboard of choice for top tech reviewers, professional gamers, and leading eSports organizations worldwide."
       showCard={false}
@@ -109,67 +80,41 @@ export default function LandingPage() {
       <FooterBase
       columns={[
         {
-          title: "Products",
-          items: [
+          title: "Products",          items: [
             {
-              label: "FLAXR ONE 60",
-              href: "/products#one-60",
-            },
+              label: "FLAXR ONE 60",              href: "/products#one-60"},
             {
-              label: "Accessories",
-              href: "/products#accessories",
-            },
+              label: "Accessories",              href: "/products#accessories"},
             {
-              label: "Shop All",
-              href: "/shop",
-            },
+              label: "Shop All",              href: "/shop"},
           ],
         },
         {
-          title: "Company",
-          items: [
+          title: "Company",          items: [
             {
-              label: "About Us",
-              href: "/about",
-            },
+              label: "About Us",              href: "/about"},
             {
-              label: "Blog",
-              href: "/blog",
-            },
+              label: "Blog",              href: "/blog"},
             {
-              label: "Careers",
-              href: "#",
-            },
+              label: "Careers",              href: "#"},
           ],
         },
         {
-          title: "Support",
-          items: [
+          title: "Support",          items: [
             {
-              label: "Contact Us",
-              href: "/contact",
-            },
+              label: "Contact Us",              href: "/contact"},
             {
-              label: "FAQ",
-              href: "/faq",
-            },
+              label: "FAQ",              href: "/faq"},
             {
-              label: "Warranty",
-              href: "#",
-            },
+              label: "Warranty",              href: "#"},
           ],
         },
         {
-          title: "Legal",
-          items: [
+          title: "Legal",          items: [
             {
-              label: "Privacy Policy",
-              href: "#",
-            },
+              label: "Privacy Policy",              href: "#"},
             {
-              label: "Terms of Service",
-              href: "#",
-            },
+              label: "Terms of Service",              href: "#"},
           ],
         },
       ]}

src/app/page.tsx

@@ -8,7 +8,7 @@ import FooterBase from '@/components/sections/footer/FooterBase';
 import HeroSplitDualMedia from '@/components/sections/hero/HeroSplitDualMedia';
 import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import { Cog, Gauge, ShieldCheck, Type } from "lucide-react";
 
 export default function LandingPage() {
@@ -16,12 +16,12 @@ export default function LandingPage() {
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
         defaultTextAnimation="entrance-slide"
-        borderRadius="pill"
+        borderRadius="rounded"
         contentWidth="medium"
         sizing="largeSmall"
         background="grid"
         cardStyle="subtle-shadow"
-        primaryButtonStyle="double-inset"
+        primaryButtonStyle="gradient"
         secondaryButtonStyle="solid"
         headingFontWeight="semibold"
     >
@@ -32,17 +32,17 @@ export default function LandingPage() {
         {
           name: "Home",          id: "/"},
         {
-          name: "Products",          id: "/products"},
+          name: "Products",          id: "#product-showcase"},
         {
-          name: "About",          id: "/about"},
+          name: "About",          id: "#brand-story"},
         {
-          name: "Contact",          id: "/contact"},
+          name: "Contact",          id: "#newsletter"},
         {
-          name: "Shop",          id: "/shop"},
+          name: "Shop",          id: "#product-showcase"},
       ]}
       brandName="FLAXR"
       button={{
-        text: "Shop Now",        href: "/shop"}}
+        text: "Shop Now",        href: "#product-showcase"}}
       animateOnLoad={true}
     />
   </div>
@@ -56,16 +56,16 @@ export default function LandingPage() {
       tag="FLAXR"
       buttons={[
         {
-          text: "Explore Products",          href: "/products"},
+          text: "Explore Products",          href: "#product-showcase"},
         {
-          text: "Shop Now",          href: "/shop"},
+          text: "Shop Now",          href: "#product-showcase"},
       ]}
       mediaItems={[
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/piano-keys-synthesizer-black-background-flat-lay_169016-20983.jpg",          imageAlt: "FLAXR ONE 60 keyboard, left view"
+          imageSrc: "https://dummyimage.com/600x400/000/fff&text=FLAXR_keyboard_minimalist_desk",          imageAlt: "FLAXR minimalist keyboard on a modern desk"
         },
         {
-          imageSrc: "http://img.b2bpic.net/free-photo/business-manager-writing-diagrams-data-computer-creating-official-marketing-report-e-commerce-development-young-employee-planning-financial-project-with-statistics-night-close-up_482257-65001.jpg",          imageAlt: "FLAXR ONE 60 keyboard, right view"
+          imageSrc: "https://dummyimage.com/600x400/000/fff&text=FLAXR_keyboard_gamer_setup",          imageAlt: "FLAXR gaming keyboard in a competitive setup"
         }
       ]}
       mediaAnimation="slide-up"
@@ -100,37 +100,31 @@ export default function LandingPage() {
   </div>
 
   <div id="product-showcase" data-section="product-showcase">
-      <ProductCardOne
+      <ProductCardFour
       textboxLayout="default"
-      gridVariant="two-columns-alternating-heights"
+      gridVariant="uniform-all-items-equal"
       useInvertedBackground={true}
-      carouselMode="buttons"
       products={[
         {
-          id: "prod-1",          name: "FLAXR ONE 60 - Full View",          price: "$299",          imageSrc: "http://img.b2bpic.net/free-photo/ai-powered-device-concept_23-2151924154.jpg",          imageAlt: "FLAXR ONE 60 keyboard full view"},
-        {
-          id: "prod-2",          name: "FLAXR ONE 60 - Side Profile",          price: "$299",          imageSrc: "http://img.b2bpic.net/free-photo/keys-with-arrows-copy-space_23-2148456136.jpg",          imageAlt: "FLAXR ONE 60 keyboard side profile"},
-        {
-          id: "prod-3",          name: "FLAXR ONE 60 - PBT Keycaps",          price: "$299",          imageSrc: "http://img.b2bpic.net/free-photo/white-aluminum-keyboard-close-up-technology-communication_482257-45033.jpg",          imageAlt: "Close-up of FLAXR ONE 60 PBT keycaps"},
-        {
-          id: "prod-4",          name: "FLAXR ONE 60 - Hot-Swap Switch",          price: "$299",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-key_23-2149680270.jpg",          imageAlt: "Close-up of FLAXR ONE 60 hot-swappable switch"},
-        {
-          id: "prod-5",          name: "FLAXR ONE 60 - Orange Backlight",          price: "$299",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-blue-keyboard-with-lights_23-2149680230.jpg",          imageAlt: "FLAXR ONE 60 keyboard with orange backlight"},
-        {
-          id: "prod-6",          name: "FLAXR ONE 60 - Minimalist Setup",          price: "$299",          imageSrc: "http://img.b2bpic.net/free-photo/empty-desktop-with-futuristic-software-tools-shows-live-ai-brain-processing_482257-126206.jpg",          imageAlt: "FLAXR ONE 60 keyboard in a minimalist desk setup"}
+          id: "flaxr-initium",          name: "FLAXR Initium",          price: "$499",          variant: "Founders Edition",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-futuristic-gaming-keyboard_482257-25139.jpg",          imageAlt: "FLAXR Initium Founders Edition mechanical keyboard"
+        }
       ]}
-      title="FLAXR ONE 60: The Ultimate Control"
-      description="Experience unparalleled precision and customization with our flagship 60% mechanical keyboard, featuring a premium aluminum body, hot-swappable switches, PBT keycaps, and USB-C connectivity."
-      tag="Featured Product"
-      animationType="slide-up"
+      title="Introducing FLAXR Initium: The Genesis of Control"
+      description="Experience the pinnacle of mechanical keyboard engineering. FLAXR Initium, our Founders Edition, redefines precision, craftsmanship, and personalized performance."
+      animationType="blur-reveal"
+      buttons={[
+        {
+          text: "Shop Now",          href: "#product-showcase"}
+      ]}
+      carouselMode="buttons"
     />
   </div>
 
   <div id="brand-story" data-section="brand-story">
       <MetricSplitMediaAbout
       useInvertedBackground={false}
-      title="Our Legacy of Precision"
-      description="At FLAXR, we believe in the relentless pursuit of perfection. Every keyboard is a testament to our dedication to innovation, quality, and the ultimate user experience. Crafted by enthusiasts, for enthusiasts, our journey is defined by engineering excellence and a passion for control."
+      title="Crafting Legacy: The FLAXR Philosophy"
+      description="At FLAXR, we don't just build keyboards; we forge instruments of precision. Inspired by the unwavering strength and captivating allure of fire, our philosophy is to create tools that ignite passion and empower mastery. Every curve, every switch, every keycap is a testament to our relentless pursuit of engineering perfection and a dedication to unparalleled craftsmanship. We design for the discerning, the relentless, the ones who demand excellence in every interaction. This is more than a brand; it's a commitment to an enduring legacy of control and artistry."
       metrics={[
         {
           value: "10+",          title: "Years of Innovation"},
@@ -140,8 +134,8 @@ export default function LandingPage() {
           value: "50+",          title: "Design Awards"},
       ]}
       tag="About FLAXR"
-      imageSrc="http://img.b2bpic.net/free-photo/illustration-circle-with-abstract-neon-light-effects-great-futuristic-background_181624-24417.jpg"
-      imageAlt="Abstract representation of FLAXR's engineering legacy"
+      imageSrc="https://dummyimage.com/800x600/000/fff&text=FLAXR_keyboard_manufacturing"
+      imageAlt="FLAXR keyboard manufacturing process"
       mediaAnimation="slide-up"
     />
   </div>
@@ -209,4 +203,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/products/page.tsx

@@ -59,13 +59,13 @@ export default function ProductsPage() {
             carouselMode="buttons"
             products={[
               {
-                id: "catalog-1",                name: "FLAXR CORE TKL",                price: "$249",                imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062907.jpg",                imageAlt: "FLAXR CORE TKL keyboard"
+                id: "catalog-1",                name: "FLAXR CORE TKL",                price: "$249",                imageSrc: "https://dummyimage.com/400x300/000/fff&text=FLAXR_CORE_TKL_front",                imageAlt: "FLAXR CORE TKL keyboard"
               },
               {
-                id: "catalog-2",                name: "FLAXR GHOST 75",                price: "$349",                imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-key-top-view_23-2149680277.jpg",                imageAlt: "FLAXR GHOST 75 translucent keyboard"
+                id: "catalog-2",                name: "FLAXR GHOST 75",                price: "$349",                imageSrc: "https://dummyimage.com/400x300/000/fff&text=FLAXR_GHOST_75_translucent",                imageAlt: "FLAXR GHOST 75 translucent keyboard"
               },
               {
-                id: "catalog-3",                name: "FLAXR PULSE",                price: "$199",                imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133137.jpg",                imageAlt: "FLAXR PULSE keyboard with RGB lighting"
+                id: "catalog-3",                name: "FLAXR PULSE",                price: "$199",                imageSrc: "https://dummyimage.com/400x300/000/fff&text=FLAXR_PULSE_RGB_closeup",                imageAlt: "FLAXR PULSE keyboard with RGB lighting"
               },
               {
                 id: "catalog-4",                name: "FLAXR CONNECT Cable",                price: "$49",                imageSrc: "http://img.b2bpic.net/free-photo/white-keyboard-with-lights-high-angle_23-2149680240.jpg",                imageAlt: "FLAXR premium coiled cable"
@@ -74,7 +74,7 @@ export default function ProductsPage() {
                 id: "catalog-5",                name: "FLAXR ONE 60 Pro",                price: "$329",                imageSrc: "http://img.b2bpic.net/free-photo/man-using-gaming-keyboard-fly-spaceship-sf-videogame-close-up_482257-121693.jpg",                imageAlt: "Gamer's hands on FLAXR ONE 60 Pro keyboard"
               },
               {
-                id: "catalog-6",                name: "FLAXR ONE 60 Compact",                price: "$279",                imageSrc: "http://img.b2bpic.net/free-photo/workspace-with-office-supplies_140725-23274.jpg",                imageAlt: "Overhead view of FLAXR ONE 60 Compact keyboard"
+                id: "catalog-6",                name: "FLAXR ONE 60 Compact",                price: "$279",                imageSrc: "https://dummyimage.com/400x300/000/fff&text=FLAXR_ONE_60_compact_desk",                imageAlt: "Overhead view of FLAXR ONE 60 Compact keyboard"
               },
             ]}
             title="Explore Our Masterpieces"

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-source-sans-3), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }

src/app/styles/variables.css

@@ -13,11 +13,11 @@
   --background: #0a0a0a;
   --card: #1a1a1a;
   --foreground: #ffffff;
-  --primary-cta: #FF6207;
+  --primary-cta: #ff6207;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #1a1a1a;
+  --secondary-cta: #333333;
   --secondary-cta-text: #ffffff;
-  --accent: #FF7B05;
+  --accent: #ff7b05;
   --background-accent: #333333;
 
   /* text sizing - set by ThemeProvider */