Update theme colors

2026-04-29 21:14:11 +00:00
4 changed files with 144 additions and 57 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,8 +7,6 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 import { Nunito_Sans } from "next/font/google";
-import { Libre_Baskerville } from "next/font/google";
-import { Open_Sans } from "next/font/google";



@@ -22,14 +20,8 @@ export const metadata: Metadata = {
  },
 };

-
-
-const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
-});
-const openSans = Open_Sans({
-  variable: "--font-open-sans",
+const nunitoSans = Nunito_Sans({
+  variable: "--font-nunito-sans",
  subsets: ["latin"],
 });

@@ -41,7 +33,7 @@ export default function RootLayout({
  return (
    <html lang="en" suppressHydrationWarning>
      <ServiceWrapper>
-        <body className={`${inter.variable} ${openSans.variable} antialiased`}>
+        <body className={`${nunitoSans.variable} antialiased`}>
          <Tag />
          {children}
          <script
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -31,11 +31,17 @@ export default function LandingPage() {
      <NavbarStyleApple
      navItems={[
        {
-          name: "Services",          id: "#services"},
+          name: "Services",
+          id: "#services",
+        },
        {
-          name: "Booking",          id: "#booking"},
+          name: "Booking",
+          id: "#booking",
+        },
        {
-          name: "Contact",          id: "#contact"},
+          name: "Contact",
+          id: "#contact",
+        },
      ]}
      brandName="Super Wash"
    />
@@ -44,26 +50,41 @@ export default function LandingPage() {
  <div id="hero" data-section="hero">
      <HeroBillboardGallery
      background={{
-        variant: "gradient-bars"}}
+        variant: "gradient-bars",
+      }}
      title="Your Car Deserves the Best Care in Cape Town"
      description="Fast, affordable, and professional car wash services in Ottery. Experience the Super Wash difference today."
      buttons={[
        {
-          text: "Book on WhatsApp",          href: "https://wa.me/27217037432"},
+          text: "Book on WhatsApp",
+          href: "https://wa.me/27217037432",
+        },
        {
-          text: "Call Now",          href: "tel:+27217037432"},
+          text: "Call Now",
+          href: "tel:+27217037432",
+        },
      ]}
      mediaItems={[
        {
-          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212206.jpg",          imageAlt: "Super Wash Cape Town Facility"},
+          imageSrc: "http://img.b2bpic.net/free-photo/beautiful-car-washing-service_23-2149212206.jpg",
+          imageAlt: "Super Wash Cape Town Facility",
+        },
        {
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-vacuuming-car-seats_23-2149316437.jpg",          imageAlt: "Expert Car Washing"},
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-vacuuming-car-seats_23-2149316437.jpg",
+          imageAlt: "Expert Car Washing",
+        },
        {
-          imageSrc: "http://img.b2bpic.net/free-photo/disabled-fencer-special-equipment-wheelchair_23-2149229610.jpg",          imageAlt: "Interior Detailing Service"},
+          imageSrc: "http://img.b2bpic.net/free-photo/disabled-fencer-special-equipment-wheelchair_23-2149229610.jpg",
+          imageAlt: "Interior Detailing Service",
+        },
        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-washing-car_23-2149316432.jpg",          imageAlt: "Man washing a car"},
+          imageSrc: "http://img.b2bpic.net/free-photo/man-washing-car_23-2149316432.jpg",
+          imageAlt: "Man washing a car",
+        },
        {
-          imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-washing-station_1157-27217.jpg",          imageAlt: "Man washing his car in a washing station"},
+          imageSrc: "http://img.b2bpic.net/free-photo/man-washing-his-car-washing-station_1157-27217.jpg",
+          imageAlt: "Man washing his car in a washing station",
+        },
      ]}
      mediaAnimation="blur-reveal"
    />
