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

Merge version_3 into main

src/app/page.tsx

@@ -2,174 +2,90 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
-import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
 import FooterBase from '@/components/sections/footer/FooterBase';
-import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import ProductCardFour from '@/components/sections/product/ProductCardFour';
-import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
+import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
+import { Cpu, Zap, Target } from "lucide-react";
 
 export default function LandingPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="hover-bubble"
-        defaultTextAnimation="entrance-slide"
-        borderRadius="soft"
+        defaultButtonVariant="hover-magnetic"
+        defaultTextAnimation="reveal-blur"
+        borderRadius="pill"
         contentWidth="mediumLarge"
-        sizing="largeSmall"
-        background="noiseDiagonalGradient"
-        cardStyle="layered-gradient"
-        primaryButtonStyle="shadow"
-        secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        sizing="largeSizeMediumTitles"
+        background="fluid"
+        cardStyle="glass-depth"
+        primaryButtonStyle="primary-glow"
+        secondaryButtonStyle="glass"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
-      <NavbarStyleCentered
-      navItems={[
-        {
-          name: "Home",          id: "#hero"},
-        {
-          name: "Features",          id: "#features"},
-        {
-          name: "Services",          id: "#products"},
-      ]}
-      brandName="Vertex Design"
-    />
-  </div>
+        <div id="nav" data-section="nav">
+          <NavbarStyleCentered
+            navItems={[
+              { name: "Home", id: "#hero" },
+              { name: "Philosophy", id: "#about" },
+              { name: "Metrics", id: "#metric" },
+            ]}
+            brandName="Vertex Design"
+          />
+        </div>
 
-  <div id="hero" data-section="hero">
-      <HeroBillboardScroll
-      background={{
-        variant: "radial-gradient"}}
-      title="Precision Design for Modern Innovation"
-      description="We bridge the gap between complex industrial requirements and human-centered design. Delivering robust, scalable digital products with engineering-grade precision."
-      imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797628.jpg?_wi=1"
-      imageAlt="Futuristic design studio"
-      buttons={[
-        {
-          text: "Get Started",          href: "#products"},
-        {
-          text: "View Case Studies",          href: "#features"},
-      ]}
-    />
-  </div>
+        <div id="hero" data-section="hero">
+          <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" }}
+            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" }]}
+          />
+        </div>
 
-  <div id="features" data-section="features">
-      <FeatureCardTwentySeven
-      animationType="slide-up"
-      textboxLayout="split"
-      useInvertedBackground={true}
-      features={[
-        {
-          id: "f1",          title: "Industrial Precision",          descriptions: [
-            "Data-driven design processes that ensure high reliability.",            "Tested interfaces built for extreme edge cases."],
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-textures-perforated-metal-background_1048-6358.jpg?_wi=1"},
-        {
-          id: "f2",          title: "Modular Architecture",          descriptions: [
-            "Scalable design systems designed for complex platforms.",            "Built to evolve alongside your business roadmap."],
-          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-connecting-dots-digital-network-design_53876-160195.jpg?_wi=1"},
-        {
-          id: "f3",          title: "Human Centric",          descriptions: [
-            "Complex logic translated into intuitive user experiences.",            "Bridging human needs with high-stakes technical workflows."],
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-100-years-celebration-pen-tool-created-clipping-path-included-jpeg-easy-composite_460848-10131.jpg?_wi=1"},
-      ]}
-      title="Engineering the Future"
-      description="Our workflow is built on a foundation of deep domain expertise and modular design architectures."
-    />
-  </div>
+        <div id="about" data-section="about">
+          <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.",              "We bridge the gap between heavy industrial workflows and modern usability, ensuring every interaction is optimized for high-stakes environments."
+            ]}
+            showBorder={true}
+            useInvertedBackground={true}
+          />
+        </div>
 
-  <div id="products" data-section="products">
-      <ProductCardFour
-      textboxLayout="split"
-      gridVariant="three-columns-all-equal-width"
-      useInvertedBackground={false}
-      animationType="slide-up"
-      products={[
-        {
-          id: "p1",          name: "Vertex Core System",          price: "$12,000",          variant: "License",          imageSrc: "http://img.b2bpic.net/free-photo/student-boy-using-laptop-learning-online-education_1150-16897.jpg?_wi=1"},
-        {
-          id: "p2",          name: "Data UI Kit",          price: "$8,500",          variant: "License",          imageSrc: "http://img.b2bpic.net/free-photo/student-boy-using-laptop-learning-online-education_1150-16897.jpg?_wi=2"},
-        {
-          id: "p3",          name: "Analytics Pro Module",          price: "$15,000",          variant: "License",          imageSrc: "http://img.b2bpic.net/free-photo/student-boy-using-laptop-learning-online-education_1150-16897.jpg?_wi=3"},
-        {
-          id: "p4",          name: "Startup Scaler",          price: "$22,000",          variant: "License",          imageSrc: "http://img.b2bpic.net/free-photo/student-boy-using-laptop-learning-online-education_1150-16897.jpg?_wi=4"},
-        {
-          id: "p5",          name: "Enterprise Dashboard",          price: "$30,000",          variant: "License",          imageSrc: "http://img.b2bpic.net/free-photo/student-boy-using-laptop-learning-online-education_1150-16897.jpg?_wi=5"},
-        {
-          id: "p6",          name: "API Design Suite",          price: "$9,500",          variant: "License",          imageSrc: "http://img.b2bpic.net/free-photo/student-boy-using-laptop-learning-online-education_1150-16897.jpg?_wi=6"},
-      ]}
-      title="Our Design Frameworks"
-      description="Premium digital tools engineered for startup growth and enterprise efficiency."
-    />
-  </div>
+        <div id="metric" data-section="metric">
+          <MetricCardOne
+            title="Defining Performance"
+            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 },
+              { id: "m2", value: "40%", title: "Workflow Efficiency", description: "Reduction in task completion time for users.", icon: Zap },
+              { id: "m3", value: "25x", title: "Scalability", description: "Framework growth factor for enterprise integration.", icon: Target }
+            ]}
+            textboxLayout="split"
+          />
+        </div>
 
