MVp

components/Hero.tsx

@@ -0,0 +1,36 @@
+"use client"
+import Image from 'next/image'
+import Link from 'next/link'
+
+type Dict = Awaited<ReturnType<typeof import('@/lib/i18n').getDictionary>>
+
+export default function Hero({ dict }: { dict: Dict }) {
+  const d = dict.home.hero
+  return (
+    <>
+      <div className="site-bg" aria-hidden="true" />
+      <section className="section hero" aria-label="Hero">
+        <div className="container hero__grid">
+          <div>
+            <span className="kicker">Modern Magician &amp; Pickpocket</span>
+            <h1 className="h1 hero__title">{d.headline1.title}</h1>
+            <p className="hero__lead">{d.headline1.sub}</p>
+            <div className="h-stack mt-4">
+              <Link href="/contact#booking" className="btn btn--primary">{dict.common.cta.bookNow}</Link>
+              <Link href="/showreel" className="btn btn--ghost">{dict.common.cta.watchShowreel}</Link>
+            </div>
+            <div className="stack mt-6">
+              <div className="badge badge--accent">Seen on: SAT.1 • WDR • ZDF • Amazon Prime Video</div>
+              <div className="badge">5/5 stars, 12 reviews, 20+ bookings, 100% recommendation; since 12/2022 on Eventpeppers.</div>
+              <div className="badge">Location: 42699 Solingen, travel radius &gt;1000 km</div>
+            </div>
+          </div>
+          <div className="hero__media sparkle">
+            <Image src="https://images.eventpeppers.com/sites/default/files/imagecache/profile-picture/images/13234/michael-peskov-magier-taschendieb-453624.jpeg" alt="Michael Peskov – Magier & Taschendieb" priority width={1200} height={1200} sizes="(max-width: 960px) 100vw, 50vw" className="cover" />
+            <div className="hero__badge">Live reactions • Close-up &amp; Stage</div>
+          </div>
+        </div>
+      </section>
+    </>
+  )
+}