From 74fedd08a3a8da100a089f1aa4e823b07a347270 Mon Sep 17 00:00:00 2001
From: Timo Knuth <knuth.timo@gmail.com>
Date: Tue, 10 Feb 2026 18:51:46 +0100
Subject: [PATCH] feat: Implement initial website structure with core pages and
 components including contact, services, about, photo gallery, reviews, and
 FAQs.

---
 src/app/about-us/page.tsx            | 47 ++++++++++-------
 src/app/contact-us/page.tsx          | 32 ++++++++----
 src/app/electrical-services/page.tsx | 66 +++++++++++++++---------
 src/app/globals.css                  |  4 +-
 src/app/page.tsx                     | 39 ++++++++------
 src/app/photo-gallery/page.tsx       | 34 ++++++++----
 src/components/FAQSection.tsx        |  6 +--
 src/components/Footer.tsx            | 77 ++++++++++++++--------------
 src/components/ReviewCarousel.tsx    | 16 +++---
 9 files changed, 192 insertions(+), 129 deletions(-)

diff --git a/src/app/about-us/page.tsx b/src/app/about-us/page.tsx
index 9fd9505..a39ae7e 100644
--- a/src/app/about-us/page.tsx
+++ b/src/app/about-us/page.tsx
@@ -11,11 +11,21 @@ export const metadata: Metadata = {
 export default function AboutUs() {
     return (
         <div className="bg-[color:var(--bg)]">
-            {/* PAGE HERO */}
-            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
-                <div className="absolute inset-0 bg-[url('/images/hero-bg.png')] bg-cover bg-center opacity-10"></div>
-                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
-                    <h1 className="text-4xl md:text-6xl font-bold text-white font-display mb-6">Our Legacy</h1>
+            {/* PAGE HERO */}
+            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
+                <div className="absolute inset-0 opacity-10">
+                    <Image
+                        src="/images/hero-bg.png"
+                        alt=""
+                        fill
+                        priority
+                        quality={40}
+                        sizes="100vw"
+                        className="object-cover object-center"
+                    />
+                </div>
+                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
+                    <h1 className="text-4xl md:text-6xl font-bold text-white font-display mb-6">Our Legacy</h1>
                     <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                         Serving the Coastal Bend with integrity and elite craftsmanship since 1969.
                     </p>
@@ -28,15 +38,16 @@ export default function AboutUs() {
                     <div className="grid lg:grid-cols-2 gap-16 items-center">
                         <div className="relative">
                             <div className="aspect-[4/3] rounded-lg overflow-hidden bg-gray-100 shadow-xl border-l-8 border-[color:var(--brand)]">
-                                <Image
-                                    src="/images/residential.png"
-                                    alt="Budd Electric professional electrician team working on residential electrical services"
-                                    fill
-                                    sizes="(max-width: 1024px) 100vw, 50vw"
-                                    className="object-cover"
-                                    priority
-                                />
-                            </div>
+                                <Image
+                                    src="/images/residential.png"
+                                    alt="Budd Electric professional electrician team working on residential electrical services"
+                                    fill
+                                    sizes="(max-width: 1024px) 100vw, 50vw"
+                                    className="object-cover"
+                                    loading="lazy"
+                                    quality={65}
+                                />
+                            </div>
                         </div>
                         <div>
                             <h2 className="text-sm font-bold tracking-[0.2em] text-[color:var(--brand)] uppercase mb-3">Who We Are</h2>
@@ -54,10 +65,10 @@ export default function AboutUs() {
                                     <span className="text-4xl font-bold text-[color:var(--brand)]">1969</span>
                                     <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Established</span>
                                 </div>
-                                <div className="flex flex-col gap-2">
-                                    <span className="text-4xl font-bold text-[color:var(--brand)]">10k+</span>
-                                    <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Projects Completed</span>
-                                </div>
+                                <div className="flex flex-col gap-2">
+                                    <span className="text-4xl font-bold text-[color:var(--brand)]">3rd Gen</span>
+                                    <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Master Electricians</span>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/src/app/contact-us/page.tsx b/src/app/contact-us/page.tsx
index fc14150..4d42425 100644
--- a/src/app/contact-us/page.tsx
+++ b/src/app/contact-us/page.tsx
@@ -1,5 +1,6 @@
-import { MapPin, Phone, Mail, Clock } from "lucide-react";
-import { Metadata } from "next";
+import { MapPin, Phone, Mail, Clock } from "lucide-react";
+import { Metadata } from "next";
+import Image from "next/image";
 
 export const metadata: Metadata = {
     title: "Contact Budd Electric Co. | Corpus Christi Electrician",
@@ -9,10 +10,20 @@ export const metadata: Metadata = {
 export default function Contact() {
     return (
         <div className="bg-[color:var(--bg)]">
-            {/* HERO */}
-            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
-                <div className="absolute inset-0 bg-[url('/images/hero-bg.png')] bg-cover bg-center opacity-10"></div>
-                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
+            {/* HERO */}
+            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
+                <div className="absolute inset-0 opacity-10">
+                    <Image
+                        src="/images/hero-bg.png"
+                        alt=""
+                        fill
+                        priority
+                        quality={40}
+                        sizes="100vw"
+                        className="object-cover object-center"
+                    />
+                </div>
+                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
                     <h1 className="text-4xl md:text-6xl font-bold text-white font-display mb-6">Contact Us</h1>
                     <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                         Get in touch for a free quote or schedule a service call today.
@@ -72,10 +83,11 @@ export default function Contact() {
 
                             {/* MAP */}
                             <div className="mt-12 h-64 w-full bg-gray-100 rounded overflow-hidden relative">
-                                <iframe
-                                    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8&q=3910+Apollo+Rd+Corpus+Christi+TX+78413&zoom=15"
-                                    width="100%"
-                                    height="100%"
+                                <iframe
+                                    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8&q=3910+Apollo+Rd+Corpus+Christi+TX+78413&zoom=15"
+                                    title="Budd Electric Co. Location Map"
+                                    width="100%"
+                                    height="100%"
                                     style={{ border: 0 }}
                                     allowFullScreen
                                     loading="lazy"
diff --git a/src/app/electrical-services/page.tsx b/src/app/electrical-services/page.tsx
index 201f951..e8984d6 100644
--- a/src/app/electrical-services/page.tsx
+++ b/src/app/electrical-services/page.tsx
@@ -12,10 +12,20 @@ export const metadata: Metadata = {
 export default function Services() {
     return (
         <div className="bg-[color:var(--bg)]">
-            {/* HERO */}
-            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
-                <div className="absolute inset-0 bg-[url('/images/hero-bg.png')] bg-cover bg-center opacity-10"></div>
-                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
+            {/* HERO */}
+            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
+                <div className="absolute inset-0 opacity-10">
+                    <Image
+                        src="/images/hero-bg.png"
+                        alt=""
+                        fill
+                        priority
+                        quality={40}
+                        sizes="100vw"
+                        className="object-cover object-center"
+                    />
+                </div>
+                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
                     <h1 className="text-4xl md:text-6xl font-bold text-white font-display mb-6">Electrical Services</h1>
                     <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                         Comprehensive solutions for every need. Residential, Commercial, and Industrial.
@@ -46,26 +56,30 @@ export default function Services() {
                             </ul>
                         </div>
                         <div className="order-1 lg:order-2 rounded-lg overflow-hidden shadow-xl aspect-[4/3] bg-gray-100 relative">
-                            <Image
-                                src="/images/residential.png"
-                                alt="Professional residential electrical wiring and home electrical services"
-                                fill
-                                sizes="(max-width: 1024px) 100vw, 50vw"
-                                className="object-cover"
-                            />
+                            <Image
+                                src="/images/residential.png"
+                                alt="Professional residential electrical wiring and home electrical services"
+                                fill
+                                sizes="(max-width: 1024px) 100vw, 50vw"
+                                quality={65}
+                                loading="lazy"
+                                className="object-cover"
+                            />
                         </div>
                     </div>
 
                     {/* COMMERCIAL */}
                     <div id="commercial" className="grid lg:grid-cols-2 gap-16 items-center">
                         <div className="rounded-lg overflow-hidden shadow-xl aspect-[4/3] bg-gray-100 relative">
-                            <Image
-                                src="/images/commercial.png"
-                                alt="Commercial and industrial electrical wiring and services"
-                                fill
-                                sizes="(max-width: 1024px) 100vw, 50vw"
-                                className="object-cover"
-                            />
+                            <Image
+                                src="/images/commercial.png"
+                                alt="Commercial and industrial electrical wiring and services"
+                                fill
+                                sizes="(max-width: 1024px) 100vw, 50vw"
+                                quality={65}
+                                loading="lazy"
+                                className="object-cover"
+                            />
                         </div>
                         <div>
                             <div className="w-14 h-14 bg-red-50 text-[color:var(--brand)] rounded flex items-center justify-center mb-6">
@@ -106,13 +120,15 @@ export default function Services() {
                             </ul>
                         </div>
                         <div className="order-1 lg:order-2 rounded-lg overflow-hidden shadow-xl aspect-[4/3] bg-gray-100 relative">
-                            <Image
-                                src="/images/generator.png"
-                                alt="Kohler whole-home standby generator installation and service"
-                                fill
-                                sizes="(max-width: 1024px) 100vw, 50vw"
-                                className="object-cover"
-                            />
+                            <Image
+                                src="/images/generator.png"
+                                alt="Kohler whole-home standby generator installation and service"
+                                fill
+                                sizes="(max-width: 1024px) 100vw, 50vw"
+                                quality={65}
+                                loading="lazy"
+                                className="object-cover"
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 2e2a598..ae5b2e6 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -22,6 +22,8 @@
   /* Slate 200 */
   --line-dark: #334155;
   /* Slate 700 */
+  --brand-light: #f87171;
+  /* Red 400 - For dark backgrounds */
 }
 
 @theme inline {
@@ -96,4 +98,4 @@ body {
   .animate-ken-burns {
     animation: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8726393..f6dce27 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,7 +12,16 @@ export default function Home() {
       <section className="relative min-h-[85vh] flex items-center bg-[color:var(--bg-dark)] -mt-20 pt-20 isolate z-20">
         {/* Background Elements Container - Handles Overflow Clipping */}
         <div className="absolute inset-0 overflow-hidden pointer-events-none -z-10">
-          <div className="absolute inset-0 bg-[url('/images/hero-bg.png')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
+          <div className="absolute inset-0 opacity-10 mix-blend-overlay">
+            <Image
+              src="/images/hero-bg.png"
+              alt="Background pattern"
+              fill
+              sizes="(max-width: 768px) 100vw, 100vw"
+              priority
+              className="object-cover object-center"
+            />
+          </div>
           <div className="absolute inset-0 bg-gradient-to-r from-[color:var(--bg-dark)] via-[color:var(--bg-dark)]/95 to-transparent"></div>
           {/* Decorative shapes */}
           <div className="absolute top-0 right-0 w-1/2 h-full bg-[color:var(--brand)]/5 -skew-x-12 transform origin-top-right"></div>
@@ -73,8 +82,8 @@ export default function Home() {
       <section className="py-24 bg-white relative">
         <div className="mx-auto max-w-7xl px-6 lg:px-8">
           <div className="text-center max-w-2xl mx-auto mb-16">
-            <h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Our Expertise</h2>
-            <h3 className="text-4xl font-bold text-[color:var(--ink)] font-display">Comprehensive Electrical Solutions</h3>
+            <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Our Expertise</p>
+            <h2 className="text-4xl font-bold text-[color:var(--ink)] font-display">Comprehensive Electrical Solutions</h2>
           </div>
 
           <div className="grid md:grid-cols-3 gap-8">
@@ -85,11 +94,11 @@ export default function Home() {
                 <div className="w-14 h-14 bg-white text-[color:var(--brand)] rounded flex items-center justify-center mb-6 shadow-sm border border-gray-100 group-hover:scale-110 transition">
                   <HomeIcon size={28} />
                 </div>
-                <h4 className="text-xl font-bold text-[color:var(--ink)] mb-3 font-display">Residential</h4>
+                <h3 className="text-xl font-bold text-[color:var(--ink)] mb-3 font-display">Residential</h3>
                 <p className="text-gray-500 mb-6 line-clamp-3">
                   Complete home electrical services including safety inspections, repairs, lighting, and fan installations.
                 </p>
-                <Link href="/electrical-services" className="text-[color:var(--brand)] font-bold uppercase text-xs tracking-widest hover:underline">Learn More</Link>
+                <Link href="/electrical-services" className="text-[color:var(--brand)] font-bold uppercase text-xs tracking-widest hover:underline" aria-label="Learn more about Residential services">Residential Services</Link>
               </div>
             </div>
 
@@ -103,11 +112,11 @@ export default function Home() {
                 <div className="w-14 h-14 bg-[color:var(--brand)] text-white rounded flex items-center justify-center mb-6 shadow-lg group-hover:scale-110 transition">
                   <Factory size={28} />
                 </div>
-                <h4 className="text-xl font-bold text-white mb-3 font-display">Commercial</h4>
+                <h3 className="text-xl font-bold text-white mb-3 font-display">Commercial</h3>
                 <p className="text-gray-400 mb-6">
                   Reliable power for your business. New construction, maintenance, and industrial-grade solutions.
                 </p>
-                <Link href="/electrical-services" className="text-white font-bold uppercase text-xs tracking-widest hover:text-[color:var(--brand)] transition">Learn More</Link>
+                <Link href="/electrical-services" className="text-white font-bold uppercase text-xs tracking-widest hover:text-[color:var(--brand)] transition" aria-label="Learn more about Commercial services">Commercial Services</Link>
               </div>
             </div>
 
@@ -118,11 +127,11 @@ export default function Home() {
                 <div className="w-14 h-14 bg-white text-[color:var(--brand)] rounded flex items-center justify-center mb-6 shadow-sm border border-gray-100 group-hover:scale-110 transition">
                   <Zap size={28} />
                 </div>
-                <h4 className="text-xl font-bold text-[color:var(--ink)] mb-3 font-display">Generators</h4>
+                <h3 className="text-xl font-bold text-[color:var(--ink)] mb-3 font-display">Generators</h3>
                 <p className="text-gray-500 mb-6 line-clamp-3">
                   Authorized Kohler dealer. Keep your lights on when the grid goes down with standby power.
                 </p>
-                <Link href="/electrical-services" className="text-[color:var(--brand)] font-bold uppercase text-xs tracking-widest hover:underline">Learn More</Link>
+                <Link href="/electrical-services" className="text-[color:var(--brand)] font-bold uppercase text-xs tracking-widest hover:underline" aria-label="Learn more about Generator services">Generator Services</Link>
               </div>
             </div>
           </div>
@@ -150,8 +159,8 @@ export default function Home() {
                     />
                   </div>
                   <div className="bg-[color:var(--ink)] p-6 rounded shadow-lg text-white">
-                    <p className="font-bold text-2xl font-display">10k+</p>
-                    <p className="text-xs text-gray-400 uppercase tracking-wider">Projects Done</p>
+                    <p className="font-bold text-2xl font-display">3rd Gen</p>
+                    <p className="text-xs text-gray-400 uppercase tracking-wider">Master Electricians</p>
                   </div>
                 </div>
                 <div className="space-y-4">
@@ -161,7 +170,7 @@ export default function Home() {
                   </div>
                   <div className="relative w-full h-64 rounded shadow-lg overflow-hidden">
                     <Image
-                      src="/images/commercial.png"
+                      src="/images/gallery-3.png"
                       alt="Electrician Team"
                       fill
                       sizes="(max-width: 768px) 50vw, 25vw"
@@ -174,8 +183,8 @@ export default function Home() {
             </div>
 
             <div>
-              <h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Who We Are</h2>
-              <h3 className="text-4xl font-bold text-[color:var(--ink)] font-display mb-6">A Family Legacy of Excellence</h3>
+              <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Who We Are</p>
+              <h2 className="text-4xl font-bold text-[color:var(--ink)] font-display mb-6">A Family Legacy of Excellence</h2>
               <p className="text-lg text-[color:var(--muted)] mb-6 leading-relaxed">
                 For over half a century, Budd Electric Co. has been the standard-bearer for quality electrical work in the Coastal Bend. As a family-owned business, we don't just fix wires; we build trust.
               </p>
@@ -226,7 +235,7 @@ export default function Home() {
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-8">
                   <p className="text-[color:var(--brand)] font-bold text-sm uppercase tracking-widest mb-1">Project 0{i + 1}</p>
-                  <h4 className="text-white font-bold text-xl">System Upgrade</h4>
+                  <h3 className="text-white font-bold text-xl">System Upgrade</h3>
                 </div>
               </div>
             ))}
diff --git a/src/app/photo-gallery/page.tsx b/src/app/photo-gallery/page.tsx
index 5c8bb79..14af28c 100644
--- a/src/app/photo-gallery/page.tsx
+++ b/src/app/photo-gallery/page.tsx
@@ -20,10 +20,20 @@ export default function Gallery() {
 
     return (
         <div className="bg-[color:var(--bg)]">
-            {/* HERO */}
-            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
-                <div className="absolute inset-0 bg-[url('/images/hero-bg.png')] bg-cover bg-center opacity-10"></div>
-                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
+            {/* HERO */}
+            <section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44">
+                <div className="absolute inset-0 opacity-10">
+                    <Image
+                        src="/images/hero-bg.png"
+                        alt=""
+                        fill
+                        priority
+                        quality={40}
+                        sizes="100vw"
+                        className="object-cover object-center"
+                    />
+                </div>
+                <div className="mx-auto max-w-7xl px-6 lg:px-8 relative z-10 text-center">
                     <h1 className="text-4xl md:text-6xl font-bold text-white font-display mb-6">Our Work</h1>
                     <p className="text-xl text-gray-400 max-w-2xl mx-auto">
                         A showcase of electrical excellence across South Texas.
@@ -37,13 +47,15 @@ export default function Gallery() {
                     <div className="masonry-grid grid md:grid-cols-2 lg:grid-cols-3 gap-8">
                         {images.map((src, i) => (
                             <div key={i} className="bg-white rounded shadow-lg overflow-hidden group relative aspect-[4/3]">
-                                <Image
-                                    src={src}
-                                    alt={`Electrical project ${i + 1} - Professional electrical installation by Budd Electric Co.`}
-                                    fill
-                                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
-                                    className="object-cover transition duration-700 group-hover:scale-110"
-                                />
+                                <Image
+                                    src={src}
+                                    alt={`Electrical project ${i + 1} - Professional electrical installation by Budd Electric Co.`}
+                                    fill
+                                    sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
+                                    quality={65}
+                                    loading="lazy"
+                                    className="object-cover transition duration-700 group-hover:scale-110"
+                                />
                             </div>
                         ))}
                     </div>
diff --git a/src/components/FAQSection.tsx b/src/components/FAQSection.tsx
index 7061509..eabf583 100644
--- a/src/components/FAQSection.tsx
+++ b/src/components/FAQSection.tsx
@@ -43,8 +43,8 @@ export default function FAQSection() {
             />
             <div className="mx-auto max-w-3xl px-6 lg:px-8">
                 <div className="text-center mb-16">
-                    <h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Common Questions</h2>
-                    <h3 className="text-3xl font-bold text-[color:var(--ink)] font-display">Frequently Asked Questions</h3>
+                    <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Common Questions</p>
+                    <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display">Frequently Asked Questions</h2>
                 </div>
 
                 <div className="space-y-4">
@@ -52,7 +52,7 @@ export default function FAQSection() {
                         <div key={index} className="bg-white rounded-lg border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition">
                             <button
                                 onClick={() => setOpenIndex(openIndex === index ? null : index)}
-                                className="w-full flex items-center justify-between p-6 text-left focus:outline-none focus:ring-2 focus:ring-[color:var(--brand)] focus:ring-offset-2 rounded-lg"
+                                className="w-full flex items-center justify-between p-6 text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--brand)] focus-visible:ring-offset-2 rounded-lg"
                                 aria-expanded={openIndex === index}
                                 aria-controls={`faq-answer-${index}`}
                             >
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 26efbdf..1d23bf3 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -8,25 +8,25 @@ export default function Footer() {
                 <div className="grid lg:grid-cols-4 gap-12 mb-16">
                     <div className="lg:col-span-1">
                         <span className="font-display text-2xl font-bold tracking-tight uppercase leading-none text-white">Budd</span>
-                        <span className="block text-xs font-bold tracking-[0.3em] text-[color:var(--brand)] uppercase mt-1">Electric Co.</span>
+                        <span className="block text-xs font-bold tracking-[0.3em] text-[color:var(--brand-light)] uppercase mt-1">Electric Co.</span>
                         <p className="mt-6 text-gray-400 text-sm leading-relaxed">
                             Family-owned since 1969. Providing elite residential and commercial electrical services to Corpus Christi and the Coastal Bend.
                         </p>
                     </div>
 
                     <div>
-                        <h4 className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Quick Links</h4>
-                        <ul className="space-y-4 text-sm text-gray-400">
-                            <li><Link href="/" className="hover:text-[color:var(--brand)] transition-colors">Home</Link></li>
-                            <li><Link href="/about-us" className="hover:text-[color:var(--brand)] transition-colors">About Us</Link></li>
-                            <li><Link href="/electrical-services" className="hover:text-[color:var(--brand)] transition-colors">Electrical Services</Link></li>
-                            <li><Link href="/photo-gallery" className="hover:text-[color:var(--brand)] transition-colors">Photo Gallery</Link></li>
-                            <li><Link href="/contact-us" className="hover:text-[color:var(--brand)] transition-colors">Contact Us</Link></li>
-                        </ul>
+                        <p className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Quick Links</p>
+                        <ul className="space-y-4 text-sm text-gray-400">
+                            <li><Link href="/" className="hover:text-[color:var(--brand-light)] transition-colors">Home</Link></li>
+                            <li><Link href="/about-us" className="hover:text-[color:var(--brand-light)] transition-colors">About Us</Link></li>
+                            <li><Link href="/electrical-services" className="hover:text-[color:var(--brand-light)] transition-colors">Electrical Services</Link></li>
+                            <li><Link href="/photo-gallery" className="hover:text-[color:var(--brand-light)] transition-colors">Photo Gallery</Link></li>
+                            <li><Link href="/contact-us" className="hover:text-[color:var(--brand-light)] transition-colors">Contact Us</Link></li>
+                        </ul>
 
                         {/* Desktop Payment Methods - Moved here */}
                         <div className="hidden lg:block mt-8 w-[200px]">
-                            <h5 className="text-white text-xs font-bold uppercase tracking-wider mb-3">We Accept:</h5>
+                            <p className="text-white text-xs font-bold uppercase tracking-wider mb-3">We Accept:</p>
                             <div className="grid grid-cols-3 gap-2">
                                 {/* Visa */}
                                 <div className="flex flex-col items-center gap-1">
@@ -96,34 +96,34 @@ export default function Footer() {
                     </div>
 
                     <div>
-                        <h4 className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Services</h4>
-                        <ul className="space-y-4 text-sm text-gray-400">
-                            <li><Link href="/electrical-services#residential" className="hover:text-[color:var(--brand)] transition-colors">Residential</Link></li>
-                            <li><Link href="/electrical-services#commercial" className="hover:text-[color:var(--brand)] transition-colors">Commercial</Link></li>
-                            <li><Link href="/electrical-services#generator" className="hover:text-[color:var(--brand)] transition-colors">Generator Installation</Link></li>
-                        </ul>
-                    </div>
-
-                    <div>
-                        <h4 className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Contact Info</h4>
-                        <ul className="space-y-4 text-sm text-gray-400 mb-6">
-                            <li className="flex gap-3">
-                                <MapPin size={18} className="text-[color:var(--brand)] flex-none" />
-                                <span>3910 Apollo Rd.<br />Corpus Christi, TX 78413</span>
-                            </li>
-                            <li className="flex gap-3">
-                                <Phone size={18} className="text-[color:var(--brand)] flex-none" />
-                                <span>(361) 855-2255</span>
-                            </li>
-                            <li className="flex gap-3">
-                                <Mail size={18} className="text-[color:var(--brand)] flex-none" />
-                                <span>buddelectric@grandecom.net</span>
-                            </li>
-                            <li className="flex gap-3">
-                                <Clock size={18} className="text-[color:var(--brand)] flex-none" />
-                                <span>Mon-Fri: 8:00 AM - 5:00 PM<br />Sat-Sun: Closed</span>
-                            </li>
-                        </ul>
+                        <p className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Services</p>
+                        <ul className="space-y-4 text-sm text-gray-400">
+                            <li><Link href="/electrical-services#residential" className="hover:text-[color:var(--brand-light)] transition-colors">Residential</Link></li>
+                            <li><Link href="/electrical-services#commercial" className="hover:text-[color:var(--brand-light)] transition-colors">Commercial</Link></li>
+                            <li><Link href="/electrical-services#generator" className="hover:text-[color:var(--brand-light)] transition-colors">Generator Installation</Link></li>
+                        </ul>
+                    </div>
+
+                    <div>
+                        <p className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Contact Info</p>
+                        <ul className="space-y-4 text-sm text-gray-400 mb-6">
+                            <li className="flex gap-3">
+                                <MapPin size={18} className="text-[color:var(--brand-light)] flex-none" />
+                                <span>3910 Apollo Rd.<br />Corpus Christi, TX 78413</span>
+                            </li>
+                            <li className="flex gap-3">
+                                <Phone size={18} className="text-[color:var(--brand-light)] flex-none" />
+                                <span>(361) 855-2255</span>
+                            </li>
+                            <li className="flex gap-3">
+                                <Mail size={18} className="text-[color:var(--brand-light)] flex-none" />
+                                <span>buddelectric@grandecom.net</span>
+                            </li>
+                            <li className="flex gap-3">
+                                <Clock size={18} className="text-[color:var(--brand-light)] flex-none" />
+                                <span>Mon-Fri: 8:00 AM - 5:00 PM<br />Sat-Sun: Closed</span>
+                            </li>
+                        </ul>
 
                         {/* Map */}
                         <div className="h-40 w-full bg-gray-800 rounded overflow-hidden border border-white/10">
@@ -135,6 +135,7 @@ export default function Footer() {
                                 allowFullScreen
                                 loading="lazy"
                                 referrerPolicy="no-referrer-when-downgrade"
+                                title="Budd Electric Location Map"
                             ></iframe>
                         </div>
                     </div>
diff --git a/src/components/ReviewCarousel.tsx b/src/components/ReviewCarousel.tsx
index 107129c..0c720e6 100644
--- a/src/components/ReviewCarousel.tsx
+++ b/src/components/ReviewCarousel.tsx
@@ -91,12 +91,12 @@ export default function ReviewCarousel() {
     <section className="py-20 bg-white overflow-hidden">
       <div className="mx-auto max-w-7xl px-6 lg:px-8">
         <div className="text-center max-w-2xl mx-auto mb-12">
-          <h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">
+          <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">
             Client Testimonials
-          </h2>
-          <h3 className="text-4xl font-bold text-[color:var(--ink)] font-display">
+          </p>
+          <h2 className="text-4xl font-bold text-[color:var(--ink)] font-display">
             Trusted by Our Community
-          </h3>
+          </h2>
           <p className="text-[color:var(--muted)] mt-4">
             Over 50 years of excellence, backed by hundreds of satisfied customers
           </p>
@@ -166,10 +166,10 @@ export default function ReviewCarousel() {
           >
             View All Reviews
             <svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
-              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+              <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
+              <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
+              <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
+              <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
             </svg>
           </a>
         </div>