tknuth
/
buddelectric
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Implement initial website structure with core pages and components including contact, services, about, photo gallery, reviews, and FAQs.

This commit is contained in:
Timo Knuth 2026-02-10 18:51:46 +01:00
parent 0b2f6829fd
commit 74fedd08a3
9 changed files with 192 additions and 129 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/app/about-us/page.tsx
View File

@ -13,7 +13,17 @@ export default function AboutUs() {
<div className="bg-[color:var(--bg)]"> <div className="bg-[color:var(--bg)]">
{/* PAGE HERO */} {/* PAGE HERO */}
<section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44"> <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="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"> <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> <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"> <p className="text-xl text-gray-400 max-w-2xl mx-auto">
@ -34,7 +44,8 @@ export default function AboutUs() {
fill fill
sizes="(max-width: 1024px) 100vw, 50vw" sizes="(max-width: 1024px) 100vw, 50vw"
className="object-cover" className="object-cover"
priority loading="lazy"
quality={65}
/> />
</div> </div>
</div> </div>
@ -55,8 +66,8 @@ export default function AboutUs() {
<span className="text-sm font-bold uppercase tracking-wider text-gray-400">Established</span> <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Established</span>
</div> </div>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<span className="text-4xl font-bold text-[color:var(--brand)]">10k+</span> <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">Projects Completed</span> <span className="text-sm font-bold uppercase tracking-wider text-gray-400">Master Electricians</span>
</div> </div>
</div> </div>
</div> </div>

14
src/app/contact-us/page.tsx
View File

@ -1,5 +1,6 @@
import { MapPin, Phone, Mail, Clock } from "lucide-react"; import { MapPin, Phone, Mail, Clock } from "lucide-react";
import { Metadata } from "next"; import { Metadata } from "next";
import Image from "next/image";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Contact Budd Electric Co. | Corpus Christi Electrician", title: "Contact Budd Electric Co. | Corpus Christi Electrician",
@ -11,7 +12,17 @@ export default function Contact() {
<div className="bg-[color:var(--bg)]"> <div className="bg-[color:var(--bg)]">
{/* HERO */} {/* HERO */}
<section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44"> <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="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"> <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> <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"> <p className="text-xl text-gray-400 max-w-2xl mx-auto">
@ -74,6 +85,7 @@ export default function Contact() {
<div className="mt-12 h-64 w-full bg-gray-100 rounded overflow-hidden relative"> <div className="mt-12 h-64 w-full bg-gray-100 rounded overflow-hidden relative">
<iframe <iframe
src="https://www.google.com/maps/embed/v1/place?key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8&q=3910+Apollo+Rd+Corpus+Christi+TX+78413&zoom=15" 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%" width="100%"
height="100%" height="100%"
style={{ border: 0 }} style={{ border: 0 }}

18
src/app/electrical-services/page.tsx
View File

@ -14,7 +14,17 @@ export default function Services() {
<div className="bg-[color:var(--bg)]"> <div className="bg-[color:var(--bg)]">
{/* HERO */} {/* HERO */}
<section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44"> <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="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"> <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> <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"> <p className="text-xl text-gray-400 max-w-2xl mx-auto">
@ -51,6 +61,8 @@ export default function Services() {
alt="Professional residential electrical wiring and home electrical services" alt="Professional residential electrical wiring and home electrical services"
fill fill
sizes="(max-width: 1024px) 100vw, 50vw" sizes="(max-width: 1024px) 100vw, 50vw"
quality={65}
loading="lazy"
className="object-cover" className="object-cover"
/> />
</div> </div>
@ -64,6 +76,8 @@ export default function Services() {
alt="Commercial and industrial electrical wiring and services" alt="Commercial and industrial electrical wiring and services"
fill fill
sizes="(max-width: 1024px) 100vw, 50vw" sizes="(max-width: 1024px) 100vw, 50vw"
quality={65}
loading="lazy"
className="object-cover" className="object-cover"
/> />
</div> </div>
@ -111,6 +125,8 @@ export default function Services() {
alt="Kohler whole-home standby generator installation and service" alt="Kohler whole-home standby generator installation and service"
fill fill
sizes="(max-width: 1024px) 100vw, 50vw" sizes="(max-width: 1024px) 100vw, 50vw"
quality={65}
loading="lazy"
className="object-cover" className="object-cover"
/> />
</div> </div>

2
src/app/globals.css
View File

@ -22,6 +22,8 @@
/* Slate 200 */ /* Slate 200 */
--line-dark: #334155; --line-dark: #334155;
/* Slate 700 */ /* Slate 700 */
--brand-light: #f87171;
/* Red 400 - For dark backgrounds */
} }
@theme inline { @theme inline {

39
src/app/page.tsx
View File

@ -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"> <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 */} {/* Background Elements Container - Handles Overflow Clipping */}
<div className="absolute inset-0 overflow-hidden pointer-events-none -z-10"> <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> <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 */} {/* 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> <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"> <section className="py-24 bg-white relative">
<div className="mx-auto max-w-7xl px-6 lg:px-8"> <div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="text-center max-w-2xl mx-auto mb-16"> <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> <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Our Expertise</p>
<h3 className="text-4xl font-bold text-[color:var(--ink)] font-display">Comprehensive Electrical Solutions</h3> <h2 className="text-4xl font-bold text-[color:var(--ink)] font-display">Comprehensive Electrical Solutions</h2>
</div> </div>
<div className="grid md:grid-cols-3 gap-8"> <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"> <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} /> <HomeIcon size={28} />
</div> </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"> <p className="text-gray-500 mb-6 line-clamp-3">
Complete home electrical services including safety inspections, repairs, lighting, and fan installations. Complete home electrical services including safety inspections, repairs, lighting, and fan installations.
</p> </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>
</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"> <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} /> <Factory size={28} />
</div> </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"> <p className="text-gray-400 mb-6">
Reliable power for your business. New construction, maintenance, and industrial-grade solutions. Reliable power for your business. New construction, maintenance, and industrial-grade solutions.
</p> </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>
</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"> <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} /> <Zap size={28} />
</div> </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"> <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. Authorized Kohler dealer. Keep your lights on when the grid goes down with standby power.
</p> </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> </div>
</div> </div>
@ -150,8 +159,8 @@ export default function Home() {
/> />
</div> </div>
<div className="bg-[color:var(--ink)] p-6 rounded shadow-lg text-white"> <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="font-bold text-2xl font-display">3rd Gen</p>
<p className="text-xs text-gray-400 uppercase tracking-wider">Projects Done</p> <p className="text-xs text-gray-400 uppercase tracking-wider">Master Electricians</p>
</div> </div>
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
@ -161,7 +170,7 @@ export default function Home() {
</div> </div>
<div className="relative w-full h-64 rounded shadow-lg overflow-hidden"> <div className="relative w-full h-64 rounded shadow-lg overflow-hidden">
<Image <Image
src="/images/commercial.png" src="/images/gallery-3.png"
alt="Electrician Team" alt="Electrician Team"
fill fill
sizes="(max-width: 768px) 50vw, 25vw" sizes="(max-width: 768px) 50vw, 25vw"
@ -174,8 +183,8 @@ export default function Home() {
</div> </div>
<div> <div>
<h2 className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Who We Are</h2> <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Who We Are</p>
<h3 className="text-4xl font-bold text-[color:var(--ink)] font-display mb-6">A Family Legacy of Excellence</h3> <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"> <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. 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> </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"> <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> <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>
</div> </div>
))} ))}

14
src/app/photo-gallery/page.tsx
View File

@ -22,7 +22,17 @@ export default function Gallery() {
<div className="bg-[color:var(--bg)]"> <div className="bg-[color:var(--bg)]">
{/* HERO */} {/* HERO */}
<section className="bg-[color:var(--bg-dark)] py-20 relative overflow-hidden -mt-20 pt-44"> <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="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"> <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> <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"> <p className="text-xl text-gray-400 max-w-2xl mx-auto">
@ -42,6 +52,8 @@ export default function Gallery() {
alt={`Electrical project ${i + 1} - Professional electrical installation by Budd Electric Co.`} alt={`Electrical project ${i + 1} - Professional electrical installation by Budd Electric Co.`}
fill fill
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw" sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
quality={65}
loading="lazy"
className="object-cover transition duration-700 group-hover:scale-110" className="object-cover transition duration-700 group-hover:scale-110"
/> />
</div> </div>

6
src/components/FAQSection.tsx
View File

@ -43,8 +43,8 @@ export default function FAQSection() {
/> />
<div className="mx-auto max-w-3xl px-6 lg:px-8"> <div className="mx-auto max-w-3xl px-6 lg:px-8">
<div className="text-center mb-16"> <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> <p className="text-[color:var(--brand)] font-bold tracking-[0.2em] uppercase text-sm mb-3">Common Questions</p>
<h3 className="text-3xl font-bold text-[color:var(--ink)] font-display">Frequently Asked Questions</h3> <h2 className="text-3xl font-bold text-[color:var(--ink)] font-display">Frequently Asked Questions</h2>
</div> </div>
<div className="space-y-4"> <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"> <div key={index} className="bg-white rounded-lg border border-gray-100 overflow-hidden shadow-sm hover:shadow-md transition">
<button <button
onClick={() => setOpenIndex(openIndex === index ? null : index)} 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-expanded={openIndex === index}
aria-controls={`faq-answer-${index}`} aria-controls={`faq-answer-${index}`}
> >

35
src/components/Footer.tsx
View File

@ -8,25 +8,25 @@ export default function Footer() {
<div className="grid lg:grid-cols-4 gap-12 mb-16"> <div className="grid lg:grid-cols-4 gap-12 mb-16">
<div className="lg:col-span-1"> <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="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"> <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. Family-owned since 1969. Providing elite residential and commercial electrical services to Corpus Christi and the Coastal Bend.
</p> </p>
</div> </div>
<div> <div>
<h4 className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Quick Links</h4> <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"> <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="/" className="hover:text-[color:var(--brand-light)] 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="/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)] transition-colors">Electrical Services</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)] transition-colors">Photo Gallery</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)] transition-colors">Contact Us</Link></li> <li><Link href="/contact-us" className="hover:text-[color:var(--brand-light)] transition-colors">Contact Us</Link></li>
</ul> </ul>
{/* Desktop Payment Methods - Moved here */} {/* Desktop Payment Methods - Moved here */}
<div className="hidden lg:block mt-8 w-[200px]"> <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"> <div className="grid grid-cols-3 gap-2">
{/* Visa */} {/* Visa */}
<div className="flex flex-col items-center gap-1"> <div className="flex flex-col items-center gap-1">
@ -96,31 +96,31 @@ export default function Footer() {
</div> </div>
<div> <div>
<h4 className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Services</h4> <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"> <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#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)] transition-colors">Commercial</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)] transition-colors">Generator Installation</Link></li> <li><Link href="/electrical-services#generator" className="hover:text-[color:var(--brand-light)] transition-colors">Generator Installation</Link></li>
</ul> </ul>
</div> </div>
<div> <div>
<h4 className="font-bold text-white mb-6 uppercase tracking-wider text-sm">Contact Info</h4> <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"> <ul className="space-y-4 text-sm text-gray-400 mb-6">
<li className="flex gap-3"> <li className="flex gap-3">
<MapPin size={18} className="text-[color:var(--brand)] flex-none" /> <MapPin size={18} className="text-[color:var(--brand-light)] flex-none" />
<span>3910 Apollo Rd.<br />Corpus Christi, TX 78413</span> <span>3910 Apollo Rd.<br />Corpus Christi, TX 78413</span>
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<Phone size={18} className="text-[color:var(--brand)] flex-none" /> <Phone size={18} className="text-[color:var(--brand-light)] flex-none" />
<span>(361) 855-2255</span> <span>(361) 855-2255</span>
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<Mail size={18} className="text-[color:var(--brand)] flex-none" /> <Mail size={18} className="text-[color:var(--brand-light)] flex-none" />
<span>buddelectric@grandecom.net</span> <span>buddelectric@grandecom.net</span>
</li> </li>
<li className="flex gap-3"> <li className="flex gap-3">
<Clock size={18} className="text-[color:var(--brand)] flex-none" /> <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> <span>Mon-Fri: 8:00 AM - 5:00 PM<br />Sat-Sun: Closed</span>
</li> </li>
</ul> </ul>
@ -135,6 +135,7 @@ export default function Footer() {
allowFullScreen allowFullScreen
loading="lazy" loading="lazy"
referrerPolicy="no-referrer-when-downgrade" referrerPolicy="no-referrer-when-downgrade"
title="Budd Electric Location Map"
></iframe> ></iframe>
</div> </div>
</div> </div>

16
src/components/ReviewCarousel.tsx
View File

@ -91,12 +91,12 @@ export default function ReviewCarousel() {
<section className="py-20 bg-white overflow-hidden"> <section className="py-20 bg-white overflow-hidden">
<div className="mx-auto max-w-7xl px-6 lg:px-8"> <div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="text-center max-w-2xl mx-auto mb-12"> <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 Client Testimonials
</h2> </p>
<h3 className="text-4xl font-bold text-[color:var(--ink)] font-display"> <h2 className="text-4xl font-bold text-[color:var(--ink)] font-display">
Trusted by Our Community Trusted by Our Community
</h3> </h2>
<p className="text-[color:var(--muted)] mt-4"> <p className="text-[color:var(--muted)] mt-4">
Over 50 years of excellence, backed by hundreds of satisfied customers Over 50 years of excellence, backed by hundreds of satisfied customers
</p> </p>
@ -166,10 +166,10 @@ export default function ReviewCarousel() {
> >
View All Reviews View All Reviews
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor"> <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="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="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="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="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> </svg>
</a> </a>
</div> </div>