feat(marketing): add captioned product walkthrough video

2026-10-14 10:52:31 +02:00
parent d4aa90422f
commit 0de3e9ae7e
15 changed files with 781 additions and 6 deletions
@@ -0,0 +1,53 @@
+import storyboard from "../../../scripts/product-video/storyboard.json";
+
+export function ProductVideo() {
+  return (
+    <section id="produkt-video" aria-labelledby="produkt-video-heading" className="mx-auto w-full max-w-7xl scroll-mt-8 px-5 pt-16 pb-4 sm:px-6 lg:pt-24">
+      <div className="mb-8 grid gap-5 lg:grid-cols-[0.85fr_1.15fr] lg:items-end">
+        <div>
+          <p className="mb-3 text-sm font-semibold uppercase tracking-wide text-emerald-700">In Ruhe kennenlernen</p>
+          <h2 id="produkt-video-heading" className="text-balance text-3xl font-semibold leading-tight sm:text-4xl">Kita-Planer in zwei Minuten.</h2>
+        </div>
+        <p className="max-w-2xl text-sm leading-6 text-slate-600 lg:justify-self-end">
+          Ein Rundgang durch die sechs Bereiche mit echten App-Ansichten und Beispieldaten.
+          Deutsche Untertitel und markierte Hinweise erklären die Abläufe – ohne Ton und ohne Gesprächstermin.
+        </p>
+      </div>
+      <video
+        controls
+        playsInline
+        preload="none"
+        width={1920}
+        height={1080}
+        poster="/landing/video/kita-planer-poster.jpg"
+        aria-label="Kita-Planer: zweiminütiger Rundgang mit deutschen Untertiteln und visuellen Hinweisen"
+        className="aspect-video h-auto w-full rounded-2xl border border-slate-200 bg-[#f7f4ed] shadow-sm [&::cue]:text-[clamp(12px,1.8vw,24px)]"
+      >
+        <source src="/landing/video/kita-planer-rundgang-web.mp4" type="video/mp4" />
+        <track src="/landing/video/kita-planer-untertitel.vtt" kind="captions" srcLang="de" label="Deutsch" default />
+        <track src="/landing/video/kita-planer-kapitel.vtt" kind="chapters" srcLang="de" label="Kapitel" />
+        Dein Browser unterstützt die Videoanzeige nicht. Das Video kannst du über den Link unten herunterladen.
+      </video>
+      <div className="mt-4 flex flex-wrap items-center justify-between gap-3 text-xs leading-6 text-slate-500">
+        <p>2:00 Min. · Ohne Ton · Deutsche Untertitel</p>
+        <div className="flex flex-wrap gap-x-5 gap-y-1">
+          <a href="/landing/video/kita-planer-rundgang.mp4" download className="font-medium text-emerald-800 underline-offset-4 hover:underline">Video herunterladen</a>
+          <a href="/landing/video/kita-planer-untertitel.vtt" download className="text-emerald-800 underline-offset-4 hover:underline">Untertitel als Datei</a>
+        </div>
+      </div>
+      <details className="mt-5 rounded-xl border border-slate-200 bg-white px-5 py-4 text-sm text-slate-600">
+        <summary className="cursor-pointer font-medium text-slate-800">Videoinhalt als Text lesen</summary>
+        <div className="mt-5 grid gap-5 md:grid-cols-2">
+          {storyboard.chapters.map((chapter, index) => (
+            <div key={chapter.title}>
+              <h3 className="font-semibold text-slate-800">{chapter.title}</h3>
+              <div className="mt-2 space-y-2 leading-6">
+                {storyboard.scenes.filter((scene) => scene.chapter === index).map((scene) => <p key={scene.title.join(" ")}>{scene.subtitle.join(" ")}</p>)}
+              </div>
+            </div>
+          ))}
+        </div>
+      </details>
+    </section>
+  );
+}