Update src/app/page.tsx

Merge version_3 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 (
@@ -148,13 +148,20 @@ export default function LandingPage() {
   </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>
 
@@ -193,6 +200,11 @@ 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>

src/app/styles/base.css

@@ -11,7 +11,7 @@ html {
 body {
   background-color: var(--background);
   color: var(--foreground);
-  font-family: var(--font-space-mono), 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-space-mono), 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: #fcf6ec;
+  --background: #ffffff;
-  --card: #f3ede2;
+  --card: #fcfcfc;
-  --foreground: #2e2521;
+  --foreground: #1f2937;
-  --primary-cta: #2e2521;
+  --primary-cta: #2563eb;
-  --primary-cta-text: #fcf6ec;
+  --primary-cta-text: #f5faff;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #60a5fa;
-  --secondary-cta-text: #2e2521;
+  --secondary-cta-text: #001122;
-  --accent: #b2a28b;
+  --accent: #0ea5e9;
-  --background-accent: #b2a28b;
+  --background-accent: #f9fafb;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);