initial

web/components/Hero.tsx

@@ -0,0 +1,35 @@
+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>
+  );
+}