262 lines
13 KiB
TypeScript
262 lines
13 KiB
TypeScript
import React from 'react';
|
||
import { Head, Link, useForm } from '@inertiajs/react';
|
||
import MarketingLayout from '@/layouts/marketing/MarketingLayout';
|
||
import { Package } from '@/types'; // Annahme: Typ für Package
|
||
|
||
interface Props {
|
||
packages: Package[];
|
||
}
|
||
|
||
const Home: React.FC<Props> = ({ packages }) => {
|
||
const { data, setData, post, processing, errors, reset } = useForm({
|
||
name: '',
|
||
email: '',
|
||
message: '',
|
||
});
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
post('/kontakt', {
|
||
onSuccess: () => reset(),
|
||
});
|
||
};
|
||
|
||
return (
|
||
<MarketingLayout title="Home - Fotospiel">
|
||
<Head title="Fotospiel - Event-Fotos einfach und sicher mit QR-Codes" />
|
||
{/* Hero Section */}
|
||
<section id="hero" className="bg-aurora-enhanced text-white 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">Fotospiel</h1>
|
||
<p className="text-xl md:text-2xl mb-8 font-sans-marketing">Sammle Gastfotos für Events mit QR-Codes. Unsere sichere PWA-Plattform für Gäste und Organisatoren – einfach, mobil und datenschutzkonform. Besser als Konkurrenz, geliebt von Tausenden.</p>
|
||
<Link href="/packages" className="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition font-sans-marketing">
|
||
Jetzt starten – Kostenlos
|
||
</Link>
|
||
</div>
|
||
<div className="md:w-1/2">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop"
|
||
alt="Event-Fotos mit QR"
|
||
className="rounded-lg shadow-lg w-full"
|
||
style={{ filter: 'drop-shadow(0 10px 8px rgba(0,0,0,0.1))' }}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* How it works Section */}
|
||
<section id="how-it-works" className="py-20 px-4 bg-gray-50">
|
||
<div className="container mx-auto">
|
||
<h2 className="text-3xl font-bold text-center mb-12 font-display">So funktioniert es – in 4 einfachen Schritten mit QR-Codes</h2>
|
||
<div className="grid md:grid-cols-4 gap-8">
|
||
<div className="text-center">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1558618047-3c8d6b4d3b0a?w=300&h=200&fit=crop"
|
||
alt="QR-Code generieren"
|
||
className="w-12 h-12 mx-auto mb-4 rounded-full"
|
||
/>
|
||
<h3 className="font-semibold mb-2 font-sans-marketing">Event erstellen & QR generieren</h3>
|
||
<p className="text-gray-600 font-serif-custom">Als Organisator: Registrieren, Event anlegen, QR-Code erstellen und drucken/teilen.</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?w=300&h=200&fit=crop"
|
||
alt="Fotos hochladen"
|
||
className="w-12 h-12 mx-auto mb-4 rounded-full"
|
||
/>
|
||
<h3 className="font-semibold mb-2 font-sans-marketing">Fotos hochladen via QR</h3>
|
||
<p className="text-gray-600 font-serif-custom">Gäste: QR scannen, PWA öffnen, Fotos via Kamera oder Galerie teilen.</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=300&h=200&fit=crop"
|
||
alt="Freigaben & Likes"
|
||
className="w-12 h-12 mx-auto mb-4 rounded-full"
|
||
/>
|
||
<h3 className="font-semibold mb-2 font-sans-marketing">Freigaben & Likes</h3>
|
||
<p className="text-gray-600 font-serif-custom">Emotions auswählen, Fotos liken, Galerie browsen – alles anonym.</p>
|
||
</div>
|
||
<div className="text-center">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=300&h=200&fit=crop"
|
||
alt="Download & Teilen"
|
||
className="w-12 h-12 mx-auto mb-4 rounded-full"
|
||
/>
|
||
<h3 className="font-semibold mb-2 font-sans-marketing">Download & Teilen</h3>
|
||
<p className="text-gray-600 font-serif-custom">Freigegebene Fotos herunterladen, Event abschließen und QR archivieren.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Features Section */}
|
||
<section id="features" className="py-20 px-4 bg-white">
|
||
<div className="container mx-auto">
|
||
<h2 className="text-3xl font-bold text-center mb-12 font-display">Warum Fotospiel mit QR?</h2>
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
<div className="text-center p-6">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=400&h=250&fit=crop"
|
||
alt="Sichere QR-Uploads"
|
||
className="w-16 h-16 mx-auto mb-4 rounded-full"
|
||
/>
|
||
<h3 className="text-xl font-semibold mb-2 font-display">Sichere QR-Uploads</h3>
|
||
<p className="text-gray-600 font-serif-custom">GDPR-konform, anonyme Sessions, QR-basierte Zugriffe ohne PII-Speicherung.</p>
|
||
</div>
|
||
<div className="text-center p-6">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?w=400&h=250&fit=crop"
|
||
alt="Mobile PWA & QR"
|
||
className="w-16 h-16 mx-auto mb-4 rounded-full"
|
||
/>
|
||
<h3 className="text-xl font-semibold mb-2 font-display">Mobile PWA & QR</h3>
|
||
<p className="text-gray-600 font-serif-custom">Offline-fähig, App-ähnlich für iOS/Android, QR-Scan für schnellen Einstieg.</p>
|
||
</div>
|
||
<div className="text-center p-6">
|
||
<img
|
||
src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=400&h=250&fit=crop"
|
||
alt="Schnell & Einfach"
|
||
className="w-16 h-16 mx-auto mb-4 rounded-full"
|
||
/>
|
||
<h3 className="text-xl font-semibold mb-2 font-display">Schnell & Einfach mit QR</h3>
|
||
<p className="text-gray-600 font-serif-custom">Automatische Thumbnails, Echtzeit-Updates, QR-Sharing für Gäste.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Packages Teaser Section */}
|
||
<section id="pricing" className="py-20 px-4 bg-gray-50">
|
||
<div className="container mx-auto">
|
||
<h2 className="text-3xl font-bold text-center mb-12 font-display">Unsere Packages</h2>
|
||
<p className="text-center text-lg text-gray-600 mb-8 font-sans-marketing">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
|
||
<div className="text-center">
|
||
<Link href="/packages" className="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-[#FF69B4] transition font-sans-marketing">
|
||
Alle Packages ansehen
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Section */}
|
||
<section id="contact" className="py-20 px-4 bg-white">
|
||
<div className="container mx-auto max-w-2xl">
|
||
<h2 className="text-3xl font-bold text-center mb-12 font-display">Kontakt</h2>
|
||
<form key={`home-form-${Object.keys(errors).length}`} onSubmit={handleSubmit} className="space-y-4">
|
||
<div>
|
||
<label htmlFor="name" className="block text-sm font-medium mb-2 font-sans-marketing">Name</label>
|
||
<input
|
||
type="text"
|
||
id="name"
|
||
value={data.name}
|
||
onChange={(e) => setData('name', e.target.value)}
|
||
required
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
|
||
/>
|
||
{errors.name && <p key={`error-name`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.name}</p>}
|
||
</div>
|
||
<div>
|
||
<label htmlFor="email" className="block text-sm font-medium mb-2 font-sans-marketing">E-Mail</label>
|
||
<input
|
||
type="email"
|
||
id="email"
|
||
value={data.email}
|
||
onChange={(e) => setData('email', e.target.value)}
|
||
required
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
|
||
/>
|
||
{errors.email && <p key={`error-email`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.email}</p>}
|
||
</div>
|
||
<div>
|
||
<label htmlFor="message" className="block text-sm font-medium mb-2 font-sans-marketing">Nachricht</label>
|
||
<textarea
|
||
id="message"
|
||
value={data.message}
|
||
onChange={(e) => setData('message', e.target.value)}
|
||
rows={4}
|
||
required
|
||
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"
|
||
></textarea>
|
||
{errors.message && <p key={`error-message`} className="text-red-500 text-sm mt-1 font-serif-custom">{errors.message}</p>}
|
||
</div>
|
||
<button type="submit" disabled={processing} className="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition disabled:opacity-50 font-sans-marketing">
|
||
{processing ? 'Sendet...' : 'Senden'}
|
||
</button>
|
||
</form>
|
||
{Object.keys(errors).length === 0 && data.message && !processing && (
|
||
<p className="mt-4 text-green-600 text-center font-serif-custom">Nachricht gesendet!</p>
|
||
)}
|
||
|
||
React.useEffect(() => {
|
||
if (Object.keys(errors).length > 0) {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
}
|
||
}, [errors]);
|
||
</div>
|
||
</section>
|
||
|
||
{/* Testimonials Section */}
|
||
<section className="py-20 px-4 bg-gray-50">
|
||
<div className="container mx-auto">
|
||
<h2 className="text-3xl font-bold text-center mb-12 font-display">Was unsere Kunden sagen</h2>
|
||
<div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||
<div className="bg-white p-6 rounded-lg">
|
||
<p className="mb-4 font-serif-custom">"Perfekt für unsere Hochzeit! QR-Sharing war super einfach."</p>
|
||
<p className="font-semibold font-sans-marketing">- Anna & Max</p>
|
||
</div>
|
||
<div className="bg-white p-6 rounded-lg">
|
||
<p className="mb-4 font-serif-custom">"Großes Firmenevent – alle Fotos zentral via QR."</p>
|
||
<p className="font-semibold font-sans-marketing">- Team XYZ GmbH</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* FAQ Section */}
|
||
<section className="py-20 px-4 bg-white">
|
||
<div className="container mx-auto max-w-3xl">
|
||
<h2 className="text-3xl font-bold text-center mb-12 font-display">Häufige Fragen</h2>
|
||
<div className="space-y-4">
|
||
<div className="bg-gray-50 p-4 rounded-lg">
|
||
<h3 className="font-semibold font-display">Ist es kostenlos?</h3>
|
||
<p className="font-serif-custom">Ja, der Basic-Tarif ist kostenlos für 1 Event mit QR. Upgrades ab 99€.</p>
|
||
</div>
|
||
<div className="bg-gray-50 p-4 rounded-lg">
|
||
<h3 className="font-semibold font-display">Datenschutz?</h3>
|
||
<p className="font-serif-custom">100% GDPR-konform. Keine personenbezogenen Daten gespeichert. QR-Zugriffe anonym. Siehe <Link href="/datenschutz" className="text-[#FFB6C1]">Datenschutzerklärung</Link>.</p>
|
||
</div>
|
||
<div className="bg-gray-50 p-4 rounded-lg">
|
||
<h3 className="font-semibold font-display">Wie funktioniert QR-Sharing?</h3>
|
||
<p className="font-serif-custom">Generiere QR im Dashboard, teile es – Gäste scannen, laden Fotos hoch in der PWA.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Packages Section (aus aktuellem TSX, angepasst) */}
|
||
<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">Unsere Pakete</h2>
|
||
<div className="grid md:grid-cols-3 gap-8">
|
||
{packages.map((pkg) => (
|
||
<div key={pkg.id} className="bg-gray-50 p-6 rounded-lg text-center">
|
||
<h3 className="text-xl font-semibold mb-2 font-sans-marketing">{pkg.name}</h3>
|
||
<p className="text-gray-600 mb-4 font-serif-custom">{pkg.description}</p>
|
||
<p className="text-2xl font-bold text-[#FFB6C1] mb-4 font-display">€{pkg.price}</p>
|
||
<Link
|
||
href={`/marketing/buy/${pkg.id}`}
|
||
className="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition font-sans-marketing"
|
||
>
|
||
Kaufen
|
||
</Link>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</MarketingLayout>
|
||
);
|
||
};
|
||
|
||
export default Home; |