Update src/app/page.tsx

Merge version_4 into main

src/app/page.tsx

@@ -8,7 +8,6 @@ import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwen
 import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
 import HeroSplitDoubleCarousel from '@/components/sections/hero/HeroSplitDoubleCarousel';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
-import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
 import { Award, CheckCircle, Clock, Heart, ShieldCheck, ThumbsUp } from "lucide-react";
 
 export default function LandingPage() {
@@ -88,7 +87,7 @@ export default function LandingPage() {
       metrics={[
         {
           icon: CheckCircle,
-          label: "Years of Experience",          value: "2008"},
+          label: "Years of Experience",          value: "16+ Years"},
         {
           icon: Award,
           label: "Dedicated Specialist",          value: "Direct Access"},
@@ -125,7 +124,7 @@ export default function LandingPage() {
       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."
       buttons={[
         {
-            text: "Contact Us",            href: "/contact"
+            text: "Get Free Consultation",            href: "/contact"
         }
       ]}
       faqsAnimation="slide-up"
@@ -162,34 +161,6 @@ export default function LandingPage() {
     />
   </div>
 
-  <div id="pricing" data-section="pricing">
-      <PricingCardEight
-      animationType="slide-up"
-      textboxLayout="default"
-      useInvertedBackground={false}
-      title="Service Plans"
-      description="Clear, transparent pricing for your interlock needs."
-      plans={[
-        {
-          id: "p1",          badge: "Essential",          price: "$150",          subtitle: "Monthly calibration",          features: [
-            "Full support",            "Device monitoring"],
-          buttons: [
-            {
-              text: "Select",              href: "#"},
-          ],
-        },
-        {
-          id: "p2",          badge: "Premium",          price: "$250",          subtitle: "Full service suite",          features: [
-            "All services included",            "Priority access"],
-          buttons: [
-            {
-              text: "Select",              href: "#"},
-          ],
-        },
-      ]}
-    />
-  </div>
-
   <div id="footer" data-section="footer">
       <FooterLogoEmphasis
       columns={[

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5f4f0;
+  --background: #f5faff;
-  --card: #ffffff;
+  --card: #f1f8ff;
-  --foreground: #1a1a1a;
+  --foreground: #001122;
-  --primary-cta: #2c2c2c;
+  --primary-cta: #15479c;
   --primary-cta-text: #f5f4f0;
-  --secondary-cta: #f5f4f0;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #1a1a1a;
-  --accent: #8a8a8a;
+  --accent: #a8cce8;
-  --background-accent: #e8e6e1;
+  --background-accent: #7ba3cf;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);