1806 lines
104 KiB
TypeScript
1806 lines
104 KiB
TypeScript
import React from 'react';
|
||
import { Head, Link } from '@inertiajs/react';
|
||
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
||
import { useTranslation } from 'react-i18next';
|
||
import MarketingLayout from '@/layouts/mainWebsite';
|
||
import { Card, CardContent } from '@/components/ui/card';
|
||
import { Badge } from '@/components/ui/badge';
|
||
import { Separator } from '@/components/ui/separator';
|
||
import { Button } from '@/components/ui/button';
|
||
import { motion, useReducedMotion } from 'framer-motion';
|
||
|
||
interface OccasionsProps {
|
||
type: string;
|
||
}
|
||
|
||
const Occasions: React.FC<OccasionsProps> = ({ type }) => {
|
||
const { t, i18n } = useTranslation('marketing');
|
||
const { localizedPath } = useLocalizedRoutes();
|
||
const locale = i18n.language || 'de';
|
||
const isEn = locale.toLowerCase().startsWith('en');
|
||
const shouldReduceMotion = useReducedMotion();
|
||
const viewportOnce = { once: true, amount: 0.25 };
|
||
const revealUp = {
|
||
hidden: { opacity: 0, y: shouldReduceMotion ? 0 : 18 },
|
||
visible: {
|
||
opacity: 1,
|
||
y: 0,
|
||
transition: { duration: 0.6, ease: [0.22, 1, 0.36, 1] },
|
||
},
|
||
};
|
||
const stagger = {
|
||
hidden: {},
|
||
visible: { transition: { staggerChildren: 0.12 } },
|
||
};
|
||
|
||
const occasionsContent = {
|
||
hochzeit: {
|
||
title: t('occasions.weddings.title'),
|
||
description: t('occasions.weddings.description'),
|
||
features: [
|
||
t('occasions.weddings.benefit1'),
|
||
t('occasions.weddings.benefit2'),
|
||
t('occasions.weddings.benefit3'),
|
||
t('occasions.weddings.benefit4'),
|
||
],
|
||
cta: t('occasions.cta'),
|
||
},
|
||
geburtstag: {
|
||
title: t('occasions.birthdays.title'),
|
||
description: t('occasions.birthdays.description'),
|
||
features: [
|
||
t('occasions.birthdays.benefit1'),
|
||
t('occasions.birthdays.benefit2'),
|
||
t('occasions.birthdays.benefit3'),
|
||
t('occasions.birthdays.benefit4'),
|
||
],
|
||
cta: t('occasions.cta'),
|
||
},
|
||
firmenevent: {
|
||
title: t('occasions.corporate.title'),
|
||
description: t('occasions.corporate.description'),
|
||
features: [
|
||
t('occasions.corporate.benefit1'),
|
||
t('occasions.corporate.benefit2'),
|
||
t('occasions.corporate.benefit3'),
|
||
t('occasions.corporate.benefit4'),
|
||
],
|
||
cta: t('occasions.cta'),
|
||
},
|
||
konfirmation: {
|
||
title: t('occasions.confirmation.title'),
|
||
description: t('occasions.confirmation.description'),
|
||
features: [
|
||
t('occasions.confirmation.benefit1'),
|
||
t('occasions.confirmation.benefit2'),
|
||
t('occasions.confirmation.benefit3'),
|
||
t('occasions.confirmation.benefit4'),
|
||
],
|
||
cta: t('occasions.cta'),
|
||
},
|
||
} as const;
|
||
|
||
const content = occasionsContent[type as keyof typeof occasionsContent] || occasionsContent.hochzeit;
|
||
|
||
// Default, simple layout for unknown types
|
||
if (!['hochzeit', 'geburtstag', 'firmenevent', 'konfirmation'].includes(type)) {
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
<div className="min-h-screen bg-gray-50 py-16 px-4 dark:bg-gray-900">
|
||
<div className="container mx-auto max-w-4xl space-y-8">
|
||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400">
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="text-center">
|
||
<h1 className="mb-6 font-display text-4xl font-bold text-gray-900 dark:text-gray-100 md:text-5xl">{content.title}</h1>
|
||
<p className="mb-8 font-sans-marketing text-xl text-gray-600 dark:text-gray-300">{content.description}</p>
|
||
<Link
|
||
href={localizedPath('/packages')}
|
||
className="rounded-full bg-[#FFB6C1] px-8 py-4 font-bold text-white transition hover:bg-pink-600"
|
||
>
|
||
{content.cta}
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="grid gap-8 md:grid-cols-3">
|
||
{content.features.map((feature, index) => (
|
||
<div key={index} className="rounded-lg bg-white p-6 text-center shadow-md dark:bg-gray-800">
|
||
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[#FFB6C1]">
|
||
<span className="font-bold text-white">{index + 1}</span>
|
||
</div>
|
||
<h3 className="mb-2 text-lg font-semibold text-gray-900 dark:text-gray-100">{feature}</h3>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
|
||
// Wedding (Hochzeit)
|
||
if (type === 'hochzeit') {
|
||
if (isEn) {
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
|
||
<section className="bg-gradient-to-br from-pink-50 via-white to-amber-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||
<CardContent className="space-y-8 p-6 md:p-10">
|
||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.3fr)_1fr] md:items-center">
|
||
<div className="space-y-5">
|
||
<Badge
|
||
variant="outline"
|
||
className="border-pink-200 bg-white/70 text-pink-600 dark:border-pink-500/60 dark:bg-gray-900/70 dark:text-pink-200"
|
||
>
|
||
{t('occasions.weddings.title')}
|
||
</Badge>
|
||
<h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
|
||
Unposed, emotional wedding photos from your guests
|
||
</h1>
|
||
<p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
|
||
The Fotospiel App turns your entire guest list into a creative photo team. Instead of stiff photo booth poses,
|
||
you get real moments – from tears of joy to dancefloor chaos – all collected in one moderated gallery.
|
||
</p>
|
||
<ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Emotion-packed snapshots instead of staged photo booth pictures</li>
|
||
<li>• Guests become storytellers – no app store, no login required</li>
|
||
<li>• Everything in one GDPR-friendly gallery under your control</li>
|
||
</ul>
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Button asChild className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{content.cta}</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="rounded-3xl bg-gradient-to-br from-pink-200 via-white to-amber-100 p-4 shadow-2xl dark:from-pink-900/40 dark:via-gray-900 dark:to-gray-950">
|
||
<div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
|
||
<span>📱 QR at the entrance</span>
|
||
<span className="text-[10px] text-gray-500">Guests scan and join</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
|
||
<span>🎯 Photo tasks</span>
|
||
<span className="text-[10px] text-gray-500">“First dance”, “Biggest laugh”</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
|
||
<span>📸 Live gallery</span>
|
||
<span className="text-[10px] text-gray-500">Your day in real time</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
|
||
<span>💾 Download afterwards</span>
|
||
<span className="text-[10px] text-gray-500">Perfect for your album</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={stagger}>
|
||
<motion.div className="space-y-8" variants={revealUp}>
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">{t('occasions.weddings.benefits_title')}</h2>
|
||
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
||
Picture your wedding as a collaborative photo adventure: guests capture the day from their own perspectives –
|
||
from getting ready to the last song on the dancefloor.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Without the Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li>• Photos disappear into countless chat groups</li>
|
||
<li>• Photo booth images stay in a corner</li>
|
||
<li>• Many lovely moments never make it into your album</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-pink-200 shadow-md dark:border-pink-500/50 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-pink-600 dark:text-pink-300">
|
||
With the Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
|
||
<li>• Guests actively capture your celebration</li>
|
||
<li>• Tasks guide their view to your highlights</li>
|
||
<li>• You already see first favorite shots during the party</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best practices for your wedding setup</h3>
|
||
<ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>1. Add the QR code to your invitation or wedding website.</li>
|
||
<li>2. Explain the photo tasks clearly – for example on table cards or next to the guestbook.</li>
|
||
<li>3. Announce a short “photo challenge” slot between dinner and party (e.g. 20–30 minutes).</li>
|
||
<li>4. Show a small slideshow of the best guest photos in the evening.</li>
|
||
<li>5. After the wedding, go through the gallery together and mark favorites for your album.</li>
|
||
</ol>
|
||
</div>
|
||
</motion.div>
|
||
|
||
<motion.aside className="space-y-6" variants={revealUp}>
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Who is this ideal for?
|
||
</p>
|
||
<ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Couples who want real emotions instead of staged photos</li>
|
||
<li>• Best (wo)men planning a heartfelt surprise</li>
|
||
<li>• Photographers who value additional guest-perspective material</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Our recommendation
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
For typical weddings with 60–150 guests, choose a package with enough photo storage and a longer gallery
|
||
lifetime so you can revisit your memories in peace.
|
||
</p>
|
||
<Button asChild size="sm" className="mt-1 bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Frequently asked questions
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>
|
||
<span className="font-semibold">Do guests need an account?</span>
|
||
<br />
|
||
No – scan the QR code, take photos, done.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">How do we stay in control?</span>
|
||
<br />
|
||
You decide which photos are visible by moderating uploads.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">What about poor reception?</span>
|
||
<br />
|
||
The Fotospiel App works offline and syncs later.
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.aside>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Separator className="my-8" />
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
What couples say
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
“We ended up with more than 800 guest photos – from little mishaps to the most emotional moments. Our
|
||
photographer loved how well the Fotospiel App complemented her work.”
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Next step
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Try the Fotospiel App with a test event or set up your wedding gallery right away. You can start small and
|
||
upgrade later at any time.
|
||
</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<Button asChild size="sm" className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
|
||
// German wedding content
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
|
||
<section className="bg-gradient-to-br from-pink-50 via-white to-amber-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||
<CardContent className="space-y-8 p-6 md:p-10">
|
||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.3fr)_1fr] md:items-center">
|
||
<div className="space-y-5">
|
||
<Badge
|
||
variant="outline"
|
||
className="border-pink-200 bg-white/70 text-pink-600 dark:border-pink-500/60 dark:bg-gray-900/70 dark:text-pink-200"
|
||
>
|
||
{t('occasions.weddings.title')}
|
||
</Badge>
|
||
<h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
|
||
{t('occasions.weddings.hero_title', { defaultValue: content.title })}
|
||
</h1>
|
||
<p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
|
||
{content.description}
|
||
</p>
|
||
<ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Emotionale Momentaufnahmen statt gestellter Fotobox-Bilder</li>
|
||
<li>• Gäste werden zu Storyteller:innen – ohne App-Download</li>
|
||
<li>• Alles DSGVO-freundlich in einer gemeinsamen Galerie</li>
|
||
</ul>
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Button asChild className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{content.cta}</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="rounded-3xl bg-gradient-to-br from-pink-200 via-white to-amber-100 p-4 shadow-2xl dark:from-pink-900/40 dark:via-gray-900 dark:to-gray-950">
|
||
<div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
|
||
<span>📱 QR-Code am Eingang</span>
|
||
<span className="text-[10px] text-gray-500">Gäste scannen & starten</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
|
||
<span>🎯 Fotoaufgaben</span>
|
||
<span className="text-[10px] text-gray-500">„Erster Tanz", „Lautestes Lachen"</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
|
||
<span>📸 Live-Galerie</span>
|
||
<span className="text-[10px] text-gray-500">Euer Tag in Echtzeit</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/80 px-4 py-3 dark:bg-gray-900/80">
|
||
<span>💾 Download danach</span>
|
||
<span className="text-[10px] text-gray-500">Perfekt fürs Album</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||
<div className="space-y-8">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">{t('occasions.weddings.benefits_title')}</h2>
|
||
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
||
Stell dir eure Hochzeitsfeier als gemeinsames Foto-Abenteuer vor: Gäst:innen werden zu Geschichtenerzähler:innen,
|
||
die euren Tag aus ganz eigenen Blickwinkeln festhalten – vom Getting Ready bis zum letzten Song.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Ohne die Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li>• Fotos versteckt in zig WhatsApp-Gruppen</li>
|
||
<li>• Fotobox-Bilder bleiben in der Ecke</li>
|
||
<li>• Viele tolle Momente gehen unter</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-pink-200 shadow-md dark:border-pink-500/50 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-pink-600 dark:text-pink-300">
|
||
Mit der Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
|
||
<li>• Alle Gäste fotografieren aktiv mit</li>
|
||
<li>• Aufgaben leiten den Blick auf eure Highlights</li>
|
||
<li>• Ihr seht schon am Abend erste Lieblingsbilder</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best Practices für euren Hochzeitseinsatz</h3>
|
||
<ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>1. QR-Code bereits in der Einladung oder auf eurer Hochzeitswebseite einbinden.</li>
|
||
<li>2. Fotoaufgaben klar kommunizieren – z.B. als Karte am Platz oder am Gästebuch.</li>
|
||
<li>3. Zwischen Essen und Party einen „Foto-Challenge"-Slot ankündigen (z.B. 20–30 Minuten).</li>
|
||
<li>4. Abends eine kleine Slideshow aus den besten Gäste-Fotos zeigen.</li>
|
||
<li>5. Nach der Hochzeit gemeinsam durch die Galerie gehen und Favoriten fürs Album markieren.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="space-y-6">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Für wen ist das ideal?
|
||
</p>
|
||
<ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Paare, die echte Emotionen statt gestellter Fotos möchten</li>
|
||
<li>• Trauzeug:innen, die eine liebevolle Aktion organisieren wollen</li>
|
||
<li>• Fotograf:innen, die ergänzendes Material aus Gästeperspektive schätzen</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Unsere Empfehlung
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Für typische Hochzeiten mit 60–150 Gästen passt meist ein Paket mit ausreichend Fotospeicher und einer
|
||
längeren Galeriedauer am besten.
|
||
</p>
|
||
<Button asChild size="sm" className="mt-1 bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Häufige Fragen
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>
|
||
<span className="font-semibold">Brauchen Gäste einen Account?</span>
|
||
<br />
|
||
Nein – QR scannen, Fotos machen, fertig.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">Wie behaltet ihr die Kontrolle?</span>
|
||
<br />
|
||
Ihr könnt Fotos moderieren und nur freigegebene Bilder sichtbar machen.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">Was ist mit schlechtem Empfang?</span>
|
||
<br />
|
||
Die PWA funktioniert auch offline und synchronisiert später.
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</aside>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Separator className="my-8" />
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Was Paare berichten
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
„Wir hatten über 800 Gästefotos – von kleinen Pannen bis zu den emotionalsten Momenten. Unsere Fotografin war
|
||
begeistert, wie gut die Fotospiel App ihre Arbeit ergänzt hat.“
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Nächster Schritt
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Testet die Fotospiel App mit einem Probe-Event oder legt direkt eure Hochzeits-Galerie an. Ihr könnt klein starten
|
||
und später jederzeit upgraden.
|
||
</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<Button asChild size="sm" className="bg-[#FFB6C1] text-white hover:bg-[#FF69B4]">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
|
||
// Birthday
|
||
if (type === 'geburtstag') {
|
||
if (isEn) {
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
|
||
<section className="bg-gradient-to-br from-amber-50 via-white to-pink-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||
<CardContent className="space-y-8 p-6 md:p-10">
|
||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.4fr)_1fr] md:items-center">
|
||
<div className="space-y-5">
|
||
<Badge
|
||
variant="outline"
|
||
className="border-amber-200 bg-white/70 text-amber-700 dark:border-amber-400/60 dark:bg-gray-900/70 dark:text-amber-200"
|
||
>
|
||
{content.title}
|
||
</Badge>
|
||
<h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
|
||
More than just quick phone snaps
|
||
</h1>
|
||
<p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
|
||
Whether it's a kids' birthday or a big milestone party: the Fotospiel App turns all your guests into part of
|
||
the photo challenge. Instead of scattered images in chat groups, everything ends up in a single moderated
|
||
gallery.
|
||
</p>
|
||
<ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• QR code on invitations, cake or decor – everyone can join instantly</li>
|
||
<li>• Playful photo tasks like "biggest smile" or "wildest cake moment"</li>
|
||
<li>• Gallery for parents and friends – without social-media overload</li>
|
||
</ul>
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Button asChild className="bg-amber-400 text-gray-900 hover:bg-amber-500">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{content.cta}</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="rounded-3xl bg-gradient-to-br from-amber-200 via-white to-pink-200 p-4 shadow-2xl dark:from-amber-900/30 dark:via-gray-900 dark:to-pink-900/30">
|
||
<div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🎂 QR on the cake</span>
|
||
<span className="text-[10px] text-gray-500">Scan and start</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🎉 Photo tasks</span>
|
||
<span className="text-[10px] text-gray-500">"Funniest face", "Party chaos"</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>📱 Live gallery</span>
|
||
<span className="text-[10px] text-gray-500">For young and old</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>💾 Memory album</span>
|
||
<span className="text-[10px] text-gray-500">Download after the party</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||
<div className="space-y-8">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">How to turn your party into a photo challenge</h2>
|
||
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
||
From kids' birthdays to adult parties: the Fotospiel App turns passive guests into active story hunters. Your
|
||
best moments end up safely in one gallery instead of disappearing in chat noise.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Without the Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li>• Photos scattered across phones and chats</li>
|
||
<li>• Parents miss many moments</li>
|
||
<li>• Hard to pick pictures for thank-you messages</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-amber-200 shadow-md dark:border-amber-400/60 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-200">
|
||
With the Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
|
||
<li>• All photos land in a single shared gallery</li>
|
||
<li>• Kids and adults enjoy playful challenges</li>
|
||
<li>• You end up with a colorful, complete memory album</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best practices for birthdays</h3>
|
||
<ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>1. Place the QR code on invitations, cake or table stands.</li>
|
||
<li>2. Announce photo tasks out loud – kids love clear challenges.</li>
|
||
<li>3. Plan a short “photo session” slot (e.g. 15 minutes) in your schedule.</li>
|
||
<li>4. Send the gallery link to all guests after the party.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="space-y-6">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Who is this ideal for?
|
||
</p>
|
||
<ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Hosts who want vivid, shared memories</li>
|
||
<li>• Parents who want to see photos of all kids</li>
|
||
<li>• Friend groups who love fun challenges</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Our recommendation
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
For birthdays with lots of kids, choose a package with enough photo storage and a longer gallery lifetime so
|
||
everyone can browse calmly after the event.
|
||
</p>
|
||
<Button asChild size="sm" className="mt-1 bg-amber-400 text-gray-900 hover:bg-amber-500">
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Frequently asked questions
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>
|
||
<span className="font-semibold">Do kids need their own account?</span>
|
||
<br />
|
||
No – it's enough if parents or older siblings scan the QR code.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">Can I keep the gallery private?</span>
|
||
<br />
|
||
Yes, you decide who receives the link and which photos are visible.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">What if the Wi-Fi is bad?</span>
|
||
<br />
|
||
The Fotospiel App stores photos offline and uploads them later.
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</aside>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Separator className="my-8" />
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
What hosts say
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
“The kids loved the challenges – and we ended up with all photos in one place instead of scrolling through
|
||
hundreds of chat messages.”
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Next step
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Create your birthday event in the Fotospiel App now and test the flow with a few friends – your QR code will be
|
||
ready in minutes.
|
||
</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<Button asChild size="sm" className="bg-amber-400 text-gray-900 hover:bg-amber-500">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
|
||
// German version (existing content)
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
|
||
<section className="bg-gradient-to-br from-amber-50 via-white to-pink-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||
<CardContent className="space-y-8 p-6 md:p-10">
|
||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.4fr)_1fr] md:items-center">
|
||
<div className="space-y-5">
|
||
<Badge
|
||
variant="outline"
|
||
className="border-amber-200 bg-white/70 text-amber-700 dark:border-amber-400/60 dark:bg-gray-900/70 dark:text-amber-200"
|
||
>
|
||
{content.title}
|
||
</Badge>
|
||
<h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
|
||
Mehr als nur Handy-Schnappschüsse
|
||
</h1>
|
||
<p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
|
||
Ob Kindergeburtstag oder runde Party: Mit der Fotospiel App werden alle Gäste Teil der Foto-Challenge.
|
||
Statt verstreuter Bilder in Chat-Gruppen landet alles in einer gemeinsamen, moderierten Galerie.
|
||
</p>
|
||
<ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• QR-Code auf Einladung, Torte oder Deko – jeder kann sofort mitmachen</li>
|
||
<li>• Spielerische Fotoaufgaben wie „größtes Lächeln" oder „größter Kuchen-Fail"</li>
|
||
<li>• Galerie für Eltern & Freundeskreis – ohne Social-Media-Zwang</li>
|
||
</ul>
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Button asChild className="bg-amber-400 text-gray-900 hover:bg-amber-500">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{content.cta}</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="rounded-3xl bg-gradient-to-br from-amber-200 via-white to-pink-200 p-4 shadow-2xl dark:from-amber-900/30 dark:via-gray-900 dark:to-pink-900/30">
|
||
<div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🎂 QR auf der Torte</span>
|
||
<span className="text-[10px] text-gray-500">Scan & los geht's</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🎉 Foto-Aufgaben</span>
|
||
<span className="text-[10px] text-gray-500">„Lustigste Grimasse", „Party-Chaos"</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>📱 Live-Galerie</span>
|
||
<span className="text-[10px] text-gray-500">Für Groß & Klein</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>💾 Erinnerungsalbum</span>
|
||
<span className="text-[10px] text-gray-500">Download nach der Feier</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||
<div className="space-y-8">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">So wird eure Party zur Foto-Challenge</h2>
|
||
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
||
Egal ob Kindergeburtstag oder Erwachsenen-Party: Die Fotospiel App macht aus passiven Gästen aktive
|
||
Geschichtensucher:innen. Die besten Momente landen sicher in eurer Galerie statt im Chat-Chaos.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Ohne die Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li>• Fotos verteilt auf zig Handys und Chats</li>
|
||
<li>• Eltern sehen vieles gar nicht</li>
|
||
<li>• Schwierige Auswahl für Dankes-Nachrichten</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-amber-200 shadow-md dark:border-amber-400/60 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-amber-700 dark:text-amber-200">
|
||
Mit der Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
|
||
<li>• Alle Fotos laufen in einer gemeinsamen Galerie ein</li>
|
||
<li>• Kids & Erwachsene haben Spaß an den Aufgaben</li>
|
||
<li>• Am Ende habt ihr ein buntes, vollständiges Erinnerungsalbum</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best Practices für Geburtstage</h3>
|
||
<ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>1. QR-Code auf Einladung, Torte oder Tischaufstellern platzieren.</li>
|
||
<li>2. Fotoaufgaben auch laut ankündigen – Kinder lieben klare Challenges.</li>
|
||
<li>3. Eine kurze „Foto-Session" (z.B. 15 Minuten) in den Ablauf einplanen.</li>
|
||
<li>4. Nach der Party einen Link zur Galerie an alle Gäste schicken.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="space-y-6">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Für wen ist das ideal?
|
||
</p>
|
||
<ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Gastgeber:innen, die eine lebendige Erinnerung schaffen wollen</li>
|
||
<li>• Eltern, die Fotos aller Kinder gesammelt sehen möchten</li>
|
||
<li>• Freundesgruppen, die Spaß-Challenges lieben</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Unsere Empfehlung
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Für Geburtstage mit vielen Kids empfiehlt sich ein Paket mit genügend Fotospeicher und längerer
|
||
Galeriedauer, damit auch nach der Feier alle in Ruhe stöbern können.
|
||
</p>
|
||
<Button asChild size="sm" className="mt-1 bg-amber-400 text-gray-900 hover:bg-amber-500">
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Häufige Fragen
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>
|
||
<span className="font-semibold">Brauchen Kinder ein eigenes Konto?</span>
|
||
<br />
|
||
Nein – es reicht, wenn Eltern oder ältere Geschwister den QR-Code scannen.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">Kann ich die Galerie privat halten?</span>
|
||
<br />
|
||
Ja, ihr entscheidet, wer den Link bekommt und welche Fotos sichtbar sind.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">Was, wenn das WLAN schlecht ist?</span>
|
||
<br />
|
||
Die Fotospiel App speichert Fotos offline und lädt sie später hoch.
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</aside>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Separator className="my-8" />
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Was Gastgeber:innen berichten
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
„Die Kinder hatten riesigen Spaß an den Aufgaben – und wir hatten am Ende alle Fotos an einem Ort, statt
|
||
hunderte Chat-Nachrichten durchsuchen zu müssen."
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Nächster Schritt
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Legt jetzt euer Geburtstags-Event in der Fotospiel App an und testet den Ablauf mit ein paar Freund:innen – der
|
||
QR-Code ist in wenigen Minuten startklar.
|
||
</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<Button asChild size="sm" className="bg-amber-400 text-gray-900 hover:bg-amber-500">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
|
||
// Corporate events
|
||
if (type === 'firmenevent') {
|
||
if (isEn) {
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
|
||
<section className="bg-gradient-to-br from-sky-50 via-white to-slate-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||
<CardContent className="space-y-8 p-6 md:p-10">
|
||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.5fr)_1fr] md:items-center">
|
||
<div className="space-y-5">
|
||
<Badge
|
||
variant="outline"
|
||
className="border-sky-200 bg-white/70 text-sky-700 dark:border-sky-400/60 dark:bg-gray-900/70 dark:text-sky-200"
|
||
>
|
||
{content.title}
|
||
</Badge>
|
||
<h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
|
||
Event photos HR and marketing can actually use
|
||
</h1>
|
||
<p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
|
||
The Fotospiel App collects all your event guests' photos in one place – with moderation, branding options
|
||
and export capabilities. Perfect for HR, marketing and employer branding.
|
||
</p>
|
||
<ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Photo challenges tailored to your format (fair, offsite, team event)</li>
|
||
<li>• Moderated gallery instead of uncontrolled social posting</li>
|
||
<li>• Export for website, intranet and internal comms</li>
|
||
</ul>
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Button asChild className="bg-sky-600 text-white hover:bg-sky-700">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{content.cta}</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="rounded-3xl bg-gradient-to-br from-sky-200 via-white to-emerald-100 p-4 shadow-2xl dark:from-sky-900/30 dark:via-gray-900 dark:to-emerald-900/30">
|
||
<div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🏷️ QR codes on badges & signage</span>
|
||
<span className="text-[10px] text-gray-500">Join without app store</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🎯 Themed photo tasks</span>
|
||
<span className="text-[10px] text-gray-500">“Best team photo”, “Innovation in action”</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🛡️ Moderated gallery</span>
|
||
<span className="text-[10px] text-gray-500">Approval by the event team</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>📊 Export & reporting</span>
|
||
<span className="text-[10px] text-gray-500">Material for HR & marketing</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||
<div className="space-y-8">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Why the Fotospiel App fits your company</h2>
|
||
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
||
Instead of scattered snapshots on employees' private devices, you get a central, controlled event gallery. Ideal
|
||
for internal communication, social media and employer branding – always with data protection in mind.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Without the Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li>• Images live on private employee devices</li>
|
||
<li>• Clearing rights for individual photos is time-consuming</li>
|
||
<li>• Little overview of available motifs</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-sky-200 shadow-md dark:border-sky-400/60 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-sky-700 dark:text-sky-200">
|
||
With the Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
|
||
<li>• Central gallery with approval workflow</li>
|
||
<li>• Quickly available visuals for internal and external channels</li>
|
||
<li>• Clarity on which images can be used</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best practices for corporate events</h3>
|
||
<ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>1. Place QR codes visibly at registration, buffet and stage areas.</li>
|
||
<li>2. Briefly explain photo challenges in the welcome or moderation.</li>
|
||
<li>3. Assign someone on the event team to approve or hide photos.</li>
|
||
<li>4. Share a curated selection internally and, if appropriate, externally after the event.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="space-y-6">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Who is this ideal for?
|
||
</p>
|
||
<ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• HR teams wanting to showcase culture and team spirit</li>
|
||
<li>• Marketing teams needing authentic event visuals</li>
|
||
<li>• Event agencies wanting to create extra value for clients</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Our recommendation
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
For recurring formats like offsites or conferences, a yearly package keeps the Fotospiel App ready to go at
|
||
all times.
|
||
</p>
|
||
<Button asChild size="sm" className="mt-1 bg-sky-600 text-white hover:bg-sky-700">
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Frequently asked questions
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>
|
||
<span className="font-semibold">What about data protection?</span>
|
||
<br />
|
||
The Fotospiel App is designed for GDPR-compliant use; sensitive data is not stored unnecessarily.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">Can we use our own branding?</span>
|
||
<br />
|
||
Yes – logos, colors and copy can be aligned with your brand.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">How do we get images into the intranet?</span>
|
||
<br />
|
||
With simple exports and downloads, your comms team can pull the best shots.
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</aside>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Separator className="my-8" />
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
What companies say
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
“After our offsite we finally had all event photos available in one place – HR and marketing were able to prepare
|
||
intranet and LinkedIn stories within the same week.”
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Next step
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Talk to your event or HR team about how the Fotospiel App could support your next event – or test it directly with
|
||
a small internal format.
|
||
</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<Button asChild size="sm" className="bg-sky-600 text-white hover:bg-sky-700">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
|
||
// German corporate content
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
|
||
<section className="bg-gradient-to-br from-sky-50 via-white to-slate-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||
<CardContent className="space-y-8 p-6 md:p-10">
|
||
<div className="flex flex-col gap-8 md:grid md:grid-cols-[minmax(0,1.5fr)_1fr] md:items-center">
|
||
<div className="space-y-5">
|
||
<Badge
|
||
variant="outline"
|
||
className="border-sky-200 bg-white/70 text-sky-700 dark:border-sky-400/60 dark:bg-gray-900/70 dark:text-sky-200"
|
||
>
|
||
{content.title}
|
||
</Badge>
|
||
<h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
|
||
Event-Fotos, die Marketing & HR wirklich nutzen können
|
||
</h1>
|
||
<p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
|
||
Die Fotospiel App sammelt alle Gäste-Fotos deines Firmenevents zentral – inklusive Moderation,
|
||
Branding-Optionen und Exportmöglichkeiten. Perfekt für HR, Marketing und Employer Branding.
|
||
</p>
|
||
<ul className="mt-4 space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Foto-Challenges passend zu deinem Format (Messe, Offsite, Team-Event)</li>
|
||
<li>• Moderierte Galerie statt unkontrolliertem Social-Media-Posting</li>
|
||
<li>• Export für Website, Intranet & interne Kommunikation</li>
|
||
</ul>
|
||
<div className="mt-6 flex flex-wrap gap-3">
|
||
<Button asChild className="bg-sky-600 text-white hover:bg-sky-700">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{content.cta}</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="rounded-3xl bg-gradient-to-br from-sky-200 via-white to-emerald-100 p-4 shadow-2xl dark:from-sky-900/30 dark:via-gray-900 dark:to-emerald-900/30">
|
||
<div className="grid gap-2 text-xs font-medium uppercase tracking-wide text-gray-700 dark:text-gray-200">
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🏷️ QR-Codes an Badge & Roll-Up</span>
|
||
<span className="text-[10px] text-gray-500">Teilnahme ohne App-Store</span>
|
||
</div>
|
||
<div className="flex itemsCenter justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🎯 Themen-Aufgaben</span>
|
||
<span className="text-[10px] text-gray-500">„Bestes Teamfoto", "Innovation in Aktion"</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>🛡️ Moderierte Galerie</span>
|
||
<span className="text-[10px] text-gray-500">Freigabe durch Orga-Team</span>
|
||
</div>
|
||
<div className="flex items-center justify-between rounded-2xl bg-white/85 px-4 py-3 dark:bg-gray-900/85">
|
||
<span>📊 Export & Reporting</span>
|
||
<span className="text-[10px] text-gray-500">Material für HR & Marketing</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-6xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||
<motion.div className="grid gap-10 lg:grid-cols-[minmax(0,1.6fr)_minmax(0,1fr)]" variants={revealUp}>
|
||
<div className="space-y-8">
|
||
<div>
|
||
<h2 className="text-2xl font-bold text-gray-900 dark:text-gray-50">Warum die Fotospiel App fürs Unternehmen passt</h2>
|
||
<p className="mt-2 text-gray-600 dark:text-gray-300">
|
||
Statt verstreuter Schnappschüsse auf privaten Smartphones erhält dein Unternehmen eine zentrale,
|
||
kontrollierte Event-Galerie. Ideal für interne Kommunikation, Social Media und Employer Branding – immer mit Blick
|
||
auf Datenschutz.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Ohne die Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-600 dark:text-gray-300">
|
||
<li>• Bilder liegen auf privaten Geräten der Mitarbeitenden</li>
|
||
<li>• Rechteklärung für einzelne Fotos ist aufwendig</li>
|
||
<li>• Kaum Überblick, welche Motive existieren</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-sky-200 shadow-md dark:border-sky-400/60 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-sky-700 dark:text-sky-200">
|
||
Mit der Fotospiel App
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-100">
|
||
<li>• Zentrale Galerie mit Freigabe-Workflow</li>
|
||
<li>• Schnell verfügbare Motive für interne & externe Kommunikation</li>
|
||
<li>• Klarheit, welche Bilder genutzt werden dürfen</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<h3 className="text-xl font-semibold text-gray-900 dark:text-gray-50">Best Practices für Firmenevents</h3>
|
||
<ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>1. QR-Codes sichtbar an Registrierung, Buffet und Bühnenbereich platzieren.</li>
|
||
<li>2. Foto-Challenges in der Begrüßung oder Moderation kurz erklären.</li>
|
||
<li>3. Verantwortliche Person im Orga-Team für die Freigabe der Fotos benennen.</li>
|
||
<li>4. Nach dem Event eine kuratierte Auswahl intern und ggf. extern teilen.</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<aside className="space-y-6">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Für wen ist das ideal?
|
||
</p>
|
||
<ul className="space-y-1 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• HR-Teams, die Kultur & Teamspirit sichtbar machen wollen</li>
|
||
<li>• Marketing, das authentische Event-Motive benötigt</li>
|
||
<li>• Event-Agenturen, die Mehrwert für Kund:innen schaffen möchten</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Unsere Empfehlung
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Für wiederkehrende Formate wie Offsites oder Konferenzen bietet sich ein Jahrespaket an, damit die Fotospiel App
|
||
jederzeit einsatzbereit ist.
|
||
</p>
|
||
<Button asChild size="sm" className="mt-1 bg-sky-600 text-white hover:bg-sky-700">
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Häufige Fragen
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>
|
||
<span className="font-semibold">Wie sieht es mit Datenschutz aus?</span>
|
||
<br />
|
||
Die Fotospiel App ist für DSGVO-konforme Nutzung ausgelegt; sensible Daten werden nicht unnötig gespeichert.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">Können wir eigenes Branding nutzen?</span>
|
||
<br />
|
||
Ja – Logos, Farben und Texte lassen sich passend zu eurem Auftritt gestalten.
|
||
</li>
|
||
<li>
|
||
<span className="font-semibold">Wie kommen die Bilder ins Intranet?</span>
|
||
<br />
|
||
Über einfache Exporte und Downloads kann euer Kommunikationsteam die besten Motive übernehmen.
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</aside>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Separator className="my-8" />
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<div className="grid gap-6 md:grid-cols-2">
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Was Unternehmen berichten
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
„Wir hatten nach unserem Offsite zum ersten Mal alle Event-Fotos zentral verfügbar – HR und Marketing konnten noch
|
||
in derselben Woche Storys fürs Intranet und LinkedIn vorbereiten."
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="spacey-3 space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Nächster Schritt
|
||
</p>
|
||
<p className="text-sm text-gray-700 dark:text-gray-200">
|
||
Sprich mit deinem Event- oder HR-Team darüber, wie die Fotospiel App euer nächstes Event begleiten kann – oder
|
||
teste sie direkt mit einem kleinen internen Format.
|
||
</p>
|
||
<div className="flex flex-wrap gap-3">
|
||
<Button asChild size="sm" className="bg-sky-600 text-white hover:bg-sky-700">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
size="sm"
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{t('occasions.cta')}</Link>
|
||
</Button>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
|
||
// Confirmation / religious family events
|
||
// Keep this one simpler but still richer than before
|
||
if (type === 'konfirmation') {
|
||
if (isEn) {
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
|
||
<section className="bg-gradient-to-br from-violet-50 via-white to-emerald-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||
<CardContent className="space-y-6 p-6 md:p-10">
|
||
<div className="space-y-4 text-center md:text-left">
|
||
<Badge
|
||
variant="outline"
|
||
className="border-violet-200 bg-white/70 text-violet-700 dark:border-violet-400/60 dark:bg-gray-900/70 dark:text-violet-200"
|
||
>
|
||
{content.title}
|
||
</Badge>
|
||
<h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
|
||
Memories of an important step in life
|
||
</h1>
|
||
<p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
|
||
Confirmation, first communion or a blessing service: the Fotospiel App collects the most important moments from
|
||
the perspective of family and friends – discreet, respectful and easy to moderate.
|
||
</p>
|
||
<div className="mt-4 flex flex-wrap justify-center gap-3 md:justify-start">
|
||
<Button asChild className="bg-violet-500 text-white hover:bg-violet-600">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{content.cta}</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||
<motion.div className="grid gap-8 md:grid-cols-2" variants={revealUp}>
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
What the Fotospiel App provides here
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Discreet photo tasks focused on family and togetherness</li>
|
||
<li>• Gallery only for invited guests – no public social-media pressure</li>
|
||
<li>• Watching the photos together later strengthens the shared memory</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Best practices in the family circle
|
||
</p>
|
||
<ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>1. Place the QR code at the entrance and in the hall or community space.</li>
|
||
<li>2. Choose photo tasks that are respectful and appropriate for the celebration.</li>
|
||
<li>3. Nominate a family member to approve or hide photos.</li>
|
||
</ol>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
|
||
// German confirmation content
|
||
return (
|
||
<MarketingLayout title={content.title}>
|
||
<Head title={content.title} />
|
||
|
||
<section className="bg-gradient-to-br from-violet-50 via-white to-emerald-50 px-4 py-10 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 md:py-14 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-8" variants={stagger} initial="hidden" animate="visible">
|
||
<motion.div className="flex flex-wrap items-center justify-between gap-3 text-sm text-gray-500 dark:text-gray-400" variants={revealUp}>
|
||
<nav className="flex flex-wrap items-center gap-2">
|
||
<Link href={localizedPath('/')} className="hover:text-gray-900 dark:hover:text-gray-100">
|
||
{t('nav.home')}
|
||
</Link>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{t('nav.occasions')}</span>
|
||
<span>/</span>
|
||
<span className="text-gray-700 dark:text-gray-200">{content.title}</span>
|
||
</nav>
|
||
<Link href={localizedPath('/packages')} className="text-pink-600 hover:text-pink-700">
|
||
{t('nav.discover_packages')}
|
||
</Link>
|
||
</motion.div>
|
||
|
||
<motion.div variants={revealUp}>
|
||
<Card className="relative overflow-hidden rounded-[32px] border border-white/60 bg-white/80 shadow-xl backdrop-blur dark:border-gray-800 dark:bg-gray-900/80">
|
||
<CardContent className="space-y-6 p-6 md:p-10">
|
||
<div className="space-y-4 text-center md:text-left">
|
||
<Badge
|
||
variant="outline"
|
||
className="border-violet-200 bg-white/70 text-violet-700 dark:border-violet-400/60 dark:bg-gray-900/70 dark:text-violet-200"
|
||
>
|
||
{content.title}
|
||
</Badge>
|
||
<h1 className="font-display text-3xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-4xl">
|
||
Erinnerungen an einen besonderen Schritt im Leben
|
||
</h1>
|
||
<p className="font-sans-marketing text-base leading-relaxed text-gray-700 dark:text-gray-200 md:text-lg">
|
||
Konfirmation, Kommunion oder Segnungsfeier: Mit der Fotospiel App sammelt ihr die wichtigsten Momente aus Sicht der
|
||
Familie und Freund:innen – dezent, wertschätzend und gut moderierbar.
|
||
</p>
|
||
<div className="mt-4 flex flex-wrap justify-center gap-3 md:justify-start">
|
||
<Button asChild className="bg-violet-500 text-white hover:bg-violet-600">
|
||
<Link href={localizedPath('/demo')}>{t('home.cta_demo')}</Link>
|
||
</Button>
|
||
<Button
|
||
asChild
|
||
variant="outline"
|
||
className="border-gray-300 text-gray-800 hover:bg-gray-100 dark:border-gray-700 dark:text-gray-50 dark:hover:bg-gray-800"
|
||
>
|
||
<Link href={localizedPath('/packages')}>{content.cta}</Link>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
|
||
<section className="bg-white px-4 py-14 dark:bg-gray-950 [data-slot=card]:transition-transform [data-slot=card]:duration-200 [data-slot=card]:ease-out [data-slot=card]:hover:-translate-y-1">
|
||
<motion.div className="container mx-auto max-w-5xl space-y-10" variants={stagger} initial="hidden" whileInView="visible" viewport={viewportOnce}>
|
||
<motion.div className="grid gap-8 md:grid-cols-2" variants={revealUp}>
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Was die Fotospiel App hier leistet
|
||
</p>
|
||
<ul className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>• Diskrete Fotoaufgaben, die den Fokus auf Familie und Gemeinschaft legen</li>
|
||
<li>• Galerie nur für eingeladene Personen – kein öffentlicher Social-Media-Druck</li>
|
||
<li>• Späteres gemeinsames Anschauen der Bilder stärkt das Erinnerungsgefühl</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="border-gray-100 shadow-sm dark:border-gray-800 dark:bg-gray-900">
|
||
<CardContent className="space-y-3 p-6">
|
||
<p className="text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
|
||
Best Practices im Familienkreis
|
||
</p>
|
||
<ol className="space-y-2 text-sm text-gray-700 dark:text-gray-200">
|
||
<li>1. QR-Code am Eingang und im Kirchen-/Gemeindesaal platzieren.</li>
|
||
<li>2. Fotoaufgaben wählen, die respektvoll und zur Feier passend sind.</li>
|
||
<li>3. Eine Person in der Familie festlegen, die Fotos freigibt oder ausblendet.</li>
|
||
</ol>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
</motion.div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
}
|
||
};
|
||
|
||
Occasions.layout = (page: React.ReactNode) => page;
|
||
|
||
export default Occasions;
|