alles andere
This commit is contained in:
87
src/components/FAQSection.tsx
Normal file
87
src/components/FAQSection.tsx
Normal file
@@ -0,0 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Plus, Minus } from "lucide-react";
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "Do you offer emergency electrical services in Corpus Christi?",
|
||||
answer: "Yes, Budd Electric Co. provides 24/7 emergency electrical services in Corpus Christi and surrounding areas. We have licensed electricians on call around the clock to handle power outages, storm damage, and dangerous electrical faults safely."
|
||||
},
|
||||
{
|
||||
question: "Are your electricians licensed and insured?",
|
||||
answer: "Absolutely. We are fully licensed by the State of Texas (TECL #17007) and carry comprehensive insurance. All our electricians are background-checked and drug-tested for your peace of mind."
|
||||
},
|
||||
{
|
||||
question: "Do you install Kohler whole-home generators?",
|
||||
answer: "Yes, we are an authorized Kohler Generator dealer. We specialize in the sale, professional installation, and ongoing maintenance of Kohler standby generators to keep your home powered during outages."
|
||||
},
|
||||
{
|
||||
question: "What areas do you serve besides Corpus Christi?",
|
||||
answer: "We serve the entire Coastal Bend region, including Portland, Robstown, Ingleside, Rockport, Aransas Pass, and Port Aransas. If you're in South Texas, give us a call!"
|
||||
}
|
||||
];
|
||||
|
||||
export default function FAQSection() {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(0);
|
||||
|
||||
// Generate FAQ Schema
|
||||
const faqSchema = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "FAQPage",
|
||||
"mainEntity": faqs.map(faq => ({
|
||||
"@type": "Question",
|
||||
"name": faq.question,
|
||||
"acceptedAnswer": {
|
||||
"@type": "Answer",
|
||||
"text": faq.answer
|
||||
}
|
||||
}))
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="py-24 bg-gray-50">
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(faqSchema) }}
|
||||
/>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{faqs.map((faq, index) => (
|
||||
<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"
|
||||
aria-expanded={openIndex === index}
|
||||
aria-controls={`faq-answer-${index}`}
|
||||
>
|
||||
<span className="font-bold text-[color:var(--ink)] text-lg pr-8">{faq.question}</span>
|
||||
{openIndex === index ? (
|
||||
<Minus className="text-[color:var(--brand)] flex-shrink-0" size={20} aria-hidden="true" />
|
||||
) : (
|
||||
<Plus className="text-gray-400 flex-shrink-0" size={20} aria-hidden="true" />
|
||||
)}
|
||||
</button>
|
||||
<div
|
||||
id={`faq-answer-${index}`}
|
||||
className={`overflow-hidden transition-all duration-300 ease-in-out ${openIndex === index ? "max-h-48 opacity-100" : "max-h-0 opacity-0"
|
||||
}`}
|
||||
role="region"
|
||||
aria-labelledby={`faq-question-${index}`}
|
||||
>
|
||||
<div className="p-6 pt-0 text-gray-600 leading-relaxed">
|
||||
{faq.answer}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
229
src/components/Footer.tsx
Normal file
229
src/components/Footer.tsx
Normal file
@@ -0,0 +1,229 @@
|
||||
import Link from "next/link";
|
||||
import { MapPin, Phone, Mail, Clock } from "lucide-react";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-[color:var(--bg-dark)] border-t border-white/5 pt-20 pb-8 text-white">
|
||||
<div className="mx-auto max-w-7xl px-6 lg:px-8">
|
||||
<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>
|
||||
<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>
|
||||
|
||||
{/* 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>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{/* Visa */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="bg-white px-2 py-1.5 rounded shadow-sm">
|
||||
<svg className="h-5" viewBox="0 0 48 16" fill="none">
|
||||
<path d="M20.5 2L17.5 14H14L17 2H20.5ZM31 2.5C30.2 2.2 29 2 27.5 2C24 2 21.5 3.8 21.5 6.3C21.5 8.2 23.3 9.2 24.7 9.8C26.1 10.4 26.6 10.8 26.6 11.4C26.6 12.3 25.5 12.7 24.5 12.7C23 12.7 22.2 12.5 21 12L20.5 11.8L20 14.2C20.8 14.5 22.3 14.8 23.8 14.8C27.5 14.8 30 13 30 10.4C30 8.9 29 7.8 26.8 6.9C25.5 6.3 24.7 5.9 24.7 5.3C24.7 4.7 25.4 4.1 26.9 4.1C28.1 4.1 29 4.3 29.7 4.6L30 4.7L30.5 2.3L31 2.5ZM38.5 2H36C35 2 34.3 2.3 33.9 3.2L28.5 14H32L32.8 12H37.5L38 14H41.5L38.5 2ZM35.5 5L36.8 9.5H34L35.5 5ZM13.5 2L10 11.5L9.6 9.5L8.3 3.5C8.1 2.7 7.5 2 6.6 2H0.5L0.4 2.5C1.8 2.8 3.1 3.2 4.3 3.8L7.9 14H11.5L17 2H13.5Z" fill="#1434CB" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-[10px] text-center">Visa</span>
|
||||
</div>
|
||||
{/* MasterCard */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="bg-white px-2 py-1.5 rounded shadow-sm">
|
||||
<svg className="h-5" viewBox="0 0 48 32" fill="none">
|
||||
<circle cx="18" cy="16" r="10" fill="#EB001B" />
|
||||
<circle cx="30" cy="16" r="10" fill="#F79E1B" />
|
||||
<path d="M24 8.5C22.2 10 21 12.3 21 15C21 17.7 22.2 20 24 21.5C25.8 20 27 17.7 27 15C27 12.3 25.8 10 24 8.5Z" fill="#FF5F00" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-[10px] text-center">MasterCard</span>
|
||||
</div>
|
||||
{/* Cash */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="bg-green-600 px-2 py-1.5 rounded shadow-sm">
|
||||
<svg className="h-5 w-8" viewBox="0 0 40 28" fill="none">
|
||||
<rect x="2" y="6" width="36" height="16" rx="2" fill="#22C55E" stroke="white" strokeWidth="2" />
|
||||
<circle cx="20" cy="14" r="5" fill="white" />
|
||||
<text x="20" y="17" fontSize="8" fill="#22C55E" textAnchor="middle" fontWeight="bold">$</text>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-[10px] text-center">Cash</span>
|
||||
</div>
|
||||
{/* Check */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="bg-blue-100 px-2 py-1.5 rounded shadow-sm border border-blue-300">
|
||||
<svg className="h-5 w-8" viewBox="0 0 48 28" fill="none">
|
||||
<rect x="2" y="4" width="44" height="20" rx="1" fill="white" stroke="#3B82F6" strokeWidth="1.5" />
|
||||
<line x1="6" y1="10" x2="22" y2="10" stroke="#3B82F6" strokeWidth="1" />
|
||||
<line x1="6" y1="14" x2="18" y2="14" stroke="#3B82F6" strokeWidth="1" />
|
||||
<line x1="6" y1="18" x2="20" y2="18" stroke="#3B82F6" strokeWidth="1" />
|
||||
<text x="32" y="18" fontSize="12" fill="#3B82F6" fontFamily="cursive" fontWeight="bold">✓</text>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-[10px] text-center">Check</span>
|
||||
</div>
|
||||
{/* Debit */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="bg-orange-500 px-2 py-1.5 rounded shadow-sm">
|
||||
<span className="text-white font-bold text-[10px] tracking-wide">DEBIT</span>
|
||||
</div>
|
||||
<span className="text-gray-400 text-[10px] text-center">Debit</span>
|
||||
</div>
|
||||
{/* Credit Card */}
|
||||
<div className="flex flex-col items-center gap-1">
|
||||
<div className="bg-gray-700 px-2 py-1.5 rounded shadow-sm">
|
||||
<svg className="h-5 w-8" viewBox="0 0 40 28" fill="none">
|
||||
<rect x="2" y="4" width="36" height="20" rx="2" fill="#374151" stroke="#9CA3AF" strokeWidth="1" />
|
||||
<rect x="2" y="8" width="36" height="4" fill="#1F2937" />
|
||||
<rect x="6" y="16" width="12" height="3" rx="1" fill="#9CA3AF" />
|
||||
<rect x="20" y="16" width="12" height="3" rx="1" fill="#9CA3AF" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-[10px] text-center">Credit</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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" className="hover:text-[color:var(--brand)] transition-colors">Residential</Link></li>
|
||||
<li><Link href="/electrical-services" className="hover:text-[color:var(--brand)] transition-colors">Commercial</Link></li>
|
||||
<li><Link href="/electrical-services" className="hover:text-[color:var(--brand)] transition-colors">New Construction</Link></li>
|
||||
<li><Link href="/electrical-services" 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>
|
||||
|
||||
{/* Map */}
|
||||
<div className="h-40 w-full bg-gray-800 rounded overflow-hidden border border-white/10">
|
||||
<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%"
|
||||
style={{ border: 0 }}
|
||||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
{/* Payment Methods - Mobile Only */}
|
||||
<div className="border-t border-white/5 pt-8 pb-6 lg:hidden">
|
||||
<div className="flex flex-col items-center justify-center gap-4">
|
||||
<span className="text-gray-400 text-xs uppercase tracking-wider">We Accept:</span>
|
||||
<div className="flex flex-wrap items-start justify-center gap-6">
|
||||
{/* Visa */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="bg-white px-4 py-2.5 rounded shadow-sm">
|
||||
<svg className="h-7" viewBox="0 0 48 16" fill="none">
|
||||
<path d="M20.5 2L17.5 14H14L17 2H20.5ZM31 2.5C30.2 2.2 29 2 27.5 2C24 2 21.5 3.8 21.5 6.3C21.5 8.2 23.3 9.2 24.7 9.8C26.1 10.4 26.6 10.8 26.6 11.4C26.6 12.3 25.5 12.7 24.5 12.7C23 12.7 22.2 12.5 21 12L20.5 11.8L20 14.2C20.8 14.5 22.3 14.8 23.8 14.8C27.5 14.8 30 13 30 10.4C30 8.9 29 7.8 26.8 6.9C25.5 6.3 24.7 5.9 24.7 5.3C24.7 4.7 25.4 4.1 26.9 4.1C28.1 4.1 29 4.3 29.7 4.6L30 4.7L30.5 2.3L31 2.5ZM38.5 2H36C35 2 34.3 2.3 33.9 3.2L28.5 14H32L32.8 12H37.5L38 14H41.5L38.5 2ZM35.5 5L36.8 9.5H34L35.5 5ZM13.5 2L10 11.5L9.6 9.5L8.3 3.5C8.1 2.7 7.5 2 6.6 2H0.5L0.4 2.5C1.8 2.8 3.1 3.2 4.3 3.8L7.9 14H11.5L17 2H13.5Z" fill="#1434CB" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-xs">Visa</span>
|
||||
</div>
|
||||
{/* MasterCard */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="bg-white px-4 py-2.5 rounded shadow-sm">
|
||||
<svg className="h-7" viewBox="0 0 48 32" fill="none">
|
||||
<circle cx="18" cy="16" r="10" fill="#EB001B" />
|
||||
<circle cx="30" cy="16" r="10" fill="#F79E1B" />
|
||||
<path d="M24 8.5C22.2 10 21 12.3 21 15C21 17.7 22.2 20 24 21.5C25.8 20 27 17.7 27 15C27 12.3 25.8 10 24 8.5Z" fill="#FF5F00" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-xs">MasterCard</span>
|
||||
</div>
|
||||
{/* Cash */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="bg-green-600 px-4 py-2.5 rounded shadow-sm">
|
||||
<svg className="h-7 w-10" viewBox="0 0 40 28" fill="none">
|
||||
<rect x="2" y="6" width="36" height="16" rx="2" fill="#22C55E" stroke="white" strokeWidth="2" />
|
||||
<circle cx="20" cy="14" r="5" fill="white" />
|
||||
<text x="20" y="17" fontSize="8" fill="#22C55E" textAnchor="middle" fontWeight="bold">$</text>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-xs">Cash</span>
|
||||
</div>
|
||||
{/* Check */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="bg-blue-100 px-4 py-2.5 rounded shadow-sm border border-blue-300">
|
||||
<svg className="h-7 w-12" viewBox="0 0 48 28" fill="none">
|
||||
<rect x="2" y="4" width="44" height="20" rx="1" fill="white" stroke="#3B82F6" strokeWidth="1.5" />
|
||||
<line x1="6" y1="10" x2="22" y2="10" stroke="#3B82F6" strokeWidth="1" />
|
||||
<line x1="6" y1="14" x2="18" y2="14" stroke="#3B82F6" strokeWidth="1" />
|
||||
<line x1="6" y1="18" x2="20" y2="18" stroke="#3B82F6" strokeWidth="1" />
|
||||
<text x="32" y="18" fontSize="12" fill="#3B82F6" fontFamily="cursive" fontWeight="bold">✓</text>
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-xs">Check</span>
|
||||
</div>
|
||||
{/* Debit */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="bg-orange-500 px-4 py-2.5 rounded shadow-sm">
|
||||
<span className="text-white font-bold text-sm tracking-wide">DEBIT</span>
|
||||
</div>
|
||||
<span className="text-gray-400 text-xs">Debit</span>
|
||||
</div>
|
||||
{/* Credit Card */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<div className="bg-gray-700 px-4 py-2.5 rounded shadow-sm">
|
||||
<svg className="h-7 w-10" viewBox="0 0 40 28" fill="none">
|
||||
<rect x="2" y="4" width="36" height="20" rx="2" fill="#374151" stroke="#9CA3AF" strokeWidth="1" />
|
||||
<rect x="2" y="8" width="36" height="4" fill="#1F2937" />
|
||||
<rect x="6" y="16" width="12" height="3" rx="1" fill="#9CA3AF" />
|
||||
<rect x="20" y="16" width="12" height="3" rx="1" fill="#9CA3AF" />
|
||||
</svg>
|
||||
</div>
|
||||
<span className="text-gray-400 text-xs">Credit Card</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-white/5 pt-8 flex flex-col md:flex-row justify-between items-center text-gray-500 text-xs uppercase tracking-wider">
|
||||
<p>© {new Date().getFullYear()} Budd Electric Co. TECL #17007</p>
|
||||
<div className="flex gap-6 mt-4 md:mt-0">
|
||||
<Link href="https://www.thryv.com/client-privacy-policy/" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">Privacy Policy</Link>
|
||||
<Link href="https://www.thryv.com/client-terms-of-use/" target="_blank" rel="noopener noreferrer" className="hover:text-white transition-colors">Terms of Service</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer >
|
||||
);
|
||||
}
|
||||
130
src/components/Header.tsx
Normal file
130
src/components/Header.tsx
Normal file
@@ -0,0 +1,130 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import { ArrowRight, Phone, X } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
export default function Header() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-[color:var(--bg-dark)]/95 backdrop-blur-md">
|
||||
<div className="mx-auto flex h-20 max-w-7xl items-center justify-between px-6 lg:px-8">
|
||||
<Link href="/" className="flex items-center gap-3 group">
|
||||
<div className="relative h-10 w-10 transition-transform group-hover:scale-105">
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
alt="Budd Electric Logo"
|
||||
width={40}
|
||||
height={40}
|
||||
priority
|
||||
className="object-contain invert hue-rotate-180 saturate-[1000%] contrast-[1.5] brightness-90"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-display text-xl font-bold tracking-tight uppercase leading-none text-white">Budd Electric</span>
|
||||
<span className="text-[10px] font-medium tracking-wider text-gray-400 uppercase">Since 1969 • TECL #17007</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<nav className="hidden items-center gap-6 text-sm font-medium text-gray-300 lg:flex">
|
||||
<Link href="/" className="hover:text-white transition-colors">Home</Link>
|
||||
<Link href="/about-us" className="hover:text-white transition-colors">About</Link>
|
||||
<Link href="/electrical-services" className="hover:text-white transition-colors">Services</Link>
|
||||
<Link href="/photo-gallery" className="hover:text-white transition-colors">Gallery</Link>
|
||||
<Link href="/contact-us" className="hover:text-white transition-colors">Contact</Link>
|
||||
</nav>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<a href="tel:+13618552255" className="hidden lg:flex items-center gap-2 text-white hover:text-[color:var(--brand)] transition-colors">
|
||||
<Phone size={16} className="text-[color:var(--brand)]" />
|
||||
<span className="font-bold text-sm">(361) 855-2255</span>
|
||||
</a>
|
||||
<Link
|
||||
href="/contact-us"
|
||||
className="hidden lg:flex items-center gap-2 rounded bg-[color:var(--brand)] px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-red-900/20 transition hover:bg-[color:var(--brand-strong)] uppercase tracking-wider"
|
||||
>
|
||||
Free Quote
|
||||
<ArrowRight size={14} strokeWidth={3} />
|
||||
</Link>
|
||||
<button
|
||||
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
|
||||
className="lg:hidden p-2 text-white hover:text-[color:var(--brand)] transition-colors"
|
||||
>
|
||||
<span className="sr-only">{mobileMenuOpen ? 'Close menu' : 'Open menu'}</span>
|
||||
{mobileMenuOpen ? (
|
||||
<X className="h-7 w-7" strokeWidth={2} />
|
||||
) : (
|
||||
<svg className="h-7 w-7" fill="none" viewBox="0 0 24 24" strokeWidth="2" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile Menu */}
|
||||
{mobileMenuOpen && (
|
||||
<div className="lg:hidden fixed inset-0 top-24 z-40" style={{ backgroundColor: '#0f172a' }}>
|
||||
<nav className="flex flex-col gap-1 p-6">
|
||||
<Link
|
||||
href="/"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
|
||||
>
|
||||
Home
|
||||
</Link>
|
||||
<Link
|
||||
href="/about-us"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
|
||||
>
|
||||
About Us
|
||||
</Link>
|
||||
<Link
|
||||
href="/electrical-services"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
|
||||
>
|
||||
Electrical Services
|
||||
</Link>
|
||||
<Link
|
||||
href="/photo-gallery"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
|
||||
>
|
||||
Photo Gallery
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact-us"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="rounded-lg px-4 py-4 text-base font-semibold text-gray-300 hover:bg-white/5 hover:text-white transition-all"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
|
||||
<div className="mt-6 space-y-4 px-4">
|
||||
<div className="flex flex-col items-start text-white border-t border-white/10 pt-6">
|
||||
<span className="text-xs text-gray-400 font-medium uppercase tracking-wider">Emergency Service</span>
|
||||
<a href="tel:+13618552255" className="font-bold font-display tracking-wide text-lg mt-1 hover:text-[color:var(--brand)] transition-colors">
|
||||
(361) 855-2255
|
||||
</a>
|
||||
</div>
|
||||
<Link
|
||||
href="/contact-us"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="flex items-center justify-center gap-2 rounded bg-[color:var(--brand)] px-7 py-4 text-sm font-bold text-white shadow-lg shadow-red-900/20 transition hover:bg-[color:var(--brand-strong)] hover:shadow-red-900/40 uppercase tracking-wider w-full"
|
||||
>
|
||||
Get a Quote
|
||||
<ArrowRight size={16} strokeWidth={3} />
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
84
src/components/HeroCarousel.tsx
Normal file
84
src/components/HeroCarousel.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { Star } from "lucide-react";
|
||||
|
||||
const heroImages = [
|
||||
"/images/commercial.png",
|
||||
"/images/residential.png",
|
||||
"/images/generator.png",
|
||||
"/images/gallery-1.png",
|
||||
"/images/gallery-2.png"
|
||||
];
|
||||
|
||||
export default function HeroCarousel() {
|
||||
const [currentIndex, setCurrentIndex] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setCurrentIndex((prev) => (prev + 1) % heroImages.length);
|
||||
}, 5000); // Change image every 5 seconds
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Main Image Container */}
|
||||
<div className="relative rounded shadow-2xl overflow-hidden border-8 border-white/5 h-[500px]">
|
||||
{heroImages.map((image, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`absolute inset-0 transition-opacity duration-1000 ${
|
||||
index === currentIndex ? "opacity-100" : "opacity-0"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
src={image}
|
||||
alt={`Professional electrical services - ${index === 0 ? 'Commercial' : index === 1 ? 'Residential' : index === 2 ? 'Generator Installation' : 'Project'} ${index + 1}`}
|
||||
fill
|
||||
sizes="50vw"
|
||||
priority={index === 0}
|
||||
className={`object-cover ${
|
||||
index === currentIndex ? "animate-ken-burns" : ""
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Gradient Overlay */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[color:var(--bg-dark)]/80 to-transparent"></div>
|
||||
|
||||
{/* Master Electricians Badge - Centered */}
|
||||
<div className="absolute bottom-6 left-1/2 -translate-x-1/2">
|
||||
<div className="bg-white/95 backdrop-blur p-6 rounded shadow-lg flex items-center justify-between gap-8">
|
||||
<div>
|
||||
<p className="font-display font-bold text-[color:var(--bg-dark)] text-lg">
|
||||
Master Electricians
|
||||
</p>
|
||||
<p className="text-[color:var(--muted)] text-sm">
|
||||
Top-rated professionals
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex text-[color:var(--brand)]">
|
||||
<Star fill="currentColor" size={20} />
|
||||
<Star fill="currentColor" size={20} />
|
||||
<Star fill="currentColor" size={20} />
|
||||
<Star fill="currentColor" size={20} />
|
||||
<Star fill="currentColor" size={20} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Floating element - Positioned lower and more to the left */}
|
||||
<div className="absolute -bottom-16 -left-32 bg-[color:var(--brand)] text-white p-8 rounded shadow-2xl z-20 max-w-xs transition-transform hover:scale-105">
|
||||
<p className="font-display font-bold text-3xl mb-1">50+</p>
|
||||
<p className="text-sm opacity-90 uppercase tracking-widest font-bold">
|
||||
Years of Excellence in South Texas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
179
src/components/ReviewCarousel.tsx
Normal file
179
src/components/ReviewCarousel.tsx
Normal file
@@ -0,0 +1,179 @@
|
||||
"use client";
|
||||
|
||||
import { Star, Quote } from "lucide-react";
|
||||
|
||||
interface Review {
|
||||
name: string;
|
||||
title?: string;
|
||||
content: string;
|
||||
rating: number;
|
||||
date: string;
|
||||
}
|
||||
|
||||
const reviews: Review[] = [
|
||||
{
|
||||
name: "Martha S.",
|
||||
title: "Customer Review",
|
||||
content: "Best electricians in South Texas! We won't use anyone else. Quality service and their prices were fair. We were able to schedule the service right away and didn't have to waste time waiting around. Great to find a company we can trust.",
|
||||
rating: 5,
|
||||
date: "Verified Customer"
|
||||
},
|
||||
{
|
||||
name: "Ann Major",
|
||||
title: "Local Guide · 206 Reviews",
|
||||
content: "I've been a Budd Electric believer for over 30 years and have found them to be reliable and competent. I never hire anyone else.",
|
||||
rating: 5,
|
||||
date: "1 year ago"
|
||||
},
|
||||
{
|
||||
name: "Bill Hall",
|
||||
title: "Contractor · 5 Reviews",
|
||||
content: "I use Budd Electric exclusively for all my electrical work. Before moving to Corpus Christi eight years ago, I was a general contractor in the greater Dallas area for 20 years. Budd Electric is the only company I trust completely.",
|
||||
rating: 5,
|
||||
date: "2 years ago"
|
||||
},
|
||||
{
|
||||
name: "Mitchell Engle",
|
||||
title: "8 Reviews",
|
||||
content: "Outstanding service and total integrity. Highly recommend!",
|
||||
rating: 5,
|
||||
date: "1 year ago"
|
||||
},
|
||||
{
|
||||
name: "Michael Bellipanni",
|
||||
title: "Local Guide · 130 Reviews",
|
||||
content: "They donated the labor for my Habitat for Humanity home. They did great work. I was back for a small issue. They fixed a likely faulty outlet. Everything was perfect.",
|
||||
rating: 5,
|
||||
date: "5 years ago"
|
||||
},
|
||||
{
|
||||
name: "Pam Holloway",
|
||||
title: "9 Reviews",
|
||||
content: "When I called for service, staff was very polite and responded right away when I needed the service work done. Costs were in line with others in the city. Service team was very polite and cleaned up after service.",
|
||||
rating: 5,
|
||||
date: "7 years ago"
|
||||
},
|
||||
{
|
||||
name: "Lisa Ayala",
|
||||
title: "7 Reviews",
|
||||
content: "Very professional and fair pricing. They did a good job.",
|
||||
rating: 5,
|
||||
date: "4 years ago"
|
||||
},
|
||||
{
|
||||
name: "J. Oden",
|
||||
title: "Local Guide · 16 Reviews",
|
||||
content: "We've used Budd Electric for some small house jobs we didn't feel comfortable doing ourselves. They always do good work. Yes it may seem expensive, but I find it reassuring to know something as important as electrical work is done professionally.",
|
||||
rating: 5,
|
||||
date: "7 years ago"
|
||||
}
|
||||
];
|
||||
|
||||
export default function ReviewCarousel() {
|
||||
// Duplicate reviews for seamless infinite scrolling
|
||||
const duplicatedReviews = [...reviews, ...reviews];
|
||||
|
||||
const renderStars = (rating: number) => {
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Star
|
||||
key={i}
|
||||
size={16}
|
||||
className={i < rating ? "text-[color:var(--brand)] fill-current" : "text-gray-300"}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<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">
|
||||
Client Testimonials
|
||||
</h2>
|
||||
<h3 className="text-4xl font-bold text-[color:var(--ink)] font-display">
|
||||
Trusted by Our Community
|
||||
</h3>
|
||||
<p className="text-[color:var(--muted)] mt-4">
|
||||
Over 50 years of excellence, backed by hundreds of satisfied customers
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Infinite Scrolling Container with Fade Edges */}
|
||||
<div className="relative overflow-hidden pb-16">
|
||||
{/* Left Fade */}
|
||||
<div className="absolute left-0 top-0 bottom-16 w-48 bg-gradient-to-r from-white/95 via-white/60 to-transparent z-10 pointer-events-none" />
|
||||
{/* Right Fade */}
|
||||
<div className="absolute right-0 top-0 bottom-16 w-48 bg-gradient-to-l from-white/95 via-white/60 to-transparent z-10 pointer-events-none" />
|
||||
|
||||
<div className="flex gap-8 animate-scroll">
|
||||
{duplicatedReviews.map((review, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="w-[450px] flex-shrink-0"
|
||||
>
|
||||
<div className="bg-white rounded-lg p-6 h-full relative border border-gray-100 transition-all duration-300 hover:scale-105 hover:-translate-y-2 cursor-pointer shadow-[0_4px_20px_-4px_rgba(0,0,0,0.1)] hover:shadow-[0_20px_40px_-8px_rgba(0,0,0,0.15)]">
|
||||
{/* Quote Icon */}
|
||||
<div className="absolute top-4 right-4 opacity-5">
|
||||
<Quote size={50} className="text-[color:var(--brand)]" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10">
|
||||
{/* Rating */}
|
||||
<div className="flex justify-center mb-3">
|
||||
{renderStars(review.rating)}
|
||||
</div>
|
||||
|
||||
{/* Review Content */}
|
||||
<blockquote className="text-sm text-[color:var(--ink)] text-center mb-4 leading-relaxed font-medium min-h-[90px] flex items-center justify-center">
|
||||
"{review.content}"
|
||||
</blockquote>
|
||||
|
||||
{/* Reviewer Info */}
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-[color:var(--ink)] text-sm">
|
||||
{review.name}
|
||||
</p>
|
||||
{review.title && (
|
||||
<p className="text-xs text-[color:var(--muted)] mt-1">
|
||||
{review.title}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs text-gray-400 mt-1">
|
||||
{review.date}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Google Reviews Link */}
|
||||
<div className="text-center mt-12">
|
||||
<p className="text-[color:var(--muted)] mb-4">
|
||||
See more reviews on Google
|
||||
</p>
|
||||
<a
|
||||
href="https://www.google.com/search?q=budd+electric+corpus+christi+reviews"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 text-[color:var(--brand)] font-bold uppercase text-sm tracking-widest hover:underline"
|
||||
>
|
||||
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"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user