Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -2,10 +2,10 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
-import ContactCenter from '@/components/sections/contact/ContactCenter';
+import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureBorderGlow from '@/components/sections/feature/featureBorderGlow/FeatureBorderGlow';
-import FooterMedia from '@/components/sections/footer/FooterMedia';
+import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
@@ -23,93 +23,38 @@ export default function LandingPage() {
         contentWidth="compact"
         sizing="largeSmallSizeLargeTitles"
         background="blurBottom"
-        cardStyle="gradient-mesh"
+        cardStyle="subtle-shadow"
-        primaryButtonStyle="radial-glow"
+        primaryButtonStyle="shadow"
-        secondaryButtonStyle="radial-glow"
+        secondaryButtonStyle="glass"
-        headingFontWeight="extrabold"
+        headingFontWeight="semibold"
     >
       <ReactLenis root>
-  <div id="nav" data-section="nav">
+  <div id="nav" data-section="nav" className="fixed top-4 left-1/2 -translate-x-1/2 z-50 w-full max-w-[95%] sm:max-w-2xl">
       <NavbarStyleApple
       navItems={[
-        {
+        { name: "Home", id: "hero" },
-          name: "Home",
+        { name: "About", id: "about" },
-          id: "hero",
+        { name: "Services", id: "features" },
-        },
+        { name: "Contact", id: "contact" },
-        {
-          name: "About",
-          id: "about",
-        },
-        {
-          name: "Services",
-          id: "features",
-        },
-        {
-          name: "Contact",
-          id: "contact",
-        },
       ]}
       brandName="Sandton Pool Care"
     />
   </div>
 
-  <div id="hero" data-section="hero">
+  <div id="hero" data-section="hero" className="min-h-screen flex items-center justify-center bg-[url('https://img.b2bpic.net/free-photo/luxury-swimming-pool_1203-2410.jpg')] bg-cover bg-center">
       <HeroCentered
-      background={{
+      background={{ variant: "gradient-bars" }}
-        variant: "gradient-bars",
-      }}
       title="Expert Pool Maintenance Across Sandton"
       description="Your trusted local pool specialists serving Sandton and surrounding areas within 200km. We ensure your pool stays crystal clear, safe, and swim-ready all year round."
       avatars={[
-        {
+        { src: "http://img.b2bpic.net/free-photo/man-sunglasses-hat-drinking-cocktail-sitting-near-pool_176420-3986.jpg", alt: "Client 1" },
-          src: "http://img.b2bpic.net/free-photo/man-sunglasses-hat-drinking-cocktail-sitting-near-pool_176420-3986.jpg",
+        { src: "http://img.b2bpic.net/free-photo/lovely-young-couple-spend-time-together-home-near-pool-while-chatting-enjoying-tea_158595-6626.jpg", alt: "Client 2" },
-          alt: "Client 1",
+        { src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-going-up-stairs-walking-down-city_176420-4026.jpg", alt: "Client 3" },
-        },
+        { src: "http://img.b2bpic.net/free-photo/attractive-woman-doing-sports-pool-colorful-pink-hoodie-wearing-sunglasses-listening-music-headphones-summer-vacation-play-tennis-sport-style_285396-4057.jpg", alt: "Client 4" },
-        {
+        { src: "http://img.b2bpic.net/free-photo/two-woman-friends-asian-caucasian-with-makeup-swimming-pool-villa_343596-2028.jpg", alt: "Client 5" },
-          src: "http://img.b2bpic.net/free-photo/lovely-young-couple-spend-time-together-home-near-pool-while-chatting-enjoying-tea_158595-6626.jpg",
-          alt: "Client 2",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/young-beautiful-woman-going-up-stairs-walking-down-city_176420-4026.jpg",
-          alt: "Client 3",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/attractive-woman-doing-sports-pool-colorful-pink-hoodie-wearing-sunglasses-listening-music-headphones-summer-vacation-play-tennis-sport-style_285396-4057.jpg",
-          alt: "Client 4",
-        },
-        {
-          src: "http://img.b2bpic.net/free-photo/two-woman-friends-asian-caucasian-with-makeup-swimming-pool-villa_343596-2028.jpg",
-          alt: "Client 5",
-        },
-      ]}
-      buttons={[
-        {
-          text: "Get a Free Quote",
-          href: "#contact",
-        },
-      ]}
-      marqueeItems={[
-        {
-          type: "text",
-          text: "Professional Service",
-        },
-        {
-          type: "text",
-          text: "Licensed Technicians",
-        },
-        {
-          type: "text",
-          text: "200km Radius",
-        },
-        {
-          type: "text",
-          text: "Crystal Clear Water",
-        },
-        {
-          type: "text",
-          text: "Annual Maintenance",
-        },
       ]}
+      buttons={[{ text: "Get a Free Quote", href: "#contact" }]}
+      buttonClassName="shadow-lg hover:shadow-xl transition-shadow scale-105 py-4 px-8 text-lg font-bold"
     />
   </div>
 
@@ -120,18 +65,9 @@ export default function LandingPage() {
       title="Dedicated to Your Pool's Health"
       description="With years of experience in the pool industry, our team brings expert care to residences and estates. From chemical balancing to equipment repair, we treat your pool as if it were our own, covering Sandton and a 200km radius."
       bulletPoints={[
-        {
+        { title: "Expert Care", description: "Professional team trained in the latest pool care standards." },
-          title: "Expert Care",
+        { title: "Comprehensive Service", description: "Chemicals, repairs, filtration systems, and deep cleaning." },
-          description: "Professional team trained in the latest pool care standards.",
+        { title: "Wide Coverage", description: "Based in Sandton, servicing areas up to 200km away." },
-        },
-        {
-          title: "Comprehensive Service",
-          description: "Chemicals, repairs, filtration systems, and deep cleaning.",
-        },
-        {
-          title: "Wide Coverage",
-          description: "Based in Sandton, servicing areas up to 200km away.",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/attractive-woman-doing-sports-pool-colorful-pink-hoodie-wearing-sunglasses-listening-music-headphones-summer-vacation-play-tennis-sport-style_285396-4051.jpg"
       mediaAnimation="slide-up"
@@ -144,21 +80,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       features={[
-        {
+        { title: "Weekly Maintenance", description: "Routine skimming, vacuuming, and chemical checks.", icon: Droplets },
-          title: "Weekly Maintenance",
+        { title: "Equipment Repair", description: "Expert repair of pumps, filters, and heating systems.", icon: Wrench },
-          description: "Routine skimming, vacuuming, and chemical checks.",
+        { title: "Water Analysis", description: "Professional laboratory-grade water testing and balancing.", icon: Droplets },
-          icon: Droplets,
-        },
-        {
-          title: "Equipment Repair",
-          description: "Expert repair of pumps, filters, and heating systems.",
-          icon: Wrench,
-        },
-        {
-          title: "Water Analysis",
-          description: "Professional laboratory-grade water testing and balancing.",
-          icon: Droplets,
-        },
       ]}
       title="Our Professional Services"
       description="We offer a full spectrum of maintenance services to keep your pool perfect."
@@ -171,41 +95,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       plans={[
-        {
+        { id: "basic", badge: "Essential", price: "R 850 /mo", subtitle: "Basic cleaning and balancing", features: ["Weekly skimming", "Vacuuming", "Chemical check"] },
-          id: "basic",
+        { id: "pro", badge: "Popular", price: "R 1,450 /mo", subtitle: "Full pool care service", features: ["All basic features", "Filter backwash", "Equipment inspection", "Priority support"] },
-          badge: "Essential",
+        { id: "estate", badge: "Estate", price: "Custom", subtitle: "Large scale property maintenance", features: ["Large pools", "Complex systems", "Multi-site coverage", "Dedicated account manager"] },
-          price: "R 850 /mo",
-          subtitle: "Basic cleaning and balancing",
-          features: [
-            "Weekly skimming",
-            "Vacuuming",
-            "Chemical check",
-          ],
-        },
-        {
-          id: "pro",
-          badge: "Popular",
-          price: "R 1,450 /mo",
-          subtitle: "Full pool care service",
-          features: [
-            "All basic features",
-            "Filter backwash",
-            "Equipment inspection",
-            "Priority support",
-          ],
-        },
-        {
-          id: "estate",
-          badge: "Estate",
-          price: "Custom",
-          subtitle: "Large scale property maintenance",
-          features: [
-            "Large pools",
-            "Complex systems",
-            "Multi-site coverage",
-            "Dedicated account manager",
-          ],
-        },
       ]}
       title="Simple Pricing Plans"
       description="Choose the maintenance plan that fits your pool size and needs."
@@ -218,24 +110,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       metrics={[
-        {
+        { id: "m1", icon: Droplets, title: "Pools Maintained", value: "250+" },
-          id: "m1",
+        { id: "m2", icon: MapPin, title: "Service Radius (km)", value: "200" },
-          icon: Droplets,
+        { id: "m3", icon: Star, title: "Happy Clients", value: "100%" },
-          title: "Pools Maintained",
-          value: "250+",
-        },
-        {
-          id: "m2",
-          icon: MapPin,
-          title: "Service Radius (km)",
-          value: "200",
-        },
-        {
-          id: "m3",
-          icon: Star,
-          title: "Happy Clients",
-          value: "100%",
-        },
       ]}
       title="Service Impact"
       description="Trust in our performance and commitment to quality."
@@ -248,60 +125,16 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       testimonials={[
-        {
+        { id: "1", name: "Sarah J.", role: "Resident", company: "Sandton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-relaxing-around-outdoor-swimming-pool-hotel-resort-nearly-sea_74190-13358.jpg" },
-          id: "1",
+        { id: "2", name: "Michael B.", role: "Homeowner", company: "Sandton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/confident-hispanic-expert-explaining-his-idea_1262-16155.jpg" },
-          name: "Sarah J.",
+        { id: "3", name: "Jane D.", role: "Estate Manager", company: "Kyalami", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/businesswoman_23-2148006217.jpg" },
-          role: "Resident",
+        { id: "4", name: "David L.", role: "Resident", company: "Bryanston", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/couple-starting-position-pool_23-2147664411.jpg" },
-          company: "Sandton",
+        { id: "5", name: "Linda M.", role: "Homeowner", company: "Sandton", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg" },
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-beautiful-young-asian-woman-relaxing-around-outdoor-swimming-pool-hotel-resort-nearly-sea_74190-13358.jpg",
-        },
-        {
-          id: "2",
-          name: "Michael B.",
-          role: "Homeowner",
-          company: "Sandton",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/confident-hispanic-expert-explaining-his-idea_1262-16155.jpg",
-        },
-        {
-          id: "3",
-          name: "Jane D.",
-          role: "Estate Manager",
-          company: "Kyalami",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/businesswoman_23-2148006217.jpg",
-        },
-        {
-          id: "4",
-          name: "David L.",
-          role: "Resident",
-          company: "Bryanston",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/couple-starting-position-pool_23-2147664411.jpg",
-        },
-        {
-          id: "5",
-          name: "Linda M.",
-          role: "Homeowner",
-          company: "Sandton",
-          rating: 5,
-          imageSrc: "http://img.b2bpic.net/free-photo/portrait-happy-black-auto-mechanic-workshop_637285-9406.jpg",
-        },
       ]}
       kpiItems={[
-        {
+        { value: "5.0", label: "Avg Rating" },
-          value: "5.0",
+        { value: "100%", label: "Client Retention" },
-          label: "Avg Rating",
+        { value: "24h", label: "Response Time" },
-        },
-        {
-          value: "100%",
-          label: "Client Retention",
-        },
-        {
-          value: "24h",
-          label: "Response Time",
-        },
       ]}
       title="What Our Clients Say"
       description="Hear from the happy home owners and estate managers we serve."
@@ -313,21 +146,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        {
+        { id: "f1", title: "What areas do you cover?", content: "We are based in Sandton and cover a 200km radius including surrounding regions." },
-          id: "f1",
+        { id: "f2", title: "How often should I clean my pool?", content: "Depending on usage and weather, we recommend a minimum of once-a-week cleaning." },
-          title: "What areas do you cover?",
+        { id: "f3", title: "Do you offer emergency repairs?", content: "Yes, we prioritize emergency pump and equipment repairs for our contract clients." },
-          content: "We are based in Sandton and cover a 200km radius including surrounding regions.",
-        },
-        {
-          id: "f2",
-          title: "How often should I clean my pool?",
-          content: "Depending on usage and weather, we recommend a minimum of once-a-week cleaning.",
-        },
-        {
-          id: "f3",
-          title: "Do you offer emergency repairs?",
-          content: "Yes, we prioritize emergency pump and equipment repairs for our contract clients.",
-        },
       ]}
       title="Frequently Asked Questions"
       description="Have questions about our maintenance services?"
@@ -336,56 +157,22 @@ export default function LandingPage() {
   </div>
 
   <div id="contact" data-section="contact">
-      <ContactCenter
+      <ContactCTA
-      useInvertedBackground={false}
-      background={{
-        variant: "gradient-bars",
-      }}
       tag="Get In Touch"
       title="Book Your Maintenance Visit"
-      description="Ready to get your pool in top shape? Contact us for a free evaluation."
+      description="Ready to get your pool in top shape? Our team is standing by to provide a free, no-obligation evaluation of your pool care needs. Let's make your pool a sparkling oasis."
+      buttons={[{ text: "Get Started", href: "#contact" }]}
+      background={{ variant: "sparkles-gradient" }}
+      useInvertedBackground={false}
     />
   </div>
 
   <div id="footer" data-section="footer">
-      <FooterMedia
+      <FooterBaseCard
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6ua8o8"
       logoText="Sandton Pool Care"
       columns={[
-        {
+        { title: "Services", items: [{ label: "Pool Cleaning", href: "#features" }, { label: "Repair Services", href: "#features" }, { label: "Pricing", href: "#pricing" }] },
-          title: "Services",
+        { title: "Company", items: [{ label: "About Us", href: "#about" }, { label: "Contact", href: "#contact" }, { label: "FAQ", href: "#faq" }] },
-          items: [
-            {
-              label: "Pool Cleaning",
-              href: "#features",
-            },
-            {
-              label: "Repair Services",
-              href: "#features",
-            },
-            {
-              label: "Pricing",
-              href: "#pricing",
-            },
-          ],
-        },
-        {
-          title: "Company",
-          items: [
-            {
-              label: "About Us",
-              href: "#about",
-            },
-            {
-              label: "Contact",
-              href: "#contact",
-            },
-            {
-              label: "FAQ",
-              href: "#faq",
-            },
-          ],
-        },
       ]}
     />
   </div>

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #ffffff;
+  --background: #05080f;
-  --card: #f9f9f9;
+  --card: #0f172a;
-  --foreground: #000612e6;
+  --foreground: #f8fafc;
-  --primary-cta: #15479c;
+  --primary-cta: #38bdf8;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f9f9f9;
+  --secondary-cta: #1e293b;
   --secondary-cta-text: #000612e6;
-  --accent: #e2e2e2;
+  --accent: #0ea5e9;
-  --background-accent: #c4c4c4;
+  --background-accent: #020617;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);