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.

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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="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}`}
>

77
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="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>

16
src/components/ReviewCarousel.tsx
View File

@@ -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>