Switch to version 1: modified src/app/styles/variables.css

Merge version_3 into main

src/app/page.tsx

@@ -6,7 +6,7 @@ import ContactText from '@/components/sections/contact/ContactText';
 import FaqDouble from '@/components/sections/faq/FaqDouble';
 import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import HeroBillboardBrand from '@/components/sections/hero/HeroBillboardBrand';
+import HeroCentered from '@/components/sections/hero/HeroCentered';
 import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import SplitAbout from '@/components/sections/about/SplitAbout';
@@ -30,25 +30,88 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarStyleApple
       navItems={[
-        { name: "Home", id: "hero" },
-        { name: "About", id: "about" },
-        { name: "Services", id: "boiler" },
-        { name: "Testimonials", id: "testimonials" },
-        { name: "Contact", id: "contact" },
+        {
+          name: "Home",
+          id: "hero",
+        },
+        {
+          name: "About",
+          id: "about",
+        },
+        {
+          name: "Services",
+          id: "boiler",
+        },
+        {
+          name: "Testimonials",
+          id: "testimonials",
+        },
+        {
+          name: "Contact",
+          id: "contact",
+        },
       ]}
       brandName="Muller Plumbing"
     />
   </div>
 
   <div id="hero" data-section="hero">
-      <HeroBillboardBrand
-      title="Iowa City's Most Trusted Plumber"
-      subtitle="Decades of Service, Decades of Trust."
+      <HeroCentered
+      background={{
+        variant: "gradient-bars",
+      }}
+      title="Iowa City's Most Trusted Plumber — For Decades."
       description="Fast service, fair prices, and technicians who actually answer the phone. Muller Plumbing has been taking care of Iowa City homes and businesses since before most of our competitors existed."
