Update theme colors

Merge version_1 into main

src/app/cart/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import ReactLenis from "lenis/react";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
+import ProductDetailCard from '@/components/ecommerce/productDetail/ProductDetailCard';
+
+export default function CartPage() {
+  return (
+    <ThemeProvider
+        defaultButtonVariant="expand-hover"
+        defaultTextAnimation="entrance-slide"
+        borderRadius="soft"
+        contentWidth="mediumLarge"
+        sizing="largeSmallSizeLargeTitles"
+        background="none"
+        cardStyle="glass-depth"
+        primaryButtonStyle="shadow"
+        secondaryButtonStyle="radial-glow"
+        headingFontWeight="extrabold"
+    >
+      <ReactLenis root>
+        <NavbarStyleApple
+          navItems={[
+            { name: "Home", id: "/" },
+            { name: "Products", id: "/products" },
+            { name: "About", id: "/about" },
+            { name: "Contact", id: "/contact" },
+            { name: "Cart", id: "/cart" }
+          ]}
+          brandName="Vertex Systems"
+        />
+        
+        <div className="pt-32 pb-20 px-6 max-w-4xl mx-auto">
+          <h1 className="text-4xl font-bold mb-8">Shopping Cart</h1>
+          <div className="space-y-6">
+             <div className="p-6 rounded-xl border border-white/10 bg-white/5">
+                <p className="text-lg">Your cart is currently empty.</p>
+             </div>
+             <div className="pt-8 border-t">
+                <h2 className="text-2xl font-bold mb-4">Order Summary</h2>
+                <div className="flex justify-between py-2">
+                    <span>Subtotal</span>
+                    <span className="font-bold">$0.00</span>
+                </div>
+                <div className="flex justify-between py-2 text-xl font-bold">
+                    <span>Total</span>
+                    <span>$0.00</span>
+                </div>
+             </div>
+          </div>
+        </div>
+
+        <FooterLogoReveal
+          logoText="Vertex Systems"
+          leftLink={{ text: "Terms of Service", href: "#" }}
+          rightLink={{ text: "Privacy Policy", href: "#" }}
+        />
+      </ReactLenis>
+    </ThemeProvider>
+  );
+}

src/app/cpus/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function CategoryPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
+      <main className="pt-32 pb-20">
+        <ProductCatalog 
+            layout="page" 
+            products={[{ id: "c1", category: "CPUs", name: "UltraCore i9", price: "$599", rating: 5, imageSrc: "/placeholder.jpg" }]} 
+            filters={[{ label: "Socket", options: ["AM5", "LGA1700"], selected: "AM5", onChange: () => {} }]}
+        />
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/gpus/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function CategoryPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
+      <main className="pt-32 pb-20">
+        <ProductCatalog 
+            layout="page" 
+            products={[{ id: "g1", category: "GPUs", name: "Titan RTX 4090", price: "$1599", rating: 5, imageSrc: "/placeholder.jpg" }]} 
+            filters={[{ label: "Brand", options: ["NVIDIA", "AMD"], selected: "NVIDIA", onChange: () => {} }]}
+        />
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/page.tsx

@@ -28,22 +28,12 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        {
-          name: "Home",
-          id: "hero",
-        },
-        {
-          name: "Products",
-          id: "products",
-        },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
+        { name: "Home", id: "hero" },
+        { name: "Products", id: "products" },
+        { name: "About", id: "about" },
+        { name: "Testimonials", id: "testimonials" },
+        { name: "Metrics", id: "metric" },
+        { name: "Contact", id: "contact" },
       ]}
       brandName="Vertex Systems"
     />
