From ff1ec7867c3c2fc842e232c54dc23e9eed54ca55 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Wed, 10 Jun 2026 16:06:30 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 54 ++++++++++++++++++++++++++----------------------
 1 file changed, 29 insertions(+), 25 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index cc22c63..71153bd 100644
--- a/src/app/page.tsx
+++ b/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,9 +56,9 @@ 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={[
         {
@@ -100,37 +100,41 @@ export default function LandingPage() {
   </div>
 
   <div id="product-showcase" data-section="product-showcase">
-      <ProductCardOne
+      <ProductCardFour
       textboxLayout="default"
-      gridVariant="two-columns-alternating-heights"
+      gridVariant="bento-grid"
       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-1",          name: "FLAXR ONE 60 - Obsidian",          price: "$349",          variant: "Gaming",          imageSrc: "http://img.b2bpic.net/free-photo/glowing-fire-flames-black-background_181624-43666.jpg",          imageAlt: "FLAXR ONE 60 keyboard cinematic render, fire effect"},
         {
-          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-2",          name: "FLAXR ONE 60 - Ember",          price: "$349",          variant: "Professional",          imageSrc: "http://img.b2bpic.net/free-photo/glowing-abstract-flame-black-background_181624-43665.jpg",          imageAlt: "FLAXR ONE 60 keyboard cinematic render, glowing ember effect"},
         {
-          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-3",          name: "FLAXR ONE 60 - Inferno",          price: "$349",          variant: "Custom",          imageSrc: "http://img.b2bpic.net/free-photo/hot-flame-darkness-abstract-wallpaper_181624-52648.jpg",          imageAlt: "Close-up of FLAXR ONE 60 PBT keycaps, fire sparks"},
         {
-          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-4",          name: "FLAXR ONE 60 - Phoenix",          price: "$349",          variant: "Limited Edition",          imageSrc: "http://img.b2bpic.net/free-photo/fiery-abstract-background-glowing-effect_181624-41133.jpg",          imageAlt: "FLAXR ONE 60 hot-swappable switch, fiery glow"},
         {
-          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-5",          name: "FLAXR ONE 60 - Spectre",          price: "$349",          variant: "Stealth",          imageSrc: "http://img.b2bpic.net/free-photo/fiery-abstract-background-glowing-effect_181624-41133.jpg",          imageAlt: "FLAXR ONE 60 keyboard with orange backlight, fire reflection"},
         {
-          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: "prod-6",          name: "FLAXR ONE 60 - Origin",          price: "$349",          variant: "Classic",          imageSrc: "http://img.b2bpic.net/free-photo/top-view-blue-keyboard-with-lights_23-2149680230.jpg",          imageAlt: "FLAXR ONE 60 keyboard in a minimalist desk setup, soft glow"}
+      ]}
+      title="FLAXR: Igniting Precision"
+      description="Immerse yourself in a world where design meets raw power. Our curated collection embodies the spirit of innovation, with each product a masterpiece of engineering and aesthetics, presented with cinematic detail."
+      tag="The Collection"
+      animationType="blur-reveal"
+      buttons={[
+        {
+          text: "Shop Now",          href: "#product-showcase"}
       ]}
-      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"
     />
   </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,7 +144,7 @@ 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"
+      imageSrc="http://img.b2bpic.net/free-photo/abstract-fire-background-orange-flames_181624-21915.jpg"
       imageAlt="Abstract representation of FLAXR's engineering legacy"
       mediaAnimation="slide-up"
     />