Update src/app/styles/variables.css

Merge version_6 into main

src/app/page.tsx

@@ -19,26 +19,21 @@ export default function LandingPage() {
         borderRadius="pill"
         contentWidth="smallMedium"
         sizing="mediumLarge"
-        background="grid"
+        background="floatingGradient"
-        cardStyle="subtle-shadow"
+        cardStyle="glass-depth"
-        primaryButtonStyle="gradient"
+        primaryButtonStyle="primary-glow"
-        secondaryButtonStyle="glass"
+        secondaryButtonStyle="layered"
-        headingFontWeight="normal"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Home", id: "/" },
-          name: "Home",          id: "/"},
+        { name: "Services", id: "/services" },
-        {
+        { name: "How It Works", id: "/how-it-works" },
-          name: "Services",          id: "/services"},
+        { name: "About", id: "/about" },
-        {
+        { name: "Contact", id: "/contact" },
-          name: "How It Works",          id: "/how-it-works"},
-        {
-          name: "About",          id: "/about"},
-        {
-          name: "Contact",          id: "/contact"},
       ]}
       brandName="Nicks 2 Interlock"
     />
@@ -46,150 +41,76 @@ export default function LandingPage() {
 
   <div id="hero" data-section="hero">
       <HeroSplitDoubleCarousel
-      background={{
+      background={{ variant: "glowing-orb" }}
-        variant: "gradient-bars"}}
       title="Get Back on the Road with Confidence"
       description="Professional, reliable ignition interlock services in Longmont and surrounding Colorado areas. We provide personal care to help you move forward."
       leftCarouselItems={[
-        {
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/modern-interlock-device-inside-a-car-das-1774639652262-ff35b505.png", imageAlt: "Professional interlock installation" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/modern-interlock-device-inside-a-car-das-1774639652262-ff35b505.png",          imageAlt: "Professional interlock installation"},
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.png?_wi=1", imageAlt: "Certified interlock calibration service" },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.png?_wi=1",          imageAlt: "Certified interlock calibration service"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/close-up-hands-holding-interlock-device--1774639652513-34eed392.png",          imageAlt: "Personalized client service experience"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/professional-auto-garage-service-bay-cle-1774639652687-1fcf82c9.png",          imageAlt: "Reliable device maintenance"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/car-keys-hanging-from-ignition-bokeh-eff-1774639651688-ca4a0ab4.png",          imageAlt: "Helping you get back on the road"},
       ]}
       rightCarouselItems={[
-        {
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/removing-interlock-device-from-car-conso-1774639658277-e5a00ffe.png", imageAlt: "Efficient device removal process" },
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/removing-interlock-device-from-car-conso-1774639658277-e5a00ffe.png",          imageAlt: "Efficient device removal process"},
+        { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/bright-and-clean-workshop-space-modern-f-1774639652470-f0dc2695.png?_wi=1", imageAlt: "Clean and professional facilities" },
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/detail-shot-of-diagnostic-tool-plugged-i-1774639652644-abb41512.png?_wi=1",          imageAlt: "Expert technicians at work"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/bright-and-clean-workshop-space-modern-f-1774639652470-f0dc2695.png?_wi=1",          imageAlt: "Clean and professional facilities"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/client-being-helped-gentle-professional--1774639652359-aa6ff784.png?_wi=1",          imageAlt: "Dedicated to your success"},
-        {
-          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/supportive-environment-calm-atmosphere-p-1774639652859-96ac00f9.png?_wi=1",          imageAlt: "Supportive and non-judgmental care"},
-      ]}
-      buttons={[
-        {
-          text: "Call Now to Schedule",          href: "tel:+15550102030"},
       ]}
+      buttons={[{ text: "Call Now to Schedule", href: "tel:+15550102030" }]}
     />
   </div>
 
   <div id="why-choose-us" data-section="why-choose-us">
       <AboutMetric
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Why Choose Nicks 2 Interlock?"
       metrics={[
-        {
+        { icon: CheckCircle, label: "Years of Experience", value: "16+" },
-          icon: CheckCircle,
+        { icon: Award, label: "Dedicated Specialist", value: "Direct" },
-          label: "Years of Experience",          value: "16+ Years"},
+        { icon: ShieldCheck, label: "Compliance Ready", value: "100%" }
-        {
-          icon: Award,
-          label: "Dedicated Specialist",          value: "Direct Access"},
-        {
-          icon: ThumbsUp,
-          label: "Client Focus",          value: "Personalized"},
-        {
-          icon: ShieldCheck,
-          label: "Compliance Ready",          value: "100%"},
-        {
-          icon: Clock,
-          label: "Same Day Support",          value: "Reliable"},
       ]}
-      metricsAnimation="slide-up"
+      metricsAnimation="blur-reveal"
     />
   </div>
 
   <div id="social-proof" data-section="social-proof">
       <SocialProofOne
-      names={["Trusted by Hundreds", "Verified by State", "Certified Partner", "Longmont Community", "Colorado Experts"]}
+      names={["Trusted by Hundreds", "Verified by State", "Certified Partner"]}
       title="Trust Index"
-      description="Real feedback from our satisfied clients in the community."
+      description="Real feedback from our satisfied clients."
-      textboxLayout="default"
+      textboxLayout="split"
-      useInvertedBackground={true}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="faq" data-section="faq">
       <FaqSplitText
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       faqs={[
-        {
+        { id: "f1", title: "What is an ignition interlock device?", content: "It is a breath-test device connected to your vehicle's ignition system." },
-          id: "f1",          title: "What is an ignition interlock device?",          content: "It is a breath-test device connected to your vehicle's ignition system."},
+        { id: "f2", title: "How often do I need calibration?", content: "Regular calibration is required to ensure accuracy." },
-        {
-          id: "f2",          title: "How often do I need calibration?",          content: "Regular calibration is required to ensure accuracy and meet compliance needs."},
-        {
-          id: "f3",          title: "How long does installation take?",          content: "Most installations are efficient. We respect your time."},
-        {
-          id: "f4",          title: "Is the process confidential?",          content: "Yes, we prioritize your privacy and provide a non-judgmental environment."},
-        {
-          id: "f5",          title: "Can I remove the device early?",          content: "Removal requires specific state-mandated documentation which we assist with."},
       ]}
       sideTitle="Answers to Your Questions"
-      sideDescription="We're here to make this process as simple as possible. Reach out anytime. If your question isn't answered here, please contact our team directly for assistance."
+      faqsAnimation="blur-reveal"
-      buttons={[
-        {
-            text: "Get Free Consultation",            href: "/contact"
-        }
-      ]}
-      faqsAnimation="slide-up"
     />
   </div>
 
   <div id="feature" data-section="feature">
       <FeatureCardTwentyFive
-      animationType="slide-up"
+      animationType="depth-3d"
-      textboxLayout="default"
+      textboxLayout="split-description"
-      useInvertedBackground={false}
+      useInvertedBackground={true}
       title="Why Clients Trust Us"
-      description="We focus on providing a seamless and supportive experience for all our clients."
+      description="We focus on a seamless and supportive experience."
       features={[
-        {
+        { title: "Personalized Care", description: "Respectful and understanding service.", icon: Heart, mediaItems: [{ imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/client-being-helped-gentle-professional--1774639652359-aa6ff784.png?_wi=2" }, { imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/supportive-environment-calm-atmosphere-p-1774639652859-96ac00f9.png?_wi=2" }] },
-          title: "Personalized Care",          description: "We treat every client with respect and understanding.",          icon: Heart,
-          mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/client-being-helped-gentle-professional--1774639652359-aa6ff784.png?_wi=2"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/supportive-environment-calm-atmosphere-p-1774639652859-96ac00f9.png?_wi=2"},
-          ],
-        },
-        {
-          title: "Certified Standards",          description: "Our work meets all state requirements for interlock devices.",          icon: Award,
-          mediaItems: [
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/technician-checking-interlock-device-in--1774639651814-4a93081c.png?_wi=2"},
-            {
-              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AXyOrSaZWfuzAUSsqC1adzoZvF/detailed-technical-manual-on-a-clipboard-1774639652630-8adf3acc.png?_wi=1"},
-          ],
-        },
       ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
-      columns={[
+      columns={[{ items: [{ label: "Home", href: "/" }, { label: "Services", href: "/services" }, { label: "Contact", href: "/contact" }] }]}
-        {
+      logoText="Nicks 2 Interlock"
-          items: [
-            {
-              label: "Home",              href: "/"},
-            {
-              label: "Services",              href: "/services"},
-            {
-              label: "Contact",              href: "/contact"},
-          ],
-        },
-      ]}
-      logoText="Nicks 2 Interlock Services"
     />
   </div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
+  --background: #020617;
-  --card: #f1f8ff;
+  --card: #0f172a;
-  --foreground: #001122;
+  --foreground: #e2e8f0;
-  --primary-cta: #15479c;
+  --primary-cta: #3b82f6;
   --primary-cta-text: #f5f4f0;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #1e293b;
   --secondary-cta-text: #1a1a1a;
-  --accent: #a8cce8;
+  --accent: #60a5fa;
-  --background-accent: #7ba3cf;
+  --background-accent: #1e3a8a;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);