Update src/app/styles/variables.css

Merge version_2 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactCTA from '@/components/sections/contact/ContactCTA';
 import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
 import FooterCard from '@/components/sections/footer/FooterCard';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
-import MediaAbout from '@/components/sections/about/MediaAbout';
+import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
 import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
@@ -21,7 +21,7 @@ export default function LandingPage() {
         borderRadius="soft"
         contentWidth="medium"
         sizing="mediumSizeLargeTitles"
-        background="aurora"
+        background="none"
         cardStyle="subtle-shadow"
         primaryButtonStyle="radial-glow"
         secondaryButtonStyle="radial-glow"
@@ -32,33 +32,21 @@ export default function LandingPage() {
       <NavbarStyleFullscreen
       navItems={[
         {
-          name: "Home",
+          name: "Home",          id: "#home"},
-          id: "#home",
-        },
         {
-          name: "Services",
+          name: "Services",          id: "#services"},
-          id: "#services",
-        },
         {
-          name: "About",
+          name: "About",          id: "#about"},
-          id: "#about",
-        },
         {
-          name: "Reviews",
+          name: "Reviews",          id: "#reviews"},
-          id: "#reviews",
-        },
         {
-          name: "Contact",
+          name: "Contact",          id: "#contact"},
-          id: "#contact",
-        },
       ]}
       logoSrc="http://img.b2bpic.net/free-vector/hand-drawn-jewelry-logo-collection_23-2148888199.jpg"
       logoAlt="Quartz Plumbing & Heating Logo"
       brandName="QUARTZ Plumbing & Heating"
       button={{
-        text: "Call Now",
+        text: "Call Now",        href: "tel:+441234567890"}}
-        href: "tel:+441234567890",
-      }}
     />
   </div>
 
@@ -68,13 +56,9 @@ export default function LandingPage() {
       description="Your Heating & Plumbing, Done Properly.\n\nFast, reliable, and expert plumbing and heating services across Wales. Boiler installations, repairs, radiators, gas appliances — delivered with precision by a Gas Safe registered engineer you can actually trust."
       buttons={[
         {
-          text: "Get a Free Quote",
+          text: "Get a Free Quote",          href: "#contact"},
-          href: "#contact",
-        },
         {
-          text: "See Our Reviews ↓",
+          text: "See Our Reviews ↓",          href: "#reviews"},
-          href: "#reviews",
-        },
       ]}
       imageSrc="http://img.b2bpic.net/free-photo/transparent-quartz-crystal-levitates-dark-background-generated-by-ai_188544-24555.jpg"
       imageAlt="Modern boiler installation or clean pipework, representing plumbing & heating."
@@ -88,47 +72,23 @@ export default function LandingPage() {
       useInvertedBackground={false}
       features={[
         {
-          id: "s1",
+          id: "s1",          title: "Boiler Installation",          tags: [],
-          title: "Boiler Installation",
+          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-plumbing-company-logo_742173-6834.jpg",          imageAlt: "Icon for boiler installation"},
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-plumbing-company-logo_742173-6834.jpg",
-          imageAlt: "Icon for boiler installation",
-        },
         {
-          id: "s2",
+          id: "s2",          title: "Boiler Repair & Servicing",          tags: [],
-          title: "Boiler Repair & Servicing",
+          imageSrc: "http://img.b2bpic.net/free-photo/close-up-skillful-technician-commissioned-outside-hvac-system-routine-maintenance-looking-refrigerant-issues-meticulous-mechanic-doing-air-conditioner-inspection-writing-data-tablet_482257-66265.jpg",          imageAlt: "Icon for boiler repair"},
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-photo/close-up-skillful-technician-commissioned-outside-hvac-system-routine-maintenance-looking-refrigerant-issues-meticulous-mechanic-doing-air-conditioner-inspection-writing-data-tablet_482257-66265.jpg",
-          imageAlt: "Icon for boiler repair",
-        },
         {
-          id: "s3",
+          id: "s3",          title: "Radiator Installation",          tags: [],
-          title: "Radiator Installation",
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-fixing-plug_53876-20682.jpg",          imageAlt: "Icon for radiator installation"},
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-fixing-plug_53876-20682.jpg",
-          imageAlt: "Icon for radiator installation",
-        },
         {
-          id: "s4",
+          id: "s4",          title: "Gas Appliances",          tags: [],
-          title: "Gas Appliances",
+          imageSrc: "http://img.b2bpic.net/free-vector/burning-gas-stove-with-blue-flame-top-side-view_107791-3778.jpg",          imageAlt: "Icon for gas appliances"},
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-vector/burning-gas-stove-with-blue-flame-top-side-view_107791-3778.jpg",
-          imageAlt: "Icon for gas appliances",
-        },
         {
-          id: "s5",
+          id: "s5",          title: "Shower Installation",          tags: [],
-          title: "Shower Installation",
+          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-as-plumber_23-2150746318.jpg",          imageAlt: "Icon for shower installation"},
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-photo/side-view-man-working-as-plumber_23-2150746318.jpg",
-          imageAlt: "Icon for shower installation",
-        },
         {
-          id: "s6",
+          id: "s6",          title: "Emergency Plumbing",          tags: [],
-          title: "Emergency Plumbing",
+          imageSrc: "http://img.b2bpic.net/free-photo/faucet-water-tap-droplet-icon-sign_53876-128089.jpg",          imageAlt: "Icon for emergency plumbing"},
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-photo/faucet-water-tap-droplet-icon-sign_53876-128089.jpg",
-          imageAlt: "Icon for emergency plumbing",
-        },
       ]}
       title="Everything Your Home Needs to Stay Warm & Running"
       description="From emergency repairs to full system installations, our expert team delivers precision, reliability, and service done right."
