85 lines
3.5 KiB
TypeScript
85 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import { Head, Link } from '@inertiajs/react';
|
|
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
|
|
|
interface Props {
|
|
type: string;
|
|
}
|
|
|
|
const Occasions: React.FC<Props> = ({ type }) => {
|
|
const occasions = {
|
|
weddings: {
|
|
title: 'Hochzeiten',
|
|
description: 'Erfangen Sie die magischen Momente Ihrer Hochzeit mit professionellen Fotos.',
|
|
features: ['Unbegrenzte Fotos', 'Sofort-Download', 'Privat-Event-Code', 'Emotionen tracken'],
|
|
image: '/images/wedding-lights-background.svg' // Platzhalter
|
|
},
|
|
birthdays: {
|
|
title: 'Geburtstage',
|
|
description: 'Feiern Sie Geburtstage unvergesslich mit unseren Event-Foto-Lösungen.',
|
|
features: ['Schnelle Einrichtung', 'Gäste teilen Fotos', 'Themen-Filter', 'Druck-Optionen'],
|
|
image: '/images/birthday-placeholder.jpg'
|
|
},
|
|
'corporate-events': {
|
|
title: 'Firmenevents',
|
|
description: 'Professionelle Fotos für Teamevents, Konferenzen und Unternehmensfeiern.',
|
|
features: ['Branding-Integration', 'Sichere Cloud-Speicher', 'Analytics & Reports', 'Schnelle Bearbeitung'],
|
|
image: '/images/corporate-placeholder.jpg'
|
|
},
|
|
'family-celebrations': {
|
|
title: 'Familienfeiern',
|
|
description: 'Erinnerungen an Taufen, Jubiläen und Familienzusammenkünfte festhalten.',
|
|
features: ['Persönliche Alben', 'Gemeinsame Zugriffe', 'Einfache Bedienung', 'Hohe Qualität'],
|
|
image: '/images/family-placeholder.jpg'
|
|
}
|
|
};
|
|
|
|
const occasion = occasions[type as keyof typeof occasions] || occasions.weddings;
|
|
|
|
return (
|
|
<MarketingLayout title={`${occasion.title} - Fotospiel`}>
|
|
<Head title={`${occasion.title} - Fotospiel`} />
|
|
{/* Hero Section */}
|
|
<section className="bg-aurora-enhanced text-white py-20 px-4">
|
|
<div className="container mx-auto text-center">
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-4 font-display">{occasion.title}</h1>
|
|
<p className="text-xl md:text-2xl mb-8 max-w-3xl mx-auto font-sans-marketing">{occasion.description}</p>
|
|
{occasion.image && (
|
|
<img
|
|
src={occasion.image}
|
|
alt={occasion.title}
|
|
className="mx-auto rounded-lg shadow-lg max-w-4xl w-full"
|
|
/>
|
|
)}
|
|
</div>
|
|
</section>
|
|
|
|
{/* Features Section */}
|
|
<section className="py-20 px-4 bg-white">
|
|
<div className="container mx-auto max-w-4xl">
|
|
<h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel für {occasion.title}?</h2>
|
|
<div className="grid md:grid-cols-2 gap-8">
|
|
{occasion.features.map((feature, index) => (
|
|
<div key={index} className="bg-gray-50 p-6 rounded-lg flex items-center">
|
|
<div className="w-8 h-8 bg-[#FFB6C1] rounded-full flex items-center justify-center mr-4">
|
|
<span className="text-white text-sm font-bold font-sans-marketing">✓</span>
|
|
</div>
|
|
<p className="text-gray-700 font-serif-custom">{feature}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<div className="text-center mt-12">
|
|
<Link
|
|
href="/marketing/packages"
|
|
className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg font-sans-marketing hover:bg-[#FF69B4] transition"
|
|
>
|
|
Passendes Paket wählen
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</MarketingLayout>
|
|
);
|
|
};
|
|
|
|
export default Occasions; |