diff --git a/docs/product-screenshots.md b/docs/product-screenshots.md index 8ed9507..4aa6e32 100644 --- a/docs/product-screenshots.md +++ b/docs/product-screenshots.md @@ -15,4 +15,4 @@ Die Metadaten und Bildbeschreibungen stehen in `src/lib/marketing/screenshots.ts 7. Notdienst, Kalender, Adressbuch und eigene Abwesenheiten zeigen die Elternansicht. Bei Mitteilungen die erste aktualisierte Meldung öffnen. Für Arbeitszeit mit dem Teamkonto anmelden und zur erfassten Woche vom 5. bis 11. Oktober wechseln. 8. Bilder und Vergrößerung auf Desktop und Mobilgerät prüfen, dann Beispieldatenbank und lokalen Server entfernen. -Die Screenshot-Files sind zusammen unter 500 KiB groß. Das alte Bild `notdienst-calendar-linen.png` wird nicht mehr von der Landingpage verwendet. +Die sechs Screenshot-Files der Galerie sind zusammen unter 500 KiB groß. Die zusätzliche Aufnahme `termin-details.jpg` zeigt Teilnahme und Mitbringliste für das Erklärvideo. Das alte Bild `notdienst-calendar-linen.png` wird nicht mehr von der Landingpage verwendet. diff --git a/docs/product-video.md b/docs/product-video.md new file mode 100644 index 0000000..711c104 --- /dev/null +++ b/docs/product-video.md @@ -0,0 +1,28 @@ +# Erklärvideo für Kita-Planer + +Stand: 14. Oktober 2026. Das Video ist ein zweiminütiger, tonloser Rundgang durch die WebApp. Es verwendet echte App-Screenshots mit ausschließlich fiktiven Beispieldaten. Bildausschnitte und grüne Markierungen führen durch die Funktionen; es wird keine Bildschirmaufnahme von Klicks vorgetäuscht. + +## Dateien + +- `public/landing/video/kita-planer-rundgang.mp4`: teilbare Fassung mit fest eingeblendeten deutschen Untertiteln. H.264, 1920 × 1080, 25 Bilder/s, 2:00 Minuten, ohne Audiospur. +- `public/landing/video/kita-planer-rundgang-web.mp4`: Website-Fassung ohne eingebrannte Untertitel. Der native Videoplayer lädt standardmäßig die deutschen WebVTT-Untertitel; sie passen sich dem Player an und lassen sich abschalten. +- `kita-planer-untertitel.vtt`: synchronisierte deutsche Untertitel für beide Fassungen. +- `kita-planer-kapitel.vtt`: acht Kapitel mit Zeitmarken. +- `kita-planer-poster.jpg`: Vorschaubild für die Landingpage. +- `kita-planer-transkript.txt`: vollständige Textfassung. + +Alle Dateien liegen unter `public/landing/video/`. Der Player startet erst auf Wunsch und lädt das Video nicht beim Seitenaufruf (`preload="none"`). Er nutzt keine externen Videoanbieter. Unter dem Player gibt es Downloadlinks und eine aufklappbare Textfassung. + +## Erneut rendern + +Das Storyboard in `scripts/product-video/storyboard.json` enthält Dauer, Texte, Quellen, Bildausschnitte und Markierungen jeder Szene. Die Quellen liegen in `public/landing/screenshots/`; die Terminaufnahme entstand ebenfalls mit dem isolierten Screenshot-Fixture. Anleitung siehe `product-screenshots.md`. + +Mit installierten Projektabhängigkeiten und lokalem `ffmpeg`: + +``` +node scripts/product-video/render.mjs +``` + +Der Renderer verwendet `sharp` aus den installierten Next.js-Abhängigkeiten für SVG-Titel und Video-Compositing. Unter macOS wird die vorhandene Schrift Avenir Next verwendet. Auf anderen Systemen diese Schrift oder einen geeigneten Ersatz bereitstellen und die Umbrüche visuell prüfen. Rendern ist ein lokaler Vorbereitungsschritt und kein Teil des Produktionsbuilds; das Deployment liefert die fertigen Dateien aus. + +Bei Textänderungen beide Fassungen rendern, den Film vollständig auf Lesbarkeit und Synchronität prüfen und die Kapitelstarts mit dem Storyboard abgleichen. Bei Aktualisierung der App die echten Screenshots erneuern und Ausschnitte/Markierungen anpassen. Die temporären Renderdateien werden nach dem Lauf automatisch entfernt. diff --git a/public/landing/screenshots/termin-details.jpg b/public/landing/screenshots/termin-details.jpg new file mode 100644 index 0000000..c5ce1ab Binary files /dev/null and b/public/landing/screenshots/termin-details.jpg differ diff --git a/public/landing/video/kita-planer-kapitel.vtt b/public/landing/video/kita-planer-kapitel.vtt new file mode 100644 index 0000000..8bd76bf --- /dev/null +++ b/public/landing/video/kita-planer-kapitel.vtt @@ -0,0 +1,33 @@ +WEBVTT + +1 +00:00:00.000 --> 00:00:10.000 +Willkommen im Kita-Planer + +2 +00:00:10.000 --> 00:00:32.000 +Notdienst gemeinsam planen + +3 +00:00:32.000 --> 00:00:52.000 +Termine und Feste im Blick + +4 +00:00:52.000 --> 00:01:06.000 +Freigegebene Kontakte + +5 +00:01:06.000 --> 00:01:20.000 +Abwesenheiten verwalten + +6 +00:01:20.000 --> 00:01:34.000 +Offizielle Mitteilungen + +7 +00:01:34.000 --> 00:01:50.000 +Arbeitszeit für das Team + +8 +00:01:50.000 --> 00:02:00.000 +Kita-Planer kennenlernen diff --git a/public/landing/video/kita-planer-poster.jpg b/public/landing/video/kita-planer-poster.jpg new file mode 100644 index 0000000..f1e59fd Binary files /dev/null and b/public/landing/video/kita-planer-poster.jpg differ diff --git a/public/landing/video/kita-planer-rundgang-web.mp4 b/public/landing/video/kita-planer-rundgang-web.mp4 new file mode 100644 index 0000000..9b37f73 Binary files /dev/null and b/public/landing/video/kita-planer-rundgang-web.mp4 differ diff --git a/public/landing/video/kita-planer-rundgang.mp4 b/public/landing/video/kita-planer-rundgang.mp4 new file mode 100644 index 0000000..5fa9a83 Binary files /dev/null and b/public/landing/video/kita-planer-rundgang.mp4 differ diff --git a/public/landing/video/kita-planer-transkript.txt b/public/landing/video/kita-planer-transkript.txt new file mode 100644 index 0000000..a2e5fd7 --- /dev/null +++ b/public/landing/video/kita-planer-transkript.txt @@ -0,0 +1,50 @@ +Kita-Planer – Ein Rundgang durch die Anwendung +Dauer: 120 Sekunden. Ohne Ton. App-Ansichten mit fiktiven Beispieldaten. + +Willkommen im Kita-Planer +Kita-Planer bringt Dienste, Termine und offizielle Informationen an einen gemeinsamen Ort – für Eltern, Vorstand und Kita-Team. + +Notdienst gemeinsam planen +Eltern markieren die Tage, an denen ihr Haushalt für den Notdienst verfügbar ist. + +Notdienst gemeinsam planen +Feste, Elternabende und gesperrte Teamtage stehen direkt im Kalender. So lässt sich die Auswahl mit dem Kita-Alltag abstimmen. + +Notdienst gemeinsam planen +Die Anzeige zeigt, ob genug Tage ausgewählt sind. Mit Speichern wird die Verfügbarkeit für die Planung übernommen. + +Termine und Feste im Blick +Im Monatskalender stehen Ausflüge, Elternabende, Feste und Schließtage. Alle sehen die Termine im selben Zusammenhang. + +Termine und Feste im Blick +Für dieses Herbstfest antwortet ihr pro Familie und gebt an, wie viele Erwachsene teilnehmen. + +Termine und Feste im Blick +In der Mitbringliste seht ihr, wer schon etwas beisteuert. Eigene Beiträge könnt ihr bearbeiten oder löschen. + +Freigegebene Kontakte +Das interne Adressbuch verbindet Haushalte, Kinder und die freigegebenen Kontakte der Eltern. + +Freigegebene Kontakte +Jeder Elternteil entscheidet selbst über die Freigabe seiner Kontaktdaten. Im Adressbuch erscheinen nur ausdrücklich freigegebene Angaben. + +Abwesenheiten verwalten +Eltern melden Abwesenheiten digital. Die Kita sieht die Meldung in ihrer Übersicht. + +Abwesenheiten verwalten +Zukünftige Abwesenheiten können Eltern bearbeiten oder zurücknehmen. Sobald eine Meldung begonnen hat, übernimmt die Kita die Änderung. + +Offizielle Mitteilungen +Mitteilungen bündeln offizielle Informationen an einem Ort. Formatierter Text und der Aktualisierungshinweis machen Änderungen sichtbar. + +Offizielle Mitteilungen +Kita-Admins können Beiträge korrigieren; Anhänge bleiben geschützt abrufbar. Beim optionalen E-Mail-Versand bleibt der Status je Empfänger nachvollziehbar. + +Arbeitszeit für das Team +Fachkräfte erfassen ihre Arbeitszeit mit Pausen und reichen vollständige Wochen zur Prüfung ein. + +Arbeitszeit für das Team +Das bestätigte Zeitkonto und der verfügbare Urlaub bleiben sichtbar. Urlaub und Freizeitausgleich lassen sich im Personalbereich beantragen. + +Kita-Planer kennenlernen +Lernt Kita-Planer in Ruhe kennen und entdeckt die passenden Funktionen. Alle gezeigten App-Ansichten verwenden ausschließlich Beispieldaten. diff --git a/public/landing/video/kita-planer-untertitel.vtt b/public/landing/video/kita-planer-untertitel.vtt new file mode 100644 index 0000000..61504d8 --- /dev/null +++ b/public/landing/video/kita-planer-untertitel.vtt @@ -0,0 +1,81 @@ +WEBVTT + +1 +00:00:00.000 --> 00:00:10.000 +Kita-Planer bringt Dienste, Termine und offizielle Informationen +an einen gemeinsamen Ort – für Eltern, Vorstand und Kita-Team. + +2 +00:00:10.000 --> 00:00:17.000 +Eltern markieren die Tage, an denen ihr Haushalt +für den Notdienst verfügbar ist. + +3 +00:00:17.000 --> 00:00:24.000 +Feste, Elternabende und gesperrte Teamtage stehen direkt im Kalender. +So lässt sich die Auswahl mit dem Kita-Alltag abstimmen. + +4 +00:00:24.000 --> 00:00:32.000 +Die Anzeige zeigt, ob genug Tage ausgewählt sind. +Mit Speichern wird die Verfügbarkeit für die Planung übernommen. + +5 +00:00:32.000 --> 00:00:41.000 +Im Monatskalender stehen Ausflüge, Elternabende, Feste und Schließtage. +Alle sehen die Termine im selben Zusammenhang. + +6 +00:00:41.000 --> 00:00:46.000 +Für dieses Herbstfest antwortet ihr pro Familie +und gebt an, wie viele Erwachsene teilnehmen. + +7 +00:00:46.000 --> 00:00:52.000 +In der Mitbringliste seht ihr, wer schon etwas beisteuert. +Eigene Beiträge könnt ihr bearbeiten oder löschen. + +8 +00:00:52.000 --> 00:00:59.000 +Das interne Adressbuch verbindet Haushalte, Kinder +und die freigegebenen Kontakte der Eltern. + +9 +00:00:59.000 --> 00:01:06.000 +Jeder Elternteil entscheidet selbst über die Freigabe seiner Kontaktdaten. +Im Adressbuch erscheinen nur ausdrücklich freigegebene Angaben. + +10 +00:01:06.000 --> 00:01:13.000 +Eltern melden Abwesenheiten digital. +Die Kita sieht die Meldung in ihrer Übersicht. + +11 +00:01:13.000 --> 00:01:20.000 +Zukünftige Abwesenheiten können Eltern bearbeiten oder zurücknehmen. +Sobald eine Meldung begonnen hat, übernimmt die Kita die Änderung. + +12 +00:01:20.000 --> 00:01:27.000 +Mitteilungen bündeln offizielle Informationen an einem Ort. +Formatierter Text und der Aktualisierungshinweis machen Änderungen sichtbar. + +13 +00:01:27.000 --> 00:01:34.000 +Kita-Admins können Beiträge korrigieren; Anhänge bleiben geschützt abrufbar. +Beim optionalen E-Mail-Versand bleibt der Status je Empfänger nachvollziehbar. + +14 +00:01:34.000 --> 00:01:42.000 +Fachkräfte erfassen ihre Arbeitszeit mit Pausen +und reichen vollständige Wochen zur Prüfung ein. + +15 +00:01:42.000 --> 00:01:50.000 +Das bestätigte Zeitkonto und der verfügbare Urlaub bleiben sichtbar. +Urlaub und Freizeitausgleich lassen sich im Personalbereich beantragen. + +16 +00:01:50.000 --> 00:02:00.000 +Lernt Kita-Planer in Ruhe kennen und entdeckt die passenden Funktionen. +Alle gezeigten App-Ansichten verwenden ausschließlich Beispieldaten. diff --git a/scripts/product-video/render.mjs b/scripts/product-video/render.mjs new file mode 100644 index 0000000..3cf0618 --- /dev/null +++ b/scripts/product-video/render.mjs @@ -0,0 +1,82 @@ +/** Render the local, silent product tour from real app captures and SVG titles. */ +import fs from 'node:fs/promises'; +import os from 'node:os'; +import path from 'node:path'; +import { fileURLToPath } from 'node:url'; +import { spawnSync } from 'node:child_process'; +import sharp from 'sharp'; + +const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..'); +const storyboard = JSON.parse(await fs.readFile(path.join(root, 'scripts/product-video/storyboard.json'), 'utf8')); +const out = path.join(root, 'public/landing/video'); +const temp = await fs.mkdtemp(path.join(os.tmpdir(), 'kita-product-video-')); +await fs.mkdir(out, { recursive: true }); +const { width: W, height: H, fps } = storyboard; +const colors = { paper: '#f7f4ed', ink: '#302820', brown: '#7b492e', green: '#3f745a', muted: '#696358' }; +const esc = text => String(text).replace(/[<>&"']/g, c => ({ '<':'<', '>':'>', '&':'&', '"':'"', "'":''' }[c])); +const text = (x,y,value,size=30,color=colors.ink,weight=400) => `${esc(value)}`; +const lines = (x,y,values,size=30,step=44,color=colors.ink,weight=400) => values.map((v,i)=>text(x,y+i*step,v,size,color,weight)).join(''); +const imageStage = { x:600, y:162, width:1240, height:714 }; +const total = storyboard.scenes.reduce((sum,scene)=>sum+scene.duration,0); +const timestamp = seconds => `${String(Math.floor(seconds/3600)).padStart(2,'0')}:${String(Math.floor(seconds/60)%60).padStart(2,'0')}:${String(seconds%60).padStart(2,'0')}.000`; +let time = 0; +const cues = []; +const assets = []; +const webAssets = []; + +function ffmpeg(args) { + const result = spawnSync('ffmpeg', ['-hide_banner','-loglevel','error','-y',...args], { encoding:'utf8', maxBuffer:8*1024*1024 }); + if (result.status !== 0) throw new Error(result.stderr || 'ffmpeg failed'); +} + +try { + for (const [index,scene] of storyboard.scenes.entries()) { + const [left,top,width,height] = scene.crop; + const shot = await sharp(path.join(root, 'public/landing/screenshots',scene.image)) + .extract({left,top,width,height}).resize(imageStage.width,imageStage.height,{fit:'contain',background:colors.paper}).png().toBuffer(); + const scale = Math.min(imageStage.width/width,imageStage.height/height); + const offsetX = imageStage.x+(imageStage.width-width*scale)/2; + const offsetY = imageStage.y+(imageStage.height-height*scale)/2; + let focus = ''; + if (scene.focus) { + const [fx,fy,fw,fh] = scene.focus; + focus = ``; + } + const chapter = storyboard.chapters[scene.chapter]; + const title = lines(74,290,scene.title,56,72,colors.ink,600); + const hintWords = scene.hint.split(' '); const hintLines = []; let line = ''; + for (const word of hintWords) { if ((line+' '+word).trim().length > 28) { hintLines.push(line); line=word; } else line=(line+' '+word).trim(); } if(line)hintLines.push(line); + const header = `${text(88,82,'K',30,'white',600)}${text(144,80,'Kita-Planer',32,colors.ink,600)}${text(144,111,'Ein Rundgang durch die Anwendung',19,colors.muted)}${text(1490,80,`${String(scene.chapter+1).padStart(2,'0')} / 08`,24,colors.green,600)}${text(1490,111,'App-Ansichten mit Beispieldaten',18,colors.muted)}${text(74,208,scene.chapter===0?'WILLKOMMEN':scene.chapter===7?'GEMEINSAM STARTEN':`BEREICH ${String(scene.chapter).padStart(2,'0')}`,20,colors.green,600)}${title}${lines(96,498,hintLines,28,40,colors.muted)}${text(74,775,'Für Eltern, Vorstand',24,colors.muted)}${text(74,811,'und das Kita-Team.',24,colors.muted)}`; + const footer = `${text(74,899,chapter.title,20,colors.muted)}${text(1470,899,'mein-kitaplaner.de',20,colors.brown,600)}`; + const base = await sharp(Buffer.from(`${header}${footer}`)).png().toBuffer(); + const captions = `${scene.subtitle.map((value,i)=>`${esc(value)}`).join('')}`; + const foreground = Buffer.from(`${focus}${captions}`); + const cleanFrame = await sharp(base).composite([{input:shot,left:imageStage.x,top:imageStage.y},{input:Buffer.from(`${focus}`),left:0,top:0}]).png().toBuffer(); + const cleanPath = path.join(temp,`web-frame-${index}.png`); + await fs.writeFile(cleanPath,cleanFrame); + const frame = await sharp(base).composite([{input:shot,left:imageStage.x,top:imageStage.y},{input:foreground,left:0,top:0}]).png().toBuffer(); + const framePath = path.join(temp,`frame-${index}.png`); + await fs.writeFile(framePath,frame); + if(index===0) await sharp(frame).jpeg({quality:88}).toFile(path.join(out,'kita-planer-poster.jpg')); + const clip = path.join(temp,`clip-${index}.mp4`); + // Gentle transitions leave the UI and all captions still and legible. + ffmpeg(['-loop','1','-framerate',String(fps),'-i',framePath,'-t',String(scene.duration),'-vf',`fade=t=in:st=0:d=0.25:color=0xf7f4ed,fade=t=out:st=${scene.duration-0.25}:d=0.25:color=0xf7f4ed,format=yuv420p`,'-c:v','libx264','-preset','fast','-crf','20','-threads','2','-an',clip]); + assets.push(clip); + const webClip = path.join(temp,`web-clip-${index}.mp4`); + ffmpeg(['-loop','1','-framerate',String(fps),'-i',cleanPath,'-t',String(scene.duration),'-vf',`fade=t=in:st=0:d=0.25:color=0xf7f4ed,fade=t=out:st=${scene.duration-0.25}:d=0.25:color=0xf7f4ed,format=yuv420p`,'-c:v','libx264','-preset','fast','-crf','20','-threads','2','-an',webClip]); + webAssets.push(webClip); + cues.push(`${index+1}\n${timestamp(time)} --> ${timestamp(time+scene.duration)}\n${scene.subtitle.join('\n')}`); + time+=scene.duration; + console.log(`Rendered scene ${index+1}/${storyboard.scenes.length}: ${chapter.title}`); + } + await fs.writeFile(path.join(temp,'concat.txt'),assets.map(p=>`file '${p}'`).join('\n')); + ffmpeg(['-f','concat','-safe','0','-i',path.join(temp,'concat.txt'),'-c','copy','-movflags','+faststart','-metadata','title=Kita-Planer – Ein Rundgang durch die Anwendung','-metadata','comment=Echte App-Ansichten mit fiktiven Beispieldaten. Deutsche Untertitel und visuelle Hinweise. Ohne Ton.',path.join(out,'kita-planer-rundgang.mp4')]); + await fs.writeFile(path.join(temp,'web-concat.txt'),webAssets.map(p=>`file '${p}'`).join('\n')); + ffmpeg(['-f','concat','-safe','0','-i',path.join(temp,'web-concat.txt'),'-c','copy','-movflags','+faststart',path.join(out,'kita-planer-rundgang-web.mp4')]); + await fs.writeFile(path.join(out,'kita-planer-untertitel.vtt'),`WEBVTT\n\n${cues.join('\n\n')}\n`); + await fs.writeFile(path.join(out,'kita-planer-kapitel.vtt'),`WEBVTT\n\n${storyboard.chapters.map((chapter,index)=>`${index+1}\n${timestamp(chapter.start)} --> ${timestamp(storyboard.chapters[index+1]?.start??total)}\n${chapter.title}`).join('\n\n')}\n`); + await fs.writeFile(path.join(out,'kita-planer-transkript.txt'),`Kita-Planer – Ein Rundgang durch die Anwendung\nDauer: ${total} Sekunden. Ohne Ton. App-Ansichten mit fiktiven Beispieldaten.\n\n${storyboard.scenes.map(scene=>`${storyboard.chapters[scene.chapter].title}\n${scene.subtitle.join(' ')}`).join('\n\n')}\n`); + console.log(`Finished ${total}s video in ${out}`); +} finally { + await fs.rm(temp,{recursive:true,force:true}); +} diff --git a/scripts/product-video/storyboard.json b/scripts/product-video/storyboard.json new file mode 100644 index 0000000..8a22efa --- /dev/null +++ b/scripts/product-video/storyboard.json @@ -0,0 +1,445 @@ +{ + "width": 1920, + "height": 1080, + "fps": 25, + "chapters": [ + { + "start": 0, + "title": "Willkommen im Kita-Planer" + }, + { + "start": 10, + "title": "Notdienst gemeinsam planen" + }, + { + "start": 32, + "title": "Termine und Feste im Blick" + }, + { + "start": 52, + "title": "Freigegebene Kontakte" + }, + { + "start": 66, + "title": "Abwesenheiten verwalten" + }, + { + "start": 80, + "title": "Offizielle Mitteilungen" + }, + { + "start": 94, + "title": "Arbeitszeit für das Team" + }, + { + "start": 110, + "title": "Kita-Planer kennenlernen" + } + ], + "scenes": [ + { + "duration": 10, + "chapter": 0, + "title": [ + "Mehr Ruhe im", + "Kita-Alltag." + ], + "hint": "Für Elterninitiativen und Kita-Vereine", + "image": "notdienst.jpg", + "crop": [ + 0, + 0, + 1600, + 1000 + ], + "subtitle": [ + "Kita-Planer bringt Dienste, Termine und offizielle Informationen", + "an einen gemeinsamen Ort – für Eltern, Vorstand und Kita-Team." + ] + }, + { + "duration": 7, + "chapter": 1, + "title": [ + "Wann könnt", + "ihr helfen?" + ], + "hint": "Verfügbarkeiten gemeinsam eintragen", + "image": "notdienst.jpg", + "crop": [ + 310, + 45, + 1230, + 870 + ], + "focus": [ + 325, + 365, + 394, + 200 + ], + "subtitle": [ + "Eltern markieren die Tage, an denen ihr Haushalt", + "für den Notdienst verfügbar ist." + ] + }, + { + "duration": 7, + "chapter": 1, + "title": [ + "Kita-Termine", + "gleich sehen." + ], + "hint": "Teamtage sind für die Auswahl gesperrt", + "image": "notdienst.jpg", + "crop": [ + 330, + 170, + 1200, + 720 + ], + "focus": [ + 355, + 670, + 335, + 105 + ], + "subtitle": [ + "Feste, Elternabende und gesperrte Teamtage stehen direkt im Kalender.", + "So lässt sich die Auswahl mit dem Kita-Alltag abstimmen." + ] + }, + { + "duration": 8, + "chapter": 1, + "title": [ + "Auswahl prüfen.", + "Dann speichern." + ], + "hint": "Der Fortschritt bleibt sichtbar", + "image": "notdienst.jpg", + "crop": [ + 310, + 45, + 1230, + 870 + ], + "focus": [ + 1050, + 80, + 450, + 65 + ], + "subtitle": [ + "Die Anzeige zeigt, ob genug Tage ausgewählt sind.", + "Mit Speichern wird die Verfügbarkeit für die Planung übernommen." + ] + }, + { + "duration": 9, + "chapter": 2, + "title": [ + "Was steht", + "als Nächstes an?" + ], + "hint": "Ein gemeinsamer Kalender", + "image": "kalender.jpg", + "crop": [ + 300, + 35, + 1240, + 920 + ], + "focus": [ + 830, + 660, + 415, + 155 + ], + "subtitle": [ + "Im Monatskalender stehen Ausflüge, Elternabende, Feste und Schließtage.", + "Alle sehen die Termine im selben Zusammenhang." + ] + }, + { + "duration": 5, + "chapter": 2, + "title": [ + "Zusagen pro", + "Familie." + ], + "hint": "Anzahl der Erwachsenen angeben", + "image": "termin-details.jpg", + "crop": [ + 543, + 335, + 501, + 370 + ], + "focus": [ + 561, + 444, + 470, + 150 + ], + "subtitle": [ + "Für dieses Herbstfest antwortet ihr pro Familie", + "und gebt an, wie viele Erwachsene teilnehmen." + ] + }, + { + "duration": 6, + "chapter": 2, + "title": [ + "Wer bringt", + "was mit?" + ], + "hint": "Eigene Beiträge bearbeiten oder löschen", + "image": "termin-details.jpg", + "crop": [ + 543, + 690, + 501, + 318 + ], + "focus": [ + 575, + 748, + 440, + 62 + ], + "subtitle": [ + "In der Mitbringliste seht ihr, wer schon etwas beisteuert.", + "Eigene Beiträge könnt ihr bearbeiten oder löschen." + ] + }, + { + "duration": 7, + "chapter": 3, + "title": [ + "Familien und", + "Kontakte finden." + ], + "hint": "Haushalte und Kinder zusammen sehen", + "image": "adressbuch.jpg", + "crop": [ + 295, + 35, + 1220, + 700 + ], + "focus": [ + 315, + 325, + 1080, + 120 + ], + "subtitle": [ + "Das interne Adressbuch verbindet Haushalte, Kinder", + "und die freigegebenen Kontakte der Eltern." + ] + }, + { + "duration": 7, + "chapter": 3, + "title": [ + "Freigabe bleibt", + "eine Entscheidung." + ], + "hint": "Kontaktdaten erscheinen nach Opt-in", + "image": "adressbuch.jpg", + "crop": [ + 580, + 290, + 900, + 310 + ], + "focus": [ + 638, + 330, + 420, + 95 + ], + "subtitle": [ + "Jeder Elternteil entscheidet selbst über die Freigabe seiner Kontaktdaten.", + "Im Adressbuch erscheinen nur ausdrücklich freigegebene Angaben." + ] + }, + { + "duration": 7, + "chapter": 4, + "title": [ + "Kind abmelden.", + "Kita informieren." + ], + "hint": "Krankheit, Urlaub und andere Gründe", + "image": "abwesenheiten.jpg", + "crop": [ + 395, + 25, + 1060, + 640 + ], + "focus": [ + 420, + 320, + 1010, + 130 + ], + "subtitle": [ + "Eltern melden Abwesenheiten digital.", + "Die Kita sieht die Meldung in ihrer Übersicht." + ] + }, + { + "duration": 7, + "chapter": 4, + "title": [ + "Pläne dürfen", + "sich ändern." + ], + "hint": "Zukünftige Meldungen korrigieren", + "image": "abwesenheiten.jpg", + "crop": [ + 415, + 305, + 1020, + 340 + ], + "focus": [ + 446, + 565, + 320, + 45 + ], + "subtitle": [ + "Zukünftige Abwesenheiten können Eltern bearbeiten oder zurücknehmen.", + "Sobald eine Meldung begonnen hat, übernimmt die Kita die Änderung." + ] + }, + { + "duration": 7, + "chapter": 5, + "title": [ + "Offizielle Infos", + "bleiben auffindbar." + ], + "hint": "Das digitale Schwarze Brett", + "image": "mitteilungen.jpg", + "crop": [ + 410, + 275, + 780, + 450 + ], + "focus": [ + 484, + 367, + 630, + 80 + ], + "subtitle": [ + "Mitteilungen bündeln offizielle Informationen an einem Ort.", + "Formatierter Text und der Aktualisierungshinweis machen Änderungen sichtbar." + ] + }, + { + "duration": 7, + "chapter": 5, + "title": [ + "Auch nach einer", + "Korrektur klar." + ], + "hint": "Geschützte Anhänge und optionale E-Mails", + "image": "mitteilungen.jpg", + "crop": [ + 450, + 330, + 700, + 335 + ], + "focus": [ + 485, + 580, + 625, + 53 + ], + "subtitle": [ + "Kita-Admins können Beiträge korrigieren; Anhänge bleiben geschützt abrufbar.", + "Beim optionalen E-Mail-Versand bleibt der Status je Empfänger nachvollziehbar." + ] + }, + { + "duration": 8, + "chapter": 6, + "title": [ + "Arbeitszeit für", + "das Kita-Team." + ], + "hint": "Stunden erfassen und Wochen einreichen", + "image": "personal.jpg", + "crop": [ + 315, + 445, + 1210, + 780 + ], + "focus": [ + 345, + 1105, + 780, + 105 + ], + "subtitle": [ + "Fachkräfte erfassen ihre Arbeitszeit mit Pausen", + "und reichen vollständige Wochen zur Prüfung ein." + ] + }, + { + "duration": 8, + "chapter": 6, + "title": [ + "Zeitkonto und", + "Urlaub im Blick." + ], + "hint": "Bestätigte Zeit von vorläufiger unterscheiden", + "image": "personal.jpg", + "crop": [ + 308, + 235, + 1210, + 200 + ], + "focus": [ + 315, + 275, + 1185, + 135 + ], + "subtitle": [ + "Das bestätigte Zeitkonto und der verfügbare Urlaub bleiben sichtbar.", + "Urlaub und Freizeitausgleich lassen sich im Personalbereich beantragen." + ] + }, + { + "duration": 10, + "chapter": 7, + "title": [ + "Gemeinsam", + "besser planen." + ], + "hint": "Startet mit den Abläufen, die euch entlasten", + "image": "kalender.jpg", + "crop": [ + 300, + 35, + 1240, + 920 + ], + "subtitle": [ + "Lernt Kita-Planer in Ruhe kennen und entdeckt die passenden Funktionen.", + "Alle gezeigten App-Ansichten verwenden ausschließlich Beispieldaten." + ] + } + ] +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 2b0b070..c56187e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -40,6 +40,7 @@ import { } from "@/lib/marketing/seo"; import { ProductScreenshots, ScreenshotPreview } from "@/components/marketing/product-screenshots"; import { getProductScreenshot } from "@/lib/marketing/screenshots"; +import { ProductVideo } from "@/components/marketing/product-video"; import { ContactForm } from "./contact-form"; export const metadata = publicPageMetadata( @@ -244,10 +245,10 @@ export default function LandingPage() { size="lg" className="h-12 bg-white px-6 text-slate-950 hover:bg-white/90" > - - Demo anfragen + + Video ansehen - +