feat: Implement initial website structure with core pages and components including contact, services, about, photo gallery, reviews, and FAQs.
This commit is contained in:
parent
0b2f6829fd
commit
74fedd08a3
|
|
@ -13,7 +13,17 @@ export default function AboutUs() {
|
|||
<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="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">
|
||||
|
|
@ -34,7 +44,8 @@ export default function AboutUs() {
|
|||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
className="object-cover"
|
||||
priority
|
||||
loading="lazy"
|
||||
quality={65}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -55,8 +66,8 @@ export default function AboutUs() {
|
|||
<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>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
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",
|
||||
|
|
@ -11,7 +12,17 @@ export default function Contact() {
|
|||
<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="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">
|
||||
|
|
@ -74,6 +85,7 @@ export default function Contact() {
|
|||
<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"
|
||||
title="Budd Electric Co. Location Map"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style={{ border: 0 }}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,17 @@ export default function Services() {
|
|||
<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="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">
|
||||
|
|
@ -51,6 +61,8 @@ export default function Services() {
|
|||
alt="Professional residential electrical wiring and home electrical services"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
quality={65}
|
||||
loading="lazy"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -64,6 +76,8 @@ export default function Services() {
|
|||
alt="Commercial and industrial electrical wiring and services"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
quality={65}
|
||||
loading="lazy"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -111,6 +125,8 @@ export default function Services() {
|
|||
alt="Kohler whole-home standby generator installation and service"
|
||||
fill
|
||||
sizes="(max-width: 1024px) 100vw, 50vw"
|
||||
quality={65}
|
||||
loading="lazy"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
/* Slate 200 */
|
||||
--line-dark: #334155;
|
||||
/* Slate 700 */
|
||||
--brand-light: #f87171;
|
||||
/* Red 400 - For dark backgrounds */
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,17 @@ export default function Gallery() {
|
|||
<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="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">
|
||||
|
|
@ -42,6 +52,8 @@ export default function Gallery() {
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -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}`}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<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)] 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>
|
||||
<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,31 +96,31 @@ export default function Footer() {
|
|||
</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">
|
||||
<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>
|
||||
<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>
|
||||
<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">
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -135,6 +135,7 @@ export default function Footer() {
|
|||
allowFullScreen
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
title="Budd Electric Location Map"
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue