presseportale/resources/views/web/preise.blade.php
Kevin Adametz 5b8bdf4182
Some checks are pending
linter / quality (push) Waiting to run
tests / ci (push) Waiting to run
12-05-2026 Frontend dev
2026-05-12 18:32:33 +02:00

420 lines
28 KiB
PHP
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@extends('web.layouts.web-master')
@section('title', 'Preise & Leistungen - Business Portal 24')
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<!-- Burger Menu Component -->
<livewire:web.burger-menu />
<!-- Header Component -->
<livewire:web.header />
<!-- Hero Section -->
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
style="background: var(--gradient-hero);">
<div class="container mx-auto px-4 text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-4 animate-fade-in-up">
Preise & Leistungen
</h1>
<p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
Transparente Preise für jede Unternehmensgröße von Start-ups bis Konzerne
</p>
</div>
<!-- Decorative Pattern -->
<div class="absolute top-0 right-0 opacity-10">
<svg width="404" height="384" fill="none" viewBox="0 0 404 384">
<defs>
<pattern id="pattern-hero-preise" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x="0" y="0" width="4" height="4" fill="currentColor"/>
</pattern>
</defs>
<rect width="404" height="384" fill="url(#pattern-hero-preise)"/>
</svg>
</div>
</section>
<!-- Pricing Cards -->
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Free Plan -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 flex flex-col transition-all duration-300 hover:shadow-lg">
<div class="mb-6">
<h3 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
Free
</h3>
<div class="flex items-baseline gap-2 mb-3">
<span class="text-4xl font-bold text-zinc-900 dark:text-zinc-100">
0
</span>
<span class="text-zinc-600 dark:text-zinc-400">kostenlos</span>
</div>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Ideal für kleinere Unternehmen und Start-ups
</p>
</div>
<ul class="space-y-3 mb-8 flex-1">
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">1 Pressemitteilung pro Monat</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Standard-Veröffentlichung</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Basis-Statistiken</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">E-Mail-Support</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Community-Forum Zugang</span>
</li>
</ul>
<a href="/register" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-zinc-700 dark:text-zinc-300 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-all">
Jetzt starten
</a>
</div>
<!-- Professional Plan (Popular) -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border-2 border-[var(--color-primary)] p-8 flex flex-col relative shadow-lg transition-all duration-300 hover:shadow-xl">
<span class="absolute -top-3 left-1/2 -translate-x-1/2 inline-flex items-center px-4 py-1 text-xs font-medium text-white rounded-full" style="background: var(--gradient-hero);">
Beliebteste Wahl
</span>
<div class="mb-6">
<h3 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
Professional
</h3>
<div class="flex items-baseline gap-2 mb-3">
<span class="text-4xl font-bold text-zinc-900 dark:text-zinc-100">
99
</span>
<span class="text-zinc-600 dark:text-zinc-400">pro Monat</span>
</div>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Für wachsende Unternehmen mit regelmäßigem Kommunikationsbedarf
</p>
</div>
<ul class="space-y-3 mb-8 flex-1">
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">10 Pressemitteilungen pro Monat</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Premium-Platzierung</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Erweiterte Statistiken & Analytics</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Medienkit-Hosting</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Prioritäts-Support</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Social Media Distribution</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Eigener Newsroom</span>
</li>
</ul>
<a href="/register?plan=professional" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
Jetzt upgraden
</a>
</div>
<!-- Enterprise Plan -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 flex flex-col transition-all duration-300 hover:shadow-lg">
<div class="mb-6">
<h3 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
Enterprise
</h3>
<div class="flex items-baseline gap-2 mb-3">
<span class="text-4xl font-bold text-zinc-900 dark:text-zinc-100">
Individuell
</span>
</div>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3">
auf Anfrage
</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Maßgeschneiderte Lösungen für große Organisationen
</p>
</div>
<ul class="space-y-3 mb-8 flex-1">
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Unbegrenzte Pressemitteilungen</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Top-Platzierung garantiert</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">White-Label Newsroom</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Dedizierter Account Manager</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">API-Zugang</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Custom Integrationen</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Individuelle SLAs</span>
</li>
<li class="flex items-start gap-2">
<svg class="h-5 w-5 text-[var(--color-primary)] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Schulungen & Workshops</span>
</li>
</ul>
<a href="/kontakt" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-zinc-700 dark:text-zinc-300 border border-zinc-300 dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-800 rounded-lg transition-all">
Kontakt aufnehmen
</a>
</div>
</div>
</div>
</section>
<!-- Add-ons Section -->
<section class="py-16 bg-zinc-50/50 dark:bg-zinc-900/50 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Zusätzliche Services
</h2>
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Maximieren Sie die Reichweite Ihrer Pressemitteilungen mit unseren Premium-Features
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Featured Story -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-all duration-300 hover:shadow-lg">
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Featured Story
</h3>
<div class="text-2xl font-bold text-[var(--color-primary)] mb-3">
199
</div>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Ihre Meldung prominent auf der Startseite platziert für 24 Stunden
</p>
</div>
<!-- Newsletter Feature -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-all duration-300 hover:shadow-lg">
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
<svg class="h-6 w-6 text-[var(--color-primary)]" 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="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Newsletter Feature
</h3>
<div class="text-2xl font-bold text-[var(--color-primary)] mb-3">
149
</div>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Exklusive Platzierung im wöchentlichen Newsletter an 50.000+ Abonnenten
</p>
</div>
<!-- Social Media Boost -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-all duration-300 hover:shadow-lg">
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Social Media Boost
</h3>
<div class="text-2xl font-bold text-[var(--color-primary)] mb-3">
99
</div>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Verstärkte Verbreitung über LinkedIn, Twitter und weitere Kanäle
</p>
</div>
<!-- Premium Analytics -->
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-all duration-300 hover:shadow-lg">
<div class="w-12 h-12 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center mb-4">
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path>
</svg>
</div>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Premium Analytics
</h3>
<div class="text-2xl font-bold text-[var(--color-primary)] mb-3">
79/Monat
</div>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Detaillierte Auswertungen mit Reichweite, Engagement und Conversion-Tracking
</p>
</div>
</div>
</div>
</section>
<!-- FAQ Section -->
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4 max-w-3xl">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-8 text-center">
Häufig gestellte Fragen
</h2>
<div class="space-y-6">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Kann ich meinen Plan jederzeit wechseln?
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Ja, Sie können jederzeit upgraden oder downgraden. Bei einem Upgrade wird anteilig berechnet, bei einem Downgrade gilt die Änderung ab dem nächsten Abrechnungszeitraum.
</p>
</div>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Gibt es eine Mindestvertragslaufzeit?
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Nein, alle unsere Pläne sind monatlich kündbar. Es gibt keine versteckten Kosten oder Mindestlaufzeiten.
</p>
</div>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Welche Zahlungsmethoden akzeptieren Sie?
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Wir akzeptieren alle gängigen Kreditkarten (Visa, Mastercard, American Express), SEPA-Lastschrift und PayPal. Für Enterprise-Kunden bieten wir auch Rechnungszahlung an.
</p>
</div>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Wie funktioniert die Reichweitenmessung?
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Alle Professional- und Enterprise-Kunden erhalten Zugang zu detaillierten Analytics: Views, Klicks, geografische Verteilung, Referrer und mehr. Die Daten werden in Echtzeit aktualisiert.
</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-16 text-white" style="background: var(--gradient-hero);">
<div class="container mx-auto px-4 text-center">
<h2 class="text-3xl font-bold mb-4">
Noch Fragen zu unseren Preisen?
</h2>
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
Unser Team berät Sie gerne und findet die passende Lösung für Ihre Anforderungen
</p>
<div class="flex flex-wrap gap-4 justify-center">
<a href="/kontakt?type=beratung" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Beratungsgespräch vereinbaren
</a>
<a href="/kontakt" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium bg-white/10 hover:bg-white/20 border border-white text-white rounded-lg transition-all">
Kontakt aufnehmen
</a>
</div>
</div>
</section>
<!-- Footer Component -->
<livewire:web.footer />
</main>
@endsection
@push('styles')
<style>
/* Domain-spezifische Color-Variablen für Inline-Styles */
:root {
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
}
/* Alpine.js Cloak */
[x-cloak] {
display: none !important;
}
</style>
@endpush