integration vom Blog-plugin, hübschere webseite,
This commit is contained in:
Codex Agent
@@ -3,111 +3,158 @@
|
||||
<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.">
|
||||
<title>Fotospiel - Event-Fotos einfach und sicher mit QR-Codes</title>
|
||||
<meta name="description" content="Sammle Gastfotos für Events mit QR-Codes und 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'])
|
||||
<style>
|
||||
@keyframes aurora {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
.bg-aurora {
|
||||
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||
background-size: 400% 400%;
|
||||
animation: aurora 15s ease infinite;
|
||||
}
|
||||
</style>
|
||||
</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">
|
||||
<!-- Header -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-50">
|
||||
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="/" class="text-2xl font-bold text-gray-900">Fotospiel</a>
|
||||
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-6 items-center">
|
||||
<a href="#how-it-works" class="text-gray-600 hover:text-gray-900">How it works</a>
|
||||
<a href="#features" class="text-gray-600 hover:text-gray-900">Features</a>
|
||||
<div class="relative group">
|
||||
<button class="text-gray-600 hover:text-gray-900">Occasions</button>
|
||||
<div class="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg hidden group-hover:block">
|
||||
<a href="/occasions/weddings" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Weddings</a>
|
||||
<a href="/occasions/birthdays" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Birthdays</a>
|
||||
<a href="/occasions/corporate-events" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Corporate Events</a>
|
||||
<a href="/occasions/family-celebrations" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Family Celebrations</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/blog" class="text-gray-600 hover:text-gray-900">Blog</a>
|
||||
<a href="#pricing" class="text-gray-600 hover:text-gray-900">Pricing</a>
|
||||
<a href="#contact" class="text-gray-600 hover:text-gray-900">Contact</a>
|
||||
<a href="/buy-credits/basic" class="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition">Jetzt starten</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Placeholder (Hamburger) -->
|
||||
<button class="md:hidden text-gray-600">☰</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section id="hero" -->
|
||||
<section id="hero" class="bg-aurora text-white py-20 px-4">
|
||||
<div class="container mx-auto flex flex-col md:flex-row items-center gap-8 max-w-6xl">
|
||||
<div class="md:w-1/2 text-center md:text-left">
|
||||
<h1 class="text-4xl md:text-6xl font-bold mb-4">Fotospiel</h1>
|
||||
<p class="text-xl md:text-2xl mb-8">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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="md:w-1/2">
|
||||
<img src="https://images.unsplash.com/photo-1511285560929-80b456fea0bc?w=600&h=400&fit=crop" alt="Event-Fotos mit QR" class="rounded-lg shadow-lg w-full" style="filter: drop-shadow(0 10px 8px rgba(0,0,0,0.1));">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="py-20 px-4 bg-white">
|
||||
<!-- How it works Section id="how-it-works" -->
|
||||
<section id="how-it-works" class="py-20 px-4 bg-gray-50">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Warum Fotospiel?</h2>
|
||||
<h2 class="text-3xl font-bold text-center mb-12">So funktioniert es – in 4 einfachen Schritten mit QR-Codes</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 & QR generieren</h3>
|
||||
<p>Als Organisator: Registrieren, Event anlegen, QR-Code erstellen und drucken/teilen.</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 via QR</h3>
|
||||
<p>Gäste: QR scannen, 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 – alles anonym.</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 und QR archivieren.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section id="features" -->
|
||||
<section id="features" class="py-20 px-4 bg-white">
|
||||
<div class="container mx-auto">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Warum Fotospiel mit QR?</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>
|
||||
<h3 class="text-xl font-semibold mb-2">Sichere QR-Uploads</h3>
|
||||
<p>GDPR-konform, anonyme Sessions, QR-basierte Zugriffe ohne 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>
|
||||
<h3 class="text-xl font-semibold mb-2">Mobile PWA & QR</h3>
|
||||
<p>Offline-fähig, App-ähnlich für iOS/Android, QR-Scan für schnellen Einstieg.</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>
|
||||
<h3 class="text-xl font-semibold mb-2">Schnell & Einfach mit QR</h3>
|
||||
<p>Automatische Thumbnails, Echtzeit-Updates, QR-Sharing für Gäste.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 4-Schritte Section -->
|
||||
<section class="py-20 px-4 bg-gray-50">
|
||||
<!-- Pricing Section id="pricing" -->
|
||||
<section id="pricing" 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>
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Tarife für QR-Events</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">
|
||||
<div class="bg-white 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>1 Event mit QR</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]">
|
||||
<div class="bg-white 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>10 Events mit QR</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">
|
||||
<div class="bg-white 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>50 Events mit QR</li>
|
||||
<li>Support & Custom</li>
|
||||
<li>Alle Features</li>
|
||||
</ul>
|
||||
@@ -117,8 +164,8 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Kontakt Section -->
|
||||
<section class="py-20 px-4 bg-gray-50">
|
||||
<!-- Contact Section id="contact" -->
|
||||
<section id="contact" class="py-20 px-4 bg-white">
|
||||
<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">
|
||||
@@ -153,16 +200,16 @@
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section class="py-20 px-4 bg-white">
|
||||
<section class="py-20 px-4 bg-gray-50">
|
||||
<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>
|
||||
<div class="bg-white p-6 rounded-lg">
|
||||
<p class="mb-4">"Perfekt für unsere Hochzeit! QR-Sharing war super einfach."</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>
|
||||
<div class="bg-white p-6 rounded-lg">
|
||||
<p class="mb-4">"Großes Firmenevent – alle Fotos zentral via QR."</p>
|
||||
<p class="font-semibold">- Team XYZ GmbH</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -170,21 +217,21 @@
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="py-20 px-4 bg-gray-50">
|
||||
<section class="py-20 px-4 bg-white">
|
||||
<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">
|
||||
<div class="bg-gray-50 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>
|
||||
<p>Ja, der Basic-Tarif ist kostenlos für 1 Event mit QR. Upgrades ab 99€.</p>
|
||||
</div>
|
||||
<div class="bg-white p-4 rounded-lg">
|
||||
<div class="bg-gray-50 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>
|
||||
<p>100% GDPR-konform. Keine personenbezogenen Daten gespeichert. QR-Zugriffe anonym. 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 class="bg-gray-50 p-4 rounded-lg">
|
||||
<h3 class="font-semibold">Wie funktioniert QR-Sharing?</h3>
|
||||
<p>Generiere QR im Dashboard, teile es – Gäste scannen, laden Fotos hoch in der PWA.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -197,7 +244,7 @@
|
||||
<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>
|
||||
<a href="#contact" class="hover:text-[#FFB6C1]">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
89
resources/views/marketing/blog-show.blade.php
Normal file
89
resources/views/marketing/blog-show.blade.php
Normal file
@@ -0,0 +1,89 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ app()->getLocale() }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>{{ $post->meta_title ?? $post->title }} - Fotospiel</title>
|
||||
<meta name="description" content="{{ $post->meta_description ?? $post->excerpt }}">
|
||||
<meta property="og:title" content="{{ $post->meta_title ?? $post->title }}">
|
||||
<meta property="og:description" content="{{ $post->meta_description ?? $post->excerpt }}">
|
||||
<meta property="og:image" content="{{ $post->featured_image }}">
|
||||
<meta property="og:url" content="{{ route('blog.show', $post) }}">
|
||||
<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">
|
||||
<!-- Shared Header -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-50">
|
||||
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="/marketing" class="text-2xl font-bold text-gray-900">Fotospiel</a>
|
||||
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-6">
|
||||
<a href="/marketing#how-it-works" class="text-gray-600 hover:text-gray-900">How it works</a>
|
||||
<a href="/marketing#features" class="text-gray-600 hover:text-gray-900">Features</a>
|
||||
<div class="relative">
|
||||
<button class="text-gray-600 hover:text-gray-900">Occasions</button>
|
||||
<div class="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg">
|
||||
<a href="/occasions/weddings" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Weddings</a>
|
||||
<a href="/occasions/birthdays" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Birthdays</a>
|
||||
<a href="/occasions/corporate-events" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Corporate Events</a>
|
||||
<a href="/occasions/family-celebrations" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Family Celebrations</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/blog" class="text-gray-900 font-semibold">Blog</a>
|
||||
<a href="/marketing#pricing" class="text-gray-600 hover:text-gray-900">Pricing</a>
|
||||
<a href="/marketing#contact" class="text-gray-600 hover:text-gray-900">Contact</a>
|
||||
</nav>
|
||||
<a href="/buy-credits/basic" class="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold">Jetzt starten</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Blog Post Hero -->
|
||||
<section class="py-20 px-4 bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white">
|
||||
<div class="container mx-auto max-w-4xl">
|
||||
@if ($post->featured_image)
|
||||
<img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-64 object-cover rounded mb-8">
|
||||
@endif
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">{{ $post->title }}</h1>
|
||||
<p class="text-xl mb-8">{{ $post->excerpt }}</p>
|
||||
<p class="text-sm text-gray-200">Veröffentlicht am {{ $post->published_at->format('d.m.Y') }}</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Blog Post Content -->
|
||||
<section class="py-20 px-4">
|
||||
<div class="container mx-auto max-w-4xl">
|
||||
<div class="prose max-w-none">
|
||||
{!! $post->content !!}
|
||||
</div>
|
||||
<div class="mt-8 p-4 bg-gray-100 rounded">
|
||||
<h3 class="font-semibold mb-2">Kategorien:</h3>
|
||||
@foreach ($post->categories as $category)
|
||||
<span class="inline-block bg-[#FFB6C1] text-white px-2 py-1 rounded text-sm mr-2 mb-2">{{ $category->name }}</span>
|
||||
@endforeach
|
||||
<h3 class="font-semibold mt-4 mb-2">Tags:</h3>
|
||||
@foreach ($post->tags as $tag)
|
||||
<span class="inline-block bg-gray-200 text-gray-800 px-2 py-1 rounded text-sm mr-2 mb-2">#{{ $tag->name }}</span>
|
||||
@endforeach
|
||||
</div>
|
||||
<div class="mt-8 text-center">
|
||||
<a href="/blog" class="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold">Zurück zum Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-800 text-white py-8 px-4 mt-20">
|
||||
<div class="container mx-auto text-center">
|
||||
<p>© 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="/marketing#contact" class="hover:text-[#FFB6C1]">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
89
resources/views/marketing/blog.blade.php
Normal file
89
resources/views/marketing/blog.blade.php
Normal file
@@ -0,0 +1,89 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ app()->getLocale() }}">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Fotospiel - Blog</title>
|
||||
<meta name="description" content="Tipps, News und Anleitungen zu Event-Fotos mit QR-Codes und PWA.">
|
||||
<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">
|
||||
<!-- Shared Header (wie in occasions.blade.php) -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-50">
|
||||
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="/marketing" class="text-2xl font-bold text-gray-900">Fotospiel</a>
|
||||
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-6">
|
||||
<a href="/marketing#how-it-works" class="text-gray-600 hover:text-gray-900">How it works</a>
|
||||
<a href="/marketing#features" class="text-gray-600 hover:text-gray-900">Features</a>
|
||||
<div class="relative">
|
||||
<button class="text-gray-600 hover:text-gray-900">Occasions</button>
|
||||
<div class="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg">
|
||||
<a href="/occasions/weddings" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Weddings</a>
|
||||
<a href="/occasions/birthdays" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Birthdays</a>
|
||||
<a href="/occasions/corporate-events" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Corporate Events</a>
|
||||
<a href="/occasions/family-celebrations" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Family Celebrations</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/blog" class="text-gray-900 font-semibold">Blog</a>
|
||||
<a href="/marketing#pricing" class="text-gray-600 hover:text-gray-900">Pricing</a>
|
||||
<a href="/marketing#contact" class="text-gray-600 hover:text-gray-900">Contact</a>
|
||||
</nav>
|
||||
<a href="/buy-credits/basic" class="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold">Jetzt starten</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero for Blog -->
|
||||
<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 Blog</h1>
|
||||
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Tipps, News und Anleitungen zu perfekten Event-Fotos mit QR-Codes, PWA und mehr. Bleib informiert!</p>
|
||||
<a href="/marketing#how-it-works" class="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition">Mehr über Fotospiel</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Blog Posts Section -->
|
||||
<section class="py-20 px-4 bg-white">
|
||||
<div class="container mx-auto max-w-4xl">
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Aktuelle Blog-Posts</h2>
|
||||
@if ($posts->count() > 0)
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
@foreach ($posts as $post)
|
||||
<div class="bg-gray-50 p-6 rounded-lg">
|
||||
@if ($post->featured_image)
|
||||
<img src="{{ $post->featured_image }}" alt="{{ $post->title }}" class="w-full h-48 object-cover rounded mb-4">
|
||||
@endif
|
||||
<h3 class="text-xl font-semibold mb-2"><a href="{{ route('blog.show', $post->slug) }}" class="hover:text-[#FFB6C1]">{{ $post->title }}</a></h3>
|
||||
<p class="mb-4">{{ Str::limit($post->excerpt, 150) }}</p>
|
||||
<p class="text-sm text-gray-500 mb-4">Veröffentlicht am {{ $post->published_at->format('d.m.Y') }}</p>
|
||||
<a href="{{ route('blog.show', $post->slug) }}" class="text-[#FFB6C1] font-semibold">Lesen</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@if ($posts->hasPages())
|
||||
<div class="mt-12 text-center">
|
||||
{{ $posts->links() }}
|
||||
</div>
|
||||
@endif
|
||||
@else
|
||||
<p class="text-center text-gray-600">Noch keine Posts verfügbar. Bleib dran!</p>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer (wie in occasions.blade.php) -->
|
||||
<footer class="bg-gray-800 text-white py-8 px-4 mt-20">
|
||||
<div class="container mx-auto text-center">
|
||||
<p>© 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="/marketing#contact" class="hover:text-[#FFB6C1]">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
137
resources/views/marketing/occasions.blade.php
Normal file
137
resources/views/marketing/occasions.blade.php
Normal file
@@ -0,0 +1,137 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Fotospiel - {{ ucfirst($type) }} Occasion</title>
|
||||
<meta name="description" content="Fotospiel für {{ ucfirst($type) }}: Sammle Gastfotos mit QR-Codes.">
|
||||
<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">
|
||||
<!-- Shared Header (kopiert aus marketing, vereinfacht) -->
|
||||
<header class="bg-white shadow-md sticky top-0 z-50">
|
||||
<div class="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<div class="flex items-center space-x-2">
|
||||
<a href="/marketing" class="text-2xl font-bold text-gray-900">Fotospiel</a>
|
||||
<svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
|
||||
</div>
|
||||
<nav class="hidden md:flex space-x-6">
|
||||
<a href="/marketing#how-it-works" class="text-gray-600 hover:text-gray-900">How it works</a>
|
||||
<a href="/marketing#features" class="text-gray-600 hover:text-gray-900">Features</a>
|
||||
<div class="relative">
|
||||
<button class="text-gray-600 hover:text-gray-900">Occasions</button>
|
||||
<div class="absolute top-full left-0 mt-2 bg-white border rounded shadow-lg">
|
||||
<a href="/occasions/weddings" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Weddings</a>
|
||||
<a href="/occasions/birthdays" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Birthdays</a>
|
||||
<a href="/occasions/corporate-events" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Corporate Events</a>
|
||||
<a href="/occasions/family-celebrations" class="block px-4 py-2 text-gray-600 hover:text-gray-900">Family Celebrations</a>
|
||||
</div>
|
||||
</div>
|
||||
<a href="/blog" class="text-gray-600 hover:text-gray-900">Blog</a>
|
||||
<a href="/marketing#pricing" class="text-gray-600 hover:text-gray-900">Pricing</a>
|
||||
<a href="/marketing#contact" class="text-gray-600 hover:text-gray-900">Contact</a>
|
||||
</nav>
|
||||
<a href="/buy-credits/basic" class="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold">Jetzt starten</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero for Occasion -->
|
||||
<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 für {{ ucfirst($type) }}</h1>
|
||||
<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Sammle unvergessliche Fotos von deinen Gästen mit QR-Codes. Perfekt für {{ ucfirst($type) }} – 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">Event starten</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Occasion Specific Content -->
|
||||
<section class="py-20 px-4 bg-white">
|
||||
<div class="container mx-auto max-w-4xl">
|
||||
@if($type === 'weddings')
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Hochzeiten mit Fotospiel</h2>
|
||||
<p class="text-lg mb-8 text-center">Erfange romantische Momente: Gäste teilen Fotos via QR, wähle Emotions wie 'Romantisch' oder 'Fröhlich'. Besser als traditionelle Fotoboxen.</p>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1515934751635-c81c6bc9a2d8?w=600&h=400&fit=crop" alt="Hochzeitsfotos" class="rounded-lg shadow-lg">
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-2xl font-semibold">Vorteile für Hochzeiten</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>• QR-Code für Gäste: Einfaches Teilen ohne App-Download.</li>
|
||||
<li>• Emotion-Filter: Kategorisiere Fotos (z.B. 'Tanz', 'Kuss').</li>
|
||||
<li>• Private Galerie: Nur freigegebene Fotos sichtbar.</li>
|
||||
<li>• Download: Hochauflösend für Album.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@elseif($type === 'birthdays')
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Geburtstage feiern</h2>
|
||||
<p class="text-lg mb-8 text-center">Lass Freunde und Familie spontane Fotos teilen. QR auf der Torte – Spaß garantiert!</p>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=600&h=400&fit=crop" alt="Geburtstagsfotos" class="rounded-lg shadow-lg">
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-2xl font-semibold">Vorteile für Geburtstage</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>• Schnelle Uploads: Kamera oder Galerie.</li>
|
||||
<li>• Likes & Shares: Beliebte Momente hervorheben.</li>
|
||||
<li>• Offline-fähig: PWA funktioniert ohne Internet.</li>
|
||||
<li>• Anonym: Keine Registrierung nötig.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@elseif($type === 'corporate-events')
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Firmenevents professionell</h2>
|
||||
<p class="text-lg mb-8 text-center">Netzwerken und Team-Building: Sammle Fotos zentral, teile Highlights intern.</p>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=600&h=400&fit=crop" alt="Firmenevent-Fotos" class="rounded-lg shadow-lg">
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-2xl font-semibold">Vorteile für Firmenevents</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>• QR an Ständen: Gäste fotografieren sich selbst.</li>
|
||||
<li>• Kategorien: 'Team', 'Netzwerk', 'Präsentation'.</li>
|
||||
<li>• Export: Für Social Media oder Intranet.</li>
|
||||
<li>• GDPR-sicher: Keine PII gespeichert.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@elseif($type === 'family-celebrations')
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Familienfeiern</h2>
|
||||
<p class="text-lg mb-8 text-center">Von Taufen bis Jubiläen: Sammle Erinnerungen von allen Verwandten.</p>
|
||||
<div class="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=400&fit=crop" alt="Familienfotos" class="rounded-lg shadow-lg">
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<h3 class="text-2xl font-semibold">Vorteile für Familienfeiern</h3>
|
||||
<ul class="space-y-2">
|
||||
<li>• Einfach für alle Altersgruppen: Große Buchstaben, Touch-freundlich.</li>
|
||||
<li>• Emotionen: 'Familie', 'Glück', 'Zusammenhalt'.</li>
|
||||
<li>• Teilen: Per Link oder QR für Nachfeier.</li>
|
||||
<li>• Unbegrenzt: Im Premium-Tarif.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<p class="text-center">Occasion nicht gefunden. <a href="/marketing">Zurück zur Startseite</a>.</p>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer (kopiert aus marketing) -->
|
||||
<footer class="bg-gray-800 text-white py-8 px-4 mt-20">
|
||||
<div class="container mx-auto text-center">
|
||||
<p>© 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="/marketing#contact" class="hover:text-[#FFB6C1]">Kontakt</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user