initial
This commit is contained in:
148
web/components/ServiceCards.tsx
Normal file
148
web/components/ServiceCards.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
'use client';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
|
||||
const items = [
|
||||
{
|
||||
title: 'Emergency Repair',
|
||||
desc: 'Outages, hot outlets, breakers tripping.',
|
||||
href: '/corpus-christi/emergency-electrician',
|
||||
icon: '🚨',
|
||||
image: '/images/emergency_repair.png',
|
||||
bgColor: 'bg-gradient-to-br from-red-500 to-red-600',
|
||||
textColor: 'text-red-600',
|
||||
hoverColor: 'hover:from-red-600 hover:to-red-700'
|
||||
},
|
||||
{
|
||||
title: 'Panel Upgrades',
|
||||
desc: '100A→200A, AFCI/GFCI, permits & inspections.',
|
||||
href: '/corpus-christi/panel-upgrades',
|
||||
icon: '⚡',
|
||||
image: '/images/panel_upgrade.png',
|
||||
bgColor: 'bg-gradient-to-br from-blue-500 to-blue-600',
|
||||
textColor: 'text-blue-600',
|
||||
hoverColor: 'hover:from-blue-600 hover:to-blue-700'
|
||||
},
|
||||
{
|
||||
title: 'Residential Services',
|
||||
desc: 'Complete home electrical solutions.',
|
||||
href: '/corpus-christi/residential',
|
||||
icon: '🏠',
|
||||
image: '/images/residential.png',
|
||||
bgColor: 'bg-gradient-to-br from-yellow-500 to-orange-500',
|
||||
textColor: 'text-orange-600',
|
||||
hoverColor: 'hover:from-yellow-600 hover:to-orange-600'
|
||||
},
|
||||
{
|
||||
title: 'EV-Ready Circuits',
|
||||
desc: 'Dedicated 240V outlet, load calc.',
|
||||
href: '/corpus-christi/ev-charger-install',
|
||||
icon: '🔋',
|
||||
image: '/images/ev_ready.png',
|
||||
bgColor: 'bg-gradient-to-br from-green-500 to-green-600',
|
||||
textColor: 'text-green-600',
|
||||
hoverColor: 'hover:from-green-600 hover:to-green-700'
|
||||
},
|
||||
{
|
||||
title: 'Commercial Build-Outs',
|
||||
desc: 'Data, emergency lighting, distribution.',
|
||||
href: '/commercial',
|
||||
icon: '🏢',
|
||||
image: '/images/comnercial_buildout.png',
|
||||
bgColor: 'bg-gradient-to-br from-purple-500 to-purple-600',
|
||||
textColor: 'text-purple-600',
|
||||
hoverColor: 'hover:from-purple-600 hover:to-purple-700'
|
||||
},
|
||||
{
|
||||
title: 'Commercial Services',
|
||||
desc: 'Professional commercial electrical solutions.',
|
||||
href: '/commercial',
|
||||
icon: '🏢',
|
||||
image: '/images/commercial.png',
|
||||
bgColor: 'bg-gradient-to-br from-indigo-500 to-indigo-600',
|
||||
textColor: 'text-indigo-600',
|
||||
hoverColor: 'hover:from-indigo-600 hover:to-indigo-700'
|
||||
},
|
||||
{
|
||||
title: 'Electrical Diagnostics',
|
||||
desc: 'Advanced troubleshooting and system analysis.',
|
||||
href: '/corpus-christi/diagnostics',
|
||||
icon: '🔍',
|
||||
image: '/images/diagnostics.png',
|
||||
bgColor: 'bg-gradient-to-br from-teal-500 to-teal-600',
|
||||
textColor: 'text-teal-600',
|
||||
hoverColor: 'hover:from-teal-600 hover:to-teal-700'
|
||||
}
|
||||
];
|
||||
|
||||
export default function ServiceCards() {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
useEffect(() => setMounted(true), []);
|
||||
|
||||
return (
|
||||
<section className="py-32 bg-gradient-to-br from-gray-50 to-white">
|
||||
<div className="container-custom">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="font-heading font-bold text-4xl md:text-5xl mb-6 text-gradient">
|
||||
Services We Offer
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
Professional electrical solutions for residential and commercial properties in Corpus Christi
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{!mounted
|
||||
? Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="card-elevated overflow-hidden animate-pulse">
|
||||
<div className="h-48 bg-gray-200" />
|
||||
<div className="p-6 space-y-3">
|
||||
<div className="h-6 bg-gray-200 w-1/2 rounded" />
|
||||
<div className="h-4 bg-gray-200 w-3/4 rounded" />
|
||||
<div className="h-4 bg-gray-200 w-2/3 rounded" />
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
: items.map((it, index) => (
|
||||
<Link
|
||||
key={it.title}
|
||||
href={it.href}
|
||||
className="group card-elevated animate-fade-in overflow-hidden"
|
||||
style={{ animationDelay: `${index * 0.1}s` }}
|
||||
>
|
||||
{/* Service Image */}
|
||||
<div className="relative h-48 overflow-hidden rounded-t-2xl">
|
||||
<Image
|
||||
src={it.image}
|
||||
alt={`${it.title} services in Corpus Christi`}
|
||||
fill
|
||||
className="object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent"></div>
|
||||
<div className={`absolute top-4 left-4 w-12 h-12 ${it.bgColor} rounded-xl flex items-center justify-center shadow-lg`}>
|
||||
<span className="text-xl">{it.icon}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service Content */}
|
||||
<div className="p-6">
|
||||
<h3 className="font-heading font-bold text-xl mb-3 group-hover:text-gradient transition-all duration-300">
|
||||
{it.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-base mb-4 leading-relaxed">{it.desc}</p>
|
||||
<span className={`inline-flex items-center gap-2 ${it.textColor} font-semibold text-sm group-hover:gap-3 transition-all duration-300`}>
|
||||
Learn more
|
||||
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user