-  <div id="testimonial" data-section="testimonial">
-      <TestimonialCardTwo
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Voices of Innovation"
-      description="Hear from industry leaders who trust Vertex Design with their critical infrastructure."
-      testimonials={[
-        {
-          id: "t1",          name: "Sarah Jenkins",          role: "CTO at Nexus",          testimonial: "The precision in their work is unmatched. Vertex transformed our complex data flows into a seamless experience.",          imageSrc: "http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797628.jpg?_wi=2",          imageAlt: "modern studio space tech blue light"},
-        {
-          id: "t2",          name: "Mark Sterling",          role: "Lead Architect",          testimonial: "Vertex doesn't just design interfaces; they solve fundamental architectural problems.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-metallic-textures-perforated-metal-background_1048-6358.jpg?_wi=2",          imageAlt: "3d metal icon abstract tech"},
-        {
-          id: "t3",          name: "Elena Rodriguez",          role: "VP of Design",          testimonial: "Incredible attention to detail. Our team saved months of development time by using their core system.",          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background-connecting-dots-digital-network-design_53876-160195.jpg?_wi=2",          imageAlt: "network nodes 3d icon blue"},
-        {
-          id: "t4",          name: "David Chen",          role: "Product Manager",          testimonial: "The modular architecture they provided is the foundation for our entire product roadmap.",          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-100-years-celebration-pen-tool-created-clipping-path-included-jpeg-easy-composite_460848-10131.jpg?_wi=2",          imageAlt: "user centric design 3d icon"},
-      ]}
-    />
-  </div>
-
-  <div id="faq" data-section="faq">
-      <FaqSplitMedia
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Frequently Asked Questions"
-      description="Everything you need to know about partnering with our design studio."
-      imageSrc="http://img.b2bpic.net/free-photo/modern-office-space-with-futuristic-decor-furniture_23-2151797628.jpg?_wi=3"
-      mediaAnimation="slide-up"
-      faqsAnimation="blur-reveal"
-      faqs={[
-        {
-          id: "q1",          title: "What is your engagement model?",          content: "We work via recurring monthly licenses for our design frameworks or project-based retainers for custom integration."},
-        {
-          id: "q2",          title: "Do you support enterprise teams?",          content: "Yes, our systems are specifically built to scale within complex, high-stakes enterprise environments."},
-        {
-          id: "q3",          title: "How long does onboarding take?",          content: "Typically, we provide full access to our design frameworks within 48 hours of license procurement."},
-      ]}
-    />
-  </div>
-
-  <div id="footer" data-section="footer">
-      <FooterBase
-      columns={[
-        {
-          title: "Company",          items: [
-            {
-              label: "About Us",              href: "#"},
-            {
-              label: "Careers",              href: "#"},
-          ],
-        },
-        {
-          title: "Services",          items: [
-            {
-              label: "Design Systems",              href: "#"},
-            {
-              label: "Product Strategy",              href: "#"},
-          ],
-        },
-      ]}
-      logoText="Vertex Design"
-      copyrightText="© 2025 Vertex Design. All rights reserved."
-    />
-  </div>
+        <div id="footer" data-section="footer">
+          <FooterBase
+            columns={[
+              { title: "Studio", items: [{ label: "Philosophy", href: "#about" }, { label: "Metrics", href: "#metric" }] },
+              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] }
+            ]}
+            logoText="Vertex Design"
+            copyrightText="© 2025 Vertex Design. Industrial-Grade Digital Products."
+          />
+        </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

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