ci-electrical/web/app/commercial/page.tsx

206 lines
9.1 KiB
TypeScript

import type { Metadata } from 'next';
import Image from 'next/image';
import FAQ, { QA } from '@/components/FAQ';
import ContactForm from '@/components/ContactForm';
export const metadata: Metadata = {
title: 'Commercial Electrical Services | Corpus Christi Business Electrical',
description: 'Commercial electrical services in Corpus Christi. Tenant build-outs, lighting retrofits, service upgrades, maintenance programs. Call (361) 885-0315.',
openGraph: {
title: 'Commercial Electrical Services | Corpus Christi Business Electrical',
description: 'Commercial electrical services in Corpus Christi. Tenant build-outs, lighting retrofits, service upgrades, maintenance programs.',
images: ['/og/commercial-electrician-1200x630.jpg']
}
};
const commercialFaq: QA[] = [
{
q: 'What commercial electrical services do you offer?',
a: 'We provide complete commercial electrical solutions including tenant build-outs, lighting retrofits, service upgrades, maintenance programs, and emergency repairs.'
},
{
q: 'Do you work after hours to minimize business disruption?',
a: 'Yes, we offer after-hours and weekend service to minimize downtime for your business operations.'
},
{
q: 'Can you handle large commercial projects?',
a: 'Yes, we have experience with projects of all sizes, from small retail build-outs to large warehouse installations.'
},
{
q: 'Do you provide maintenance contracts?',
a: 'Yes, we offer comprehensive maintenance programs including scheduled inspections, thermal imaging, and emergency repair service.'
}
];
export default function Commercial() {
return (
<>
{/* HERO */}
<section className="bg-gradient-to-br from-brand-dark to-slate-800 text-white">
<div className="container-custom py-24 grid md:grid-cols-2 gap-12 items-center">
<div>
<h1 className="font-heading font-bold text-4xl md:text-5xl mb-6 leading-tight">
Commercial Electrical Services for Corpus Christi Businesses
</h1>
<p className="text-xl text-gray-300 mb-8 max-w-prose">
Minimize downtime with code-compliant installs, retrofits, and maintenance. After-hours and emergency service available.
</p>
<div className="flex flex-col sm:flex-row gap-4 mb-8">
<a
href="tel:+13618850315"
className="btn-primary text-center"
>
Call Now 24/7 Emergency Help
</a>
<a
href="#quote-form"
className="btn-secondary text-center"
>
Request Project Quote
</a>
</div>
<div className="flex flex-wrap items-center gap-6 text-sm text-gray-300">
<span className="flex items-center gap-1">
<span className="text-yellow-400"></span>
<span>4.9 Rating (200+ reviews)</span>
</span>
<span></span>
<span>A+ BBB</span>
<span></span>
<span>19+ Years</span>
</div>
</div>
<div>
<Image
src="/images/commercial.png"
alt="Commercial electrician working on business electrical system in Corpus Christi"
width={600}
height={400}
sizes="(max-width: 768px) 100vw, 50vw"
priority
className="rounded-card shadow-2xl"
/>
</div>
</div>
</section>
{/* SERVICES */}
<section className="py-24 bg-white">
<div className="container-custom">
<h2 className="font-heading font-bold text-3xl text-center mb-12">Complete Commercial Electrical Solutions</h2>
<div className="grid md:grid-cols-2 gap-8">
{[
{
title: 'Tenant Build-Outs',
items: ['Power distribution design', 'Lighting layout & installation', 'Data/communication wiring', 'Code compliance & permitting'],
icon: '🏢',
bgColor: 'bg-brand-lightBlue'
},
{
title: 'Lighting Retrofits',
items: ['LED conversion & rebates', 'Emergency lighting systems', 'Occupancy sensors', 'Energy usage analysis'],
icon: '💡',
bgColor: 'bg-brand-lightOrange'
},
{
title: 'Service Upgrades',
items: ['Main service upgrades', 'Distribution panels', 'Load calculations', 'Power quality analysis'],
icon: '⚡',
bgColor: 'bg-brand-lightGreen'
},
{
title: 'Maintenance Programs',
items: ['Scheduled inspections', 'Thermal imaging', 'Emergency repair service', 'Compliance documentation'],
icon: '🔄',
bgColor: 'bg-brand-lightPurple'
}
].map((service, i) => (
<div key={i} className="card group hover:shadow-lg transition-all duration-200">
<div className="flex items-start gap-4">
<div className={`w-12 h-12 ${service.bgColor} rounded-full flex items-center justify-center flex-shrink-0`}>
<span className="text-2xl">{service.icon}</span>
</div>
<div>
<h3 className="font-heading font-semibold text-lg mb-3 group-hover:text-brand-green transition-colors">
{service.title}
</h3>
<ul className="space-y-2 text-sm text-gray-600">
{service.items.map((item, j) => (
<li key={j} className="flex items-center gap-2">
<span className="w-1.5 h-1.5 bg-brand-green rounded-full"></span>
{item}
</li>
))}
</ul>
</div>
</div>
</div>
))}
</div>
</div>
</section>
{/* INDUSTRIES */}
<section className="py-24 bg-brand-surface">
<div className="container-custom">
<h2 className="font-heading font-bold text-3xl text-center mb-12">Industries We Serve</h2>
<div className="grid md:grid-cols-3 gap-8">
{[
{ name: 'Office Buildings', icon: '🏢', desc: 'Modern office spaces with efficient lighting and power systems' },
{ name: 'Retail Stores', icon: '🛍️', desc: 'Point-of-sale systems, display lighting, and security' },
{ name: 'Restaurants', icon: '🍽️', desc: 'Commercial kitchens, dining areas, and outdoor spaces' },
{ name: 'Schools', icon: '🎓', desc: 'Educational facilities with safety and accessibility compliance' },
{ name: 'Medical Facilities', icon: '🏥', desc: 'Healthcare environments with critical power systems' },
{ name: 'Warehouses', icon: '🏭', desc: 'Industrial spaces with heavy equipment and automation' }
].map((industry, i) => (
<div key={i} className="card text-center">
<div className="text-4xl mb-4">{industry.icon}</div>
<h3 className="font-heading font-semibold text-lg mb-2">{industry.name}</h3>
<p className="text-gray-600 text-sm">{industry.desc}</p>
</div>
))}
</div>
</div>
</section>
{/* FAQ */}
<FAQ items={commercialFaq} />
{/* CTA */}
<section className="py-24 bg-brand-dark text-white">
<div className="container-custom">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div>
<h2 className="font-heading font-bold text-3xl mb-6">Ready to Power Your Business?</h2>
<p className="text-xl text-gray-300 mb-8">
Get a free consultation for your commercial electrical project. We provide detailed estimates and flexible scheduling.
</p>
<div className="space-y-3 text-sm text-gray-300 mb-8">
<p className="flex items-center gap-2">
<span className="text-brand-green"></span>
Licensed commercial electrical contractor
</p>
<p className="flex items-center gap-2">
<span className="text-brand-green"></span>
After-hours and weekend service
</p>
<p className="flex items-center gap-2">
<span className="text-brand-green"></span>
Emergency repair response
</p>
<p className="flex items-center gap-2">
<span className="text-brand-green"></span>
Maintenance programs available
</p>
</div>
<p className="text-xl font-semibold">Call: (361) 885-0315</p>
</div>
<div id="quote-form">
<ContactForm variant="dark" />
</div>
</div>
</div>
</section>
</>
);
}