Update src/app/systems/page.tsx

src/app/build/page.tsx

@@ -1,26 +1,25 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Speaker, Zap, Sparkles } from "lucide-react";
+import { Sparkles } from "lucide-react";
 
 export default function BuildPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="radialGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="inset-glow"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -33,65 +32,61 @@ export default function BuildPage() {
             { name: "Support", id: "/support" }
           ]}
           button={{ text: "Shop", href: "#shop" }}
-          className="backdrop-blur-md border border-purple-600"
+          className="backdrop-blur-lg border border-accent/40"
         />
       </div>
 
       <div id="build" data-section="build">
-        <PricingCardNine
+        <PricingCardOne
           title="Spec & Configure"
           description="Build your reference system with modular options. Real-time SKU generation and assembly lead-time estimates."
           plans={[
             {
-              id: "compact",              title: "BASE One",              price: "$2,495",              period: "/unit",              features: [
-                "Graphite, Aluminum, or Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP profile",                "Status or Reactive LED lighting",                "Real-time SKU + 2–3 week lead time"
-              ],
-              button: { text: "Configure Base One", href: "#configure-one" },
-              imageSrc: "https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=800&q=80",              imageAlt: "BASE One configuration"
+              id: "compact",              badge: "Nearfield",              badgeIcon: Sparkles,
+              price: "$2,495",              subtitle: "Perfect for compact studios",              features: [
+                "Graphite, Aluminum, Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP",                "Status or Reactive LED",                "2–3 week lead time"
+              ]
             },
             {
-              id: "reference",              title: "BASE Two",              price: "$4,295",              period: "/unit",              features: [
-                "Graphite, Aluminum, or Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP profile",                "Status or Reactive LED lighting",                "Real-time SKU + 3–4 week lead time"
-              ],
-              button: { text: "Configure Base Two", href: "#configure-two" },
-              imageSrc: "https://images.unsplash.com/photo-1459749411175-04bf5292ceea?w=800&q=80",              imageAlt: "BASE Two configuration"
+              id: "reference",              badge: "Room Reference",              badgeIcon: Sparkles,
+              price: "$4,295",              subtitle: "For professional monitoring",              features: [
+                "Graphite, Aluminum, Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP",                "Status or Reactive LED",                "3–4 week lead time"
+              ]
             },
             {
-              id: "flagship",              title: "BASE Studio",              price: "$7,495",              period: "/unit",              features: [
-                "Graphite, Aluminum, or Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP profile",                "Status or Reactive LED lighting",                "Real-time SKU + 4–5 week lead time"
-              ],
-              button: { text: "Configure Base Studio", href: "#configure-studio" },
-              imageSrc: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=800&q=80",              imageAlt: "BASE Studio configuration"
+              id: "flagship",              badge: "Studio Flagship",              badgeIcon: Sparkles,
+              price: "$7,495",              subtitle: "Reference-grade system",              features: [
+                "Graphite, Aluminum, Ceramic finishes",                "Mesh or solid grille",                "Neutral, Warm, or Analytical DSP",                "Status or Reactive LED",                "4–5 week lead time"
+              ]
             }
           ]}
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground="noInvert"
         />
       </div>
 
       <div id="quality" data-section="quality">
-        <FeatureCardThree
+        <FeatureCardTwelve
           title="Quality Controlled"
           description="Built under control. Every step from materials sourcing to final calibration follows verified manufacturing standards."
           features={[
             {
-              id: "materials",              title: "Materials Selection",              description: "Premium components sourced to tolerance specs. Supplier audits + batch testing. Traceability maintained.",              imageSrc: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=800&q=80",              imageAlt: "Materials and component selection"
+              id: "materials",              label: "Materials",              title: "Premium Component Selection",              items: ["Tolerance spec sourcing", "Supplier audits", "Batch testing", "Full traceability"]
             },
             {
-              id: "machining",              title: "Precision Machining",              description: "CNC tolerance ±0.05mm for critical dimensions. Real-time in-process verification. 100% cosmetic inspection.",              imageSrc: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=800&q=80",              imageAlt: "CNC machining and precision manufacturing"
+              id: "machining",              label: "Machining",              title: "Precision Manufacturing",              items: ["CNC ±0.05mm tolerance", "Real-time verification", "100% cosmetic inspection", "Quality assurance"]
             },
             {
-              id: "assembly",              title: "Assembly & Sealing",              description: "Controlled environment assembly. Damping material placement verified. All seams tested for acoustic integrity.",              imageSrc: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=800&q=80",              imageAlt: "Assembly line quality control"
+              id: "assembly",              label: "Assembly",              title: "Controlled Environment",              items: ["Damping placement verified", "Acoustic integrity tested", "Seam verification", "QC checklist"]
             },
             {
-              id: "calibration",              title: "Final Calibration",              description: "Anechoic chamber measurement + response trim. DSP profile loading and verification. Certified before shipment.",              imageSrc: "https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?w=800&q=80",              imageAlt: "Calibration laboratory testing"
+              id: "calibration",              label: "Calibration",              title: "Anechoic Chamber Testing",              items: ["Response measurement", "DSP profile loading", "Certified verification", "Pre-shipment check"]
             }
           ]}
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground="invertDefault"
-          gridVariant="bento-grid"
         />
       </div>
 

src/app/field-tests/page.tsx

@@ -1,24 +1,23 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import BlogCardOne from '@/components/sections/blog/BlogCardOne';
+import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 export default function FieldTestsPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="radialGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="inset-glow"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -31,29 +30,33 @@ export default function FieldTestsPage() {
             { name: "Support", id: "/support" }
           ]}
           button={{ text: "Shop", href: "#shop" }}
-          className="backdrop-blur-md border border-purple-600"
+          className="backdrop-blur-lg border border-accent/40"
         />
       </div>
 
       <div id="field-tests" data-section="field-tests">
-        <BlogCardOne
+        <BlogCardTwo
           title="Field Tests"
           description="Proof in real spaces. Case studies with room dimensions, before/after response snapshots, and measured outcomes."
           blogs={[
             {
-              id: "studio-test",              category: "Studio",              title: "Studio Calibration Test",              excerpt: "20' x 24' mixing suite. BASE Two paired + subwoofer integration protocol. Frequency response: ±2dB 40Hz–20kHz in-room post-correction.",              imageSrc: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80",              imageAlt: "Professional studio setup with BASE speakers",              authorName: "Field Test",              authorAvatar: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=200&q=80",              date: "Verified Setup"
+              id: "studio-test",              tags: ["Studio", "Calibration", "Reference"],
+              title: "Studio Calibration Test",              excerpt: "20' x 24' mixing suite. BASE Two paired + subwoofer integration. Frequency response: ±2dB 40Hz–20kHz in-room.",              imageSrc: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80",              imageAlt: "Professional studio setup with BASE speakers",              authorName: "Field Test",              date: "Verified Setup"
             },
             {
-              id: "loft-test",              category: "Loft",              title: "Hard-Surface Room Test",              excerpt: "18' x 22' converted loft with concrete and glass. Single BASE Two nearfield. Phase correction engaged. Room modes managed via placement algorithm.",              imageSrc: "https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=800&q=80",              imageAlt: "Loft space acoustic testing",              authorName: "Field Test",              authorAvatar: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=200&q=80",              date: "Verified Setup"
+              id: "loft-test",              tags: ["Loft", "Acoustic", "Correction"],
+              title: "Hard-Surface Room Test",              excerpt: "18' x 22' converted loft with concrete and glass. Single BASE Two nearfield with phase correction engaged.",              imageSrc: "https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=800&q=80",              imageAlt: "Loft space acoustic testing",              authorName: "Field Test",              date: "Verified Setup"
             },
             {
-              id: "apartment-test",              category: "Compact",              title: "Small Apartment Nearfield",              excerpt: "12' x 14' bedroom studio. BASE One pair on close-field mounting. DSP linearization applied. Imaging accuracy maintained at <1m working distance.",              imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80",              imageAlt: "Compact apartment audio setup",              authorName: "Field Test",              authorAvatar: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=200&q=80",              date: "Verified Setup"
+              id: "apartment-test",              tags: ["Compact", "Nearfield", "Bedroom"],
+              title: "Small Apartment Nearfield",              excerpt: "12' x 14' bedroom studio. BASE One pair on close-field mounting. DSP linearization applied for accurate imaging.",              imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80",              imageAlt: "Compact apartment audio setup",              authorName: "Field Test",              date: "Verified Setup"
             },
             {
-              id: "live-room-test",              category: "Live",              title: "Live Room High SPL Test",              excerpt: "28' x 30' performance space. BASE Studio system with subwoofer array. 105dB SPL sustained without compression. Full-range clarity at volume.",              imageSrc: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=800&q=80",              imageAlt: "Live performance room with professional speakers",              authorName: "Field Test",              authorAvatar: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=200&q=80",              date: "Verified Setup"
+              id: "live-room-test",              tags: ["Live", "Performance", "SPL"],
+              title: "Live Room High SPL Test",              excerpt: "28' x 30' performance space. BASE Studio system with subwoofer array. 105dB SPL sustained without compression.",              imageSrc: "https://images.unsplash.com/photo-1493225457124-a3eb161ffa5f?w=800&q=80",              imageAlt: "Live performance room with professional speakers",              authorName: "Field Test",              date: "Verified Setup"
             }
           ]}
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground="noInvert"
           carouselMode="buttons"

