Switch to version 2: modified src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -4,10 +4,10 @@ import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import FooterBase from '@/components/sections/footer/FooterBase';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import HeroSplit from '@/components/sections/hero/HeroSplit';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
-import SplitAbout from '@/components/sections/about/SplitAbout';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
-import AboutMetric from '@/components/sections/about/AboutMetric';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
-import { Cpu, Zap, Target, ArrowRight, ShieldCheck, BarChart3 } from "lucide-react";
+import { Cpu, Zap, Target } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,48 +28,50 @@ export default function LandingPage() {
           <NavbarStyleCentered
             navItems={[
               { name: "Home", id: "#hero" },
-              { name: "About", id: "#about" },
+              { name: "Philosophy", id: "#about" },
-              { name: "Performance", id: "#metric" },
+              { name: "Metrics", id: "#metric" },
             ]}
             brandName="Vertex Design"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroSplit
+          <HeroBillboardGallery
             title="Precision Engineering, Digital Innovation"
             description="Crafting robust, scalable digital infrastructure through design excellence. We define the standard for high-performance interfaces."
             background={{ variant: "sparkles-gradient" }}
-            imageSrc="http://img.b2bpic.net/free-photo/abstract-metallic-textures-perforated-metal-background_1048-6358.jpg?_wi=1"
+            mediaItems={[
+              { imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-textures-perforated-metal-background_1048-6358.jpg?_wi=1" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-connecting-dots-digital-network-design_53876-160195.jpg?_wi=1" },
+              { imageSrc: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797628.jpg?_wi=1" }
+            ]}
             buttons={[{ text: "Explore Work", href: "#about" }]}
-            imagePosition="right"
           />
         </div>
 
         <div id="about" data-section="about">
-          <SplitAbout
+          <TextSplitAbout
             title="Engineered for Complexity"
-            description="Vertex Design specializes in translating complex technical requirements into intuitive, human-centric interfaces. Our design process is rooted in precision, reliability, and modular architecture."
+            description={[
-            bulletPoints={[
+              "Vertex Design specializes in translating complex technical requirements into intuitive, human-centric interfaces. Our design process is rooted in precision, reliability, and modular architecture.",              "We bridge the gap between heavy industrial workflows and modern usability, ensuring every interaction is optimized for high-stakes environments."
-              { title: "Industrial Grade", description: "High-performance frameworks for critical operations.", icon: ShieldCheck },
-              { title: "Modular Design", description: "Scalable components built for enterprise growth.", icon: Cpu },
-              { title: "Human Centric", description: "Interfaces that prioritize user experience and usability.", icon: Target }
             ]}
-            imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797628.jpg?_wi=1"
+            showBorder={true}
-            textboxLayout="split"
             useInvertedBackground={true}
           />
         </div>
 
         <div id="metric" data-section="metric">
-          <AboutMetric
+          <MetricCardOne
-            title="Proven Impact"
+            title="Defining Performance"
+            description="Our impact measured through tangible outcomes and engineering benchmarks."
+            gridVariant="bento-grid"
+            animationType="depth-3d"
             metrics={[
-              { value: "99.9%", label: "System Reliability", icon: Cpu },
+              { id: "m1", value: "99.9%", title: "Interface Reliability", description: "Validated performance across critical systems.", icon: Cpu },
-              { value: "40%", label: "Efficiency Boost", icon: Zap },
+              { id: "m2", value: "40%", title: "Workflow Efficiency", description: "Reduction in task completion time for users.", icon: Zap },
-              { value: "25x", label: "Growth Potential", icon: BarChart3 }
+              { id: "m3", value: "25x", title: "Scalability", description: "Framework growth factor for enterprise integration.", icon: Target }
             ]}
-            useInvertedBackground={false}
+            textboxLayout="split"
           />
         </div>
 

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: #15479c;
+  --primary-cta: #1f7cff;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #1a1a1a;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --accent: #1f7cff;
-  --background-accent: #c4c4c4;
+  --background-accent: #1f7cff;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);