@@ -143,29 +103,17 @@ export default function LandingPage() {
       useInvertedBackground={true}
       metrics={[
         {
-          id: "m1",
+          id: "m1",          icon: Star,
-          icon: Star,
+          title: "Average Google Rating",          value: "5.0"},
-          title: "Average Google Rating",
-          value: "5.0",
-        },
         {
-          id: "m2",
+          id: "m2",          icon: Users,
-          icon: Users,
+          title: "Verified Reviews",          value: "33"},
-          title: "Verified Reviews",
-          value: "33",
-        },
         {
-          id: "m3",
+          id: "m3",          icon: Clock,
-          icon: Clock,
+          title: "Jobs Completed Same or Next Day",          value: "100%"},
-          title: "Jobs Completed Same or Next Day",
-          value: "100%",
-        },
         {
-          id: "m4",
+          id: "m4",          icon: Award,
-          icon: Award,
+          title: "Years Experience",          value: "10+"},
-          title: "Years Experience",
-          value: "10+",
-        },
       ]}
       title="The Difference is in the Detail"
       description="At Quartz, we believe a trades person's reputation is built one job at a time. Every visit, Abdi arrives on time, explains clearly what's needed, gives an honest price, and leaves the space cleaner than he found it. No upselling. No surprises. Just expert work done properly.\n\nTransparent pricing — you'll always know the cost upfront\nExpert diagnostics — we find the real problem, not the easy fix\nProfessional and respectful in your home\nAfter-hours availability when genuinely needed\nGas Safe registered and fully insured"
@@ -177,56 +125,43 @@ export default function LandingPage() {
       useInvertedBackground={false}
       testimonials={[
         {
-          id: "t1",
+          id: "t1",          name: "Jodie Ryatt",          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-businesswoman-smiling-happy-standing-city_839833-14128.jpg"},
-          name: "Jodie Ryatt",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-businesswoman-smiling-happy-standing-city_839833-14128.jpg",
-        },
         {
-          id: "t2",
+          id: "t2",          name: "Rhys Morgan",          imageSrc: "http://img.b2bpic.net/free-photo/experienced-grey-haired-businessman-standing_74855-9871.jpg"},
-          name: "Rhys Morgan",
-          imageSrc: "http://img.b2bpic.net/free-photo/experienced-grey-haired-businessman-standing_74855-9871.jpg",
-        },
         {
-          id: "t3",
+          id: "t3",          name: "Ali Mohammed",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-teenage-girl-looking-camera_23-2147839599.jpg"},
-          name: "Ali Mohammed",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-teenage-girl-looking-camera_23-2147839599.jpg",
-        },
         {
-          id: "t4",
+          id: "t4",          name: "Angela Roberts",          imageSrc: "http://img.b2bpic.net/free-photo/relaxed-confident-young-woman-with-dark-hair-wearing-black-clothing-looking-with-charming-smile-resting-elbow-wooden-table-with-mug-dessert-while-having-coffee-restaurant_273609-76.jpg"},
-          name: "Angela Roberts",
-          imageSrc: "http://img.b2bpic.net/free-photo/relaxed-confident-young-woman-with-dark-hair-wearing-black-clothing-looking-with-charming-smile-resting-elbow-wooden-table-with-mug-dessert-while-having-coffee-restaurant_273609-76.jpg",
-        },
         {
-          id: "t5",
+          id: "t5",          name: "Matthew Watkins",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg"},
-          name: "Matthew Watkins",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg",
-        },
         {
-          id: "t6",
+          id: "t6",          name: "Connor Reid",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-clothes-trendy-girl-posing-street-background-funny-positive-woman-having-fun_158538-16144.jpg"},
-          name: "Connor Reid",
-          imageSrc: "http://img.b2bpic.net/free-photo/closeup-portrait-beautiful-smiling-brunette-model-dressed-summer-hipster-clothes-trendy-girl-posing-street-background-funny-positive-woman-having-fun_158538-16144.jpg",
-        },
       ]}
       cardTitle="Trusted Across Wales"
       cardTag="WHAT CUSTOMERS SAY"
       buttons={[
         {
-          text: "Read all 33 reviews on Google →",
+          text: "Read all 33 reviews on Google →",          href: "https://www.google.com/search?q=Quartz+Plumbing+%26+Heating+reviews"},
-          href: "https://www.google.com/search?q=Quartz+Plumbing+%26+Heating+reviews",
-        },
       ]}
       cardAnimation="slide-up"
     />
   </div>
 
   <div id="about" data-section="about">
