35 lines
1.6 KiB
TypeScript
35 lines
1.6 KiB
TypeScript
import Button from './ui/Button';
|
|
|
|
export default function Hero(props: {
|
|
title: string;
|
|
subtitle: string;
|
|
image: string;
|
|
ribbon?: string;
|
|
primaryCta?: { label: string; href: string };
|
|
secondaryCta?: { label: string; href: string };
|
|
}) {
|
|
return (
|
|
<div className="bg-brand-navy text-white">
|
|
{props.ribbon && <div className="bg-brand-red text-center text-sm py-1">{props.ribbon}</div>}
|
|
<div className="mx-auto max-w-7xl px-4 py-12 md:py-16 grid md:grid-cols-2 gap-8 items-center">
|
|
<div>
|
|
<h1 className="text-3xl md:text-5xl font-bold">{props.title}</h1>
|
|
<p className="mt-4 text-white/85">{props.subtitle}</p>
|
|
<div className="mt-6 flex gap-3">
|
|
<Button variant="success" href={props.primaryCta?.href ?? '/contact'}>{props.primaryCta?.label ?? 'Call Now — 24/7 Emergency Help'}</Button>
|
|
<Button href={props.secondaryCta?.href ?? '/contact'}>{props.secondaryCta?.label ?? 'Get My Free Quote'}</Button>
|
|
</div>
|
|
<div className="mt-6 flex gap-3 text-xs text-white/75">
|
|
<span className="rounded bg-white/10 px-2 py-1">Licensed</span>
|
|
<span className="rounded bg-white/10 px-2 py-1">Insured</span>
|
|
<span className="rounded bg-white/10 px-2 py-1">Local since 2005</span>
|
|
<span className="rounded bg-white/10 px-2 py-1">24/7 Emergency</span>
|
|
</div>
|
|
</div>
|
|
<div className="rounded-xl overflow-hidden bg-white/5">
|
|
<img src={props.image} alt="Electrician at work" className="w-full h-auto" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |