login-seiten neu designt, homepage neu designt. "so funktioniert's" ergänzt und Demo-Seite hinzugefügt. Paketansicht in mobile verbessert.
This commit is contained in:
Codex Agent
@@ -1,10 +1,16 @@
|
||||
import React from 'react';
|
||||
import React from 'react';
|
||||
import { Head, Link, useForm } from '@inertiajs/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
||||
import MarketingLayout from '@/layouts/mainWebsite';
|
||||
import { useAnalytics } from '@/hooks/useAnalytics';
|
||||
import { useCtaExperiment } from '@/hooks/useCtaExperiment';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { ArrowRight, Camera, QrCode, ShieldCheck, Sparkles, Smartphone } from 'lucide-react';
|
||||
|
||||
interface Package {
|
||||
id: number;
|
||||
@@ -17,6 +23,9 @@ interface Props {
|
||||
packages: Package[];
|
||||
}
|
||||
|
||||
const heroBulletIcons = [Sparkles, ShieldCheck, Camera];
|
||||
const howStepIcons = [QrCode, Smartphone, ShieldCheck];
|
||||
|
||||
const Home: React.FC<Props> = ({ packages }) => {
|
||||
const { t } = useTranslation('marketing');
|
||||
const { localizedPath } = useLocalizedRoutes();
|
||||
@@ -31,8 +40,49 @@ const Home: React.FC<Props> = ({ packages }) => {
|
||||
message: '',
|
||||
});
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const heroBulletsRaw = t('home.hero_bullets', { returnObjects: true });
|
||||
const heroBullets = Array.isArray(heroBulletsRaw) ? (heroBulletsRaw as string[]) : [];
|
||||
|
||||
const featuresRaw = t('home.features_highlight', { returnObjects: true });
|
||||
const features = Array.isArray(featuresRaw)
|
||||
? (featuresRaw as Array<{ title: string; description: string }>)
|
||||
: [];
|
||||
|
||||
const howSteps = [
|
||||
{
|
||||
icon: howStepIcons[0] ?? QrCode,
|
||||
title: t('home.step1_title'),
|
||||
description: t('home.step1_desc'),
|
||||
},
|
||||
{
|
||||
icon: howStepIcons[1] ?? Smartphone,
|
||||
title: t('home.step2_title'),
|
||||
description: t('home.step2_desc'),
|
||||
},
|
||||
{
|
||||
icon: howStepIcons[2] ?? ShieldCheck,
|
||||
title: t('home.step3_title'),
|
||||
description: t('home.step3_desc'),
|
||||
},
|
||||
];
|
||||
|
||||
const occasionLinks = [
|
||||
{ key: 'wedding', href: localizedPath('/anlaesse/hochzeit') },
|
||||
{ key: 'birthday', href: localizedPath('/anlaesse/geburtstag') },
|
||||
{ key: 'corporate', href: localizedPath('/anlaesse/firmenevent') },
|
||||
{ key: 'confirmation', href: localizedPath('/anlaesse/konfirmation') },
|
||||
];
|
||||
|
||||
const heroPrimaryHref = localizedPath('/demo');
|
||||
const heroPrimaryLabel =
|
||||
heroCtaVariant === 'gradient' ? t('home.cta_demo_highlight') : t('home.cta_demo');
|
||||
const heroSecondaryHref = localizedPath('/so-funktionierts');
|
||||
const heroSecondaryLabel = t('home.cta_how');
|
||||
const heroTertiaryHref = localizedPath('/packages');
|
||||
const heroTertiaryLabel = t('home.cta_packages');
|
||||
|
||||
const handleSubmit = (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
post(localizedPath('/kontakt'), {
|
||||
onSuccess: () => {
|
||||
trackEvent({
|
||||
@@ -54,226 +104,471 @@ const Home: React.FC<Props> = ({ packages }) => {
|
||||
<MarketingLayout title={t('home.title')}>
|
||||
<Head title={t('home.hero_title')} />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section id="hero" className="bg-aurora-enhanced text-gray-900 dark:text-gray-100 py-20 px-4">
|
||||
<div className="container mx-auto flex flex-col md:flex-row items-center gap-8 max-w-6xl">
|
||||
<div className="md:w-1/2 text-center md:text-left">
|
||||
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{t('home.hero_title')}</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 font-sans-marketing">{t('home.hero_description')}</p>
|
||||
<Link
|
||||
href={localizedPath('/packages')}
|
||||
onClick={() => {
|
||||
trackHeroCtaClick();
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'hero_cta',
|
||||
name: `packages:${heroCtaVariant}`,
|
||||
});
|
||||
}}
|
||||
className={[
|
||||
'inline-block rounded-full px-8 py-4 font-bold transition duration-300',
|
||||
heroCtaVariant === 'gradient'
|
||||
? 'bg-gradient-to-r from-rose-500 via-pink-500 to-amber-400 text-white shadow-lg shadow-rose-500/40 hover:from-rose-500/95 hover:via-pink-500/95 hover:to-amber-400/95'
|
||||
: 'bg-white text-[#FFB6C1] hover:bg-gray-100 dark:bg-gray-800 dark:text-rose-200 dark:hover:bg-gray-700',
|
||||
].join(' ')}
|
||||
>
|
||||
{heroCtaVariant === 'gradient' ? t('home.cta_explore_highlight') : t('home.cta_explore')}
|
||||
</Link>
|
||||
<section id="hero" className="bg-aurora-enhanced py-20 px-4 text-gray-900 dark:text-gray-100">
|
||||
<div className="container mx-auto flex max-w-6xl flex-col items-center gap-12 md:flex-row">
|
||||
<div className="flex flex-col gap-8 text-center md:w-1/2 md:text-left">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Badge className="mx-auto w-fit bg-white/80 px-3 py-1 text-xs font-semibold uppercase text-rose-500 shadow-sm md:mx-0 md:text-[0.72rem]">
|
||||
{t('home.hero_tagline')}
|
||||
</Badge>
|
||||
<h1 className="font-display text-4xl font-bold leading-tight md:text-5xl lg:text-6xl">
|
||||
{t('home.hero_title')}
|
||||
</h1>
|
||||
<p className="text-lg text-gray-700 dark:text-gray-200 md:text-xl">
|
||||
{t('home.hero_description')}
|
||||
</p>
|
||||
{heroBullets.length > 0 && (
|
||||
<ul className="mx-auto flex flex-col gap-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-200 md:mx-0">
|
||||
{heroBullets.map((item, index) => {
|
||||
const Icon = heroBulletIcons[index % heroBulletIcons.length] ?? Sparkles;
|
||||
return (
|
||||
<li key={`hero-bullet-${index}`} className="flex items-start gap-3">
|
||||
<span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/80 text-rose-500 shadow-sm dark:bg-gray-900/70">
|
||||
<Icon className="h-4 w-4" aria-hidden />
|
||||
</span>
|
||||
<span className="flex-1 text-base">{item}</span>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-wrap items-center justify-center gap-3 md:justify-start">
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className={
|
||||
heroCtaVariant === 'gradient'
|
||||
? 'group h-12 rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] px-7 text-base font-semibold text-white shadow-[0_18px_35px_-18px_rgba(236,72,153,0.7)] transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]'
|
||||
: 'group h-12 rounded-full bg-white/90 px-7 text-base font-semibold text-rose-500 shadow-md shadow-rose-200/40 transition hover:bg-white'
|
||||
}
|
||||
>
|
||||
<Link
|
||||
href={heroPrimaryHref}
|
||||
onClick={() => {
|
||||
trackHeroCtaClick();
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'hero_cta',
|
||||
name: `demo:${heroCtaVariant}`,
|
||||
});
|
||||
}}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<span>{heroPrimaryLabel}</span>
|
||||
<ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" aria-hidden />
|
||||
</Link>
|
||||
</Button>
|
||||
<Button
|
||||
asChild
|
||||
variant="outline"
|
||||
size="lg"
|
||||
className="h-12 rounded-full border-rose-200 bg-white/80 px-6 text-base font-semibold text-rose-500 shadow-sm transition hover:bg-white dark:border-rose-500/30 dark:bg-transparent dark:text-rose-200 dark:hover:bg-white/10"
|
||||
>
|
||||
<Link
|
||||
href={heroSecondaryHref}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'hero_secondary_cta',
|
||||
})
|
||||
}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<span>{heroSecondaryLabel}</span>
|
||||
</Link>
|
||||
</Button>
|
||||
<Link
|
||||
href={heroTertiaryHref}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'hero_packages_cta',
|
||||
})
|
||||
}
|
||||
className="font-semibold text-rose-500 underline-offset-4 hover:underline dark:text-rose-200"
|
||||
>
|
||||
{heroTertiaryLabel}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:w-1/2">
|
||||
<div className="relative w-full max-w-xl md:w-1/2">
|
||||
<div className="absolute inset-0 rounded-3xl bg-white/40 blur-xl" aria-hidden />
|
||||
<img
|
||||
src="/joyous_wedding_guests_posing.jpg"
|
||||
alt={t('home.hero_image_alt')}
|
||||
className="w-full h-auto rounded-lg shadow-lg"
|
||||
className="relative w-full rounded-[32px] border border-white/60 shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* How it Works Section */}
|
||||
<section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
|
||||
<section id="how-it-works" className="bg-gray-50 py-20 px-4 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.how_title')}</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">1</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">{t('home.step1_title')}</h3>
|
||||
<p>{t('home.step1_desc')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">2</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">{t('home.step2_title')}</h3>
|
||||
<p>{t('home.step2_desc')}</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<span className="text-2xl">3</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">{t('home.step3_title')}</h3>
|
||||
<p>{t('home.step3_desc')}</p>
|
||||
</div>
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="font-display text-3xl font-bold md:text-4xl">{t('home.how_title')}</h2>
|
||||
<p className="mt-4 text-base text-muted-foreground md:text-lg">
|
||||
{t('home.how_subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-20 px-4 dark:bg-gray-700">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.features_title')}</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
||||
<h3 className="text-xl font-semibold mb-2">{t('home.feature1_title')}</h3>
|
||||
<p>{t('home.feature1_desc')}</p>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
||||
<h3 className="text-xl font-semibold mb-2">{t('home.feature2_title')}</h3>
|
||||
<p>{t('home.feature2_desc')}</p>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
||||
<h3 className="text-xl font-semibold mb-2">{t('home.feature3_title')}</h3>
|
||||
<p>{t('home.feature3_desc')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Packages Teaser */}
|
||||
<section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.packages_title')}</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-8">
|
||||
{packages.slice(0, 2).map((pkg) => (
|
||||
<div key={pkg.id} className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md text-center">
|
||||
<h3 className="text-2xl font-bold mb-2">{pkg.name}</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">{pkg.description}</p>
|
||||
<p className="text-3xl font-bold text-[#FFB6C1]">{pkg.price} {t('currency.euro')}</p>
|
||||
<Link
|
||||
href={`${localizedPath('/packages')}?package_id=${pkg.id}`}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'package_teaser_cta',
|
||||
name: pkg.name,
|
||||
value: pkg.price,
|
||||
})
|
||||
}
|
||||
className="mt-4 inline-block bg-[#FFB6C1] text-white px-6 py-2 rounded-full hover:bg-pink-600"
|
||||
>
|
||||
{t('home.view_details')}
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-12 grid gap-6 md:grid-cols-3">
|
||||
{howSteps.map(({ icon: Icon, title, description }, index) => (
|
||||
<Card
|
||||
key={`how-step-${index}`}
|
||||
className="border-gray-200/70 bg-white/90 shadow-md shadow-gray-200/40 transition hover:-translate-y-1 hover:shadow-lg hover:shadow-rose-200/30 dark:border-gray-800/60 dark:bg-gray-900/60"
|
||||
>
|
||||
<CardHeader className="flex flex-col gap-4">
|
||||
<span className="flex h-12 w-12 items-center justify-center rounded-full bg-rose-100/80 text-rose-500 shadow-inner shadow-rose-200/60 dark:bg-rose-500/20 dark:text-rose-100">
|
||||
<Icon className="h-6 w-6" aria-hidden />
|
||||
</span>
|
||||
<CardTitle className="text-xl">{title}</CardTitle>
|
||||
<CardDescription className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
|
||||
{description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Link
|
||||
href={localizedPath('/packages')}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'all_packages_cta',
|
||||
})
|
||||
}
|
||||
className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-bold hover:bg-pink-600 transition"
|
||||
>
|
||||
{t('home.all_packages')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Section */}
|
||||
<section id="contact" className="py-20 px-4 dark:bg-gray-700">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.contact_title')}</h2>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium mb-2">
|
||||
{t('home.name_label')} {t('common.required')}
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
value={data.name}
|
||||
onChange={(e) => setData('name', e.target.value)}
|
||||
className="w-full p-3 border rounded-lg"
|
||||
/>
|
||||
{errors.name && <p className="text-red-500 text-sm">{errors.name}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium mb-2">
|
||||
{t('home.email_label')} {t('common.required')}
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={data.email}
|
||||
onChange={(e) => setData('email', e.target.value)}
|
||||
className="w-full p-3 border rounded-lg"
|
||||
/>
|
||||
{errors.email && <p className="text-red-500 text-sm">{errors.email}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium mb-2">
|
||||
{t('home.message_label')} {t('common.required')}
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
rows={4}
|
||||
value={data.message}
|
||||
onChange={(e) => setData('message', e.target.value)}
|
||||
className="w-full p-3 border rounded-lg"
|
||||
/>
|
||||
{errors.message && <p className="text-red-500 text-sm">{errors.message}</p>}
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={processing}
|
||||
className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-bold hover:bg-pink-600 transition disabled:opacity-50"
|
||||
>
|
||||
{processing ? t('home.sending') : t('home.send')}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Testimonials Section */}
|
||||
<section className="py-20 px-4 bg-gray-50 dark:bg-gray-900">
|
||||
<section className="bg-slate-950 py-20 px-4 text-white">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.testimonials_title')}</h2>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
||||
<p className="italic mb-4">"{t('home.testimonial1')}"</p>
|
||||
<p className="font-semibold">{t('common.testimonials.anna.name')}</p>
|
||||
<div className="grid gap-10 md:grid-cols-[1.1fr_0.9fr] md:items-center">
|
||||
<div className="flex flex-col gap-6">
|
||||
<Badge className="w-fit bg-white/15 px-3 py-1 text-xs uppercase tracking-[0.35em] text-white/80">
|
||||
{t('home.demo_title')}
|
||||
</Badge>
|
||||
<h2 className="font-display text-3xl font-semibold leading-tight md:text-4xl">
|
||||
{t('home.demo_description')}
|
||||
</h2>
|
||||
<p className="text-sm text-white/75">{t('home.demo_hint')}</p>
|
||||
<Button
|
||||
asChild
|
||||
size="lg"
|
||||
className="h-12 w-fit rounded-full bg-white px-7 text-base font-semibold text-slate-900 shadow-lg shadow-white/30 transition hover:bg-white/90"
|
||||
>
|
||||
<Link
|
||||
href={localizedPath('/demo')}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'demo_section_cta',
|
||||
})
|
||||
}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<span>{t('home.demo_cta')}</span>
|
||||
<ArrowRight className="h-4 w-4" aria-hidden />
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
||||
<p className="italic mb-4">"{t('home.testimonial2')}"</p>
|
||||
<p className="font-semibold">{t('common.testimonials.max.name')}</p>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
|
||||
<p className="italic mb-4">"{t('home.testimonial3')}"</p>
|
||||
<p className="font-semibold">{t('common.testimonials.lisa.name')}</p>
|
||||
<div className="relative mx-auto w-full max-w-sm">
|
||||
<div className="absolute inset-0 rounded-[42px] bg-gradient-to-br from-rose-400 via-purple-500 to-indigo-500 opacity-80 blur-2xl" aria-hidden />
|
||||
<div className="relative aspect-[9/16] w-full overflow-hidden rounded-[42px] border border-white/20 bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 shadow-[0_40px_90px_-30px_rgba(15,23,42,0.75)]">
|
||||
<div className="flex h-full flex-col items-center justify-center gap-4 p-6 text-center">
|
||||
<Smartphone className="h-12 w-12 text-white/60" aria-hidden />
|
||||
<p className="text-sm text-white/75">{t('home.demo_media_alt')}</p>
|
||||
<Link
|
||||
href={localizedPath('/demo')}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'demo_frame_cta',
|
||||
})
|
||||
}
|
||||
className="text-sm font-semibold text-white underline-offset-4 hover:underline"
|
||||
>
|
||||
{t('home.demo_cta')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="py-20 px-4 dark:bg-gray-700">
|
||||
<section className="bg-white py-20 px-4 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="font-display text-3xl font-bold md:text-4xl">{t('home.features_title')}</h2>
|
||||
</div>
|
||||
<div className="mt-12 grid gap-6 md:grid-cols-3">
|
||||
{features.map((feature, index) => (
|
||||
<Card
|
||||
key={`feature-${index}`}
|
||||
className="border-gray-200/80 bg-gray-50/80 shadow-sm shadow-rose-100/40 transition hover:-translate-y-1 hover:shadow-lg hover:shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/70"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl">{feature.title}</CardTitle>
|
||||
<CardDescription className="text-sm leading-relaxed text-slate-600 dark:text-slate-300">
|
||||
{feature.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gray-50 py-20 px-4 dark:bg-gray-950/80">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="grid gap-10 lg:grid-cols-[1.15fr_0.85fr]">
|
||||
<Card className="border-rose-200/50 bg-white/95 shadow-md shadow-rose-200/40 dark:border-rose-500/30 dark:bg-gray-900/80">
|
||||
<CardHeader className="flex flex-col gap-4">
|
||||
<Badge className="w-fit bg-rose-100 px-3 py-1 text-xs font-semibold uppercase text-rose-600 dark:bg-rose-500/20 dark:text-rose-200">
|
||||
{t('home.occasions_title')}
|
||||
</Badge>
|
||||
<CardTitle className="text-2xl">{t('home.occasions_description')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-3 sm:grid-cols-2">
|
||||
{occasionLinks.map(({ key, href }) => (
|
||||
<Link
|
||||
key={key}
|
||||
href={href}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'occasion_tile_click',
|
||||
name: key,
|
||||
})
|
||||
}
|
||||
className="group flex items-center gap-3 rounded-xl border border-rose-100/60 bg-white/80 px-4 py-3 text-sm font-semibold text-rose-600 shadow-sm shadow-rose-100/50 transition hover:bg-rose-50 hover:text-rose-700 dark:border-rose-500/30 dark:bg-gray-900/70 dark:text-rose-200 dark:hover:bg-rose-500/10"
|
||||
>
|
||||
<ArrowRight className="h-4 w-4 -translate-x-1 transition group-hover:translate-x-0" aria-hidden />
|
||||
<span>{t(`home.occasions.${key}`)}</span>
|
||||
</Link>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-gray-200/70 bg-white/95 shadow-md shadow-gray-200/40 transition hover:-translate-y-1 hover:shadow-lg hover:shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/80">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl">{t('home.blog_teaser_title')}</CardTitle>
|
||||
<CardDescription className="text-sm leading-relaxed text-muted-foreground">
|
||||
{t('home.blog_teaser_description')}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardFooter className="px-6 pb-6">
|
||||
<Button
|
||||
asChild
|
||||
variant="ghost"
|
||||
className="group inline-flex items-center gap-2 rounded-full px-0 text-base font-semibold text-rose-500 transition hover:text-rose-600 dark:text-rose-200 dark:hover:text-rose-100"
|
||||
>
|
||||
<Link
|
||||
href={localizedPath('/blog')}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'blog_teaser_cta',
|
||||
})
|
||||
}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<span>{t('home.blog_teaser_cta')}</span>
|
||||
<ArrowRight className="h-4 w-4 transition group-hover:translate-x-1" aria-hidden />
|
||||
</Link>
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white py-20 px-4 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="flex flex-col items-center justify-between gap-4 text-center md:flex-row md:text-left">
|
||||
<div>
|
||||
<h2 className="font-display text-3xl font-bold md:text-4xl">
|
||||
{t('home.packages_title')}
|
||||
</h2>
|
||||
<p className="mt-3 max-w-2xl text-base text-muted-foreground md:text-lg">
|
||||
{t('home.packages_subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
asChild
|
||||
className="h-11 rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] px-6 text-sm font-semibold text-white shadow-lg shadow-rose-300/30 transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5]"
|
||||
>
|
||||
<Link
|
||||
href={localizedPath('/packages')}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'all_packages_cta',
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('home.all_packages')}
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-10 grid gap-8 md:grid-cols-2">
|
||||
{packages.slice(0, 2).map((pkg) => (
|
||||
<Card
|
||||
key={pkg.id}
|
||||
className="border-gray-200 bg-white/95 text-center shadow-md shadow-rose-200/30 transition hover:-translate-y-1 hover:shadow-xl hover:shadow-rose-200/40 dark:border-gray-800 dark:bg-gray-900/80"
|
||||
>
|
||||
<CardHeader className="gap-4">
|
||||
<CardTitle className="text-2xl">{pkg.name}</CardTitle>
|
||||
<CardDescription className="text-sm text-muted-foreground">
|
||||
{pkg.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col items-center gap-4">
|
||||
<p className="text-3xl font-bold text-rose-500">
|
||||
{pkg.price} {t('currency.euro')}
|
||||
</p>
|
||||
<Button
|
||||
asChild
|
||||
className="rounded-full bg-rose-500 px-5 py-2 text-sm font-semibold text-white shadow-lg shadow-rose-200/40 transition hover:bg-rose-600"
|
||||
>
|
||||
<Link
|
||||
href={`${localizedPath('/packages')}?package_id=${pkg.id}`}
|
||||
onClick={() =>
|
||||
trackEvent({
|
||||
category: 'marketing_home',
|
||||
action: 'package_teaser_cta',
|
||||
name: pkg.name,
|
||||
value: pkg.price,
|
||||
})
|
||||
}
|
||||
>
|
||||
{t('home.view_details')}
|
||||
</Link>
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" className="bg-gray-50 py-20 px-4 dark:bg-gray-950/80">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-display">{t('home.faq_title')}</h2>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
|
||||
<h3 className="font-semibold">{t('home.faq1_q')}</h3>
|
||||
<p>{t('home.faq1_a')}</p>
|
||||
</div>
|
||||
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg">
|
||||
<h3 className="font-semibold">{t('home.faq2_q')}</h3>
|
||||
<p>{t('home.faq2_a')}</p>
|
||||
</div>
|
||||
<Card className="border-gray-200/70 bg-white/95 shadow-lg shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/80">
|
||||
<CardHeader className="text-center">
|
||||
<Badge className="mx-auto mb-3 w-fit bg-rose-100 px-3 py-1 text-xs font-semibold uppercase text-rose-600 dark:bg-rose-500/20 dark:text-rose-200">
|
||||
{t('home.contact_title')}
|
||||
</Badge>
|
||||
<CardTitle className="text-2xl md:text-3xl">{t('home.contact_lead')}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="name" className="text-sm font-semibold text-gray-600 dark:text-gray-200">
|
||||
{t('home.name_label')} *
|
||||
</label>
|
||||
<Input
|
||||
id="name"
|
||||
value={data.name}
|
||||
onChange={(event) => setData('name', event.target.value)}
|
||||
className="h-12 rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
|
||||
autoComplete="name"
|
||||
required
|
||||
/>
|
||||
{errors.name && (
|
||||
<p className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.name}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="email" className="text-sm font-semibold text-gray-600 dark:text-gray-200">
|
||||
{t('home.email_label')} *
|
||||
</label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={data.email}
|
||||
onChange={(event) => setData('email', event.target.value)}
|
||||
className="h-12 rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
|
||||
autoComplete="email"
|
||||
required
|
||||
/>
|
||||
{errors.email && (
|
||||
<p className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.email}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-2">
|
||||
<label htmlFor="message" className="text-sm font-semibold text-gray-600 dark:text-gray-200">
|
||||
{t('home.message_label')} *
|
||||
</label>
|
||||
<Textarea
|
||||
id="message"
|
||||
rows={5}
|
||||
value={data.message}
|
||||
onChange={(event) => setData('message', event.target.value)}
|
||||
className="rounded-xl border-gray-200/70 bg-white/90 shadow-inner shadow-gray-200/40 focus-visible:ring-rose-300/60 dark:border-gray-700 dark:bg-gray-900/70"
|
||||
required
|
||||
/>
|
||||
{errors.message && (
|
||||
<p className="text-sm font-medium text-rose-600 dark:text-rose-300">{errors.message}</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-3 text-sm text-muted-foreground">
|
||||
<p>{t('home.contact_privacy')}</p>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={processing}
|
||||
className="h-12 w-full rounded-full bg-gradient-to-r from-[#ff5f87] via-[#ec4899] to-[#6366f1] text-base font-semibold text-white shadow-[0_18px_35px_-18px_rgba(236,72,153,0.7)] transition hover:from-[#ff4470] hover:via-[#ec4899] hover:to-[#4f46e5] disabled:cursor-not-allowed disabled:opacity-60"
|
||||
>
|
||||
{processing ? t('home.sending') : t('home.send')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-white py-20 px-4 dark:bg-gray-950">
|
||||
<div className="container mx-auto max-w-6xl">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="font-display text-3xl font-bold md:text-4xl">
|
||||
{t('home.testimonials_title')}
|
||||
</h2>
|
||||
<p className="mt-4 text-base text-muted-foreground">{t('home.testimonials_subtitle')}</p>
|
||||
</div>
|
||||
<div className="mt-12 grid gap-6 md:grid-cols-3">
|
||||
{[t('home.testimonial1'), t('home.testimonial2'), t('home.testimonial3')].map(
|
||||
(quote, index) => (
|
||||
<Card
|
||||
key={`testimonial-${index}`}
|
||||
className="border-gray-200/70 bg-white/95 shadow-md shadow-rose-200/40 dark:border-gray-800/60 dark:bg-gray-900/80"
|
||||
>
|
||||
<CardContent className="flex h-full flex-col justify-between gap-4 p-6">
|
||||
<p className="text-base italic text-slate-700 dark:text-slate-200">{quote}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="bg-gray-50 py-20 px-4 dark:bg-gray-950/80">
|
||||
<div className="container mx-auto max-w-4xl">
|
||||
<div className="mx-auto text-center">
|
||||
<h2 className="font-display text-3xl font-bold md:text-4xl">{t('home.faq_title')}</h2>
|
||||
<p className="mt-3 text-base text-muted-foreground">{t('home.faq_subtitle')}</p>
|
||||
</div>
|
||||
<div className="mt-10 space-y-4">
|
||||
{[{ q: t('home.faq1_q'), a: t('home.faq1_a') }, { q: t('home.faq2_q'), a: t('home.faq2_a') }].map(
|
||||
({ q, a }, index) => (
|
||||
<Card
|
||||
key={`faq-${index}`}
|
||||
className="border-gray-200/70 bg-white/95 shadow-sm shadow-gray-200/40 dark:border-gray-800/60 dark:bg-gray-900/80"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg">{q}</CardTitle>
|
||||
<CardDescription className="text-sm leading-relaxed text-muted-foreground">
|
||||
{a}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user