feat(packages): implement package-based business model
This commit is contained in:
Codex Agent
@@ -10,6 +10,9 @@
|
||||
<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>
|
||||
<h2>Zahlungen und Packages</h2>
|
||||
<p>Wir verarbeiten Zahlungen für Packages über Stripe und PayPal. Karteninformationen werden nicht gespeichert – alle Daten werden verschlüsselt übertragen. Siehe <a href="https://stripe.com/de/privacy" target="_blank">Stripe Datenschutz</a> und <a href="https://www.paypal.com/de/webapps/mpp/ua/privacy-full" target="_blank">PayPal Datenschutz</a>.</p>
|
||||
<p>Package-Daten (Limits, Features) sind anonymisiert und werden nur für die Funktionalität benötigt. Consent für Zahlungen und E-Mails wird bei Kauf eingeholt. Daten werden nach 10 Jahren gelöscht.</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>
|
||||
|
||||
@@ -15,6 +15,8 @@
|
||||
Vertreten durch: Max Mustermann<br>
|
||||
Kontakt: <a href="/kontakt">Kontakt</a></p>
|
||||
<p class="mb-4">Umsatzsteuer-ID: DE123456789</p>
|
||||
<h2>Monetarisierung</h2>
|
||||
<p>Wir monetarisieren über Packages (Einmalkäufe und Abos) via Stripe und PayPal. Preise exkl. MwSt. Support: support@fotospiel.de</p>
|
||||
<p>Registergericht: Amtsgericht Musterstadt</p>
|
||||
<p>Handelsregister: HRB 12345</p>
|
||||
</body>
|
||||
|
||||
@@ -43,9 +43,9 @@
|
||||
</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="/packages" class="text-gray-600 hover:text-gray-900">Packages</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>
|
||||
<a href="/packages" class="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold hover:bg-[#FF69B4] transition">Packages entdecken</a>
|
||||
</nav>
|
||||
<!-- Mobile Menu Placeholder (Hamburger) -->
|
||||
<button class="md:hidden text-gray-600">☰</button>
|
||||
@@ -58,7 +58,7 @@
|
||||
<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>
|
||||
<a href="/packages" 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));">
|
||||
@@ -125,41 +125,15 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Pricing Section id="pricing" -->
|
||||
<!-- Packages Teaser Section -->
|
||||
<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">Tarife für QR-Events</h2>
|
||||
<div class="grid md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||||
<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 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-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 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-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 mit QR</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>
|
||||
<h2 class="text-3xl font-bold text-center mb-12">Unsere Packages</h2>
|
||||
<p class="text-center text-lg text-gray-600 mb-8">Wählen Sie das passende Paket für Ihr Event – von kostenlos bis premium.</p>
|
||||
<div class="text-center">
|
||||
<a href="/packages" class="bg-[#FFB6C1] text-white px-8 py-4 rounded-full font-semibold text-lg hover:bg-[#FF69B4] transition">
|
||||
Alle Packages ansehen
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<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>
|
||||
<a href="/packages" class="bg-[#FFB6C1] text-white px-6 py-2 rounded-full font-semibold">Packages wählen</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
<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>
|
||||
<a href="/packages" class="bg-white text-[#FFB6C1] px-8 py-4 rounded-full font-semibold text-lg hover:bg-gray-100 transition">Package wählen</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
194
resources/views/marketing/packages.blade.php
Normal file
194
resources/views/marketing/packages.blade.php
Normal file
@@ -0,0 +1,194 @@
|
||||
@extends('layouts.marketing')
|
||||
|
||||
@section('title', __('marketing.packages.title'))
|
||||
|
||||
@section('content')
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<!-- Hero Section -->
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-4xl font-bold text-gray-900 mb-4">
|
||||
{{ __('marketing.packages.hero_title') }}
|
||||
</h1>
|
||||
<p class="text-xl text-gray-600 mb-8">
|
||||
{{ __('marketing.packages.hero_description') }}
|
||||
</p>
|
||||
<a href="#endcustomer" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition duration-300">
|
||||
{{ __('marketing.packages.cta_explore') }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Tabs for Package Types -->
|
||||
<div class="mb-12">
|
||||
<div class="border-b border-gray-200">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<a href="#endcustomer" class="tab-link whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-blue-500 text-blue-600">
|
||||
{{ __('marketing.packages.tab_endcustomer') }}
|
||||
</a>
|
||||
<a href="#reseller" class="tab-link whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm border-gray-300 text-gray-500 hover:text-gray-700 hover:border-gray-300">
|
||||
{{ __('marketing.packages.tab_reseller') }}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Endcustomer Packages -->
|
||||
<section id="endcustomer" class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
{{ __('marketing.packages.section_endcustomer') }}
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
@foreach(\App\Models\Package::where('type', 'endcustomer')->orderBy('price')->get() as $package)
|
||||
<div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition duration-300">
|
||||
<div class="text-center mb-4">
|
||||
<h3 class="text-xl font-semibold text-gray-900">{{ $package->name }}</h3>
|
||||
<div class="text-3xl font-bold text-blue-600 mt-2">
|
||||
{{ $package->price }} €
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1">{{ $package->price == 0 ? __('marketing.packages.free') : __('marketing.packages.one_time') }}</p>
|
||||
</div>
|
||||
<ul class="space-y-2 mb-6">
|
||||
@if($package->max_photos)
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
{{ $package->max_photos }} {{ __('marketing.packages.max_photos') }}
|
||||
</li>
|
||||
@endif
|
||||
@if($package->max_guests)
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
{{ $package->max_guests }} {{ __('marketing.packages.max_guests') }}
|
||||
</li>
|
||||
@endif
|
||||
@if($package->gallery_days)
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
{{ $package->gallery_days }} {{ __('marketing.packages.gallery_days') }}
|
||||
</li>
|
||||
@endif
|
||||
@if($package->features)
|
||||
@foreach(json_decode($package->features, true) as $feature => $enabled)
|
||||
@if($enabled)
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
{{ __('marketing.packages.feature_' . $feature) }}
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
</ul>
|
||||
<a href="/packages?type=endcustomer&package_id={{ $package->id }}" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-md text-center font-semibold transition duration-300">
|
||||
{{ __('marketing.packages.buy_now') }}
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Reseller Packages -->
|
||||
<section id="reseller" class="mb-16">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
{{ __('marketing.packages.section_reseller') }}
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
@foreach(\App\Models\Package::where('type', 'reseller')->orderBy('price')->get() as $package)
|
||||
<div class="bg-white rounded-lg shadow-md p-6 border border-gray-200 hover:shadow-lg transition duration-300">
|
||||
<div class="text-center mb-4">
|
||||
<h3 class="text-xl font-semibold text-gray-900">{{ $package->name }}</h3>
|
||||
<div class="text-3xl font-bold text-blue-600 mt-2">
|
||||
{{ $package->price }} € / {{ __('marketing.packages.year') }}
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mt-1">{{ __('marketing.packages.subscription') }}</p>
|
||||
</div>
|
||||
<ul class="space-y-2 mb-6">
|
||||
@if($package->max_events_per_year)
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
{{ $package->max_events_per_year }} {{ __('marketing.packages.max_events_year') }}
|
||||
</li>
|
||||
@endif
|
||||
@if($package->features)
|
||||
@foreach(json_decode($package->features, true) as $feature => $enabled)
|
||||
@if($enabled)
|
||||
<li class="flex items-center text-sm text-gray-700">
|
||||
<svg class="w-4 h-4 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
{{ __('marketing.packages.feature_' . $feature) }}
|
||||
</li>
|
||||
@endif
|
||||
@endforeach
|
||||
@endif
|
||||
</ul>
|
||||
<a href="/packages?type=reseller&package_id={{ $package->id }}" class="w-full bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-md text-center font-semibold transition duration-300">
|
||||
{{ __('marketing.packages.subscribe_now') }}
|
||||
</a>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FAQ Section -->
|
||||
<section class="bg-white rounded-lg shadow-md p-8">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-6 text-center">
|
||||
{{ __('marketing.packages.faq_title') }}
|
||||
</h2>
|
||||
<div class="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-2">{{ __('marketing.packages.faq_q1') }}</h3>
|
||||
<p class="text-gray-600">{{ __('marketing.packages.faq_a1') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-2">{{ __('marketing.packages.faq_q2') }}</h3>
|
||||
<p class="text-gray-600">{{ __('marketing.packages.faq_a2') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-2">{{ __('marketing.packages.faq_q3') }}</h3>
|
||||
<p class="text-gray-600">{{ __('marketing.packages.faq_a3') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-semibold text-gray-900 mb-2">{{ __('marketing.packages.faq_q4') }}</h3>
|
||||
<p class="text-gray-600">{{ __('marketing.packages.faq_a4') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="text-center mt-16">
|
||||
<h2 class="text-2xl font-bold text-gray-900 mb-4">
|
||||
{{ __('marketing.packages.final_cta') }}
|
||||
</h2>
|
||||
<a href="/contact" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition duration-300">
|
||||
{{ __('marketing.packages.contact_us') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabLinks = document.querySelectorAll('.tab-link');
|
||||
tabLinks.forEach(link => {
|
||||
link.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = this.getAttribute('href');
|
||||
document.querySelectorAll('section').forEach(section => section.style.display = 'none');
|
||||
document.querySelector(target).style.display = 'block';
|
||||
tabLinks.forEach(l => l.classList.remove('border-blue-500', 'text-blue-600'));
|
||||
this.classList.add('border-blue-500', 'text-blue-600');
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
Reference in New Issue
Block a user