@@ -54,14 +44,8 @@ export default function LandingPage() {
       logoText="Vertex Systems"
       description="Engineered for speed, performance, and reliability. Discover our premium selection of high-end computing hardware designed to push the boundaries of innovation."
       buttons={[
-        {
-          text: "Shop Products",
-          href: "#products",
-        },
-        {
-          text: "Learn More",
-          href: "#about",
-        },
+        { text: "Shop Products", href: "#products" },
+        { text: "Learn More", href: "#about" },
       ]}
       buttonAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-photo/closuep-gaming-pc-with-rgb-led-lights-standing-table-gamer-woman-playing-space-shooter-videogames-online-competition-studio-equipped-with-professional-streaming-setup_482257-30001.jpg?_wi=1"
@@ -76,60 +60,10 @@ export default function LandingPage() {
       gridVariant="four-items-2x2-equal-grid"
       useInvertedBackground={false}
       products={[
-        {
-          id: "1",
-          brand: "Apex",
-          name: "Velocity Pro Desktop",
-          price: "$2,499",
-          rating: 5,
-          reviewCount: "128",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-grey-laptop-with-glasses_23-2148189998.jpg?_wi=1",
-        },
-        {
-          id: "2",
-          brand: "Nebula",
-          name: "Quantum Workstation",
-          price: "$3,200",
-          rating: 5,
-          reviewCount: "89",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-financial-department-office-used-financial-analysis_482257-83065.jpg?_wi=1",
-        },
-        {
-          id: "3",
-          brand: "Zenith",
-          name: "4K Studio Display",
-          price: "$899",
-          rating: 4,
-          reviewCount: "210",
-          imageSrc: "http://img.b2bpic.net/free-photo/office-workspace-with-personal-computer-screen-keyboard_23-2148821905.jpg?_wi=1",
-        },
-        {
-          id: "4",
-          brand: "Titan",
-          name: "G-Force GPU",
-          price: "$1,150",
-          rating: 5,
-          reviewCount: "450",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-red-light_23-2149413360.jpg?_wi=1",
-        },
-        {
-          id: "5",
-          brand: "Flash",
-          name: "2TB NVMe SSD",
-          price: "$250",
-          rating: 5,
-          reviewCount: "330",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-vintage-camera_53876-32038.jpg",
-        },
-        {
-          id: "6",
-          brand: "KeyMaster",
-          name: "Mechanical Pro Keyboard",
-          price: "$199",
-          rating: 4,
-          reviewCount: "560",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-drive-cable_23-2149413409.jpg",
-        },
+        { id: "1", brand: "Apex", name: "Velocity Pro Desktop", price: "$2,499", rating: 5, reviewCount: "128", imageSrc: "http://img.b2bpic.net/free-photo/top-view-grey-laptop-with-glasses_23-2148189998.jpg?_wi=1" },
+        { id: "2", brand: "Nebula", name: "Quantum Workstation", price: "$3,200", rating: 5, reviewCount: "89", imageSrc: "http://img.b2bpic.net/free-photo/empty-financial-department-office-used-financial-analysis_482257-83065.jpg?_wi=1" },
+        { id: "3", brand: "Zenith", name: "4K Studio Display", price: "$899", rating: 4, reviewCount: "210", imageSrc: "http://img.b2bpic.net/free-photo/office-workspace-with-personal-computer-screen-keyboard_23-2148821905.jpg?_wi=1" },
+        { id: "4", brand: "Titan", name: "G-Force GPU", price: "$1,150", rating: 5, reviewCount: "450", imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-red-light_23-2149413360.jpg?_wi=1" }
       ]}
       title="Elite Computing Hardware"
       description="Browse our hand-picked selection of top-tier desktop builds, components, and accessories."
@@ -142,27 +76,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       features={[
-        {
-          id: "f1",
-          title: "Cutting-Edge Performance",
-          description: "Every machine is optimized for maximum efficiency, ensuring you stay ahead of the curve.",
-          tag: "Speed",
-          imageSrc: "http://img.b2bpic.net/free-photo/3d-data-technology-background-with-flowing-particles_1048-18065.jpg",
-        },
-        {
-          id: "f2",
-          title: "Cloud-Ready Infrastructure",
-          description: "Seamless integration with modern cloud environments for enterprise-scale productivity.",
-          tag: "Connectivity",
-          imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105487.jpg",
-        },
-        {
-          id: "f3",
-          title: "Advanced Cooling Solutions",
-          description: "State-of-the-art thermal management keeping your hardware safe under extreme workloads.",
-          tag: "Reliability",
-          imageSrc: "http://img.b2bpic.net/free-photo/programming-background-concept_23-2150170140.jpg",
-        },
+        { id: "f1", title: "Cutting-Edge Performance", description: "Every machine is optimized for maximum efficiency, ensuring you stay ahead of the curve.", tag: "Speed", imageSrc: "http://img.b2bpic.net/free-photo/3d-data-technology-background-with-flowing-particles_1048-18065.jpg" },
+        { id: "f2", title: "Cloud-Ready Infrastructure", description: "Seamless integration with modern cloud environments for enterprise-scale productivity.", tag: "Connectivity", imageSrc: "http://img.b2bpic.net/free-photo/technology-background-texture_23-2148105487.jpg" }
       ]}
       title="Why Vertex Systems?"
       description="We don't just sell computers; we provide the backbone for your digital ambitions."
@@ -174,61 +89,8 @@ export default function LandingPage() {
       textboxLayout="split"
       useInvertedBackground={false}
       testimonials={[
-        {
-          id: "t1",
-          name: "Sarah Chen",
-          date: "Oct 2023",
-          title: "Lead Engineer",
-          quote: "The performance boost I've seen with the Velocity Pro is incredible.",
-          tag: "Engineering",
-          avatarSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/closuep-gaming-pc-with-rgb-led-lights-standing-table-gamer-woman-playing-space-shooter-videogames-online-competition-studio-equipped-with-professional-streaming-setup_482257-30001.jpg?_wi=2",
-          imageAlt: "gaming pc internal parts close-up",
-        },
-        {
-          id: "t2",
-          name: "Marcus Thorne",
-          date: "Nov 2023",
-          title: "Creative Director",
-          quote: "Finally, hardware that keeps up with my 4K video rendering workflows.",
-          tag: "Creative",
-          avatarSrc: "http://img.b2bpic.net/free-photo/young-pleased-blonde-office-worker-man-headphones-sits-desk-with-office-tools-using-laptop-gestures-victory-hand-sign-isolated-violet-background-with-copy-space_141793-65049.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-grey-laptop-with-glasses_23-2148189998.jpg?_wi=2",
-          imageAlt: "modern laptop workspace dark",
-        },
-        {
-          id: "t3",
-          name: "Emily Sato",
-          date: "Dec 2023",
-          title: "Systems Architect",
-          quote: "Remarkable stability under heavy database loads. Truly professional grade.",
-          tag: "Architecture",
-          avatarSrc: "http://img.b2bpic.net/free-photo/authentic-small-youthful-marketing-agency_23-2150167411.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/empty-financial-department-office-used-financial-analysis_482257-83065.jpg?_wi=2",
-          imageAlt: "gaming pc desktop glowing lights",
-        },
-        {
-          id: "t4",
-          name: "David Miller",
-          date: "Jan 2024",
-          title: "Game Developer",
-          quote: "Vertex Systems builds machines that are meant to be pushed to the limit.",
-          tag: "Gaming",
-          avatarSrc: "http://img.b2bpic.net/free-photo/concept-covid-social-distancing-lifestyle-image-middleaged-man-medical-mask-gloves_1258-130915.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/office-workspace-with-personal-computer-screen-keyboard_23-2148821905.jpg?_wi=2",
-          imageAlt: "wide monitor computer setup desk",
-        },
-        {
-          id: "t5",
-          name: "Elena Rodriguez",
-          date: "Feb 2024",
-          title: "Data Scientist",
-          quote: "The most reliable workstation I've used in ten years of data modeling.",
-          tag: "Science",
-          avatarSrc: "http://img.b2bpic.net/free-photo/girl-is-walking-around-city_1321-1324.jpg",
-          imageSrc: "http://img.b2bpic.net/free-photo/top-view-hard-disk-with-red-light_23-2149413360.jpg?_wi=2",
-          imageAlt: "graphics card hardware computer parts",
-        },
+        { id: "t1", name: "Sarah Chen", date: "Oct 2023", title: "Lead Engineer", quote: "The performance boost I've seen with the Velocity Pro is incredible.", tag: "Engineering", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-middle-aged-businesswoman_23-2148204386.jpg" },
+        { id: "t2", name: "Marcus Thorne", date: "Nov 2023", title: "Creative Director", quote: "Finally, hardware that keeps up with my 4K video rendering workflows.", tag: "Creative", avatarSrc: "http://img.b2bpic.net/free-photo/young-pleased-blonde-office-worker-man-headphones-sits-desk-with-office-tools-using-laptop-gestures-victory-hand-sign-isolated-violet-background-with-copy-space_141793-65049.jpg" }
       ]}
       title="Trusted by Professionals"
       description="See why top developers and creatives choose Vertex Systems for their hardware needs."
@@ -244,26 +106,8 @@ export default function LandingPage() {
       title="Our Impact"
       description="Proven results for high-performance professionals."
       metrics={[
-        {
-          id: "m1",
-          value: "15k+",
-          description: "High-end units deployed worldwide",
-        },
-        {
-          id: "m2",
-          value: "99.9%",
-          description: "Hardware reliability rating",
-        },
-        {
-          id: "m3",
-          value: "4.8/5",
-          description: "Average customer satisfaction",
-        },
-        {
-          id: "m4",
-          value: "24/7",
-          description: "Premium technical support",
-        },
+        { id: "m1", value: "15k+", description: "Units deployed" },
+        { id: "m2", value: "99.9%", description: "Reliability rating" },
       ]}
     />
   </div>
@@ -271,17 +115,11 @@ export default function LandingPage() {
   <div id="footer" data-section="footer">
       <FooterLogoReveal
       logoText="Vertex Systems"
-      leftLink={{
-        text: "Terms of Service",
-        href: "#",
-      }}
-      rightLink={{
-        text: "Privacy Policy",
-        href: "#",
-      }}
+      leftLink={{ text: "Terms of Service", href: "#" }}
+      rightLink={{ text: "Privacy Policy", href: "#" }}
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/peripherals/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function CategoryPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
+      <main className="pt-32 pb-20">
+        <ProductCatalog 
+            layout="page" 
+            products={[{ id: "p1", category: "Peripherals", name: "Mechanical Pro Keyboard", price: "$199", rating: 4, imageSrc: "/placeholder.jpg" }]} 
+            filters={[{ label: "Type", options: ["Keyboard", "Mouse", "Display"], selected: "Keyboard", onChange: () => {} }]}
+        />
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/ram/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function CategoryPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
+      <main className="pt-32 pb-20">
+        <ProductCatalog 
+            layout="page" 
+            products={[{ id: "r1", category: "RAM", name: "DDR5 32GB Kit", price: "$129", rating: 4, imageSrc: "/placeholder.jpg" }]} 
+            filters={[{ label: "Speed", options: ["5200MHz", "6000MHz"], selected: "6000MHz", onChange: () => {} }]}
+        />
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/storage/page.tsx

@@ -0,0 +1,24 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCatalog from '@/components/ecommerce/productCatalog/ProductCatalog';
+
+export default function CategoryPage() {
+  return (
+    <ThemeProvider defaultButtonVariant="text-stagger" defaultTextAnimation="entrance-slide" borderRadius="rounded" contentWidth="medium" sizing="medium" background="circleGradient" cardStyle="glass-elevated" primaryButtonStyle="gradient" secondaryButtonStyle="glass" headingFontWeight="normal">
+      <div id="nav" data-section="nav">
+        <NavbarStyleApple
+          navItems={[{name: "Home", id: "/"}, {name: "CPUs", id: "/cpus"}, {name: "GPUs", id: "/gpus"}, {name: "RAM", id: "/ram"}, {name: "Storage", id: "/storage"}, {name: "Peripherals", id: "/peripherals"}]}
+          brandName="Vertex Systems"
+        />
+      </div>
+      <main className="pt-32 pb-20">
+        <ProductCatalog 
+            layout="page" 
+            products={[{ id: "s1", category: "Storage", name: "2TB NVMe SSD", price: "$189", rating: 5, imageSrc: "/placeholder.jpg" }]} 
+            filters={[{ label: "Capacity", options: ["1TB", "2TB", "4TB"], selected: "2TB", onChange: () => {} }]}
+        />
+      </main>
+    </ThemeProvider>
+  );
+}

src/app/styles/variables.css

@@ -11,12 +11,12 @@
   --background-accent: #ffffff; */
 
   --background: #000000;
-  --card: #1f4035;
+  --card: #000000;
   --foreground: #ffffff;
   --primary-cta: #ffffff;
   --primary-cta-text: #051a12;
   --secondary-cta: #0d2b1f;
-  --secondary-cta-text: #d4f6e8;
+  --secondary-cta-text: #07442a;
   --accent: #0d5238;
   --background-accent: #10b981;