-      <MediaAbout
+      <MetricSplitMediaAbout
       useInvertedBackground={true}
-      title="The Person Behind Every Job"
+      title="Meet Your Expert Engineer, Abdi"
-      description="Quartz Plumbing & Heating was founded on a simple principle: do the work properly, treat people with respect, and always be honest about what's needed.\nAbdi is a Gas Safe registered engineer with years of hands-on experience in boiler installations, heating systems, and general plumbing. Customers consistently describe him as thorough, transparent, and genuinely passionate about the quality of his work.\nWhether it's a quick repair or a full boiler replacement, you'll always deal directly with Abdi — no subcontractors, no surprises.\n\n🔷 Gas Safe Registered\n🔷 Fully Insured\n🔷 Google 5-Star Rated"
+      description="Quartz Plumbing & Heating was founded on a simple principle: do the work properly, treat people with respect, and always be honest about what's needed.\n\nAbdi is a Gas Safe registered engineer with years of hands-on experience in boiler installations, heating systems, and general plumbing. Customers consistently describe him as thorough, transparent, and genuinely passionate about the quality of his work.\n\nWhether it's a quick repair or a full boiler replacement, you'll always deal directly with Abdi — no subcontractors, no surprises."
-      tag="MEET YOUR ENGINEER"
+      tag="ABOUT ABDI"
       imageSrc="http://img.b2bpic.net/free-photo/doubtful-young-caucasian-delivery-man-blue-uniform-cap-standing-with-closed-posture-looking-camera-isolated-white-wall-with-copy-space_141793-113753.jpg"
       imageAlt="Professional photo of Abdi, lead engineer"
+      mediaAnimation="slide-up"
+      metricsAnimation="slide-up"
+      metrics={[
+        { value: "🔷", title: "Gas Safe Registered" },
+        { value: "🔷", title: "Fully Insured" },
+        { value: "🔷", title: "Google 5-Star Rated" }
+      ]}
     />
   </div>
 
@@ -235,14 +170,7 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       names={[
-        "Gas Safe Registered",
+        "Gas Safe Registered",        "5-Star Rated on Google",        "Trusted Service",        "Reliable Workmanship",        "Customer Satisfaction Guaranteed",        "Local Expertise",        "Transparent Pricing"]}
-        "5-Star Rated on Google",
-        "Trusted Service",
-        "Reliable Workmanship",
-        "Customer Satisfaction Guaranteed",
-        "Local Expertise",
-        "Transparent Pricing",
-      ]}
       title="Committed to Excellence"
       description="Our commitment to quality and safety is backed by industry standards and customer satisfaction. We uphold the highest standards in every service we provide."
       tag="OUR PROMISE"
@@ -253,24 +181,17 @@ export default function LandingPage() {
       <ContactCTA
       useInvertedBackground={true}
       background={{
-        variant: "radial-gradient",
+        variant: "radial-gradient"}}
-      }}
       tag="GET IN TOUCH"
       title="Ready to Get Started?"
       description="Call or message today for a free, no-obligation quote. Our team is ready to provide fast, reliable, and expert service across Wales."
       buttons={[
         {
-          text: "Call +44 1234 567890",
+          text: "Call +44 1234 567890",          href: "tel:+441234567890"},
-          href: "tel:+441234567890",
-        },
         {
-          text: "Request a Quote →",
+          text: "Request a Quote →",          href: "mailto:info@quartzplumbing.com"},
-          href: "mailto:info@quartzplumbing.com",
-        },
         {
-          text: "Prefer to message? Contact on WhatsApp →",
+          text: "Prefer to message? Contact on WhatsApp →",          href: "https://wa.me/441234567890"},
-          href: "https://wa.me/441234567890",
-        },
       ]}
     />
   </div>
@@ -284,4 +205,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-inter), sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-inter-tight), sans-serif;
+  font-family: var(--font-dm-sans), sans-serif;
 }

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #0F1117;
+  --background: #ffffff;
-  --card: #181C26;
+  --card: #fcfcfc;
-  --foreground: #F5F0E8;
+  --foreground: #1f2937;
-  --primary-cta: #C8963E;
+  --primary-cta: #2563eb;
-  --primary-cta-text: #0F1117;
+  --primary-cta-text: #f5faff;
-  --secondary-cta: #F5F0E8;
+  --secondary-cta: #60a5fa;
-  --secondary-cta-text: #C8963E;
+  --secondary-cta-text: #001122;
-  --accent: #E8B86D;
+  --accent: #0ea5e9;
-  --background-accent: #2A2F3E;
+  --background-accent: #f9fafb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);