src/app/globals.css

@@ -4,21 +4,21 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #0f0a1a;;
-  --card: #1a1f3a;;
-  --foreground: #e6d7f0;;
-  --primary-cta: #9d5cf6;;
-  --secondary-cta: #2a1f4a;;
-  --accent: #d4a9ff;;
-  --background-accent: #7e52d6;; */
+  /* --background: #0a0a0a;;
+  --card: #1a1515;;
+  --foreground: #f5f0ff;;
+  --primary-cta: #00d9ff;;
+  --secondary-cta: #ff00ff;;
+  --accent: #00ff88;;
+  --background-accent: #1a0a3a;; */
 
-  --background: #0f0a1a;;
-  --card: #1a1f3a;;
-  --foreground: #e6d7f0;;
-  --primary-cta: #9d5cf6;;
-  --secondary-cta: #2a1f4a;;
-  --accent: #d4a9ff;;
-  --background-accent: #7e52d6;;
+  --background: #0a0a0a;;
+  --card: #1a1515;;
+  --foreground: #f5f0ff;;
+  --primary-cta: #00d9ff;;
+  --secondary-cta: #ff00ff;;
+  --accent: #00ff88;;
+  --background-accent: #1a0a3a;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/page.tsx

@@ -1,26 +1,25 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
 import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import { Zap } from "lucide-react";
+import { Zap, Code2, Rocket, Cpu } from "lucide-react";
 
 export default function HomePage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="radialGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="inset-glow"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -33,7 +32,7 @@ export default function HomePage() {
             { name: "Support", id: "/support" }
           ]}
           button={{ text: "Shop", href: "#shop" }}
-          className="backdrop-blur-md border border-purple-600"
+          className="backdrop-blur-lg border border-accent/40"
         />
       </div>
 
@@ -87,7 +86,7 @@ export default function HomePage() {
               id: "3",              value: "12 ms",              title: "System Latency",              description: "Input to output via DSP processing",              imageSrc: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&q=80",              imageAlt: "DSP latency measurement"
             }
           ]}
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground="invertDefault"
         />

src/app/performance/page.tsx

