added marketing page and moved events&general landing page

This commit is contained in:
Codex Agent
2025-09-26 15:40:37 +02:00
parent 6215ebbaa0
commit 492b9b9fd1
12 changed files with 609 additions and 13 deletions

View File

@@ -6,7 +6,7 @@
<title>{{ config('app.name', 'Fotospiel') }}</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
@viteReactRefresh
@vite('resources/js/guest/main.tsx')
@vite(['resources/css/app.css', 'resources/js/guest/main.tsx'])
</head>
<body>
<div id="root"></div>

View File

@@ -0,0 +1,16 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Datenschutzerklärung - Fotospiel</title>
</head>
<body class="container mx-auto px-4 py-8">
<h1>Datenschutzerklärung</h1>
<p>Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst und halten uns strikt an die Regeln der Datenschutzgesetze.</p>
<p>Verantwortlich: Fotospiel GmbH, Musterstraße 1, 12345 Musterstadt</p>
<p>Datenerfassung: Keine PII-Speicherung, anonyme Sessions für Gäste. E-Mails werden nur für Kontaktzwecke verarbeitet.</p>
<p>Ihre Rechte: Auskunft, Löschung, Widerspruch. Kontaktieren Sie uns unter <a href="/kontakt">Kontakt</a>.</p>
<p>Cookies: Nur funktionale Cookies für die PWA.</p>
</body>
</html>

View File

@@ -0,0 +1,21 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Impressum - Fotospiel</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body class="container mx-auto px-4 py-8">
<h1 class="text-2xl font-bold mb-4">Impressum</h1>
<p class="mb-4">Angaben gemäß § 5 TMG</p>
<p class="mb-4">Fotospiel GmbH<br>
Musterstraße 1<br>
12345 Musterstadt<br>
Vertreten durch: Max Mustermann<br>
Kontakt: <a href="/kontakt">Kontakt</a></p>
<p class="mb-4">Umsatzsteuer-ID: DE123456789</p>
<p>Registergericht: Amtsgericht Musterstadt</p>
<p>Handelsregister: HRB 12345</p>
</body>
</html>

View File

