feat(packages): implement package-based business model

This commit is contained in:
Codex Agent
2025-09-26 22:13:56 +02:00
parent 6fc36ebaf4
commit 0a643c3e4d
54 changed files with 3301 additions and 282 deletions

View File

@@ -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>