@@ -1,24 +1,23 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
+import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
 
 export default function PerformancePage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="radialGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="inset-glow"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -31,57 +30,55 @@ export default function PerformancePage() {
             { name: "Support", id: "/support" }
           ]}
           button={{ text: "Shop", href: "#shop" }}
-          className="backdrop-blur-md border border-purple-600"
+          className="backdrop-blur-lg border border-accent/40"
         />
       </div>
 
       <div id="performance" data-section="performance">
-        <FeatureCardThree
+        <FeatureCardTwelve
           title="Performance Verified"
           description="Full measurement suite with disclosed test conditions, anechoic + in-room data, and downloadable reports for every system"
           features={[
             {
-              id: "freq-response",              title: "Frequency Response",              description: "Toggle between anechoic free-field and in-room compensated curves. All measurements at 1 meter reference distance.",              imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80",              imageAlt: "Frequency response measurement graph"
+              id: "freq-response",              label: "Frequency",              title: "Response Verification",              items: ["Anechoic free-field curves", "In-room compensated response", "1 meter reference distance", "Full spectrum analysis"]
             },
             {
-              id: "distortion",              title: "Distortion vs. Volume",              description: "Harmonic and intermodulation distortion tracked across full SPL range with linearity assurance.",              imageSrc: "https://images.unsplash.com/photo-1487180144351-b8472da7d491?w=800&q=80",              imageAlt: "Distortion measurement data"
+              id: "distortion",              label: "Distortion",              title: "SPL Linearity Tracking",              items: ["Harmonic distortion measurements", "Intermodulation testing", "Full SPL range coverage", "Linearity assurance"]
             },
             {
-              id: "directivity",              title: "Directivity Pattern",              description: "Polar plots at octave intervals showing controlled dispersion and off-axis response stability.",              imageSrc: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&q=80",              imageAlt: "Directivity polar pattern visualization"
+              id: "directivity",              label: "Directivity",              title: "Polar Pattern Analysis",              items: ["Octave interval plots", "Controlled dispersion", "Off-axis stability", "Response consistency"]
             },
             {
-              id: "impulse",              title: "Impulse Response",              description: "Time-domain capture revealing phase alignment, group delay, and transient fidelity across spectrum.",              imageSrc: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80",              imageAlt: "Impulse response waveform"
+              id: "impulse",              label: "Impulse",              title: "Time-Domain Capture",              items: ["Phase alignment verification", "Group delay measurement", "Transient fidelity", "Spectral precision"]
             }
           ]}
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground="noInvert"
-          gridVariant="bento-grid"
         />
       </div>
 
       <div id="internals" data-section="internals">
-        <FeatureCardThree
+        <FeatureCardTwelve
           title="Exposed Architecture"
           description="Every component has a job. No decorative design. Hover to reveal engineering notes."
           features={[
             {
-              id: "driver-array",              title: "Driver Array",              description: "Precision-matched transducers with controlled crossover and phase alignment for flat, coherent output.",              imageSrc: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80",              imageAlt: "Driver array internal structure"
+              id: "driver-array",              label: "Drivers",              title: "Precision Transducers",              items: ["Matched driver pairs", "Controlled crossover", "Phase alignment", "Coherent output"]
             },
             {
-              id: "chamber",              title: "Acoustic Chamber",              description: "Sealed or ported geometry optimized for low-frequency extension and transient accuracy without coloration.",              imageSrc: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80",              imageAlt: "Acoustic chamber design"
+              id: "chamber",              label: "Chamber",              title: "Acoustic Geometry",              items: ["Sealed or ported design", "Low-frequency extension", "Transient accuracy", "No coloration"]
             },
             {
-              id: "dsp",              title: "DSP Module",              description: "Real-time processing for room correction, phase alignment, and adaptive EQ. Firmware updateable.",              imageSrc: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=800&q=80",              imageAlt: "DSP processing module"
+              id: "dsp",              label: "DSP",              title: "Real-Time Processing",              items: ["Room correction", "Phase alignment", "Adaptive EQ", "Firmware updateable"]
             },
             {
-              id: "isolation",              title: "Isolation + Damping",              description: "Decoupled mounting and internal bracing suppress resonance and panel modes for clean, detailed imaging.",              imageSrc: "https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800&q=80",              imageAlt: "Isolation and damping materials"
+              id: "isolation",              label: "Isolation",              title: "Resonance Suppression",              items: ["Decoupled mounting", "Internal bracing", "Panel damping", "Clean imaging"]
             }
           ]}