@@ -0,0 +1,205 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fotospiel - Event-Fotos einfach und sicher</title>
<meta name="description" content="Erstellen Sie unvergessliche Event-Fotos mit unserer PWA-Plattform. Für Hochzeiten, Firmenevents und mehr. Kostenloser Einstieg.">
<link rel="icon" href="{{ asset('logo.svg') }}" type="image/svg+xml">
@vite(['resources/css/app.css'])
</head>
<body class="bg-gray-50 text-gray-900">
<!-- Hero Section -->
<section class="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
<div class="container mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold mb-4">Fotospiel</h1>
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Erleben Sie Events durch professionelle Fotos. Unsere sichere PWA-Plattform für Gäste und Organisatoren. Einfach, mobil und datenschutzkonform.</p>
<a href="/buy-credits/basic" class="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition">Jetzt starten Kostenlos</a>
<img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=800&h=400&fit=crop" alt="Event-Fotos" class="mt-8 mx-auto rounded-lg shadow-lg max-w-4xl">
</div>
</section>
<!-- Features Section -->
<section class="py-20 px-4 bg-white">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">Warum Fotospiel?</h2>
<div class="grid md:grid-cols-3 gap-8">
<div class="text-center p-6">
<div class="w-16 h-16 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</div>
<h3 class="text-xl font-semibold mb-2">Sichere Uploads</h3>
<p>GDPR-konform, anonyme Sessions, keine PII-Speicherung.</p>
</div>
<div class="text-center p-6">
<div class="w-16 h-16 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</div>
<h3 class="text-xl font-semibold mb-2">Mobile PWA</h3>
<p>Offline-fähig, App-ähnlich, für iOS und Android.</p>
</div>
<div class="text-center p-6">
<div class="w-16 h-16 bg-[#87CEEB] rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
</div>
<h3 class="text-xl font-semibold mb-2">Schnell & Einfach</h3>
<p>Automatische Thumbnails, Echtzeit-Updates, einfache Bedienung.</p>
</div>
</div>
</div>
</section>
<!-- 4-Schritte Section -->
<section class="py-20 px-4 bg-gray-50">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">So funktioniert es in 4 einfachen Schritten</h2>
<div class="grid md:grid-cols-4 gap-8">
<div class="text-center">
<div class="w-12 h-12 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold">1</div>
<h3 class="font-semibold mb-2">Event erstellen</h3>
<p>Als Organisator: Registrieren, Event anlegen, Gäste einladen.</p>
</div>
<div class="text-center">
<div class="w-12 h-12 bg-[#FFD700] rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold">2</div>
<h3 class="font-semibold mb-2">Fotos hochladen</h3>
<p>Gäste: PWA öffnen, Fotos via Kamera oder Galerie teilen.</p>
</div>
<div class="text-center">
<div class="w-12 h-12 bg-[#87CEEB] rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold">3</div>
<h3 class="font-semibold mb-2">Freigaben & Likes</h3>
<p>Emotions auswählen, Fotos liken, Galerie browsen.</p>
</div>
<div class="text-center">
<div class="w-12 h-12 bg-[#FFB6C1] rounded-full flex items-center justify-center mx-auto mb-4 text-white font-bold">4</div>
<h3 class="font-semibold mb-2">Download & Teilen</h3>
<p>Freigegebene Fotos herunterladen, Event abschließen.</p>
</div>
</div>
</div>
</section>
<!-- Preise Section -->
<section class="py-20 px-4 bg-white">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">Tarife</h2>
<div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
<div class="bg-gray-50 p-8 rounded-lg text-center border-2 border-gray-200">
<h3 class="text-2xl font-bold mb-4">Basic</h3>
<p class="text-4xl font-bold text-[#FFB6C1] mb-4">0 </p>
<ul class="mb-6 space-y-2">
<li>1 Event</li>
<li>100 Fotos</li>
<li>Grundfunktionen</li>
</ul>
<a href="/buy-credits/basic" class="bg-[#FFB6C1] text-white px-6 py-3 rounded-full font-semibold">Kostenlos starten</a>
</div>
<div class="bg-gray-50 p-8 rounded-lg text-center border-2 border-[#FFD700]">
<h3 class="text-2xl font-bold mb-4">Standard</h3>
<p class="text-4xl font-bold text-[#FFD700] mb-4">99 </p>
<ul class="mb-6 space-y-2">
<li>10 Events</li>
<li>Unbegrenzt Fotos</li>
<li>Erweiterte Features</li>
</ul>
<a href="/buy-credits/standard" class="bg-[#FFD700] text-white px-6 py-3 rounded-full font-semibold">Kaufen</a>
</div>
<div class="bg-gray-50 p-8 rounded-lg text-center border-2 border-gray-200">
<h3 class="text-2xl font-bold mb-4">Premium</h3>
<p class="text-4xl font-bold text-[#87CEEB] mb-4">199 </p>
<ul class="mb-6 space-y-2">
<li>50 Events</li>
<li>Support & Custom</li>
<li>Alle Features</li>
</ul>
<a href="/buy-credits/premium" class="bg-[#87CEEB] text-white px-6 py-3 rounded-full font-semibold">Kaufen</a>
</div>
</div>
</div>
</section>
<!-- Kontakt Section -->
<section class="py-20 px-4 bg-gray-50">
<div class="container mx-auto max-w-2xl">
<h2 class="text-3xl font-bold text-center mb-12">Kontakt</h2>
<form method="POST" action="/kontakt" class="space-y-4">
@csrf
<div>
<label for="name" class="block text-sm font-medium mb-2">Name</label>
<input type="text" id="name" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
</div>
<div>
<label for="email" class="block text-sm font-medium mb-2">E-Mail</label>
<input type="email" id="email" name="email" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]">
</div>
<div>
<label for="message" class="block text-sm font-medium mb-2">Nachricht</label>
<textarea id="message" name="message" rows="4" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#FFB6C1]"></textarea>
</div>
<button type="submit" class="w-full bg-[#FFB6C1] text-white py-3 rounded-md font-semibold hover:bg-[#FF69B4] transition">Senden</button>
</form>
@if (session('success'))
<p class="mt-4 text-green-600 text-center">{{ session('success') }}</p>
@endif
@if ($errors->any())
<div class="mt-4 p-4 bg-red-100 border border-red-400 rounded-md">
<ul class="list-disc list-inside">
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
</div>
</section>
<!-- Testimonials Section -->
<section class="py-20 px-4 bg-white">
<div class="container mx-auto">
<h2 class="text-3xl font-bold text-center mb-12">Was unsere Kunden sagen</h2>
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
<div class="bg-gray-50 p-6 rounded-lg">
<p class="mb-4">"Perfekt für unsere Hochzeit! Einfach und sicher."</p>
<p class="font-semibold">- Anna & Max</p>
</div>
<div class="bg-gray-50 p-6 rounded-lg">
<p class="mb-4">"Großes Firmenevent alle Fotos zentral und mobil."</p>
<p class="font-semibold">- Team XYZ GmbH</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-20 px-4 bg-gray-50">
<div class="container mx-auto max-w-3xl">
<h2 class="text-3xl font-bold text-center mb-12">Häufige Fragen</h2>
<div class="space-y-4">
<div class="bg-white p-4 rounded-lg">
<h3 class="font-semibold">Ist es kostenlos?</h3>
<p>Ja, der Basic-Tarif ist kostenlos für 1 Event. Upgrades ab 99.</p>
</div>
<div class="bg-white p-4 rounded-lg">
<h3 class="font-semibold">Datenschutz?</h3>
<p>100% GDPR-konform. Keine personenbezogenen Daten gespeichert. Siehe <a href="/datenschutz" class="text-[#FFB6C1]">Datenschutzerklärung</a>.</p>
</div>
<div class="bg-white p-4 rounded-lg">
<h3 class="font-semibold">Wie lade ich Fotos hoch?</h3>
<p>Über die PWA-App: Kamera oder Galerie, Emotions zuweisen, teilen.</p>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-800 text-white py-8 px-4">
<div class="container mx-auto text-center">
<p>&copy; 2025 Fotospiel GmbH. Alle Rechte vorbehalten.</p>
<div class="mt-4 space-x-4">
<a href="/impressum" class="hover:text-[#FFB6C1]">Impressum</a>
<a href="/datenschutz" class="hover:text-[#FFB6C1]">Datenschutz</a>
<a href="/kontakt" class="hover:text-[#FFB6C1]">Kontakt</a>
</div>
</div>
</footer>
</body>
</html>

View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Zahlung erfolgreich - Fotospiel</title>
</head>
<body class="container mx-auto px-4 py-8 text-center">
<h1>Zahlung erfolgreich!</h1>
<p>Vielen Dank für Ihren Kauf. Ihr Konto wurde aktualisiert.</p>
<a href="/admin" class="bg-green-600 text-white px-4 py-2 rounded">Zum Admin-Dashboard</a>
</body>
</html>