Update theme colors

Merge version_2 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 HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import HeroSplit from '@/components/sections/hero/HeroSplit';
-import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import SplitAbout from '@/components/sections/about/SplitAbout';
-import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import AboutMetric from '@/components/sections/about/AboutMetric';
-import { Cpu, Zap, Target } from "lucide-react";
+import { Cpu, Zap, Target, ArrowRight, ShieldCheck, BarChart3 } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -28,50 +28,48 @@ export default function LandingPage() {
           <NavbarStyleCentered
             navItems={[
               { name: "Home", id: "#hero" },
-              { name: "Philosophy", id: "#about" },
+              { name: "About", id: "#about" },
-              { name: "Metrics", id: "#metric" },
+              { name: "Performance", id: "#metric" },
             ]}
             brandName="Vertex Design"
           />
         </div>
 
         <div id="hero" data-section="hero">
-          <HeroBillboardGallery
+          <HeroSplit
             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" }}
-            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-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">
-          <TextSplitAbout
+          <SplitAbout
             title="Engineered for Complexity"
-            description={[
+            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."
-              "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."
+            bulletPoints={[
+              { 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 }
             ]}
-            showBorder={true}
+            imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797628.jpg?_wi=1"
+            textboxLayout="split"
             useInvertedBackground={true}
           />
         </div>
 
         <div id="metric" data-section="metric">
-          <MetricCardOne
+          <AboutMetric
-            title="Defining Performance"
+            title="Proven Impact"
-            description="Our impact measured through tangible outcomes and engineering benchmarks."
-            gridVariant="bento-grid"
-            animationType="depth-3d"
             metrics={[
-              { id: "m1", value: "99.9%", title: "Interface Reliability", description: "Validated performance across critical systems.", icon: Cpu },
+              { value: "99.9%", label: "System Reliability", icon: Cpu },
-              { id: "m2", value: "40%", title: "Workflow Efficiency", description: "Reduction in task completion time for users.", icon: Zap },
+              { value: "40%", label: "Efficiency Boost", icon: Zap },
-              { id: "m3", value: "25x", title: "Scalability", description: "Framework growth factor for enterprise integration.", icon: Target }
+              { value: "25x", label: "Growth Potential", icon: BarChart3 }
             ]}
-            textboxLayout="split"
+            useInvertedBackground={false}
           />
         </div>
 

src/app/styles/variables.css

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