-          animationType="slide-up"
+          animationType="scale-rotate"
           textboxLayout="default"
           useInvertedBackground="invertDefault"
-          gridVariant="bento-grid-inverted"
         />
       </div>
 

src/app/support/page.tsx

@@ -1,25 +1,25 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import FaqBase from '@/components/sections/faq/FaqBase';
-import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
+import { MessageSquare } from "lucide-react";
 
 export default function SupportPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="radialGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="inset-glow"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -32,7 +32,7 @@ export default function SupportPage() {
             { name: "Support", id: "/support" }
           ]}
           button={{ text: "Shop", href: "#shop" }}
-          className="backdrop-blur-md border border-purple-600"
+          className="backdrop-blur-lg border border-accent/40"
         />
       </div>
 
@@ -64,18 +64,15 @@ export default function SupportPage() {
       </div>
 
       <div id="contact" data-section="contact">
-        <ContactSplitForm
-          title="Get in Touch"
-          description="Have questions? Our team is here to help. Send us a message and we'll get back to you within 24 hours."
-          inputs={[
-            { name: "name", type: "text", placeholder: "Your Name", required: true },
-            { name: "email", type: "email", placeholder: "Your Email", required: true }
-          ]}
-          textarea={{ name: "message", placeholder: "How can we help?", rows: 5, required: true }}
+        <ContactCenter
+          tag="Newsletter"
+          title="Stay Updated"
+          description="Get the latest specs, performance updates, and exclusive field test results delivered to your inbox."
+          tagIcon={MessageSquare}
           useInvertedBackground="invertDefault"
-          imageSrc="https://images.unsplash.com/photo-1478737270239-2f02b77fc618?w=800&q=80"
-          mediaPosition="right"
-          buttonText="Send Message"
+          inputPlaceholder="your@email.com"
+          buttonText="Subscribe"
+          onSubmit={(email) => console.log('Newsletter signup:', email)}
         />
       </div>
 

src/app/systems/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import Link from "next/link";
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
@@ -9,16 +8,16 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 export default function SystemsPage() {
   return (
     <ThemeProvider
-      defaultButtonVariant="elastic-effect"
-      defaultTextAnimation="background-highlight"
-      borderRadius="pill"
-      contentWidth="medium"
-      sizing="largeSmall"
-      background="radialGradient"
-      cardStyle="glass-elevated"
-      primaryButtonStyle="inset-glow"
-      secondaryButtonStyle="glass"
-      headingFontWeight="extrabold"
+      defaultButtonVariant="bounce-effect"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="mediumLarge"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="radial-glow"
+      secondaryButtonStyle="layered"
+      headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
         <NavbarLayoutFloatingOverlay
@@ -31,7 +30,7 @@ export default function SystemsPage() {
             { name: "Support", id: "/support" }
           ]}
           button={{ text: "Shop", href: "#shop" }}
-          className="backdrop-blur-md border border-purple-600"
+          className="backdrop-blur-lg border border-accent/40"
         />
       </div>
 
@@ -54,7 +53,7 @@ export default function SystemsPage() {
             }
           ]}
           textboxLayout="default"
-          animationType="slide-up"
+          animationType="scale-rotate"
           gridVariant="three-columns-all-equal-width"
           useInvertedBackground="noInvert"
         />