265 lines
15 KiB
TypeScript
265 lines
15 KiB
TypeScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { ArrowRight, Zap, Shield, Home as HomeIcon, Factory, HardHat, CheckCircle2, Star, Clock, MapPin, Phone } from "lucide-react";
|
|
import ReviewCarousel from "@/components/ReviewCarousel";
|
|
import HeroCarousel from "@/components/HeroCarousel";
|
|
import FAQSection from "@/components/FAQSection";
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
{/* HERO SECTION */}
|
|
<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 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>
|
|
</div>
|
|
|
|
<div className="container mx-auto px-6 relative z-10">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
<div className="max-w-2xl lg:ml-16">
|
|
<div className="inline-block bg-white/5 backdrop-blur border border-white/10 px-4 py-1 rounded mb-6 mt-8">
|
|
<span className="text-[color:var(--brand)] font-bold text-sm tracking-widest uppercase">• Serving Corpus Christi Since 1969</span>
|
|
</div>
|
|
<h1 className="text-5xl md:text-7xl font-bold text-white font-display leading-[1.1] mb-4">
|
|
Powering Your <br />
|
|
<span className="text-[color:var(--brand)]">World Safely.</span>
|
|
</h1>
|
|
<p className="text-2xl md:text-3xl text-[color:var(--brand)] font-bold italic mb-6">Quality Counts</p>
|
|
<div className="flex items-center gap-4 mb-6 border-l-4 border-[color:var(--brand)] pl-6">
|
|
<p className="text-lg text-gray-300 max-w-lg leading-relaxed">
|
|
Budd Electric Co. delivers elite residential and commercial electrical solutions. Trusted for over 50 years to keep the Coastal Bend connected and secure.
|
|
</p>
|
|
</div>
|
|
<p className="text-base text-gray-400 italic mb-8 max-w-lg">
|
|
No project is too large or too small for Budd Electric Co.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-4">
|
|
<Link href="/contact-us" className="bg-[color:var(--brand)] text-white px-8 py-4 font-bold uppercase tracking-widest hover:bg-[color:var(--brand-strong)] transition rounded shadow-[0_0_20px_rgba(239,68,68,0.3)] flex items-center gap-2">
|
|
Schedule Service <ArrowRight size={20} />
|
|
</Link>
|
|
<Link href="/electrical-services" className="border border-white/20 text-white px-8 py-4 font-bold uppercase tracking-widest hover:bg-white/5 transition rounded flex items-center gap-2">
|
|
Our Services <ArrowRight size={20} className="rotate-90" />
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mt-12 mb-16 flex flex-wrap items-center gap-4 md:gap-8 text-sm font-medium text-gray-400">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="text-[color:var(--brand)]" size={18} />
|
|
<span>Licensed & Insured</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircle2 className="text-[color:var(--brand)]" size={18} />
|
|
<span>24/7 Emergency Support</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="relative hidden lg:block">
|
|
<HeroCarousel />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* REVIEW CAROUSEL */}
|
|
<ReviewCarousel />
|
|
|
|
{/* SERVICES PREVIEW */}
|
|
<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>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{/* Card 1 */}
|
|
<div className="group bg-gray-50 border border-gray-100 rounded-lg overflow-hidden hover:shadow-2xl transition duration-300 relative">
|
|
<div className="h-2 bg-[color:var(--brand)] w-0 group-hover:w-full transition-all duration-500"></div>
|
|
<div className="p-8">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card 2 */}
|
|
<div className="group bg-[color:var(--bg-dark)] text-white rounded-lg overflow-hidden shadow-2xl hover:shadow-[0_25px_50px_-12px_rgba(0,0,0,0.5)] transition duration-300 relative transform md:-translate-y-4">
|
|
<div className="h-2 bg-[color:var(--brand)] w-0 group-hover:w-full transition-all duration-500"></div>
|
|
<div className="absolute top-0 right-0 p-4 opacity-10">
|
|
<Zap size={100} />
|
|
</div>
|
|
<div className="p-8 relative z-10">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card 3 */}
|
|
<div className="group bg-gray-50 border border-gray-100 rounded-lg overflow-hidden hover:shadow-2xl transition duration-300 relative">
|
|
<div className="h-2 bg-[color:var(--brand)] w-0 group-hover:w-full transition-all duration-500"></div>
|
|
<div className="p-8">
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* ABOUT SECTION */}
|
|
<section className="bg-[color:var(--surface)] py-24 overflow-hidden">
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
|
<div className="relative">
|
|
{/* Abstract bg shape */}
|
|
<div className="absolute -left-20 -top-20 w-64 h-64 bg-[color:var(--brand)]/10 rounded-full blur-3xl"></div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="space-y-4 pt-12">
|
|
<div className="relative w-full h-48 rounded shadow-lg overflow-hidden">
|
|
<Image
|
|
src="/images/residential.png"
|
|
alt="Service Van"
|
|
fill
|
|
sizes="(max-width: 768px) 50vw, 25vw"
|
|
className="object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="bg-[color:var(--brand)] p-6 rounded shadow-lg text-white text-center">
|
|
<Shield size={32} className="mx-auto mb-2" />
|
|
<p className="font-bold">TECL #17007</p>
|
|
</div>
|
|
<div className="relative w-full h-64 rounded shadow-lg overflow-hidden">
|
|
<Image
|
|
src="/images/commercial.png"
|
|
alt="Electrician Team"
|
|
fill
|
|
sizes="(max-width: 768px) 50vw, 25vw"
|
|
className="object-cover"
|
|
loading="lazy"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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-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>
|
|
<ul className="space-y-4 mb-8">
|
|
<li className="flex items-center gap-3 text-[color:var(--ink)] font-medium">
|
|
<CheckCircle2 size={20} className="text-[color:var(--brand)]" />
|
|
Licensed Master Electricians
|
|
</li>
|
|
<li className="flex items-center gap-3 text-[color:var(--ink)] font-medium">
|
|
<CheckCircle2 size={20} className="text-[color:var(--brand)]" />
|
|
Residential & Commercial Specialists
|
|
</li>
|
|
<li className="flex items-center gap-3 text-[color:var(--ink)] font-medium">
|
|
<CheckCircle2 size={20} className="text-[color:var(--brand)]" />
|
|
Honest, Transparent Pricing
|
|
</li>
|
|
</ul>
|
|
<Link href="/about-us" className="inline-flex items-center gap-2 text-[color:var(--ink)] font-bold border-b-2 border-[color:var(--brand)] pb-1 hover:text-[color:var(--brand)] transition">
|
|
Read Our Story <ArrowRight size={18} />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* FEATURE / GALLERY STRIP */}
|
|
<section className="py-24 bg-white" >
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<div className="text-center max-w-3xl mx-auto mb-16">
|
|
<h2 className="text-3xl font-bold text-[color:var(--ink)] font-display">Featured Projects</h2>
|
|
<p className="text-[color:var(--muted)] mt-4">Delivering power to the most demanding residential and commercial environments.</p>
|
|
</div>
|
|
|
|
<div className="grid md:grid-cols-3 gap-8">
|
|
{[
|
|
{ src: "/images/gallery-1.png", alt: "Electrical Project 1 - System Upgrade" },
|
|
{ src: "/images/gallery-2.png", alt: "Electrical Project 2 - System Upgrade" },
|
|
{ src: "/images/gallery-3.png", alt: "Electrical Project 3 - System Upgrade" }
|
|
].map((item, i) => (
|
|
<div key={i} className="group relative aspect-[4/3] overflow-hidden rounded shadow-lg">
|
|
<Image
|
|
src={item.src}
|
|
alt={item.alt}
|
|
fill
|
|
sizes="(max-width: 768px) 100vw, 33vw"
|
|
className="object-cover transition duration-700 group-hover:scale-110"
|
|
loading="lazy"
|
|
/>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-16 text-center">
|
|
<Link href="/photo-gallery" className="inline-block border-b-2 border-[color:var(--brand)] pb-1 text-[color:var(--ink)] font-bold uppercase tracking-widest hover:text-[color:var(--brand)] transition-colors">View Full Gallery</Link>
|
|
</div>
|
|
</div>
|
|
</section >
|
|
|
|
{/* FAQ SECTION */}
|
|
<FAQSection />
|
|
|
|
{/* CTA SECTION - Simplified compared to original because footer is now Contact heavy */}
|
|
{/* CTA SECTION - Simplified compared to original because footer is now Contact heavy */}
|
|
<section className="bg-[color:var(--brand)] py-20" >
|
|
<div className="mx-auto max-w-7xl px-6 lg:px-8 flex flex-col lg:flex-row items-center justify-between gap-10 text-white">
|
|
<div>
|
|
<h2 className="text-3xl font-bold font-display sm:text-4xl text-white">Need a licensed electrician?</h2>
|
|
<p className="mt-4 text-white/80 max-w-xl">
|
|
Call Budd Electric Co. at (361) 855-2255 for a complimentary electrical repair consultation or free quote.
|
|
</p>
|
|
</div>
|
|
<Link
|
|
href="/contact-us"
|
|
className="rounded-none bg-white px-8 py-4 text-sm font-bold text-[color:var(--brand)] shadow-lg transition hover:bg-gray-100 uppercase tracking-widest"
|
|
>
|
|
Call (361) 855-2255
|
|
</Link>
|
|
</div>
|
|
</section >
|
|
</>
|
|
);
|
|
}
|