@@ -75,17 +96,31 @@ export default function LandingPage() {
      textboxLayout="split"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
-      tag="Most Popular"
-      tagIcon={Tag}
      products={[
        {
-          id: "p1",          name: "Exterior Wash",          price: "R 95",          imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-his-car-carwash_1303-27483.jpg"},
+          id: "p1",
+          name: "Exterior Wash",
+          price: "R 95",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-man-washing-his-car-carwash_1303-27483.jpg",
+        },
        {
-          id: "p2",          name: "Interior Cleaning",          price: "R 120",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193623.jpg"},
+          id: "p2",
+          name: "Interior Cleaning",
+          price: "R 120",
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-car-care-process_23-2149193623.jpg",
+        },
        {
-          id: "p3",          name: "Full Valet",          price: "R 250",          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-valet-doing-his-job_23-2150274594.jpg"},
+          id: "p3",
+          name: "Full Valet",
+          price: "R 250",
+          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-valet-doing-his-job_23-2150274594.jpg",
+        },
        {
-          id: "p4",          name: "Polishing & Detailing",          price: "R 350",          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22285.jpg"},
+          id: "p4",
+          name: "Polishing & Detailing",
+          price: "R 350",
+          imageSrc: "http://img.b2bpic.net/free-photo/car-wash-detailing-station_1303-22285.jpg",
+        },
      ]}
      title="Our Professional Services"
      description="Premium care for every vehicle type, delivered with precision."
@@ -100,19 +135,29 @@ export default function LandingPage() {
      features={[
        {
          icon: Zap,
-          title: "Fast Service",          description: "Get in and out quickly without sacrificing quality."},
+          title: "Fast Service",
+          description: "Get in and out quickly without sacrificing quality.",
+        },
        {
          icon: Tag,
-          title: "Affordable Pricing",          description: "Top-tier results that fit your budget."},
+          title: "Affordable Pricing",
+          description: "Top-tier results that fit your budget.",
+        },
        {
          icon: Users,
-          title: "Friendly Staff",          description: "Our team is passionate about car care."},
+          title: "Friendly Staff",
+          description: "Our team is passionate about car care.",
+        },
        {
          icon: CheckCircle,
-          title: "Quality Results",          description: "A deep clean that brings back the showroom shine."},
+          title: "Quality Results",
+          description: "A deep clean that brings back the showroom shine.",
+        },
        {
          icon: MapPin,
-          title: "Convenient Location",          description: "Located right on Ottery Road, Cape Town."},
+          title: "Convenient Location",
+          description: "Located right on Ottery Road, Cape Town.",
+        },
      ]}
      title="Why Choose Super Wash?"
      description="We treat your vehicle like it's our own, every single time."
@@ -126,17 +171,47 @@ export default function LandingPage() {
      useInvertedBackground={false}
      testimonials={[
        {
-          id: "t1",          name: "Kevin Freeman",          role: "Local Resident",          testimonial: "Value for money and the service was great.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-business-women-posing-pointing-fingers-camera-while-sitting-table-with-coffee-cups-documents_74855-9959.jpg"},
+          id: "t1",
+          name: "Kevin Freeman",
+          role: "Local Resident",
+          testimonial: "Value for money and the service was great.",
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-business-women-posing-pointing-fingers-camera-while-sitting-table-with-coffee-cups-documents_74855-9959.jpg",
+        },
        {
-          id: "t2",          name: "Sarah Miller",          role: "Customer",          testimonial: "Best car wash in Ottery, very quick and efficient.",          imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-looking-laptop-showing-thumb-up-isolated-purple_141793-84110.jpg"},
+          id: "t2",
+          name: "Sarah Miller",
+          role: "Customer",
+          testimonial: "Best car wash in Ottery, very quick and efficient.",
+          imageSrc: "http://img.b2bpic.net/free-photo/joyful-young-bald-call-center-man-wearing-headset-sitting-desk-with-work-tools-looking-laptop-showing-thumb-up-isolated-purple_141793-84110.jpg",
+        },
        {
-          id: "t3",          name: "David Mthembu",          role: "Customer",          testimonial: "Friendly team and my car looks brand new!",          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-woman-wearing-casual-sweater-standing-red-background-pointing-fingers-camera-with-happy-funny-face-good-energy-vibes_839833-6469.jpg"},
+          id: "t3",
+          name: "David Mthembu",
+          role: "Customer",
+          testimonial: "Friendly team and my car looks brand new!",
+          imageSrc: "http://img.b2bpic.net/free-photo/young-beautiful-brunette-woman-wearing-casual-sweater-standing-red-background-pointing-fingers-camera-with-happy-funny-face-good-energy-vibes_839833-6469.jpg",
+        },
        {
-          id: "t4",          name: "Linda Jacobs",          role: "Customer",          testimonial: "Reliable and affordable valeting service.",          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-street_23-2148289283.jpg"},
+          id: "t4",
+          name: "Linda Jacobs",
+          role: "Customer",
+          testimonial: "Reliable and affordable valeting service.",
+          imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-man-street_23-2148289283.jpg",
+        },
        {
-          id: "t5",          name: "Paul Botha",          role: "Customer",          testimonial: "Super Wash never disappoints. Highly recommended.",          imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-recommending-new-business-app_1262-21064.jpg"},
+          id: "t5",
+          name: "Paul Botha",
+          role: "Customer",
+          testimonial: "Super Wash never disappoints. Highly recommended.",
+          imageSrc: "http://img.b2bpic.net/free-photo/happy-businesswoman-recommending-new-business-app_1262-21064.jpg",
+        },
        {
-          id: "t6",          name: "Anita Vermaak",          role: "Customer",          testimonial: "Professional detailing and great finish.",          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-travel-agency_23-2150433448.jpg"},
+          id: "t6",
+          name: "Anita Vermaak",
+          role: "Customer",
+          testimonial: "Professional detailing and great finish.",
+          imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-travel-agency_23-2150433448.jpg",
+        },
      ]}
      title="What Our Customers Say"
      description="Trusted by hundreds of Cape Town locals for quality service."
