Merge version_4 into main

Merge version_4 into main

src/app/page.tsx

@@ -6,12 +6,12 @@ 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';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
-import { Award, Clock, Star, Users } from "lucide-react";
+import { Award, Clock, Star, Users, Facebook, Instagram, X } from "lucide-react";
 
 export default function LandingPage() {
   return (
@@ -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",
-          id: "#home",
-        },
+          name: "Home",          id: "#home"},
         {
-          name: "Services",
-          id: "#services",
-        },
+          name: "Services",          id: "#services"},
         {
-          name: "About",
-          id: "#about",
-        },
+          name: "About",          id: "#about"},
         {
-          name: "Reviews",
-          id: "#reviews",
-        },
+          name: "Reviews",          id: "#reviews"},
         {
-          name: "Contact",
-          id: "#contact",
-        },
+          name: "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",
-        href: "tel:+441234567890",
-      }}
+        text: "Call Now",        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",
-          href: "#contact",
-        },
+          text: "Get a Free Quote",          href: "#contact"},
         {
-          text: "See Our Reviews ↓",
-          href: "#reviews",
-        },
+          text: "See Our 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",
-          title: "Boiler Installation",
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-vector/hand-drawn-plumbing-company-logo_742173-6834.jpg",
-          imageAlt: "Icon for boiler installation",
-        },
+          id: "s1",          title: "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",
-          title: "Boiler Repair & Servicing",
-          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: "s2",          title: "Boiler Repair & Servicing",          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",
-          title: "Radiator Installation",
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-photo/woman-fixing-plug_53876-20682.jpg",
-          imageAlt: "Icon for radiator installation",
-        },
+          id: "s3",          title: "Radiator Installation",          tags: [],
+          imageSrc: "http://img.b2bpic.net/free-photo/woman-fixing-plug_53876-20682.jpg",          imageAlt: "Icon for radiator installation"},
         {
-          id: "s4",
-          title: "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: "s4",          title: "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",
-          title: "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: "s5",          title: "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",
-          title: "Emergency Plumbing",
-          tags: [],
-          imageSrc: "http://img.b2bpic.net/free-photo/faucet-water-tap-droplet-icon-sign_53876-128089.jpg",
-          imageAlt: "Icon for emergency plumbing",
-        },
+          id: "s6",          title: "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",
-          icon: Star,
-          title: "Average Google Rating",
-          value: "5.0",
-        },
+          id: "m1",          icon: Star,
+          title: "Average Google Rating",          value: "5.0"},
         {
-          id: "m2",
-          icon: Users,
-          title: "Verified Reviews",
-          value: "33",
-        },
+          id: "m2",          icon: Users,
+          title: "Verified Reviews",          value: "33"},
         {
-          id: "m3",
-          icon: Clock,
-          title: "Jobs Completed Same or Next Day",
-          value: "100%",
-        },
+          id: "m3",          icon: Clock,
+          title: "Jobs Completed Same or Next Day",          value: "100%"},
         {
-          id: "m4",
-          icon: Award,
-          title: "Years Experience",
-          value: "10+",
-        },
+          id: "m4",          icon: Award,
+          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",
-          name: "Jodie Ryatt",
-          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-businesswoman-smiling-happy-standing-city_839833-14128.jpg",
-        },
+          id: "t1",          name: "Jodie Ryatt",          imageSrc: "http://img.b2bpic.net/free-photo/young-blonde-businesswoman-smiling-happy-standing-city_839833-14128.jpg"},
         {
-          id: "t2",
-          name: "Rhys Morgan",
-          imageSrc: "http://img.b2bpic.net/free-photo/experienced-grey-haired-businessman-standing_74855-9871.jpg",
-        },
+          id: "t2",          name: "Rhys Morgan",          imageSrc: "http://img.b2bpic.net/free-photo/experienced-grey-haired-businessman-standing_74855-9871.jpg"},
         {
-          id: "t3",
-          name: "Ali Mohammed",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-teenage-girl-looking-camera_23-2147839599.jpg",
-        },
+          id: "t3",          name: "Ali Mohammed",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-african-teenage-girl-looking-camera_23-2147839599.jpg"},
         {
-          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",
-        },
+          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"},
         {
-          id: "t5",
-          name: "Matthew Watkins",
-          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg",
-        },
+          id: "t5",          name: "Matthew Watkins",          imageSrc: "http://img.b2bpic.net/free-photo/smiling-mechanic-standing-repair-shop_1170-1349.jpg"},
         {
-          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",
-        },
+          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"},
       ]}
       cardTitle="Trusted Across Wales"
       cardTag="WHAT CUSTOMERS SAY"
       buttons={[
         {
-          text: "Read all 33 reviews on Google →",
-          href: "https://www.google.com/search?q=Quartz+Plumbing+%26+Heating+reviews",
-        },
+          text: "Read all 33 reviews on Google →",          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"
-      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"
-      tag="MEET YOUR ENGINEER"
+      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.\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="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",
-        "5-Star Rated on Google",
-        "Trusted Service",
-        "Reliable Workmanship",
-        "Customer Satisfaction Guaranteed",
-        "Local Expertise",
-        "Transparent Pricing",
-      ]}
+        "Gas Safe Registered",        "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",
-          href: "tel:+441234567890",
-        },
+          text: "Call +44 1234 567890",          href: "tel:+441234567890"},
         {
-          text: "Request a Quote →",
-          href: "mailto:info@quartzplumbing.com",
-        },
+          text: "Request a Quote →",          href: "mailto:info@quartzplumbing.com"},
         {
-          text: "Prefer to message? Contact on WhatsApp →",
-          href: "https://wa.me/441234567890",
-        },
+          text: "Prefer to message? Contact on WhatsApp →",          href: "https://wa.me/441234567890"},
       ]}
     />
   </div>
@@ -279,9 +200,14 @@ export default function LandingPage() {
       <FooterCard
       logoText="QUARTZ Plumbing & Heating"
       copyrightText="© 2025 Quartz Plumbing & Heating. All rights reserved."
+      socialLinks={[
+        { icon: Facebook, href: "https://facebook.com/quartzplumbing", ariaLabel: "Facebook" },
+        { icon: Instagram, href: "https://instagram.com/quartzplumbing", ariaLabel: "Instagram" },
+        { icon: X, href: "https://twitter.com/quartzplumbing", ariaLabel: "Twitter" }
+      ]}
     />
   </div>
       </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;
-  --card: #181C26;
-  --foreground: #F5F0E8;
-  --primary-cta: #C8963E;
-  --primary-cta-text: #0F1117;
-  --secondary-cta: #F5F0E8;
-  --secondary-cta-text: #C8963E;
-  --accent: #E8B86D;
-  --background-accent: #2A2F3E;
+  --background: #ffffff;
+  --card: #fcfcfc;
+  --foreground: #1f2937;
+  --primary-cta: #2563eb;
+  --primary-cta-text: #f5faff;
+  --secondary-cta: #60a5fa;
+  --secondary-cta-text: #001122;
+  --accent: #0ea5e9;
+  --background-accent: #f9fafb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);