-      buttons={[
-        { text: "Call Us Today — (319) 555-0123", href: "tel:3195550123" },
+      avatars={[
+        {
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9uonlq",
+          alt: "Customer 1",
+        },
+        {
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=huewus",
+          alt: "Customer 2",
+        },
+        {
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=7hi1jv",
+          alt: "Customer 3",
+        },
+        {
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ez8sgo",
+          alt: "Customer 4",
+        },
+        {
+          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=da9o6h",
+          alt: "Customer 5",
+        },
+      ]}
+      buttons={[
+        {
+          text: "Call Us Today — (319) 555-0123",
+          href: "tel:3195550123",
+        },
+      ]}
+      marqueeItems={[
+        {
+          type: "text",
+          text: "Same-Day Service",
+        },
+        {
+          type: "text",
+          text: "Licensed & Insured",
+        },
+        {
+          type: "text",
+          text: "Family Owned",
+        },
+        {
+          type: "text",
+          text: "Transparent Pricing",
+        },
+        {
+          type: "text",
+          text: "Boiler Experts",
+        },
       ]}
-      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=9uonlq"
     />
   </div>
 
@@ -59,9 +122,18 @@ export default function LandingPage() {
       title="Real Experts. Real People."
       description="Some plumbers show up. Muller shows up, finds the problem, fixes it right, and charges you a fair price to do it. We've been doing exactly that in Iowa City for decades — long enough that we've installed boilers in homes whose grandchildren now call us for their own repairs. We're not a call center, not a franchise, and not a company that puts you on hold."
       bulletPoints={[
-        { title: "Family Operated", description: "Three generations serving Iowa City." },
-        { title: "No Hidden Fees", description: "Know the price before we start." },
-        { title: "Real People", description: "Pick up the phone and talk to a neighbor." },
+        {
+          title: "Family Operated",
+          description: "Three generations serving Iowa City.",
+        },
+        {
+          title: "No Hidden Fees",
+          description: "Know the price before we start.",
+        },
+        {
+          title: "Real People",
+          description: "Pick up the phone and talk to a neighbor.",
+        },
       ]}
       imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xxilil"
       mediaAnimation="slide-up"
@@ -74,10 +146,18 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       negativeCard={{
-        items: ["No guessing games", "Not learning on your dime", "No generalist incompetence"],
+        items: [
+          "No guessing games",
+          "Not learning on your dime",
+          "No generalist incompetence",
+        ],
       }}
       positiveCard={{
-        items: ["Specialized boiler knowledge", "Century-old system expertise", "High-efficiency installations"],
+        items: [
+          "Specialized boiler knowledge",
+          "Century-old system expertise",
+          "High-efficiency installations",
+        ],
       }}
       title="Boiler Experts. Not Generalists."
       description="Boiler systems are complex. Muller knows enough to do it right — from replacing century-old steam systems to modern high-efficiency units."
@@ -91,13 +171,28 @@ export default function LandingPage() {
       useInvertedBackground={false}
       metrics={[
         {
-          id: "1",          value: "Same Day",          title: "Service Promise",          items: ["We show up when others are booked for a week."],
+          id: "1",
+          value: "Same Day",
+          title: "Service Promise",
+          items: [
+            "We show up when others are booked for a week.",
+          ],
         },
         {
-          id: "2",          value: "Fair Rates",          title: "Pricing Fairness",          items: ["Transparent quotes, no price gouging."],
+          id: "2",
+          value: "Fair Rates",
+          title: "Pricing Fairness",
+          items: [
+            "Transparent quotes, no price gouging.",
+          ],
         },
         {
-          id: "3",          value: "Friendly",          title: "Customer Care",          items: ["Real people picking up the phone."],
+          id: "3",
+          value: "Friendly",
+          title: "Customer Care",
+          items: [
+            "Real people picking up the phone.",
+          ],
         },
       ]}
       title="Why Iowa City Chooses Muller"
@@ -109,11 +204,31 @@ export default function LandingPage() {
       <TestimonialCardTwelve
       useInvertedBackground={false}
       testimonials={[
-        { id: "1", name: "Sarah J.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j99e9j" },
-        { id: "2", name: "Michael C.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dtpop0" },
-        { id: "3", name: "Emily R.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qivgho" },
-        { id: "4", name: "David K.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mj2yd5" },
-        { id: "5", name: "John D.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=da9o6h" },
+        {
+          id: "1",
+          name: "Sarah J.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j99e9j",
+        },
+        {
+          id: "2",
+          name: "Michael C.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=dtpop0",
+        },
+        {
+          id: "3",
+          name: "Emily R.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=qivgho",
+        },
+        {
+          id: "4",
+          name: "David K.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=mj2yd5",
+        },
+        {
+          id: "5",
+          name: "John D.",
+          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=da9o6h",
+        },
       ]}
       cardTitle="Loved by Iowa City"
       cardTag="Reviews"
@@ -126,9 +241,21 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={false}
       faqs={[
-        { id: "1", title: "Do you offer emergency service?", content: "We prioritize same-day service for all our Iowa City clients." },
-        { id: "2", title: "Are your prices fixed?", content: "We provide clear quotes before any work begins." },
-        { id: "3", title: "What boiler systems do you handle?", content: "Everything from historic steam systems to the latest high-efficiency boilers." },
+        {
+          id: "1",
+          title: "Do you offer emergency service?",
+          content: "We prioritize same-day service for all our Iowa City clients.",
+        },
+        {
+          id: "2",
+          title: "Are your prices fixed?",
+          content: "We provide clear quotes before any work begins.",
+        },
+        {
+          id: "3",
+          title: "What boiler systems do you handle?",
+          content: "Everything from historic steam systems to the latest high-efficiency boilers.",
+        },
       ]}
       title="Common Questions"
       description="Quick answers to help you get the service you need."
@@ -139,10 +266,15 @@ export default function LandingPage() {
   <div id="contact" data-section="contact">
       <ContactText
       useInvertedBackground={true}
-      background={{ variant: "gradient-bars" }}
+      background={{
+        variant: "gradient-bars",
+      }}
       text="Ready to Get It Fixed? Don't wait on a slow response or an inflated quote. Call Muller Plumbing and find out why Iowa City homeowners have been calling us back — for decades."
       buttons={[
-        { text: "Call (319) 555-0123", href: "tel:3195550123" },
+        {
+          text: "Call (319) 555-0123",
+          href: "tel:3195550123",
+        },
       ]}
     />
   </div>
@@ -153,16 +285,33 @@ export default function LandingPage() {
       logoText="Muller Plumbing"
       columns={[
         {
-          title: "Company",          items: [
-            { label: "About Us", href: "#about" },
-            { label: "Services", href: "#boiler" },
-            { label: "Contact", href: "#contact" },
+          title: "Company",
+          items: [
+            {
+              label: "About Us",
+              href: "#about",
+            },
+            {
+              label: "Services",
+              href: "#boiler",
+            },
+            {
+              label: "Contact",
+              href: "#contact",
+            },
           ],
         },
         {
-          title: "Legal",          items: [
-            { label: "Privacy Policy", href: "#" },
-            { label: "Terms of Service", href: "#" },
+          title: "Legal",
+          items: [
+            {
+              label: "Privacy Policy",
+              href: "#",
+            },
+            {
+              label: "Terms of Service",
+              href: "#",
+            },
           ],
         },
       ]}
@@ -171,4 +320,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f5faff;
+  --background: #f7f6f7;
   --card: #ffffff;
-  --foreground: #001122;
-  --primary-cta: #15479c;
-  --primary-cta-text: #f5faff;
+  --foreground: #250c0d;
+  --primary-cta: #b82b40;
+  --primary-cta-text: #f7f6f7;
   --secondary-cta: #ffffff;
-  --secondary-cta-text: #001122;
-  --accent: #a8cce8;
-  --background-accent: #7ba3cf;
+  --secondary-cta-text: #250c0d;
+  --accent: #b90941;
+  --background-accent: #e8a8b6;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);