54 lines
3.1 KiB
TypeScript
54 lines
3.1 KiB
TypeScript
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>
|
||
);
|
||
}
|