@@ -160,11 +235,14 @@ export default function LandingPage() {
      <ContactText
      useInvertedBackground={false}
      background={{
-        variant: "gradient-bars"}}
+        variant: "gradient-bars",
+      }}
      text="Ready for a sparkling clean car? Tap below to book via WhatsApp."
      buttons={[
        {
-          text: "WhatsApp Us to Book",          href: "https://wa.me/27217037432?text=Hi,%20I%20would%20like%20to%20book%20a%20car%20wash."},
+          text: "WhatsApp Us to Book",
+          href: "https://wa.me/27217037432?text=Hi,%20I%20would%20like%20to%20book%20a%20car%20wash.",
+        },
      ]}
    />
  </div>
@@ -173,13 +251,18 @@ export default function LandingPage() {
      <ContactText
      useInvertedBackground={false}
      background={{
-        variant: "gradient-bars"}}
+        variant: "gradient-bars",
+      }}
      text="Get in touch or book a slot today via phone or WhatsApp."
      buttons={[
        {
-          text: "Call: 021 703 7432",          href: "tel:+27217037432"},
+          text: "Call: 021 703 7432",
+          href: "tel:+27217037432",
+        },
        {
-          text: "WhatsApp: 021 703 7432",          href: "https://wa.me/27217037432"},
+          text: "WhatsApp: 021 703 7432",
+          href: "https://wa.me/27217037432",
+        },
      ]}
    />
  </div>
@@ -190,21 +273,33 @@ export default function LandingPage() {
      logoText="Super Wash"
      columns={[
        {
-          title: "Company",          items: [
+          title: "Company",
+          items: [
            {
-              label: "Services",              href: "#services"},
+              label: "Services",
+              href: "#services",
+            },
            {
-              label: "Booking",              href: "#booking"},
+              label: "Booking",
+              href: "#booking",
+            },
            {
-              label: "Contact",              href: "#contact"},
+              label: "Contact",
+              href: "#contact",
+            },
          ],
        },
        {
-          title: "Support",          items: [
+          title: "Support",
+          items: [
            {
-              label: "Privacy Policy",              href: "#"},
+              label: "Privacy Policy",
+              href: "#",
+            },
            {
-              label: "Terms of Service",              href: "#"},
+              label: "Terms of Service",
+              href: "#",
+            },
          ],
        },
      ]}
@@ -214,4 +309,4 @@ export default function LandingPage() {
      </ReactLenis>
    </ThemeProvider>
  );
-}
+}
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -11,7 +11,7 @@ html {
 body {
  background-color: var(--background);
  color: var(--foreground);
-  font-family: var(--font-open-sans), sans-serif;
+  font-family: var(--font-nunito-sans), sans-serif;
  position: relative;
  min-height: 100vh;
  overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter), sans-serif;
+  font-family: var(--font-nunito-sans), sans-serif;
 }
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
  --accent: #ffffff;
  --background-accent: #ffffff; */

-  --background: #ffffff;
-  --card: #f9f9f9;
+  --background: #655c5c;
+  --card: #bab6b6;
  --foreground: #000f06e6;
  --primary-cta: #0a7039;
  --primary-cta-text: #ffffff;
  --secondary-cta: #f9f9f9;
  --secondary-cta-text: #000f06e6;
  --accent: #e2e2e2;
-  --background-accent: #c4c4c4;
+  --background-accent: #888787;

  /* text sizing - set by ThemeProvider */
  /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);