gitmedia/presseportale
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

12-05-2026 Frontend dev
Some checks are pending
linter / quality (push) Waiting to run
Details
tests / ci (push) Waiting to run
Details

Browse source
This commit is contained in:
Kevin Adametz 2026-05-12 18:32:33 +02:00
parent 405df0a122
commit 5b8bdf4182
779 changed files with 480564 additions and 6241 deletions
Download patch file Download diff file Expand all files Collapse all files

64
resources/views/web/agb.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
@ -19,69 +19,69 @@
</section>
<!-- Content Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 1 Geltungsbereich</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 1 Geltungsbereich</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Diese Allgemeinen Geschäftsbedingungen (AGB) gelten für alle Verträge zwischen der Business Portal GmbH (im Folgenden „Anbieter")
und ihren Kunden (im Folgenden „Kunde" oder „Nutzer") über die Nutzung der Plattform Business Portal.
</p>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Abweichende, entgegenstehende oder ergänzende AGB des Kunden werden nicht Vertragsbestandteil, es sei denn, der Anbieter
stimmt ihrer Geltung ausdrücklich schriftlich zu.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 2 Vertragsgegenstand</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 2 Vertragsgegenstand</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Der Anbieter stellt dem Kunden eine Online-Plattform zur Veröffentlichung von Pressemitteilungen zur Verfügung.
Der Funktionsumfang richtet sich nach dem gewählten Tarif.
</p>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Der Anbieter ist berechtigt, Subunternehmer zur Vertragserfüllung einzusetzen.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 3 Vertragsschluss und Registrierung</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 3 Vertragsschluss und Registrierung</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Der Vertrag kommt durch die Registrierung des Kunden und die Bestätigung durch den Anbieter zustande.
Die Registrierung ist nur volljährigen, unbeschränkt geschäftsfähigen Personen gestattet.
</p>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Der Kunde verpflichtet sich, bei der Registrierung wahre und vollständige Angaben zu machen und diese aktuell zu halten.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 4 Leistungsumfang</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 4 Leistungsumfang</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Der konkrete Leistungsumfang richtet sich nach dem gewählten Tarif. Eine Beschreibung der Tarife findet sich auf der
Preisseite der Website.
</p>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Der Anbieter ist berechtigt, die Dienste weiterzuentwickeln und Funktionen zu ändern, sofern dies die Vertragserfüllung
nicht wesentlich beeinträchtigt.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 5 Verfügbarkeit</h2>
<p class="text-gray-600 dark:text-gray-400">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 5 Verfügbarkeit</h2>
<p class="text-zinc-600 dark:text-zinc-400">
Der Anbieter stellt die Plattform mit einer Verfügbarkeit von mindestens 98% im Jahresmittel zur Verfügung.
Ausgenommen hiervon sind Wartungsarbeiten sowie Ausfälle, die nicht im Einflussbereich des Anbieters liegen.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 6 Pflichten des Kunden</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">Der Kunde verpflichtet sich:</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 6 Pflichten des Kunden</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">Der Kunde verpflichtet sich:</p>
<ul class="list-disc list-inside text-zinc-600 dark:text-zinc-400 mb-4">
<li>Nur rechtmäßige Inhalte zu veröffentlichen</li>
<li>Keine Rechte Dritter zu verletzen</li>
<li>Die Zugangsdaten vertraulich zu behandeln</li>
@ -91,48 +91,48 @@
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 7 Vergütung und Zahlung</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 7 Vergütung und Zahlung</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Die Vergütung richtet sich nach dem gewählten Tarif. Alle Preise verstehen sich zzgl. der gesetzlichen Mehrwertsteuer.
</p>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Die Zahlung erfolgt im Voraus für den gewählten Abrechnungszeitraum (monatlich oder jährlich) per Kreditkarte,
SEPA-Lastschrift oder anderen vom Anbieter akzeptierten Zahlungsmethoden.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 8 Laufzeit und Kündigung</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 8 Laufzeit und Kündigung</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Der Vertrag wird für die gewählte Mindestlaufzeit geschlossen und verlängert sich automatisch um den gewählten
Abrechnungszeitraum, sofern nicht gekündigt wird.
</p>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Die Kündigung muss schriftlich oder in Textform (z.B. E-Mail) unter Einhaltung einer Frist von 30 Tagen zum Ende
des Abrechnungszeitraums erfolgen.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 9 Haftung</h2>
<p class="text-gray-600 dark:text-gray-400">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 9 Haftung</h2>
<p class="text-zinc-600 dark:text-zinc-400">
Der Anbieter haftet nur für Schäden, die auf einer vorsätzlichen oder grob fahrlässigen Pflichtverletzung beruhen.
Dies gilt nicht für Schäden aus der Verletzung des Lebens, des Körpers oder der Gesundheit.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">§ 10 Schlussbestimmungen</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">§ 10 Schlussbestimmungen</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Es gilt das Recht der Bundesrepublik Deutschland unter Ausschluss des UN-Kaufrechts.
</p>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Sollten einzelne Bestimmungen dieser AGB unwirksam sein oder werden, berührt dies die Wirksamkeit der übrigen Bestimmungen nicht.
</p>
</div>
<div>
<p class="text-sm text-gray-500 dark:text-gray-500">
<p class="text-sm text-zinc-500 dark:text-zinc-500">
Stand: Januar 2025
</p>
</div>

90
resources/views/web/api.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -38,23 +38,23 @@
</section>
<!-- API Overview Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Leistungsstarke REST API
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400">
<p class="text-lg text-zinc-600 dark:text-zinc-400">
Automatisieren Sie Ihre Presseveröffentlichungen und integrieren Sie unsere Dienste
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<p class="text-lg text-zinc-900 dark:text-zinc-100 leading-relaxed mb-6">
Unsere RESTful API ermöglicht es Ihnen, Pressemitteilungen programmatisch zu veröffentlichen, zu verwalten und abzurufen. Perfekt für Unternehmen mit hohem Veröffentlichungsvolumen oder bestehenden Content-Management-Systemen.
</p>
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed">
<p class="text-lg text-zinc-900 dark:text-zinc-100 leading-relaxed">
Die API ist vollständig dokumentiert und unterstützt moderne Authentifizierungsmethoden sowie Webhooks für Echtzeit-Benachrichtigungen.
</p>
</div>
@ -63,104 +63,104 @@
</section>
<!-- API Features Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
API Features
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Alles, was Sie für eine nahtlose Integration benötigen
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
<!-- Feature 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
RESTful API
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Moderne REST-Architektur mit JSON-Responses für einfache Integration in jede Programmiersprache.
</p>
</div>
<!-- Feature 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 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-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
OAuth 2.0
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Sichere Authentifizierung mit OAuth 2.0 und API-Tokens für maximale Sicherheit.
</p>
</div>
<!-- Feature 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Webhooks
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Erhalten Sie Echtzeit-Benachrichtigungen über Events wie Veröffentlichungen oder Statusänderungen.
</p>
</div>
<!-- Feature 4 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Dokumentation
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Umfassende API-Dokumentation mit Code-Beispielen in verschiedenen Sprachen.
</p>
</div>
<!-- Feature 5 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 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-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Rate Limiting
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Faire Rate Limits mit klaren Headern und automatischer Skalierung bei Bedarf.
</p>
</div>
<!-- Feature 6 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
SDKs
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Offizielle SDKs für PHP, JavaScript, Python und weitere Sprachen verfügbar.
</p>
</div>
@ -169,20 +169,20 @@
</section>
<!-- Code Example Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Schneller Einstieg
</h2>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Veröffentlichen Sie Ihre erste Pressemitteilung in wenigen Zeilen Code
</p>
</div>
<div class="bg-gray-900 dark:bg-gray-950 rounded-xl border border-gray-800 p-6 overflow-x-auto">
<div class="text-sm text-gray-400 mb-4">// Example: Pressemitteilung veröffentlichen</div>
<div class="bg-zinc-900 dark:bg-zinc-950 rounded-xl border border-zinc-800 p-6 overflow-x-auto">
<div class="text-sm text-zinc-400 mb-4">// Example: Pressemitteilung veröffentlichen</div>
<pre class="text-green-400 font-mono text-sm"><code>curl -X POST https://api.businessportal.de/v1/releases \
-H "Authorization: Bearer YOUR_API_TOKEN" \
-H "Content-Type: application/json" \
@ -204,30 +204,30 @@
</section>
<!-- Integrations Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Native Integrationen
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Verbinden Sie Business Portal mit Ihren Lieblings-Tools
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
<!-- Integration logos would go here -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">WordPress</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">WordPress</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Zapier</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Zapier</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Slack</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Slack</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">HubSpot</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">HubSpot</span>
</div>
</div>
</div>
@ -248,7 +248,7 @@
API-Zugang ist ab dem Professional-Tarif verfügbar
</p>
<div class="flex gap-4 justify-center">
<a href="/preise" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
<a href="/preise" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Preise ansehen
</a>
<a href="#" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-white border-2 border-white hover:bg-white/10 rounded-lg transition-all">

10
resources/views/web/businessportal24.blade copy.php
View file

@ -1,10 +0,0 @@
@extends('web.layouts.web-master')
@section('title', 'Testseite')
@section('content')
<div class="bg-blue-500 text-white p-8">
<h1 class="text-4xl font-bold">Testseite</h1>
<p>Wenn Sie dies sehen, funktioniert das minimale Setup.</p>
</div>
@endsection

137
resources/views/web/businessportal24.blade.php
View file

@ -1,133 +1,38 @@
@extends('web.layouts.web-master')
@section('title', 'Pressemitteilungen - Business Portal 24')
@section('title', 'Aktuelle Pressemitteilungen aus der deutschen Wirtschaft – businessportal24')
@section('meta_description', 'Pressemitteilungen aus Deutschland, Österreich und der Schweiz. Redaktionell geprüft. Strukturiert distribuiert.')
@section('content')
<x-web.site-header />
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<!-- Burger Menu Component -->
<livewire:web.burger-menu />
<main class="bg-bg text-ink">
<x-web.focus-hero
:lead-release="$leadRelease ?? null"
:side-releases="$sideReleases ?? []" />
<!-- Header Component -->
<livewire:web.header />
<section class="max-w-layout mx-auto px-8 mt-16">
<div class="grid gap-9 grid-cols-1 lg:grid-cols-[1.7fr_1fr]">
<livewire:web.press-release-feed :portal="\App\Enums\Portal::Businessportal24->value" />
<!-- Filter Bar Component -->
<livewire:web.filter-bar />
<!-- Hero Banner -->
<section class="relative overflow-hidden text-white py-12 animate-fade-in" style="background: var(--gradient-hero);">
<div class="container mx-auto px-4">
<div class="max-w-4xl">
<h1 class="text-3xl md:text-4xl lg:text-5xl text-white/90 font-bold mb-4 animate-fade-in-up">
Aktuelle Pressemitteilungen
</h1>
<p class="text-base md:text-lg text-white/90 animate-fade-in-up animation-delay-200">
Die führende Plattform für Unternehmensnachrichten aus Deutschland, Österreich und der Schweiz
</p>
</div>
</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" 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)" />
</svg>
<aside class="flex flex-col gap-9">
<x-web.most-read :releases="$mostReadReleases ?? []" />
<x-web.publisher-cta />
<x-web.active-newsrooms :companies="$activeNewsrooms ?? []" />
</aside>
</div>
</section>
<!-- Featured Section -->
<section
class="bg-gray-50/50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 py-8 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
<span
class="w-1 h-6 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Top-Meldungen
</h2>
<span
class="text-xs text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 px-2 py-1 rounded">Anzeige</span>
</div>
<x-web.industry-spotlight />
<livewire:web.featured-releases />
</div>
</section>
<x-web.events-week />
<!-- Main Content Grid -->
<section class="py-8 bg-white dark:bg-gray-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between mb-6">
<h2 class="text-sm font-medium text-gray-600 dark:text-gray-400 flex items-center gap-2">
<span class="w-2 h-2 bg-[var(--color-primary)] rounded-full"></span>
247 Pressemitteilungen
</h2>
</div>
<x-web.industry-index :industries="($industryIndex ?? collect())->isNotEmpty() ? $industryIndex->toArray() : null" />
<livewire:web.press-releases-grid />
<x-web.newsletter-strip />
<!-- Pagination -->
<nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
<div class="flex items-center gap-2">
<button
class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
disabled aria-label="Vorherige Seite">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
</path>
</svg>
</button>
<button
class="px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all"
style="background: var(--gradient-hero);" aria-current="page">
1
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
2
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
3
</button>
<span class="px-2 text-gray-600 dark:text-gray-400">...</span>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
10
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
aria-label="Nächste Seite">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
</path>
</svg>
</button>
</div>
</nav>
</div>
</section>
<!-- Footer Component -->
<livewire:web.footer />
<x-web.quality-summary :stats="$homeStats ?? []" />
</main>
<x-web.site-footer />
@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

136
resources/views/web/cookies.blade.php
View file

@ -4,13 +4,12 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
<!-- Hero Section -->
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
style="background: var(--gradient-hero);">
<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">
Cookie-Richtlinien
@ -19,33 +18,40 @@
</section>
<!-- Content Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
<div
class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Was sind Cookies?</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
Cookies sind kleine Textdateien, die auf Ihrem Computer oder mobilen Gerät gespeichert werden, wenn Sie eine Website besuchen.
Sie ermöglichen es der Website, Ihr Gerät zu erkennen und bestimmte Informationen über Ihre Nutzung zu speichern.
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Was sind Cookies?</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Cookies sind kleine Textdateien, die auf Ihrem Computer oder mobilen Gerät gespeichert
werden, wenn Sie eine Website besuchen.
Sie ermöglichen es der Website, Ihr Gerät zu erkennen und bestimmte Informationen über Ihre
Nutzung zu speichern.
</p>
<p class="text-gray-600 dark:text-gray-400">
Wir verwenden Cookies, um Ihnen ein optimales Nutzungserlebnis zu bieten und unsere Website kontinuierlich zu verbessern.
<p class="text-zinc-600 dark:text-zinc-400">
Wir verwenden Cookies, um Ihnen ein optimales Nutzungserlebnis zu bieten und unsere Website
kontinuierlich zu verbessern.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Welche Cookies verwenden wir?</h2>
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Welche Cookies verwenden
wir?</h2>
<div class="mb-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">1. Notwendige Cookies</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">
Diese Cookies sind für den Betrieb der Website unbedingt erforderlich und können nicht deaktiviert werden.
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">1. Notwendige
Cookies</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-3">
Diese Cookies sind für den Betrieb der Website unbedingt erforderlich und können nicht
deaktiviert werden.
</p>
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><strong>Beispiele:</strong></p>
<ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400">
<div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2"><strong>Beispiele:</strong></p>
<ul class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400">
<li>Session-Cookies (Anmeldung)</li>
<li>Sicherheits-Cookies (CSRF-Schutz)</li>
<li>Cookie-Einwilligungs-Cookies</li>
@ -54,13 +60,14 @@
</div>
<div class="mb-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">2. Funktionale Cookies</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">2. Funktionale
Cookies</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-3">
Diese Cookies ermöglichen erweiterte Funktionalitäten und Personalisierung.
</p>
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><strong>Beispiele:</strong></p>
<ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400">
<div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2"><strong>Beispiele:</strong></p>
<ul class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400">
<li>Spracheinstellungen</li>
<li>Dark-Mode-Präferenzen</li>
<li>Gespeicherte Filtereinstellungen</li>
@ -69,13 +76,14 @@
</div>
<div class="mb-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">3. Analytische Cookies</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">3. Analytische
Cookies</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-3">
Diese Cookies helfen uns zu verstehen, wie Besucher mit unserer Website interagieren.
</p>
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><strong>Dienste:</strong></p>
<ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400">
<div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2"><strong>Dienste:</strong></p>
<ul class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400">
<li>Google Analytics (anonymisiert)</li>
<li>Interne Analysetools</li>
</ul>
@ -83,13 +91,14 @@
</div>
<div class="mb-6">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">4. Marketing-Cookies</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">4. Marketing-Cookies
</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-3">
Diese Cookies werden verwendet, um Ihnen relevante Werbung anzuzeigen.
</p>
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2"><strong>Beispiele:</strong></p>
<ul class="list-disc list-inside text-sm text-gray-600 dark:text-gray-400">
<div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2"><strong>Beispiele:</strong></p>
<ul class="list-disc list-inside text-sm text-zinc-600 dark:text-zinc-400">
<li>Remarketing-Cookies</li>
<li>Social Media Tracking</li>
</ul>
@ -98,31 +107,32 @@
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Cookie-Laufzeiten</h2>
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Cookie-Laufzeiten</h2>
<div class="overflow-x-auto">
<table class="min-w-full text-sm">
<thead class="bg-gray-50 dark:bg-gray-950">
<thead class="bg-zinc-50 dark:bg-zinc-950">
<tr>
<th class="px-4 py-3 text-left text-gray-900 dark:text-gray-100">Cookie-Typ</th>
<th class="px-4 py-3 text-left text-gray-900 dark:text-gray-100">Laufzeit</th>
<th class="px-4 py-3 text-left text-zinc-900 dark:text-zinc-100">Cookie-Typ</th>
<th class="px-4 py-3 text-left text-zinc-900 dark:text-zinc-100">Laufzeit</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-800">
<tbody class="divide-y divide-zinc-200 dark:divide-zinc-800">
<tr>
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Session-Cookies</td>
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Bis zum Schließen des Browsers</td>
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Session-Cookies</td>
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Bis zum Schließen des
Browsers</td>
</tr>
<tr>
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Funktionale Cookies</td>
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">1 Jahr</td>
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Funktionale Cookies</td>
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">1 Jahr</td>
</tr>
<tr>
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Analytische Cookies</td>
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">2 Jahre</td>
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Analytische Cookies</td>
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">2 Jahre</td>
</tr>
<tr>
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">Marketing-Cookies</td>
<td class="px-4 py-3 text-gray-600 dark:text-gray-400">1 Jahr</td>
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">Marketing-Cookies</td>
<td class="px-4 py-3 text-zinc-600 dark:text-zinc-400">1 Jahr</td>
</tr>
</tbody>
</table>
@ -130,34 +140,39 @@
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Wie können Sie Cookies verwalten?</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
Sie können Ihre Cookie-Einstellungen jederzeit ändern. Die meisten Browser erlauben es Ihnen:
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Wie können Sie Cookies
verwalten?</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Sie können Ihre Cookie-Einstellungen jederzeit ändern. Die meisten Browser erlauben es
Ihnen:
</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<ul class="list-disc list-inside text-zinc-600 dark:text-zinc-400 mb-4">
<li>Cookies anzuzeigen und zu löschen</li>
<li>Cookies von Drittanbietern zu blockieren</li>
<li>Alle Cookies zu blockieren</li>
<li>Cookies beim Schließen des Browsers zu löschen</li>
</ul>
<p class="text-gray-600 dark:text-gray-400 mb-4">
Bitte beachten Sie, dass das Deaktivieren von Cookies die Funktionalität unserer Website beeinträchtigen kann.
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Bitte beachten Sie, dass das Deaktivieren von Cookies die Funktionalität unserer Website
beeinträchtigen kann.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">Weitere Informationen</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
Weitere Informationen zum Datenschutz finden Sie in unserer <a href="/datenschutz" class="text-[var(--color-primary)] hover:underline">Datenschutzerklärung</a>.
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">Weitere Informationen</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Weitere Informationen zum Datenschutz finden Sie in unserer <a href="/datenschutz"
class="text-[var(--color-primary)] hover:underline">Datenschutzerklärung</a>.
</p>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Bei Fragen zu unseren Cookie-Richtlinien kontaktieren Sie uns bitte unter:
<a href="mailto:datenschutz@businessportal.de" class="text-[var(--color-primary)] hover:underline">datenschutz@businessportal.de</a>
<a href="mailto:datenschutz@businessportal.de"
class="text-[var(--color-primary)] hover:underline">datenschutz@businessportal.de</a>
</p>
</div>
<div>
<p class="text-sm text-gray-500 dark:text-gray-500">
<p class="text-sm text-zinc-500 dark:text-zinc-500">
Stand: Januar 2025
</p>
</div>
@ -178,6 +193,9 @@
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
}
[x-cloak] { display: none !important; }
[x-cloak] {
display: none !important;
}
</style>
@endpush

64
resources/views/web/datenschutz.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
@ -19,36 +19,36 @@
</section>
<!-- Content Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">1. Datenschutz auf einen Blick</h2>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Allgemeine Hinweise</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">1. Datenschutz auf einen Blick</h2>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Allgemeine Hinweise</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert,
wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Datenerfassung auf dieser Website</h3>
<p class="font-semibold text-gray-900 dark:text-gray-100 mb-2">Wer ist verantwortlich für die Datenerfassung auf dieser Website?</p>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Datenerfassung auf dieser Website</h3>
<p class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">Wer ist verantwortlich für die Datenerfassung auf dieser Website?</p>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Die Datenverarbeitung auf dieser Website erfolgt durch den Websitebetreiber. Dessen Kontaktdaten können Sie dem Abschnitt
„Hinweis zur Verantwortlichen Stelle" in dieser Datenschutzerklärung entnehmen.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">2. Hosting</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">2. Hosting</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Wir hosten die Inhalte unserer Website bei folgenden Anbietern:
</p>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Externes Hosting</h3>
<p class="text-gray-600 dark:text-gray-400">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Externes Hosting</h3>
<p class="text-zinc-600 dark:text-zinc-400">
Diese Website wird extern gehostet. Die personenbezogenen Daten, die auf dieser Website erfasst werden, werden auf den Servern
des Hosters / der Hoster gespeichert. Hierbei kann es sich v. a. um IP-Adressen, Kontaktanfragen, Meta- und Kommunikationsdaten,
Vertragsdaten, Kontaktdaten, Namen, Websitezugriffe und sonstige Daten, die über eine Website generiert werden, handeln.
@ -56,18 +56,18 @@
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">3. Allgemeine Hinweise und Pflichtinformationen</h2>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Datenschutz</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">3. Allgemeine Hinweise und Pflichtinformationen</h2>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Datenschutz</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Die Betreiber dieser Seiten nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten
vertraulich und entsprechend den gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">4. Datenerfassung auf dieser Website</h2>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Cookies</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">4. Datenerfassung auf dieser Website</h2>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Cookies</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Unsere Internetseiten verwenden so genannte „Cookies". Cookies sind kleine Datenpakete und richten auf Ihrem Endgerät keinen Schaden an.
Sie werden entweder vorübergehend für die Dauer einer Sitzung (Session-Cookies) oder dauerhaft (permanente Cookies) auf Ihrem Endgerät
gespeichert.
@ -75,12 +75,12 @@
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Server-Log-Dateien</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Server-Log-Dateien</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Der Provider der Seiten erhebt und speichert automatisch Informationen in so genannten Server-Log-Dateien, die Ihr Browser
automatisch an uns übermittelt. Dies sind:
</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400 mb-4">
<ul class="list-disc list-inside text-zinc-600 dark:text-zinc-400 mb-4">
<li>Browsertyp und Browserversion</li>
<li>verwendetes Betriebssystem</li>
<li>Referrer URL</li>
@ -91,18 +91,18 @@
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">5. Analyse-Tools und Werbung</h2>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Google Analytics</h3>
<p class="text-gray-600 dark:text-gray-400">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">5. Analyse-Tools und Werbung</h2>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Google Analytics</h3>
<p class="text-zinc-600 dark:text-zinc-400">
Diese Website nutzt Funktionen des Webanalysedienstes Google Analytics. Anbieter ist die Google Ireland Limited („Google"),
Gordon House, Barrow Street, Dublin 4, Irland.
</p>
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">6. Newsletter</h2>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-3">Newsletterdaten</h3>
<p class="text-gray-600 dark:text-gray-400">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">6. Newsletter</h2>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Newsletterdaten</h3>
<p class="text-zinc-600 dark:text-zinc-400">
Wenn Sie den auf der Website angebotenen Newsletter beziehen möchten, benötigen wir von Ihnen eine E-Mail-Adresse sowie
Informationen, welche uns die Überprüfung gestatten, dass Sie der Inhaber der angegebenen E-Mail-Adresse sind und mit dem
Empfang des Newsletters einverstanden sind.
@ -110,11 +110,11 @@
</div>
<div class="mb-8">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">7. Ihre Rechte</h2>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">7. Ihre Rechte</h2>
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Sie haben folgende Rechte:
</p>
<ul class="list-disc list-inside text-gray-600 dark:text-gray-400">
<ul class="list-disc list-inside text-zinc-600 dark:text-zinc-400">
<li>Recht auf Auskunft über Ihre gespeicherten personenbezogenen Daten</li>
<li>Recht auf Berichtigung unrichtiger Daten</li>
<li>Recht auf Löschung Ihrer Daten</li>
@ -126,7 +126,7 @@
</div>
<div>
<p class="text-sm text-gray-500 dark:text-gray-500">
<p class="text-sm text-zinc-500 dark:text-zinc-500">
Stand: Januar 2025
</p>
</div>

235
resources/views/web/examples/article-detail.blade.php Normal file
View file

@ -0,0 +1,235 @@
@extends('web.layouts.web-master')
@section('title', 'Artikeldetails - Presseecho')
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<!-- Burger Menu & Header -->
<livewire:web.burger-menu />
<livewire:web.header />
<!-- Main Navigation -->
<x-web.main-navigation theme="presseecho" />
<!-- Breadcrumb -->
<div class="container mx-auto px-4">
<x-web.breadcrumb :items="[
['label' => 'Themendossiers', 'url' => '/themendossiers'],
['label' => 'KI & Innovation', 'url' => '/themendossiers/ki-innovation'],
['label' => 'Die Zukunft der KI im deutschen Mittelstand'],
]" />
</div>
<!-- Page Header -->
<x-web.page-header title="Die Zukunft der KI im deutschen Mittelstand"
subtitle="Exklusive Einblicke in die Herausforderungen und Chancen der künstlichen Intelligenz">
<x-slot name="meta">
<div class="flex items-center gap-4 text-sm text-zinc-600 dark:text-zinc-400">
<span class="badge badge-primary">Exklusiv-Interview</span>
<span>•</span>
<span>17. Oktober 2024</span>
<span>•</span>
<span>8 Min. Lesezeit</span>
</div>
</x-slot>
</x-web.page-header>
<!-- Content Layout mit Sidebar -->
<x-web.content-layout>
<x-slot name="sidebar">
<!-- Author Widget -->
<x-web.sidebar-widget title="Über den Autor">
<div class="flex items-start gap-4">
<div
class="w-16 h-16 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-xl flex-shrink-0">
MS
</div>
<div>
<h4 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">Dr. Maria Schmidt</h4>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2">Expertin für KI & Innovation</p>
<a href="#" class="text-sm text-[var(--color-primary)] hover:underline">Alle Artikel →</a>
</div>
</div>
</x-web.sidebar-widget>
<!-- Related Articles Widget -->
<x-web.sidebar-widget title="Verwandte Artikel">
<div class="space-y-4">
@foreach (range(1, 3) as $i)
<article class="group cursor-pointer">
<div class="flex gap-3">
<div
class="w-20 h-20 flex-shrink-0 rounded overflow-hidden bg-zinc-100 dark:bg-zinc-800">
<img src="https://placehold.co/200x200/345636/ffffff?text={{ $i }}"
alt="Artikel {{ $i }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="flex-1 min-w-0">
<h5
class="text-sm font-medium text-zinc-900 dark:text-zinc-100 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
Verwandter Artikel Titel {{ $i }}
</h5>
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">15. Okt 2024</p>
</div>
</div>
</article>
@endforeach
</div>
</x-web.sidebar-widget>
<!-- Tags Widget -->
<x-web.sidebar-widget title="Themen">
<div class="flex flex-wrap gap-2">
@foreach (['KI', 'Innovation', 'Mittelstand', 'Digitalisierung'] as $tag)
<a href="#"
class="px-3 py-1 text-sm bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 rounded-full hover:bg-[var(--color-primary)] hover:text-white transition-colors">
{{ $tag }}
</a>
@endforeach
</div>
</x-web.sidebar-widget>
</x-slot>
<!-- Article Content -->
<article class="prose prose-lg dark:prose-invert max-w-none">
<div class="mb-8">
<img src="https://placehold.co/1200x600/345636/ffffff?text=Article+Header" alt="Artikelbild"
class="w-full rounded-xl">
</div>
<div class="article-content">
<p class="lead text-xl text-zinc-700 dark:text-zinc-300 mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</p>
<h2>Einleitung</h2>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
<h2>Hauptteil</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur.</p>
<blockquote class="border-l-4 border-[var(--color-primary)] pl-4 italic my-6">
"Künstliche Intelligenz wird die Art und Weise, wie wir arbeiten, grundlegend verändern."
<footer class="text-sm not-italic mt-2">— Dr. Maria Schmidt</footer>
</blockquote>
<h2>Fazit</h2>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
</div>
<!-- Share Buttons -->
<div class="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
<h3 class="text-lg font-semibold mb-4">Artikel teilen</h3>
<div class="flex gap-3">
<button
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
LinkedIn
</button>
<button
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
Twitter
</button>
<button
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
E-Mail
</button>
</div>
</div>
</article>
</x-web.content-layout>
<!-- Related Articles Section -->
<section class="py-12 bg-zinc-50 dark:bg-zinc-900">
<div class="container mx-auto px-4">
<x-web.section-header title="Das könnte Sie auch interessieren" subtitle="Weitere Artikel zum Thema"
size="medium" />
@php
$relatedArticles = [
[
'badge' => 'Analyse',
'badgeType' => 'primary',
'category' => 'KI & Innovation',
'categoryBadgeType' => 'secondary',
'date' => '2024-10-16',
'dateFormatted' => '16. Okt 2024',
'title' => 'KI-Strategien für den Mittelstand',
'teaser' => 'Wie mittelständische Unternehmen erfolgreich KI implementieren.',
'author' => 'Thomas Müller',
'authorInitials' => 'TM',
'image' => 'https://placehold.co/600x400/345636/ffffff?text=Related+1',
],
[
'badge' => 'Interview',
'badgeType' => 'primary',
'category' => 'Digitalisierung',
'categoryBadgeType' => 'secondary',
'date' => '2024-10-15',
'dateFormatted' => '15. Okt 2024',
'title' => 'Machine Learning in der Praxis',
'teaser' => 'Erfolgsgeschichten aus der deutschen Wirtschaft.',
'author' => 'Klaus Weber',
'authorInitials' => 'KW',
'image' => 'https://placehold.co/600x400/345636/ffffff?text=Related+2',
],
[
'badge' => 'Analyse',
'badgeType' => 'primary',
'category' => 'Innovation',
'categoryBadgeType' => 'secondary',
'date' => '2024-10-14',
'dateFormatted' => '14. Okt 2024',
'title' => 'Zukunft der Automatisierung',
'teaser' => 'Chancen und Herausforderungen für Unternehmen.',
'author' => 'Anna Schmidt',
'authorInitials' => 'AS',
'image' => 'https://placehold.co/600x400/345636/ffffff?text=Related+3',
],
];
@endphp
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach ($relatedArticles as $article)
<x-web.article-card :article="$article" />
@endforeach
</div>
</div>
</section>
<!-- Footer -->
<livewire:web.footer />
</main>
@endsection
@push('styles')
<style>
:root {
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#345636' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
}
.prose h2 {
font-size: 1.875rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
color: hsl(var(--primary));
}
.prose p {
margin-bottom: 1.5rem;
line-height: 1.8;
}
.prose .lead {
font-size: 1.25rem;
font-weight: 400;
}
</style>
@endpush

276
resources/views/web/examples/businessportal24-article.blade.php Normal file
View file

@ -0,0 +1,276 @@
@extends('web.layouts.web-master')
@section('title', 'Artikeldetails - Business Portal 24')
@section('content')
<main class="min-h-screen flex flex-col variant-float-glow transition-colors duration-200">
<!-- Burger Menu & Header -->
<livewire:web.burger-menu />
<livewire:web.header />
<!-- Main Navigation -->
<x-web.main-navigation theme="businessportal24" />
<!-- Breadcrumb -->
<div class="container mx-auto px-4">
<x-web.breadcrumb :items="[
['label' => 'Unternehmen', 'url' => '/unternehmen'],
['label' => 'Technologie', 'url' => '/unternehmen/technologie'],
['label' => 'Die Zukunft der KI im deutschen Mittelstand'],
]" />
</div>
<!-- Page Header -->
<x-web.page-header title="Die Zukunft der KI im deutschen Mittelstand"
subtitle="Exklusive Einblicke in die Herausforderungen und Chancen der künstlichen Intelligenz">
<x-slot name="meta">
<div class="flex items-center gap-4 text-sm text-zinc-600 dark:text-zinc-400">
<span class="badge badge-primary">Pressemitteilung</span>
<span>•</span>
<span>17. Oktober 2024</span>
<span>•</span>
<span>6 Min. Lesezeit</span>
</div>
</x-slot>
</x-web.page-header>
<!-- Content Layout mit Sidebar -->
<x-web.content-layout>
<x-slot name="sidebar">
<!-- Company Widget -->
<x-web.sidebar-widget title="Über das Unternehmen">
<div class="space-y-3">
<div class="flex items-center gap-3">
<div
class="w-12 h-12 rounded-lg bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-bold">
AI
</div>
<div>
<h4 class="font-semibold text-zinc-900 dark:text-zinc-100">AI Solutions GmbH</h4>
<p class="text-sm text-zinc-600 dark:text-zinc-400">München, Deutschland</p>
</div>
</div>
<p class="text-sm text-zinc-700 dark:text-zinc-300">
Führender Anbieter von KI-Lösungen für den deutschen Mittelstand.
</p>
<a href="#"
class="inline-flex items-center gap-2 text-sm text-[var(--color-primary)] hover:underline">
<span>Website besuchen</span>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
</a>
</div>
</x-web.sidebar-widget>
<!-- Contact Widget -->
<x-web.sidebar-widget title="Kontakt">
<div class="space-y-3 text-sm">
<div class="flex items-start gap-3">
<svg class="w-5 h-5 text-[var(--color-primary)] flex-shrink-0" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
<div>
<p class="font-medium text-zinc-900 dark:text-zinc-100">Max Mustermann</p>
<p class="text-zinc-600 dark:text-zinc-400">Pressekontakt</p>
</div>
</div>
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-[var(--color-primary)]" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
</path>
</svg>
<a href="mailto:presse@example.com" class="text-[var(--color-primary)] hover:underline">
presse@example.com
</a>
</div>
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-[var(--color-primary)]" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z">
</path>
</svg>
<span class="text-zinc-700 dark:text-zinc-300">+49 89 123456</span>
</div>
</div>
</x-web.sidebar-widget>
<!-- Related Articles Widget -->
<x-web.sidebar-widget title="Ähnliche Meldungen">
<div class="space-y-4">
@foreach (range(1, 3) as $i)
<article class="group cursor-pointer">
<div class="flex gap-3">
<div
class="w-20 h-20 flex-shrink-0 rounded overflow-hidden bg-zinc-100 dark:bg-zinc-800">
<img src="https://placehold.co/200x200/cf3628/ffffff?text={{ $i }}"
alt="Artikel {{ $i }}"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300">
</div>
<div class="flex-1 min-w-0">
<h5
class="text-sm font-medium text-zinc-900 dark:text-zinc-100 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
Verwandte Pressemitteilung {{ $i }}
</h5>
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-1">16. Okt 2024</p>
</div>
</div>
</article>
@endforeach
</div>
</x-web.sidebar-widget>
</x-slot>
<!-- Article Content -->
<article class="prose prose-lg dark:prose-invert max-w-none">
<!-- Featured Image -->
<div class="mb-8 rounded-xl overflow-hidden">
<img src="https://placehold.co/1200x600/cf3628/ffffff?text=Article+Header" alt="Artikelbild"
class="w-full">
</div>
<div class="article-content">
<p class="lead text-xl text-zinc-700 dark:text-zinc-300 mb-8">
München, 17. Oktober 2024 – Die AI Solutions GmbH präsentiert innovative KI-Lösungen speziell für
mittelständische Unternehmen in Deutschland.
</p>
<h2>Künstliche Intelligenz für den Mittelstand</h2>
<p>
Der deutsche Mittelstand steht vor großen Herausforderungen in der digitalen Transformation.
Künstliche Intelligenz bietet dabei enorme Chancen, wird aber oft als zu komplex oder zu teuer
wahrgenommen.
</p>
<h2>Praxisnahe Lösungen</h2>
<p>
Die AI Solutions GmbH hat sich zum Ziel gesetzt, KI-Technologien für mittelständische Unternehmen
zugänglich zu machen. Mit maßgeschneiderten Lösungen und umfassendem Support werden Unternehmen
bei der Implementierung begleitet.
</p>
<blockquote class="border-l-4 border-[var(--color-primary)] pl-4 italic my-6">
"Künstliche Intelligenz ist nicht nur für Großkonzerne. Mit den richtigen Lösungen kann jedes
mittelständische Unternehmen von KI profitieren."
<footer class="text-sm not-italic mt-2">— Dr. Maria Schmidt, CEO AI Solutions GmbH</footer>
</blockquote>
<h2>Erfolgsgeschichten</h2>
<p>
Bereits über 50 mittelständische Unternehmen in Deutschland setzen auf die Lösungen der
AI Solutions GmbH. Die Erfolgsrate spricht für sich: Im Durchschnitt steigerten die Unternehmen
ihre Effizienz um 35%.
</p>
<h2>Über AI Solutions GmbH</h2>
<p>
Die AI Solutions GmbH mit Sitz in München ist ein führender Anbieter von KI-Lösungen für den
deutschen Mittelstand. Das Unternehmen wurde 2020 gegründet und beschäftigt derzeit 45 Mitarbeiter.
</p>
</div>
<!-- Share & Download -->
<div class="mt-12 pt-8 border-t border-zinc-200 dark:border-zinc-800">
<div class="flex items-center justify-between flex-wrap gap-4">
<div>
<h3 class="text-lg font-semibold mb-3">Pressemitteilung teilen</h3>
<div class="flex gap-3">
<button
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
LinkedIn
</button>
<button
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
Twitter
</button>
<button
class="px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg hover:bg-[var(--color-primary)] hover:text-white transition-colors">
E-Mail
</button>
</div>
</div>
<button
class="px-6 py-3 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] text-white rounded-lg hover:shadow-lg transition-all inline-flex items-center gap-2">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
</path>
</svg>
<span>Als PDF herunterladen</span>
</button>
</div>
</div>
</article>
</x-web.content-layout>
<!-- Related Press Releases -->
<section class="py-12 bg-zinc-50 dark:bg-zinc-900">
<div class="container mx-auto px-4">
<x-web.section-header title="Weitere Meldungen des Unternehmens"
subtitle="Aktuelle Pressemitteilungen von AI Solutions GmbH" size="medium" />
@php
$relatedArticles = array_fill(0, 3, [
'badge' => 'Pressemitteilung',
'badgeType' => 'primary',
'category' => 'Technologie',
'categoryBadgeType' => 'secondary',
'date' => '2024-10-16',
'dateFormatted' => '16. Okt 2024',
'title' => 'KI-Innovation für den Mittelstand',
'teaser' => 'Neue Produktlinie erweitert das Portfolio für KMU.',
'author' => 'AI Solutions GmbH',
'authorInitials' => 'AI',
'image' => 'https://placehold.co/600x400/cf3628/ffffff?text=Related',
]);
@endphp
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach ($relatedArticles as $article)
<x-web.article-card :article="$article" />
@endforeach
</div>
</div>
</section>
<!-- Footer -->
<livewire:web.footer />
</main>
@endsection
@push('styles')
<style>
:root {
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
}
.prose h2 {
font-size: 1.875rem;
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
color: hsl(var(--primary));
}
.prose p {
margin-bottom: 1.5rem;
line-height: 1.8;
}
.prose .lead {
font-size: 1.25rem;
font-weight: 400;
border-left: 4px solid hsl(var(--primary));
padding-left: 1rem;
}
</style>
@endpush

154
resources/views/web/examples/category-detail-usage.blade.php Normal file
View file

@ -0,0 +1,154 @@
{{--
Beispiel: Verwendung des CategoryService in einer Einzelkategorie-Seite
Pfad: resources/views/web/kategorie.blade.php
--}}
@extends('web.layouts.web-master')
@section('title', 'Kategorie - Business Portal 24')
@section('content')
@php
use App\Services\CategoryService;
// Kategorie aus Route-Parameter laden
$slug = request()->segment(2); // z.B. 'wirtschaft'
$category = CategoryService::getCategoryBySlug($slug);
// Wenn Kategorie nicht gefunden, 404
if (!$category) {
abort(404);
}
// Alle Kategorien für Navigation
$allCategories = CategoryService::getCategories();
// Icon- und Farb-Informationen
$iconPath = CategoryService::getIconPath($category['icon']);
$gradient = CategoryService::getGradientForColor($category['color']);
$iconColor = CategoryService::getClassForColor($category['color']);
@endphp
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
<!-- Category Header -->
<section class="bg-gradient-to-br {{ $gradient }} py-16">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<div
class="inline-flex items-center justify-center w-20 h-20 bg-white dark:bg-zinc-800 rounded-2xl shadow-lg mb-6">
<img src="{{ $iconPath }}" alt="{{ $category['name'] }}" class="h-10 w-10 {{ $iconColor }}">
</div>
<h1 class="text-4xl md:text-5xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
{{ $category['name'] }}
</h1>
<p class="text-xl text-zinc-700 dark:text-zinc-300 mb-6">
{{ $category['description'] }}
</p>
<div
class="inline-flex items-center gap-2 px-4 py-2 bg-white/80 dark:bg-zinc-800/80 rounded-full text-sm font-medium backdrop-blur-sm">
<span>{{ $category['count'] }} Mitteilungen</span>
</div>
</div>
</div>
</section>
<!-- Category Navigation -->
<nav class="sticky top-0 z-40 bg-white dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800 shadow-sm">
<div class="container mx-auto px-4">
<div class="flex items-center gap-4 overflow-x-auto scrollbar-hide py-4">
@foreach ($allCategories as $cat)
<a href="/kategorie/{{ $cat['slug'] }}"
class="flex items-center gap-2 px-4 py-2 rounded-lg whitespace-nowrap transition-colors
{{ $cat['slug'] === $category['slug']
? 'bg-[var(--color-primary)] text-white'
: 'bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700' }}">
<img src="{{ CategoryService::getIconPath($cat['icon']) }}" alt="{{ $cat['name'] }}"
class="h-4 w-4">
<span class="text-sm font-medium">{{ $cat['name'] }}</span>
</a>
@endforeach
</div>
</div>
</nav>
<!-- Content Section -->
<section class="py-12">
<div class="container mx-auto px-4">
<x-web.section-header title="Aktuelle Meldungen aus {{ $category['name'] }}"
subtitle="Die neuesten Pressemitteilungen dieser Kategorie" size="medium" />
<!-- Hier würden die Pressemitteilungen angezeigt -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{{-- Press releases grid --}}
</div>
</div>
</section>
<!-- Related Categories -->
<section class="py-12 bg-zinc-50 dark:bg-zinc-900">
<div class="container mx-auto px-4">
<x-web.section-header title="Weitere Kategorien" subtitle="Entdecken Sie auch diese Themenbereiche"
size="medium" />
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
@foreach ($allCategories->take(4) as $cat)
@if ($cat['slug'] !== $category['slug'])
@php
$catIconPath = CategoryService::getIconPath($cat['icon']);
$catGradient = CategoryService::getGradientForColor($cat['color']);
$catIconColor = CategoryService::getClassForColor($cat['color']);
@endphp
<a href="/kategorie/{{ $cat['slug'] }}"
class="group card-premium hover:card-premium-hover p-4 transition-all">
<div class="flex items-center gap-3">
<div
class="w-12 h-12 bg-gradient-to-br {{ $catGradient }} rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<img src="{{ $catIconPath }}" alt="{{ $cat['name'] }}"
class="h-6 w-6 {{ $catIconColor }}">
</div>
<div class="flex-1 min-w-0">
<h4
class="font-semibold text-zinc-900 dark:text-zinc-100 truncate group-hover:text-[var(--color-primary)] transition-colors">
{{ $cat['name'] }}
</h4>
<p class="text-xs text-zinc-500">{{ $cat['count'] }} Mitteilungen</p>
</div>
</div>
</a>
@endif
@endforeach
</div>
</div>
</section>
<livewire:web.footer />
</main>
@endsection
@push('styles')
<style>
:root {
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
}
/* Scrollbar für horizontale Navigation verstecken */
.scrollbar-hide::-webkit-scrollbar {
display: none;
}
.scrollbar-hide {
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
@endpush

231
resources/views/web/examples/category-overview.blade.php Normal file
View file

@ -0,0 +1,231 @@
@extends('web.layouts.web-master')
@section('title', 'KI & Innovation - Themendossier - Presseecho')
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<!-- Burger Menu & Header -->
<livewire:web.burger-menu />
<livewire:web.header />
<!-- Main Navigation -->
<x-web.main-navigation theme="presseecho" />
<!-- Breadcrumb -->
<div class="container mx-auto px-4">
<x-web.breadcrumb :items="[['label' => 'Themendossiers', 'url' => '/themendossiers'], ['label' => 'KI & Innovation']]" />
</div>
<!-- Page Header with Image -->
<x-web.page-header title="KI & Innovation"
subtitle="Alle Facetten der künstlichen Intelligenz in Produktion und Logistik"
image="https://placehold.co/800x600/345636/ffffff?text=KI+Header">
<x-slot name="meta">
<div
class="inline-flex items-center gap-2 px-3 py-1 bg-white dark:bg-zinc-800 rounded-full text-sm font-medium">
<svg class="w-4 h-4 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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z">
</path>
</svg>
<span>42 Artikel</span>
</div>
</x-slot>
</x-web.page-header>
<!-- Filter Bar -->
<section class="bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-200 dark:border-zinc-800 py-4">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between gap-4 flex-wrap">
<div class="flex items-center gap-4">
<span class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Sortieren:</span>
<select
class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
<option>Neueste zuerst</option>
<option>Älteste zuerst</option>
<option>Meistgelesen</option>
</select>
</div>
<div class="flex items-center gap-2">
<span class="text-sm text-zinc-600 dark:text-zinc-400">Ansicht:</span>
<button class="p-2 rounded bg-[var(--color-primary)] text-white">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z">
</path>
</svg>
</button>
<button class="p-2 rounded bg-zinc-200 dark:bg-zinc-700 text-zinc-700 dark:text-zinc-300">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
</section>
<!-- Content Layout -->
<x-web.content-layout>
<x-slot name="sidebar">
<!-- Filter Widget -->
<x-web.sidebar-widget title="Filter">
<div class="space-y-4">
<div>
<h4 class="font-medium text-sm mb-2">Content-Typ</h4>
<div class="space-y-2">
@foreach (['Alle', 'Interview', 'Analyse', 'Fachmeldung'] as $type)
<label class="flex items-center gap-2 cursor-pointer">
<input type="checkbox" {{ $type === 'Alle' ? 'checked' : '' }}
class="rounded border-zinc-300">
<span class="text-sm">{{ $type }}</span>
</label>
@endforeach
</div>
</div>
<div>
<h4 class="font-medium text-sm mb-2">Zeitraum</h4>
<select
class="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
<option>Letzte 7 Tage</option>
<option>Letzter Monat</option>
<option>Letztes Jahr</option>
<option>Alle</option>
</select>
</div>
</div>
</x-web.sidebar-widget>
<!-- Popular Tags -->
<x-web.sidebar-widget title="Beliebte Themen">
<div class="flex flex-wrap gap-2">
@foreach (['Machine Learning', 'Deep Learning', 'Automatisierung', 'IoT', 'Big Data', 'Cloud Computing'] as $tag)
<a href="#"
class="px-3 py-1 text-sm bg-zinc-100 dark:bg-zinc-800 text-zinc-700 dark:text-zinc-300 rounded-full hover:bg-[var(--color-primary)] hover:text-white transition-colors">
{{ $tag }}
</a>
@endforeach
</div>
</x-web.sidebar-widget>
<!-- Newsletter -->
<x-web.sidebar-widget title="Newsletter">
<p class="text-sm mb-4">Bleiben Sie auf dem Laufenden mit unserem wöchentlichen Newsletter.</p>
<form class="space-y-3">
<input type="email" placeholder="Ihre E-Mail"
class="w-full px-4 py-2 border border-zinc-300 dark:border-zinc-700 rounded-lg bg-white dark:bg-zinc-800 text-sm">
<button type="submit" class="w-full btn-primary py-2 text-sm">
Anmelden
</button>
</form>
</x-web.sidebar-widget>
</x-slot>
<!-- Articles Grid -->
<div class="space-y-8">
<!-- Featured Article -->
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="grid md:grid-cols-2 gap-6">
<div class="relative h-64 md:h-full overflow-hidden bg-zinc-100 dark:bg-zinc-800">
<img src="https://placehold.co/800x600/345636/ffffff?text=Featured" alt="Featured"
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
<div class="absolute top-4 left-4">
<span class="badge badge-primary shadow-md">Featured</span>
</div>
</div>
<div class="p-6 flex flex-col justify-between">
<div>
<div class="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-400 mb-3">
<span class="badge badge-secondary text-xs">Exklusiv-Interview</span>
<span>•</span>
<time>17. Oktober 2024</time>
</div>
<h3
class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-3 group-hover:text-[var(--color-primary)] transition-colors">
Die Zukunft der KI im deutschen Mittelstand
</h3>
<p class="text-zinc-700 dark:text-zinc-300 line-clamp-3">
Im exklusiven Interview spricht Dr. Maria Schmidt über die Chancen und Herausforderungen
der künstlichen Intelligenz für mittelständische Unternehmen.
</p>
</div>
<div class="flex items-center gap-2 mt-4">
<div
class="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-sm">
MS
</div>
<div>
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100">Dr. Maria Schmidt</p>
<p class="text-xs text-zinc-600 dark:text-zinc-400">Expertin für KI</p>
</div>
</div>
</div>
</div>
</article>
<!-- Articles Grid -->
@php
$articles = array_fill(0, 9, [
'badge' => 'Analyse',
'badgeType' => 'primary',
'category' => 'KI & Innovation',
'categoryBadgeType' => 'secondary',
'date' => '2024-10-16',
'dateFormatted' => '16. Okt 2024',
'title' => 'KI-Strategien für den Mittelstand',
'teaser' => 'Wie mittelständische Unternehmen erfolgreich KI implementieren.',
'author' => 'Thomas Müller',
'authorInitials' => 'TM',
'image' => 'https://placehold.co/600x400/345636/ffffff?text=Article',
]);
@endphp
<div class="grid md:grid-cols-2 gap-6">
@foreach ($articles as $article)
<x-web.article-card :article="$article" />
@endforeach
</div>
<!-- Pagination -->
<nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
<div class="flex items-center gap-2">
<button class="pagination-btn pagination-nav disabled:opacity-50" disabled>
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
</path>
</svg>
</button>
<button class="pagination-btn pagination-active">1</button>
<button class="pagination-btn">2</button>
<button class="pagination-btn">3</button>
<span class="px-2 text-zinc-600 dark:text-zinc-400">...</span>
<button class="pagination-btn">10</button>
<button class="pagination-btn pagination-nav">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
</path>
</svg>
</button>
</div>
</nav>
</div>
</x-web.content-layout>
<!-- Footer -->
<livewire:web.footer />
</main>
@endsection
@push('styles')
<style>
:root {
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#345636' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
}
</style>
@endpush

164
resources/views/web/faq.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -41,15 +41,15 @@
</section>
<!-- Search Section -->
<section class="py-8 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 transition-colors duration-200">
<section class="py-8 bg-white dark:bg-zinc-950 border-b border-zinc-200 dark:border-zinc-800 transition-colors duration-200">
<div class="container mx-auto px-4 max-w-2xl">
<div class="relative">
<input
type="search"
placeholder="Suchen Sie nach Themen, z.B. 'Preise' oder 'Newsroom'..."
class="w-full px-4 py-3 pl-12 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
class="w-full px-4 py-3 pl-12 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
/>
<svg class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-zinc-400 dark:text-zinc-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
@ -57,7 +57,7 @@
</section>
<!-- FAQ Categories -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4 max-w-4xl">
<!-- Category: Erste Schritte -->
<div class="mb-12">
@ -67,64 +67,64 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
Erste Schritte
</h2>
</div>
<div class="space-y-4" x-data="{ open: null }">
<!-- Question 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 1 ? null : 1"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Wie veröffentliche ich meine erste Pressemitteilung?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 1 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 1" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Nach der Registrierung klicken Sie auf 'Veröffentlichen' in der Hauptnavigation. Folgen Sie dem intuitiven 5-Schritte-Wizard: Metadaten eingeben, Content erstellen, Medien hochladen, Kontaktdaten hinterlegen und Vorschau prüfen. Bei Fragen steht unser Support-Team jederzeit zur Verfügung.
</div>
</div>
</div>
<!-- Question 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 2 ? null : 2"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Muss ich mich registrieren, um Pressemitteilungen zu lesen?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 2 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 2" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Nein, alle veröffentlichten Pressemitteilungen sind frei zugänglich. Eine Registrierung ist nur erforderlich, wenn Sie selbst Inhalte veröffentlichen oder einen Newsroom erstellen möchten.
</div>
</div>
</div>
<!-- Question 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 3 ? null : 3"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Wie lange dauert die Freischaltung meiner Pressemitteilung?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 3 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 3" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
In der Regel werden Pressemitteilungen innerhalb von 2-4 Stunden geprüft und freigeschaltet. Professional- und Enterprise-Kunden profitieren von einer beschleunigten Prüfung innerhalb von maximal 1 Stunde.
</div>
</div>
@ -140,64 +140,64 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
Account & Abrechnung
</h2>
</div>
<div class="space-y-4" x-data="{ open: null }">
<!-- Question 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 4 ? null : 4"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Wie ändere ich meinen Tarif?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 4 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 4" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
In Ihren Kontoeinstellungen unter 'Abonnement & Billing' können Sie jederzeit Ihren Tarif upgraden oder downgraden. Upgrades gelten sofort, Downgrades zum nächsten Abrechnungszeitraum.
</div>
</div>
</div>
<!-- Question 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 5 ? null : 5"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Welche Zahlungsmethoden werden akzeptiert?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 5 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 5" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Wir akzeptieren Kreditkarten (Visa, Mastercard, American Express), SEPA-Lastschrift und PayPal. Enterprise-Kunden können auch per Rechnung zahlen.
</div>
</div>
</div>
<!-- Question 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 6 ? null : 6"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Kann ich mein Konto löschen?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 6 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 6" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Ja, Sie können Ihr Konto jederzeit in den Einstellungen unter 'Account verwalten' löschen. Beachten Sie, dass bereits veröffentlichte Pressemitteilungen aus SEO-Gründen online bleiben, aber nicht mehr Ihrem Account zugeordnet sind.
</div>
</div>
@ -213,64 +213,64 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
Pressemitteilungen & Content
</h2>
</div>
<div class="space-y-4" x-data="{ open: null }">
<!-- Question 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 7 ? null : 7"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Welche Dateiformate werden für Medien unterstützt?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 7 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 7" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Bilder: JPG, PNG, WebP (max. 10 MB). Dokumente: PDF (max. 25 MB). Videos können über YouTube/Vimeo-Einbettung hinzugefügt werden.
</div>
</div>
</div>
<!-- Question 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 8 ? null : 8"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Kann ich eine Pressemitteilung nach Veröffentlichung bearbeiten?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 8 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 8" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Ja, Professional- und Enterprise-Kunden können Pressemitteilungen bis zu 7 Tage nach Veröffentlichung bearbeiten. Bei Free-Accounts ist eine nachträgliche Bearbeitung nicht möglich.
</div>
</div>
</div>
<!-- Question 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 9 ? null : 9"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Wie optimiere ich meine Pressemitteilung für SEO?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 9 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 9" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Nutzen Sie aussagekräftige Headlines (max. 70 Zeichen), integrieren Sie relevante Keywords natürlich, fügen Sie Alt-Texte für Bilder hinzu und strukturieren Sie den Text mit Zwischenüberschriften. Unser Editor zeigt Ihnen einen SEO-Score in Echtzeit.
</div>
</div>
@ -286,45 +286,45 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
Newsroom & Features
</h2>
</div>
<div class="space-y-4" x-data="{ open: null }">
<!-- Question 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 10 ? null : 10"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Was ist ein Newsroom und wie erstelle ich einen?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 10 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 10" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Ein Newsroom ist Ihre dedizierte Unternehmensseite auf Business Portal, wo alle Ihre Pressemitteilungen gebündelt werden. Professional- und Enterprise-Kunden können ihren Newsroom mit Logo, Farben und zusätzlichen Informationen individualisieren.
</div>
</div>
</div>
<!-- Question 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden transition-colors duration-200">
<button @click="open = open === 11 ? null : 11"
class="w-full p-6 flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<span class="font-semibold text-gray-900 dark:text-gray-100 text-left pr-4">
class="w-full p-6 flex items-center justify-between hover:bg-zinc-50 dark:hover:bg-zinc-800/50 transition-colors">
<span class="font-semibold text-zinc-900 dark:text-zinc-100 text-left pr-4">
Wie funktionieren die Analytics?
</span>
<svg class="h-5 w-5 text-gray-500 dark:text-gray-400 flex-shrink-0 transition-transform duration-200"
<svg class="h-5 w-5 text-zinc-500 dark:text-zinc-400 flex-shrink-0 transition-transform duration-200"
:class="{ 'rotate-180': open === 11 }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div x-show="open === 11" x-collapse x-cloak>
<div class="px-6 pb-6 text-gray-600 dark:text-gray-400 leading-relaxed">
<div class="px-6 pb-6 text-zinc-600 dark:text-zinc-400 leading-relaxed">
Professional-Kunden erhalten detaillierte Statistiken zu Views, Klicks, geografischer Verteilung und Referrern. Die Daten werden in Echtzeit aktualisiert und können als Report exportiert werden.
</div>
</div>
@ -335,20 +335,20 @@
</section>
<!-- Contact CTA -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<section class="py-16 bg-zinc-50/50 dark:bg-zinc-900/50 transition-colors duration-200">
<div class="container mx-auto px-4 text-center">
<div class="max-w-2xl mx-auto">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Frage nicht gefunden?
</h2>
<p class="text-gray-600 dark:text-gray-400 mb-8">
<p class="text-zinc-600 dark:text-zinc-400 mb-8">
Unser Support-Team hilft Ihnen gerne weiter. Kontaktieren Sie uns per E-Mail oder Chat.
</p>
<div class="flex flex-wrap gap-4 justify-center">
<a href="/kontakt" 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);">
Kontakt aufnehmen
</a>
<a href="#" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
<a href="#" 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">
Hilfe-Center besuchen
</a>
</div>
@ -357,39 +357,39 @@
</section>
<!-- Popular Topics -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4 max-w-4xl">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-8 text-center">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-8 text-center">
Beliebte Themen
</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-zinc-900 dark:text-zinc-100 hover:text-[var(--color-primary)] transition-colors">
Erste Schritte →
</a>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-zinc-900 dark:text-zinc-100 hover:text-[var(--color-primary)] transition-colors">
Preise & Abrechnung →
</a>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-zinc-900 dark:text-zinc-100 hover:text-[var(--color-primary)] transition-colors">
API-Dokumentation →
</a>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-zinc-900 dark:text-zinc-100 hover:text-[var(--color-primary)] transition-colors">
SEO Best Practices →
</a>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-zinc-900 dark:text-zinc-100 hover:text-[var(--color-primary)] transition-colors">
Medienformate →
</a>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<a href="#" class="text-zinc-900 dark:text-zinc-100 hover:text-[var(--color-primary)] transition-colors">
Datenschutz →
</a>
</div>

86
resources/views/web/hilfe.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
@ -27,54 +27,54 @@
</section>
<!-- Quick Links Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Schnellzugriff
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<a href="/faq" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all group">
<a href="/faq" class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all group">
<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="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
FAQ
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Häufig gestellte Fragen
</p>
</a>
<a href="#" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all group">
<a href="#" class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all group">
<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="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Video-Tutorials
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Schritt-für-Schritt Anleitungen
</p>
</a>
<a href="/kontakt" class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all group">
<a href="/kontakt" class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all group">
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Kontakt
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Direkter Support
</p>
</a>
@ -84,39 +84,39 @@
</section>
<!-- Help Topics Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Hilfe-Themen
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Topic 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
Erste Schritte
</h3>
<ul class="space-y-2">
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Account erstellen
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Erste Pressemitteilung veröffentlichen
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Newsroom einrichten
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Profil vervollständigen
</a>
</li>
@ -124,28 +124,28 @@
</div>
<!-- Topic 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
Pressemitteilungen
</h3>
<ul class="space-y-2">
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ PM erstellen und formatieren
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Medien hochladen
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ SEO-Optimierung
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ PM bearbeiten/löschen
</a>
</li>
@ -153,28 +153,28 @@
</div>
<!-- Topic 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
Account & Abrechnung
</h3>
<ul class="space-y-2">
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Tarif wechseln
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Zahlungsmethoden
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Rechnungen herunterladen
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Account kündigen
</a>
</li>
@ -182,28 +182,28 @@
</div>
<!-- Topic 4 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
Erweiterte Features
</h3>
<ul class="space-y-2">
<li>
<a href="/api" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="/api" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ API-Integration
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Analytics nutzen
</a>
</li>
<li>
<a href="/newsrooms" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="/newsrooms" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Newsroom anpassen
</a>
</li>
<li>
<a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-sm text-zinc-600 dark:text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
→ Team-Management
</a>
</li>
@ -215,22 +215,22 @@
</section>
<!-- Contact Support Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<div class="text-center">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Benötigen Sie weitere Hilfe?
</h2>
<p class="text-gray-600 dark:text-gray-400 mb-8">
<p class="text-zinc-600 dark:text-zinc-400 mb-8">
Unser Support-Team steht Ihnen Mo-Fr von 9-18 Uhr zur Verfügung
</p>
<div class="flex flex-wrap gap-4 justify-center">
<a href="/kontakt" 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);">
Support kontaktieren
</a>
<a href="/faq" class="inline-flex items-center justify-center px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
<a href="/faq" 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">
FAQ durchsuchen
</a>
</div>

105
resources/views/web/impressum.blade.php
View file

@ -4,13 +4,12 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
<!-- Hero Section -->
<section class="relative overflow-hidden text-white py-16 animate-fade-in"
style="background: var(--gradient-hero);">
<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">
Impressum
@ -19,85 +18,98 @@
</section>
<!-- Content Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto prose prose-gray dark:prose-invert">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
<div class="max-w-4xl mx-auto prose prose-zinc dark:prose-invert">
<div
class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">Angaben gemäß § 5 TMG</h2>
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-6">Angaben gemäß § 5 TMG</h2>
<div class="mb-8">
<p class="font-semibold text-gray-900 dark:text-gray-100">Business Portal GmbH</p>
<p class="text-gray-600 dark:text-gray-400">Musterstraße 123</p>
<p class="text-gray-600 dark:text-gray-400">10115 Berlin</p>
<p class="text-gray-600 dark:text-gray-400">Deutschland</p>
<p class="font-semibold text-zinc-900 dark:text-zinc-100">Business Portal GmbH</p>
<p class="text-zinc-600 dark:text-zinc-400">Musterstraße 123</p>
<p class="text-zinc-600 dark:text-zinc-400">10115 Berlin</p>
<p class="text-zinc-600 dark:text-zinc-400">Deutschland</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Kontakt</h3>
<p class="text-gray-600 dark:text-gray-400">Telefon: +49 (0) 30 1234567-0</p>
<p class="text-gray-600 dark:text-gray-400">E-Mail: info@businessportal.de</p>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Kontakt</h3>
<p class="text-zinc-600 dark:text-zinc-400">Telefon: +49 (0) 30 1234567-0</p>
<p class="text-zinc-600 dark:text-zinc-400">E-Mail: info@businessportal.de</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Vertreten durch</h3>
<p class="text-gray-600 dark:text-gray-400">Geschäftsführer: Dr. Michael Weber</p>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Vertreten durch</h3>
<p class="text-zinc-600 dark:text-zinc-400">Geschäftsführer: Dr. Michael Weber</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Registereintrag</h3>
<p class="text-gray-600 dark:text-gray-400">Eintragung im Handelsregister</p>
<p class="text-gray-600 dark:text-gray-400">Registergericht: Amtsgericht Berlin-Charlottenburg</p>
<p class="text-gray-600 dark:text-gray-400">Registernummer: HRB 123456 B</p>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Registereintrag</h3>
<p class="text-zinc-600 dark:text-zinc-400">Eintragung im Handelsregister</p>
<p class="text-zinc-600 dark:text-zinc-400">Registergericht: Amtsgericht Berlin-Charlottenburg
</p>
<p class="text-zinc-600 dark:text-zinc-400">Registernummer: HRB 123456 B</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Umsatzsteuer-ID</h3>
<p class="text-gray-600 dark:text-gray-400">Umsatzsteuer-Identifikationsnummer gemäß § 27a UStG:</p>
<p class="text-gray-600 dark:text-gray-400">DE123456789</p>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Umsatzsteuer-ID</h3>
<p class="text-zinc-600 dark:text-zinc-400">Umsatzsteuer-Identifikationsnummer gemäß § 27a UStG:
</p>
<p class="text-zinc-600 dark:text-zinc-400">DE123456789</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>
<p class="text-gray-600 dark:text-gray-400">Lisa Müller</p>
<p class="text-gray-600 dark:text-gray-400">Musterstraße 123</p>
<p class="text-gray-600 dark:text-gray-400">10115 Berlin</p>
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Verantwortlich für den
Inhalt nach § 55 Abs. 2 RStV</h3>
<p class="text-zinc-600 dark:text-zinc-400">Lisa Müller</p>
<p class="text-zinc-600 dark:text-zinc-400">Musterstraße 123</p>
<p class="text-zinc-600 dark:text-zinc-400">10115 Berlin</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Streitschlichtung</h3>
<p class="text-gray-600 dark:text-gray-400">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Streitschlichtung</h3>
<p class="text-zinc-600 dark:text-zinc-400">
Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit:
<a href="https://ec.europa.eu/consumers/odr" class="text-[var(--color-primary)] hover:underline" target="_blank">https://ec.europa.eu/consumers/odr</a>
<a href="https://ec.europa.eu/consumers/odr"
class="text-[var(--color-primary)] hover:underline"
target="_blank">https://ec.europa.eu/consumers/odr</a>
</p>
<p class="text-gray-600 dark:text-gray-400 mt-4">
Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucherschlichtungsstelle teilzunehmen.
<p class="text-zinc-600 dark:text-zinc-400 mt-4">
Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer
Verbraucherschlichtungsstelle teilzunehmen.
</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Haftung für Inhalte</h3>
<p class="text-gray-600 dark:text-gray-400">
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich.
Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Haftung für Inhalte</h3>
<p class="text-zinc-600 dark:text-zinc-400">
Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach
den allgemeinen Gesetzen verantwortlich.
Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte
oder gespeicherte fremde Informationen zu
überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
</p>
</div>
<div class="mb-8">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Haftung für Links</h3>
<p class="text-gray-600 dark:text-gray-400">
Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für
diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Haftung für Links</h3>
<p class="text-zinc-600 dark:text-zinc-400">
Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen
Einfluss haben. Deshalb können wir für
diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten
ist stets der jeweilige Anbieter oder
Betreiber der Seiten verantwortlich.
</p>
</div>
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-4">Urheberrecht</h3>
<p class="text-gray-600 dark:text-gray-400">
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht.
Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Urheberrecht</h3>
<p class="text-zinc-600 dark:text-zinc-400">
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem
deutschen Urheberrecht.
Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der
Grenzen des Urheberrechtes bedürfen
der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.
</p>
</div>
@ -118,6 +130,9 @@
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
}
[x-cloak] { display: none !important; }
[x-cloak] {
display: none !important;
}
</style>
@endpush

58
resources/views/web/karriere.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
@ -24,54 +24,54 @@
</section>
<!-- Why Join Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Warum Business Portal?
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 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-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Wachstum & Entwicklung
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Kontinuierliche Weiterbildung und klare Karrierepfade
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Flexible Arbeitszeiten
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Work-Life-Balance mit Remote- und Hybrid-Optionen
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Tolles Team
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Arbeite mit motivierten Profis in einem inspirierenden Umfeld
</p>
</div>
@ -81,77 +81,77 @@
</section>
<!-- Open Positions Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Offene Stellen
</h2>
</div>
<div class="space-y-4">
<!-- Job 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-lg text-zinc-900 dark:text-zinc-100 mb-2">
Senior Full-Stack Developer (m/w/d)
</h3>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs rounded-full">Vollzeit</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">Remote möglich</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">Berlin</span>
<span class="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs rounded-full">Remote möglich</span>
<span class="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs rounded-full">Berlin</span>
</div>
</div>
<a href="#" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-all" style="background: var(--gradient-hero);">
Bewerben
</a>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Wir suchen einen erfahrenen Full-Stack Developer für unser Engineering-Team...
</p>
</div>
<!-- Job 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-lg text-zinc-900 dark:text-zinc-100 mb-2">
Content Manager (m/w/d)
</h3>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs rounded-full">Vollzeit</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">Berlin</span>
<span class="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs rounded-full">Berlin</span>
</div>
</div>
<a href="#" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-all" style="background: var(--gradient-hero);">
Bewerben
</a>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Verstärke unser Content-Team und gestalte redaktionelle Prozesse...
</p>
</div>
<!-- Job 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="flex justify-between items-start mb-4">
<div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-lg text-zinc-900 dark:text-zinc-100 mb-2">
Customer Success Manager (m/w/d)
</h3>
<div class="flex flex-wrap gap-2">
<span class="px-3 py-1 bg-[var(--color-primary)]/10 text-[var(--color-primary)] text-xs rounded-full">Vollzeit</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">Remote möglich</span>
<span class="px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-xs rounded-full">München</span>
<span class="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs rounded-full">Remote möglich</span>
<span class="px-3 py-1 bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 text-xs rounded-full">München</span>
</div>
</div>
<a href="#" class="px-4 py-2 text-sm font-medium text-white rounded-lg transition-all" style="background: var(--gradient-hero);">
Bewerben
</a>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Betreue unsere Kunden und hilf ihnen, das Maximum aus unserer Plattform herauszuholen...
</p>
</div>
@ -169,7 +169,7 @@
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
Du passt nicht zu den offenen Stellen, möchtest aber trotzdem Teil unseres Teams werden?
</p>
<a href="/kontakt" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
<a href="/kontakt" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Kontakt aufnehmen
</a>
</div>

546
resources/views/web/kategorie.blade.php
View file

@ -1,10 +1,32 @@
@php
use App\Services\CategoryService;
// Kategorie aus Route-Parameter laden
$slug = request()->segment(2) ?? 'wirtschaft';
$category = CategoryService::getCategoryBySlug($slug);
// Wenn Kategorie nicht gefunden, 404
if (!$category) {
abort(404, 'Kategorie nicht gefunden');
}
// Alle Kategorien für Sidebar
$allCategories = CategoryService::getCategories();
// Icon- und Farb-Informationen
$iconPath = CategoryService::getIconPath($category['icon']);
$gradient = CategoryService::getGradientForColor($category['color']);
$iconColor = CategoryService::getClassForColor($category['color']);
@endphp
@extends('web.layouts.web-master')
@section('title', 'IT & Software - Pressemitteilungen - Business Portal 24')
@section('title', $category['name'] . ' - Pressemitteilungen - Business Portal 24')
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -12,447 +34,333 @@
<livewire:web.header />
<!-- Breadcrumbs -->
<section class="bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 py-4 transition-colors duration-200">
<div class="container mx-auto px-4">
<nav class="text-sm text-gray-600 dark:text-gray-400">
<a href="/" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors">Start</a>
<span class="mx-2">›</span>
<a href="/kategorien" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors">Kategorien</a>
<span class="mx-2">›</span>
<span class="text-gray-900 dark:text-gray-100 font-medium">IT & Software</span>
</nav>
</div>
</section>
<div class="container mx-auto px-4 py-4">
<x-web.breadcrumb :items="[['label' => 'Kategorien', 'url' => '/kategorien'], ['label' => $category['name']]]" />
</div>
<!-- Category Header -->
<section class="bg-gradient-to-r from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 border-b border-gray-200 dark:border-gray-800 py-12 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium text-white mb-4" style="background: var(--gradient-hero);">
IT & Software
</span>
<h1 class="text-4xl md:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-4">
Pressemitteilungen IT & Software
</h1>
<p class="text-xl text-gray-600 dark:text-gray-400">
Aktuelle Nachrichten aus der IT-Branche – KI, Cloud, Cybersecurity und mehr
</p>
</div>
</div>
</section>
<!-- SEO Text - Collapsible -->
<section class="bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 transition-colors duration-200" x-data="{ expanded: false }">
<div class="container mx-auto px-4 py-6">
<div class="max-w-4xl">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<div :class="{ 'line-clamp-3': !expanded }" class="prose prose-sm max-w-none">
<p class="text-gray-900 dark:text-gray-100">
Die Kategorie <strong>IT & Software</strong> auf Business Portal vereint die wichtigsten Nachrichten und Pressemitteilungen aus der dynamischen Technologiebranche. Hier finden Sie aktuelle Meldungen zu Künstlicher Intelligenz, Cloud Computing, Cybersecurity, Enterprise-Software und vielen weiteren IT-Themen.
</p>
<template x-if="expanded">
<div>
<p class="text-gray-900 dark:text-gray-100 mt-4">
Die IT-Branche ist einer der innovativsten und am schnellsten wachsenden Wirtschaftszweige in Deutschland, Österreich und der Schweiz. Unternehmen investieren Milliarden in die digitale Transformation, neue Geschäftsmodelle entstehen durch Cloud-Technologien, und künstliche Intelligenz revolutioniert Prozesse in allen Branchen.
</p>
<p class="text-gray-900 dark:text-gray-100 mt-4">
Als zentrale Anlaufstelle für IT-Pressemitteilungen bietet Business Portal Journalisten, Analysten und Entscheidern einen kompakten Überblick über die neuesten Entwicklungen. Von Software-Releases über Produktankündigungen bis hin zu Forschungsergebnissen und Unternehmensnachrichten – hier bleiben Sie auf dem Laufenden.
</p>
<p class="text-gray-900 dark:text-gray-100 mt-4">
Nutzen Sie die Filterfunktionen, um gezielt nach Themen, Regionen oder Zeiträumen zu suchen. Abonnieren Sie den RSS-Feed oder Newsletter, um keine wichtige IT-Meldung mehr zu verpassen.
</p>
</div>
</template>
</div>
<button
@click="expanded = !expanded"
class="mt-4 inline-flex items-center text-sm font-medium text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors"
>
<svg class="h-4 w-4 mr-2 transition-transform" :class="{ 'rotate-180': expanded }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
<span x-text="expanded ? 'Weniger anzeigen' : 'Mehr lesen'"></span>
</button>
<!-- Hero Banner -->
<x-web.hero-banner :theme="$theme">
<x-slot name="title">
<div class="flex items-center justify-center gap-4 mb-4">
<div class="w-16 h-16 bg-white/10 backdrop-blur-sm rounded-xl flex items-center justify-center">
<img src="{{ $iconPath }}" alt="{{ $category['name'] }}" class="h-8 w-8 brightness-0 invert">
</div>
</div>
Pressemitteilungen {{ $category['name'] }}
</x-slot>
<x-slot name="subtitle">
{{ $category['description'] }}
</x-slot>
</x-web.hero-banner>
<!-- SEO Text - Collapsible -->
{{-- <section class="section-light-bg border-b border-zinc-200 dark:border-zinc-800 transition-colors duration-200"
x-data="{ expanded: false }">
<div class="container mx-auto px-4 py-6">
<div class="card p-6">
<div :class="{ 'line-clamp-3': !expanded }" class="prose prose-sm max-w-none">
<p class="text-zinc-900 dark:text-zinc-100">
Die Kategorie <strong>{{ $category['name'] }}</strong> auf Business Portal vereint die
wichtigsten
Nachrichten und Pressemitteilungen aus diesem Bereich. {{ $category['description'] }}
</p>
<template x-if="expanded">
<div>
<p class="text-zinc-900 dark:text-zinc-100 mt-4">
Hier finden Sie aktuelle Meldungen, Produktankündigungen und Unternehmensnachrichten
aus Deutschland, Österreich und der Schweiz. Unternehmen nutzen unsere Plattform,
um ihre wichtigsten Neuigkeiten zu veröffentlichen.
</p>
<p class="text-zinc-900 dark:text-zinc-100 mt-4">
Als zentrale Anlaufstelle für Pressemitteilungen im Bereich {{ $category['name'] }}
bietet Business Portal Journalisten, Analysten und Entscheidern einen kompakten
Überblick über die neuesten Entwicklungen.
</p>
<p class="text-zinc-900 dark:text-zinc-100 mt-4">
Nutzen Sie die Filterfunktionen, um gezielt nach Themen, Regionen oder Zeiträumen zu
suchen. Abonnieren Sie den RSS-Feed oder Newsletter, um keine wichtige Meldung
mehr zu verpassen.
</p>
</div>
</template>
</div>
<button @click="expanded = !expanded"
class="mt-4 inline-flex items-center text-sm font-medium text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors">
<svg class="h-4 w-4 mr-2 transition-transform" :class="{ 'rotate-180': expanded }" fill="none"
stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7">
</path>
</svg>
<span x-text="expanded ? 'Weniger anzeigen' : 'Mehr lesen'"></span>
</button>
</div>
</div>
</section>
--}}
<!-- Main Content with Sidebar -->
<section class="py-8 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-8 section-light-bg dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="flex flex-col lg:flex-row gap-8">
<!-- Main Content -->
<div class="flex-1">
<div class="flex items-center justify-between mb-6">
<h2 class="text-sm font-medium text-gray-600 dark:text-gray-400 flex items-center gap-2">
<h2 class="text-sm font-medium text-zinc-600 dark:text-zinc-400 flex items-center gap-2">
<span class="w-2 h-2 bg-[var(--color-primary)] rounded-full"></span>
142 Pressemitteilungen in IT & Software
{{ $category['count'] }} Pressemitteilungen in {{ $category['name'] }}
</h2>
</div>
<!-- Press Release Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="p-5">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
<span class="badge badge-primary">
IT & Software
</span>
<span class="text-xs text-gray-600 dark:text-gray-400">Heute, 14:30</span>
<span class="text-xs text-zinc-600 dark:text-zinc-400">Heute, 14:30</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3
class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
Eine neue Studie zeigt: Unternehmen im DACH-Raum planen für 2025 Investitionen in Höhe von über 15 Milliarden Euro in KI-gestützte Automatisierungslösungen.
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-3">
Eine neue Studie zeigt: Unternehmen im DACH-Raum planen für 2025 Investitionen in
Höhe von über 15 Milliarden Euro in KI-gestützte Automatisierungslösungen.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<div class="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Berlin</span>
</div>
<a href="/release-detail" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
<span
class="inline-flex items-center text-sm text-[var(--color-primary)] font-medium">
Lesen →
</a>
</span>
</div>
</div>
</div>
</article>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="p-5">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
IT & Software
<div class="flex items-center justify-between gap-2 mb-3">
<span class="text-xs text-zinc-700 dark:text-zinc-400">Heute, 10:00</span>
<span class="badge badge-primary">
{{ $category['name'] }}
</span>
<span class="text-xs text-gray-600 dark:text-gray-400">Heute, 10:00</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3
class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
Cloud-Migration: 78% der deutschen Unternehmen setzen auf Hybrid-Cloud-Strategien
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
Neue Umfrage zeigt: Hybrid-Cloud wird zum Standard. Unternehmen kombinieren Public und Private Cloud für maximale Flexibilität.
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-3">
Neue Umfrage zeigt: Hybrid-Cloud wird zum Standard. Unternehmen kombinieren Public
und Private Cloud für maximale Flexibilität.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
<div
class="flex items-center justify-between text-[var(--color-primary)]/60 pt-5 border-t border-[var(--color-primary)]/10 group-hover:border-[var(--color-primary)] transition-all duration-300">
<div class="flex items-center gap-2">
<svg class="h-4 w-4 text-zinc-400" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4">
</path>
</svg>
<span>Frankfurt</span>
<span
class="text-sm font-medium text-zinc-700 dark:text-zinc-300">Unternehmen</span>
</div>
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
Lesen →
</a>
<svg class="h-5 w-5 transition-transform group-hover:translate-x-2 group-hover: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 5l7 7-7 7"></path>
</svg>
</div>
</div>
</div>
</article>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="p-5">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
IT & Software
<span class="badge badge-primary">
{{ $category['name'] }}
</span>
<span class="text-xs text-gray-600 dark:text-gray-400">Gestern, 15:20</span>
<span class="text-xs text-zinc-600 dark:text-zinc-400">Gestern, 15:20</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3
class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
Cybersecurity: Unternehmen verstärken Schutzmaßnahmen gegen Hackerangriffe
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
Nach einer Serie von Cyberattacken erhöhen deutsche Unternehmen ihre Investitionen in IT-Sicherheit um durchschnittlich 35%.
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-3">
Nach einer Serie von Cyberattacken erhöhen deutsche Unternehmen ihre Investitionen
in
IT-Sicherheit um durchschnittlich 35%.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<div class="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>München</span>
</div>
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
<span
class="inline-flex items-center text-sm text-[var(--color-primary)] font-medium">
Lesen →
</a>
</span>
</div>
</div>
</div>
</article>
<!-- Card 4 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="p-5">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
IT & Software
<span class="badge badge-primary">
{{ $category['name'] }}
</span>
<span class="text-xs text-gray-600 dark:text-gray-400">Gestern, 11:45</span>
<span class="text-xs text-zinc-600 dark:text-zinc-400">Gestern, 11:45</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3
class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
Low-Code-Plattformen revolutionieren die Softwareentwicklung
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
Citizen Developer werden zur treibenden Kraft: Low-Code-Lösungen ermöglichen auch Nicht-Programmierern professionelle Anwendungen.
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-3">
Citizen Developer werden zur treibenden Kraft: Low-Code-Lösungen ermöglichen auch
Nicht-Programmierern professionelle Anwendungen.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<div class="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Berlin</span>
</div>
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
<span
class="inline-flex items-center text-sm text-[var(--color-primary)] font-medium">
Lesen →
</a>
</span>
</div>
</div>
</div>
</article>
<!-- Card 5 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="p-5">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
IT & Software
<span class="badge badge-primary">
{{ $category['name'] }}
</span>
<span class="text-xs text-gray-600 dark:text-gray-400">2 Tage</span>
<span class="text-xs text-zinc-600 dark:text-zinc-400">2 Tage</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3
class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
5G-Rollout beschleunigt: Netzabdeckung erreicht 85% in Deutschland
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
Mobilfunkanbieter berichten von schnellerem Ausbau als erwartet. Industrielle IoT-Anwendungen profitieren enorm.
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-3">
Mobilfunkanbieter berichten von schnellerem Ausbau als erwartet. Industrielle
IoT-Anwendungen profitieren enorm.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
<div class="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Deutschland</span>
</div>
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
<span
class="inline-flex items-center text-sm text-[var(--color-primary)] font-medium">
Lesen →
</a>
</span>
</div>
</div>
</div>
</article>
<!-- Card 6 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 overflow-hidden hover:shadow-lg transition-all">
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="p-5">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
IT & Software
<span class="badge badge-primary">
{{ $category['name'] }}
</span>
<span class="text-xs text-gray-600 dark:text-gray-400">3 Tage</span>
<span class="text-xs text-zinc-600 dark:text-zinc-400">3 Tage</span>
</div>
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3
class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2 group-hover:text-[var(--color-primary)] transition-colors">
Quantum Computing: Deutscher Forschungsverbund meldet Durchbruch
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-3">
Wissenschaftler entwickeln stabilere Qubits. Kommerzielle Anwendungen in der Materialforschung rücken näher.
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4 line-clamp-3">
Wissenschaftler entwickeln stabilere Qubits. Kommerzielle Anwendungen in der
Materialforschung rücken näher.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
<div class="flex items-center gap-2 text-xs text-zinc-600 dark:text-zinc-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor"
viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z">
</path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span>Stuttgart</span>
</div>
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium">
<span
class="inline-flex items-center text-sm text-[var(--color-primary)] font-medium">
Lesen →
</a>
</span>
</div>
</div>
</div>
</article>
</div>
<!-- Pagination -->
<div class="flex justify-center">
<div class="flex items-center gap-2">
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
Zurück
</button>
<button class="px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">
1
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
2
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
3
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
4
</button>
<button class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors">
Weiter
</button>
</div>
</div>
<x-web.pagination :currentPage="1" :totalPages="10" />
</div>
<!-- Sidebar - Hidden on mobile -->
<aside class="lg:w-80 space-y-6">
<!-- Sub-Categories -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
<span class="w-1 h-5 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Unterkategorien
</h3>
<div class="space-y-2">
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
Künstliche Intelligenz →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
Cloud Computing →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
Cybersecurity →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
Software-as-a-Service →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
Enterprise Software →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
Mobile Apps →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
Blockchain & Web3 →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
DevOps & Entwicklung →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
Data Analytics →
</a>
<a href="#" class="block text-sm text-gray-600 dark:text-gray-400 hover:text-[var(--color-primary)] hover:translate-x-1 transition-all">
IoT & Edge Computing →
</a>
</div>
</div>
<!-- Related Topics -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
<span class="w-1 h-5 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Verwandte Themen
</h3>
<div class="flex flex-wrap gap-2">
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
Digitale Transformation
</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
Automatisierung
</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
Machine Learning
</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
API & Integrationen
</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
Agile Methoden
</span>
<span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer hover:bg-[var(--color-primary)] hover:text-white transition-colors">
Remote Work Tools
</span>
</div>
</div>
<!-- Newsletter Subscribe -->
<div class="bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<svg class="h-8 w-8 text-[var(--color-primary)] mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
IT-Newsletter abonnieren
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Erhalten Sie die neuesten IT-Pressemitteilungen direkt in Ihr Postfach
</p>
<a href="#" class="inline-flex items-center justify-center w-full 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 abonnieren
</a>
</div>
<!-- RSS Feed -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<svg class="h-8 w-8 text-[var(--color-secondary)] mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
</svg>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
RSS-Feed
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Bleiben Sie über neue IT-Meldungen auf dem Laufenden
</p>
<a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
RSS abonnieren
</a>
</div>
<!-- Categories -->
<x-web.sidebar-categories :categories="$allCategories" :activeSlug="$category['slug']" />
<!-- Top Companies -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
<span class="w-1 h-5 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Top IT-Unternehmen
</h3>
<div class="space-y-3">
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
<span class="text-xs font-bold text-[var(--color-primary)]">T</span>
</div>
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
TechVision Analytics
</span>
</a>
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
<span class="text-xs font-bold text-[var(--color-primary)]">C</span>
</div>
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
CloudTech Research
</span>
</a>
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
<span class="text-xs font-bold text-[var(--color-primary)]">C</span>
</div>
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
CyberSafe Europe
</span>
</a>
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
<span class="text-xs font-bold text-[var(--color-primary)]">D</span>
</div>
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
DevTech Insights
</span>
</a>
<a href="#" class="flex items-center gap-3 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 p-2 rounded-lg transition-colors">
<div class="w-8 h-8 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded flex items-center justify-center flex-shrink-0">
<span class="text-xs font-bold text-[var(--color-primary)]">Q</span>
</div>
<span class="text-gray-900 dark:text-gray-100 hover:text-[var(--color-primary)] transition-colors">
QuantumTech Germany
</span>
</a>
</div>
</div>
<x-web.sidebar-companies />
<!-- Newsletter Subscribe -->
<x-web.sidebar-newsletter :title="$category['name'] . '-Newsletter'" :description="'Erhalten Sie die neuesten Pressemitteilungen aus ' .
$category['name'] .
' direkt in Ihr Postfach'" />
<!-- RSS Feed -->
<x-web.sidebar-rss :description="'Bleiben Sie über neue Meldungen in ' . $category['name'] . ' auf dem Laufenden'" />
</aside>
</div>
</div>
</section>
<!-- Footer Component -->

376
resources/views/web/kategorien.blade.php
View file

@ -4,302 +4,98 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<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">
Kategorien
</h1>
<p class="text-xl text-white/90 max-w-2xl mx-auto animate-fade-in-up animation-delay-200">
Entdecken Sie Pressemitteilungen nach Themengebieten
</p>
</div>
</section>
<!-- Hero Banner -->
<x-web.hero-banner :theme="$theme">
<x-slot name="title">
Kategorien
</x-slot>
<x-slot name="subtitle">
Entdecken Sie Pressemitteilungen nach Themengebieten
</x-slot>
</x-web.hero-banner>
<!-- Categories Grid Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="section-light-bg py-16 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
@php
use App\Services\CategoryService;
$categories = CategoryService::getCategories();
@endphp
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach ($categories as $category)
@php
$iconPath = CategoryService::getIconPath($category['icon']);
$gradient = CategoryService::getGradientForColor($category['color']);
$iconColor = CategoryService::getClassForColor($category['color']);
@endphp
<!-- Category 1: Wirtschaft -->
<a href="/kategorie/wirtschaft" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-blue-500/10 to-blue-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
<a href="/kategorie/{{ $category['slug'] }}"
class="group card card-hover cursor-pointer rounded-xl p-6 transition-all">
<div class="flex items-start gap-4">
<div
class="w-14 h-14 bg-gradient-to-br {{ $gradient }} rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<div class="industry-icon-badge">
<img src="{{ $iconPath }}" alt="{{ $category['name'] }}"
class="h-7 w-7 {{ $iconColor }}" />
</div>
</div>
<div class="flex-1">
<h3
class="font-semibold text-lg text-zinc-900 dark:text-zinc-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
{{ $category['name'] }}
</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3">
{{ $category['description'] }}
</p>
<span class="text-xs text-zinc-500 dark:text-zinc-500">{{ $category['count'] }}
Mitteilungen</span>
</div>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Wirtschaft
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Unternehmensnachrichten, Finanzberichte, Wirtschaftstrends
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">2.450+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 2: Technologie -->
<a href="/kategorie/technologie" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-purple-500/10 to-purple-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Technologie
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
IT, Software, Digitalisierung, Innovation
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">1.890+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 3: Gesundheit -->
<a href="/kategorie/gesundheit" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-green-500/10 to-green-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Gesundheit
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Medizin, Pharma, Gesundheitswesen, Forschung
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">1.340+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 4: Finanzen -->
<a href="/kategorie/finanzen" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-yellow-500/10 to-yellow-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Finanzen
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Banking, Investment, Fintech, Versicherungen
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">980+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 5: Automotive -->
<a href="/kategorie/automotive" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-red-500/10 to-red-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Automotive
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Fahrzeuge, E-Mobilität, Zulieferer, Logistik
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">750+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 6: Immobilien -->
<a href="/kategorie/immobilien" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-indigo-500/10 to-indigo-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Immobilien
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Bau, Entwicklung, PropTech, Gewerbe
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">640+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 7: Energie -->
<a href="/kategorie/energie" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-orange-500/10 to-orange-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-orange-500" 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>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Energie
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Erneuerbare Energien, Strom, Gas, Nachhaltigkeit
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">520+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 8: Bildung -->
<a href="/kategorie/bildung" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-cyan-500/10 to-cyan-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-cyan-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Bildung
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Schulen, Universitäten, E-Learning, Weiterbildung
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">480+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 9: Handel -->
<a href="/kategorie/handel" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-pink-500/10 to-pink-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-pink-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Handel
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Einzelhandel, E-Commerce, Konsumgüter
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">410+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 10: Tourismus -->
<a href="/kategorie/tourismus" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-teal-500/10 to-teal-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Tourismus
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Reisen, Hotellerie, Gastronomie, Veranstaltungen
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">390+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 11: Sport -->
<a href="/kategorie/sport" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-lime-500/10 to-lime-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-lime-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Sport
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Sportveranstaltungen, Vereine, Fitness, Sponsoring
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">320+ Mitteilungen</span>
</div>
</div>
</a>
<!-- Category 12: Kultur -->
<a href="/kategorie/kultur" class="group bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg hover:border-[var(--color-primary)] transition-all">
<div class="flex items-start gap-4">
<div class="w-14 h-14 bg-gradient-to-br from-violet-500/10 to-violet-600/10 rounded-lg flex items-center justify-center flex-shrink-0 group-hover:scale-110 transition-transform">
<svg class="h-7 w-7 text-violet-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 4v16M17 4v16M3 8h4m10 0h4M3 12h18M3 16h4m10 0h4M4 20h16a1 1 0 001-1V5a1 1 0 00-1-1H4a1 1 0 00-1 1v14a1 1 0 001 1z"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors">
Kultur
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
Kunst, Musik, Theater, Medien, Entertainment
</p>
<span class="text-xs text-gray-500 dark:text-gray-500">290+ Mitteilungen</span>
</div>
</div>
</a>
</a>
@endforeach
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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="max-w-4xl mx-auto">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div>
<div class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
12
<div
class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
{{ App\Services\CategoryService::count() }}
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Kategorien</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Kategorien</div>
</div>
<div>
<div class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
<div
class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
10.000+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Pressemitteilungen</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Pressemitteilungen</div>
</div>
<div>
<div class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
<div
class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
850+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Neue pro Monat</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Neue pro Monat</div>
</div>
<div>
<div class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
<div
class="text-3xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
2,5 Mio.
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Monatliche Leser</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Monatliche Leser</div>
</div>
</div>
</div>
@ -317,6 +113,58 @@
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#cf3628' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#f0834a' }};
}
[x-cloak] { display: none !important; }
[x-cloak] {
display: none !important;
}
/* Heroicon Farbfilter für Kategorien */
.text-blue-500 img {
filter: invert(47%) sepia(96%) saturate(1632%) hue-rotate(201deg) brightness(99%) contrast(101%);
}
.text-purple-500 img {
filter: invert(42%) sepia(95%) saturate(2297%) hue-rotate(251deg) brightness(99%) contrast(101%);
}
.text-green-500 img {
filter: invert(64%) sepia(86%) saturate(475%) hue-rotate(77deg) brightness(95%) contrast(95%);
}
.text-yellow-600 img {
filter: invert(71%) sepia(90%) saturate(1207%) hue-rotate(1deg) brightness(96%) contrast(91%);
}
.text-red-500 img {
filter: invert(37%) sepia(93%) saturate(3026%) hue-rotate(346deg) brightness(99%) contrast(94%);
}
.text-indigo-500 img {
filter: invert(40%) sepia(100%) saturate(1736%) hue-rotate(231deg) brightness(102%) contrast(101%);
}
.text-orange-500 img {
filter: invert(60%) sepia(99%) saturate(1515%) hue-rotate(358deg) brightness(100%) contrast(101%);
}
.text-cyan-500 img {
filter: invert(71%) sepia(69%) saturate(2356%) hue-rotate(143deg) brightness(91%) contrast(101%);
}
.text-pink-500 img {
filter: invert(52%) sepia(68%) saturate(2952%) hue-rotate(309deg) brightness(104%) contrast(101%);
}
.text-teal-500 img {
filter: invert(55%) sepia(82%) saturate(432%) hue-rotate(124deg) brightness(92%) contrast(92%);
}
.text-lime-500 img {
filter: invert(82%) sepia(35%) saturate(1283%) hue-rotate(28deg) brightness(99%) contrast(95%);
}
.text-violet-500 img {
filter: invert(39%) sepia(86%) saturate(3028%) hue-rotate(254deg) brightness(98%) contrast(101%);
}
</style>
@endpush

98
resources/views/web/kontakt.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -36,78 +36,78 @@
</section>
<!-- Contact Methods -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<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-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-16">
<!-- Email -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
E-Mail
</h3>
<a href="mailto:info@businessportal.de" class="text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium block mb-1">
info@businessportal.de
</a>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Antwort innerhalb von 24 Stunden
</p>
</div>
<!-- Phone -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Telefon
</h3>
<a href="tel:+498912345678" class="text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors font-medium block mb-1">
+49 89 1234 5678
</a>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Mo-Fr 9:00-18:00 Uhr
</p>
</div>
<!-- Address -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Adresse
</h3>
<p class="text-gray-900 dark:text-gray-100 font-medium mb-1">
<p class="text-zinc-900 dark:text-zinc-100 font-medium mb-1">
Maximilianstraße 35
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
80539 München, Deutschland
</p>
</div>
<!-- Business Hours -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Geschäftszeiten
</h3>
<p class="text-gray-900 dark:text-gray-100 font-medium mb-1">
<p class="text-zinc-900 dark:text-zinc-100 font-medium mb-1">
Mo-Fr 9:00-18:00
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Sa-So geschlossen
</p>
</div>
@ -118,10 +118,10 @@
<!-- Form -->
<div>
<div class="mb-8">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Nachricht senden
</h2>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Haben Sie Fragen oder benötigen Sie Unterstützung? Füllen Sie das Formular aus und wir melden uns schnellstmöglich bei Ihnen.
</p>
</div>
@ -130,7 +130,7 @@
@csrf
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label for="vorname" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
<label for="vorname" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
Vorname *
</label>
<input
@ -139,11 +139,11 @@
type="text"
placeholder="Max"
required
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
/>
</div>
<div class="space-y-2">
<label for="nachname" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
<label for="nachname" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
Nachname *
</label>
<input
@ -152,13 +152,13 @@
type="text"
placeholder="Mustermann"
required
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
/>
</div>
</div>
<div class="space-y-2">
<label for="email" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
<label for="email" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
E-Mail-Adresse *
</label>
<input
@ -167,12 +167,12 @@
type="email"
placeholder="max.mustermann@beispiel.de"
required
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
/>
</div>
<div class="space-y-2">
<label for="unternehmen" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
<label for="unternehmen" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
Unternehmen
</label>
<input
@ -180,12 +180,12 @@
name="unternehmen"
type="text"
placeholder="Firma GmbH"
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
/>
</div>
<div class="space-y-2">
<label for="telefon" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
<label for="telefon" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
Telefon
</label>
<input
@ -193,12 +193,12 @@
name="telefon"
type="tel"
placeholder="+49 123 456789"
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
/>
</div>
<div class="space-y-2">
<label for="betreff" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
<label for="betreff" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
Betreff *
</label>
<input
@ -207,12 +207,12 @@
type="text"
placeholder="Wie können wir Ihnen helfen?"
required
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200"
/>
</div>
<div class="space-y-2">
<label for="nachricht" class="block text-sm font-medium text-gray-900 dark:text-gray-100">
<label for="nachricht" class="block text-sm font-medium text-zinc-900 dark:text-zinc-100">
Nachricht *
</label>
<textarea
@ -221,11 +221,11 @@
placeholder="Ihre Nachricht an uns..."
rows="6"
required
class="w-full px-4 py-2 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200 resize-none"
class="w-full px-4 py-2 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 placeholder:text-zinc-400 dark:placeholder:text-zinc-500 border border-zinc-300 dark:border-zinc-700 rounded-lg focus:ring-2 focus:ring-[var(--color-primary)] focus:border-transparent transition-colors duration-200 resize-none"
></textarea>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
<div class="text-sm text-zinc-600 dark:text-zinc-400">
* Pflichtfelder
</div>
@ -244,58 +244,58 @@
<!-- Map & Info -->
<div class="space-y-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-6">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-6">
Besuchen Sie uns
</h3>
<div class="space-y-6">
<div>
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Hauptsitz München</h4>
<p class="text-sm text-gray-600 dark:text-gray-400">
<h4 class="font-medium text-zinc-900 dark:text-zinc-100 mb-2">Hauptsitz München</h4>
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Maximilianstraße 35<br />
80539 München<br />
Deutschland
</p>
</div>
<div class="border-t border-gray-200 dark:border-gray-800 pt-6">
<h4 class="font-medium text-gray-900 dark:text-gray-100 mb-2">Anfahrt</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<strong class="text-gray-900 dark:text-gray-100">Öffentliche Verkehrsmittel:</strong><br />
<div class="border-t border-zinc-200 dark:border-zinc-800 pt-6">
<h4 class="font-medium text-zinc-900 dark:text-zinc-100 mb-2">Anfahrt</h4>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
<strong class="text-zinc-900 dark:text-zinc-100">Öffentliche Verkehrsmittel:</strong><br />
U-Bahn U4/U5 – Haltestelle Lehel<br />
Tram 19 – Haltestelle Maxmonument
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<strong class="text-gray-900 dark:text-gray-100">Parken:</strong><br />
<p class="text-sm text-zinc-600 dark:text-zinc-400">
<strong class="text-zinc-900 dark:text-zinc-100">Parken:</strong><br />
Parkhaus Maximilianstraße (5 Min. Fußweg)
</p>
</div>
</div>
</div>
<div class="h-80 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden">
<div class="h-80 bg-zinc-100 dark:bg-zinc-800 rounded-lg overflow-hidden">
<div class="w-full h-full bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 flex items-center justify-center">
<div class="text-center">
<svg class="h-12 w-12 text-[var(--color-primary)] mx-auto mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Interaktive Karte
</p>
</div>
</div>
</div>
<div class="bg-gray-50/50 dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<h4 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<div class="bg-zinc-50/50 dark:bg-zinc-900/50 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 transition-colors duration-200">
<h4 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Schnelle Hilfe benötigt?
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Für dringende Anfragen oder technischen Support steht Ihnen unser Chat zur Verfügung.
</p>
<a href="#" class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
<a href="#" class="inline-flex items-center justify-center w-full 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">
Live-Chat starten
</a>
</div>

172
resources/views/web/layouts/admin-master.blade.php
View file

@ -1,171 +1 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>@yield('title', $domainName ?? 'Admin - ' . config('app.name'))</title>
<!-- Favicon -->
<link rel="icon" href="{{ asset('img/favicons/admin-favicon.ico') }}">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700" rel="stylesheet" />
<!-- Styles -->
@vite(['resources/css/portal.css', 'resources/js/app.js'])
<!-- Additional Styles -->
@stack('styles')
</head>
<body class="antialiased bg-gray-50 dark:bg-gray-900">
<div class="min-h-screen flex">
<!-- Sidebar Navigation -->
<aside class="w-64 bg-white dark:bg-gray-800 shadow-md hidden md:block">
<div class="p-6">
<a href="{{ route('admin.home') }}" class="text-xl font-bold text-gray-900 dark:text-white">
{{ $domainName ?? config('app.name') . ' Admin' }}
</a>
</div>
<nav class="mt-10 px-6">
<a href="{{ route('admin.dashboard') }}"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 {{ request()->routeIs('admin.dashboard') ? 'bg-gray-100 dark:bg-gray-700' : '' }}">
Dashboard
</a>
<a href="{{ route('admin.settings.profile') }}"
class="block py-2.5 px-4 rounded transition duration-200 hover:bg-gray-100 dark:hover:bg-gray-700 {{ request()->routeIs('admin.settings.profile') ? 'bg-gray-100 dark:bg-gray-700' : '' }}">
Profil
</a>
<!-- Weitere Navigationspunkte hier -->
</nav>
</aside>
<div class="flex-1 flex flex-col">
<!-- Top Navigation -->
<header class="bg-white dark:bg-gray-800 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center md:hidden">
<!-- Mobile menu button -->
<button type="button"
class="text-gray-500 hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"
id="mobile-menu-button">
<span class="sr-only">Menu öffnen</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
<div class="flex items-center">
@if (app()->environment('local'))
<!-- Domain-Informationsanzeige (nur in local) -->
<div
class="mr-4 text-xs px-2 py-1 rounded bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">
{{ Request::getHost() }}
@if (config('domains.dev_settings.simulate_domain'))
<span
class="inline-flex items-center ml-1 px-1.5 py-0.5 rounded-full text-xs bg-yellow-100 text-yellow-800">
Simuliert
</span>
@endif
</div>
@endif
<!-- User Dropdown -->
<div class="ml-3 relative">
<div>
<button type="button"
class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
id="user-menu-button">
<span class="sr-only">Benutzermenü öffnen</span>
<div class="h-8 w-8 rounded-full bg-gray-200 flex items-center justify-center">
<span class="text-xs font-medium">{{ Auth::user()->name[0] ?? 'U' }}</span>
</div>
</button>
</div>
<!-- Dropdown menu -->
<div class="hidden origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white dark:bg-gray-700 ring-1 ring-black ring-opacity-5 focus:outline-none"
role="menu" id="user-menu">
<a href="{{ route('admin.settings.profile') }}"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
role="menuitem">Profil</a>
<a href="{{ route('admin.settings.appearance') }}"
class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
role="menuitem">Einstellungen</a>
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit"
class="block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
role="menuitem">Abmelden</button>
</form>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Mobile menu (off-canvas) -->
<div class="md:hidden hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 bg-white dark:bg-gray-800 shadow-lg">
<a href="{{ route('admin.dashboard') }}"
class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Dashboard</a>
<a href="{{ route('admin.settings.profile') }}"
class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profil</a>
<!-- Weitere mobile Navigationspunkte hier -->
</div>
</div>
<!-- Page Content -->
<main class="flex-1 py-10">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@yield('content')
</div>
</main>
</div>
</div>
<!-- Scripts -->
<script>
// Toggle user dropdown
const userMenuButton = document.getElementById('user-menu-button');
const userMenu = document.getElementById('user-menu');
if (userMenuButton && userMenu) {
userMenuButton.addEventListener('click', function() {
userMenu.classList.toggle('hidden');
});
// Close the dropdown when clicked outside
document.addEventListener('click', function(event) {
if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
userMenu.classList.add('hidden');
}
});
}
// Mobile menu toggle
const mobileMenuButton = document.getElementById('mobile-menu-button');
const mobileMenu = document.getElementById('mobile-menu');
if (mobileMenuButton && mobileMenu) {
mobileMenuButton.addEventListener('click', function() {
mobileMenu.classList.toggle('hidden');
});
}
</script>
<!-- Additional Scripts -->
@stack('scripts')
</body>
</html>
@extends('layouts.admin-master')

255
resources/views/web/layouts/footer.blade.php
View file

@ -1,126 +1,143 @@
<footer class="bg-white">
<div class="mx-auto max-w-7xl px-6 pt-12 pb-8 sm:pt-16 lg:px-8 lg:pt-16">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div class="xl:grid xl:grid-cols-3 xl:gap-8">
<img class="h-9" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt="Company name">
<div class="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-zinc-900">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Insights</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-zinc-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-zinc-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-zinc-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Terms of
service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-zinc-600 hover:text-zinc-900">License</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div
class="mt-16 border-t border-zinc-900/10 pt-8 sm:mt-20 lg:mt-24 lg:flex lg:items-center lg:justify-between">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Solutions</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Marketing</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Analytics</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Automation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Commerce</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Insights</a>
</li>
</ul>
<h3 class="text-sm/6 font-semibold text-zinc-900">Subscribe to our newsletter</h3>
<p class="mt-2 text-sm/6 text-zinc-600">The latest news, articles, and resources, sent to your inbox
weekly.</p>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Support</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Submit ticket</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Documentation</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Guides</a>
</li>
</ul>
</div>
</div>
<div class="md:grid md:grid-cols-2 md:gap-8">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Company</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">About</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Blog</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Jobs</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Press</a>
</li>
</ul>
</div>
<div class="mt-10 md:mt-0">
<h3 class="text-sm/6 font-semibold text-gray-900">Legal</h3>
<ul role="list" class="mt-6 space-y-4">
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Terms of service</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">Privacy policy</a>
</li>
<li>
<a href="#" class="text-sm/6 text-gray-600 hover:text-gray-900">License</a>
</li>
</ul>
</div>
</div>
<form class="mt-6 sm:flex sm:max-w-md lg:mt-0">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" name="email-address" id="email-address" autocomplete="email" required
class="w-full min-w-0 rounded-md bg-white px-3 py-1.5 text-base text-zinc-900 outline-1 -outline-offset-1 outline-zinc-300 placeholder:text-zinc-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:w-56 sm:text-sm/6"
placeholder="Enter your email">
<div class="mt-4 sm:mt-0 sm:ml-4 sm:shrink-0">
<button type="submit"
class="flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24 lg:flex lg:items-center lg:justify-between">
<div>
<h3 class="text-sm/6 font-semibold text-gray-900">Subscribe to our newsletter</h3>
<p class="mt-2 text-sm/6 text-gray-600">The latest news, articles, and resources, sent to your inbox weekly.</p>
<div class="mt-8 border-t border-zinc-900/10 pt-8 md:flex md:items-center md:justify-between">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-zinc-600 hover:text-zinc-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-zinc-600 hover:text-zinc-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-zinc-600 hover:text-zinc-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path
d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-zinc-600 hover:text-zinc-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-zinc-600 hover:text-zinc-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd"
d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z"
clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-zinc-600 md:order-1 md:mt-0">&copy; 2024 Your Company, Inc. All rights
reserved.</p>
</div>
<form class="mt-6 sm:flex sm:max-w-md lg:mt-0">
<label for="email-address" class="sr-only">Email address</label>
<input type="email" name="email-address" id="email-address" autocomplete="email" required class="w-full min-w-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:w-56 sm:text-sm/6" placeholder="Enter your email">
<div class="mt-4 sm:mt-0 sm:ml-4 sm:shrink-0">
<button type="submit" class="flex w-full items-center justify-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Subscribe</button>
</div>
</form>
</div>
<div class="mt-8 border-t border-gray-900/10 pt-8 md:flex md:items-center md:justify-between">
<div class="flex gap-x-6 md:order-2">
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Facebook</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">Instagram</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">X</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">GitHub</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-gray-600 hover:text-gray-800">
<span class="sr-only">YouTube</span>
<svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd" />
</svg>
</a>
</div>
<p class="mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0">&copy; 2024 Your Company, Inc. All rights reserved.</p>
</div>
</div>
</footer>
</footer>

448
resources/views/web/layouts/header.blade.php
View file

@ -3,7 +3,7 @@
Off-canvas menu for mobile, show/hide based on off-canvas menu state.
-->
<div class="relative z-40 lg:hidden" role="dialog" aria-modal="true" x-show="mobileMenuOpen" x-cloak>
<div class="relative z-40 lg:hidden" role="dialog" aria-modal="true" x-show="mobileMenuOpen" x-cloak>
<!--
Off-canvas menu backdrop, show/hide based on off-canvas menu state.
@ -14,18 +14,13 @@
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0 bg-black/50" aria-hidden="true"
x-show="mobileMenuOpen"
@click.stop="mobileMenuOpen = false"
x-transition:enter="transition-opacity ease-linear duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"></div>
<div class="fixed inset-0 bg-black/50" aria-hidden="true" x-show="mobileMenuOpen" @click.stop="mobileMenuOpen = false"
x-transition:enter="transition-opacity ease-linear duration-300" x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-linear duration-300"
x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"></div>
<div class="fixed inset-0 z-40 flex" x-show="mobileMenuOpen" @mousedown.away="mobileMenuOpen = false">
<!--
<!--
Off-canvas menu, show/hide based on off-canvas menu state.
Entering: "transition ease-in-out duration-300 transform"
@ -35,198 +30,247 @@
From: "translate-x-0"
To: "-translate-x-full"
-->
<div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"
x-show="mobileMenuOpen"
@click.away="mobileMenuOpen = false"
x-transition:enter="transition ease-in-out duration-300 transform"
x-transition:enter-start="-translate-x-full"
x-transition:enter-end="translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform"
x-transition:leave-start="translate-x-0"
x-transition:leave-end="-translate-x-full">
<div class="flex px-4 pt-5 pb-2">
<button type="button" class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-gray-400 pointer-events-auto cursor-pointer" @click="mobileMenuOpen = false">
<span class="sr-only">Close menu</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
<!-- Links -->
<div class="space-y-6 border-t border-gray-200 px-4 py-4">
<div class="flow-root">
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Start</a>
</div>
<div class="flow-root">
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">About</a>
</div>
<div class="flow-root">
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Company</a>
</div>
<div class="flow-root">
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Stores</a>
</div>
<div class="flow-root">
<a href="#" class="-m-2 block p-3 font-medium text-gray-900 hover:text-gray-900 hover:bg-gray-100 rounded-md">Contact</a>
</div>
</div>
<div class="space-y-6 border-t border-gray-200 px-4 py-6">
<div class="flow-root">
<a href="#" class="-m-2 block p-2 font-semibold text-white rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create an account</a>
</div>
<div class="flow-root">
<a href="{{ config('domains.domain_admin_url') }}/login" class="-m-2 block p-2 font-semibold text-white rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</a>
</div>
</div>
<div class="space-y-6 border-t border-gray-200 px-4 py-6">
<!-- Currency selector -->
<form>
<div class="-ml-2 inline-grid grid-cols-1">
<div class="flex items-center">
<svg class="size-6 text-gray-500 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<select id="mobile-currency" name="currency" aria-label="Currency" class="w-full appearance-none rounded-md bg-white py-0.5 pr-7 pl-2 text-base font-medium text-gray-700 group-hover:text-gray-800 focus:outline-2 sm:text-sm/6">
<option>DE</option>
<option>EN</option>
</select>
<svg class="pointer-events-none -ml-6 size-5 fill-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<header class="relative z-10">
<nav aria-label="Top">
<!-- Top navigation -->
<div class="bg-gray-900">
<div class="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
<!-- Currency selector -->
<form class="hidden lg:block lg:flex-1">
<div class="-ml-2 inline-grid grid-cols-1">
<div class="flex items-center">
<svg class="size-6 text-gray-300 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<select id="desktop-currency" name="currency" aria-label="Currency" class="w-full appearance-none rounded-md bg-gray-900 py-0.5 pr-7 pl-2 text-left text-base font-medium text-white focus:outline-2 focus:-outline-offset-1 focus:outline-white sm:text-sm/6">
<option>DE</option>
<option>EN</option>
</select>
<svg class="pointer-events-none -ml-6 size-5 fill-gray-300" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
</svg>
</div>
</div>
</form>
<p class="flex-1 text-center text-sm font-medium text-white lg:flex-none">Get free delivery on orders over $100</p>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a href="#" class="text-sm font-medium text-white hover:text-gray-100">Create an account</a>
<span class="h-6 w-px bg-gray-600" aria-hidden="true"></span>
<a href="{{ config('domains.domain_admin_url') }}" class="text-sm font-medium text-white hover:text-gray-100">Sign in</a>
</div>
</div>
</div>
<!-- Secondary navigation -->
<div class="bg-white">
<div class="border-b border-gray-200">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<!-- Logo (lg+) -->
<div class="hidden lg:flex lg:items-center">
<a href="#">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto" src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="">
</a>
</div>
<div class="hidden h-full lg:flex">
<!-- Mega menus -->
<div class="ml-8 my-2">
<div class="flex h-full justify-center space-x-8">
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Start</a>
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">About</a>
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Company</a>
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Stores</a>
<a href="#" class="flex items-center text-base font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md px-2 py-1">Contact</a>
</div>
</div>
</div>
<!-- Mobile menu and search (lg-) -->
<div class="flex flex-1 items-center lg:hidden">
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
<button type="button" class="-ml-2 rounded-md bg-white p-2 text-gray-400 pointer-events-auto cursor-pointer" @click="mobileMenuOpen = true">
<span class="sr-only">Open menu</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
<div class="relative flex w-full max-w-xs flex-col overflow-y-auto bg-white pb-12 shadow-xl"
x-show="mobileMenuOpen" @click.away="mobileMenuOpen = false"
x-transition:enter="transition ease-in-out duration-300 transform"
x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0"
x-transition:leave="transition ease-in-out duration-300 transform" x-transition:leave-start="translate-x-0"
x-transition:leave-end="-translate-x-full">
<div class="flex px-4 pt-5 pb-2">
<button type="button"
class="-m-2 inline-flex items-center justify-center rounded-md p-2 text-zinc-400 pointer-events-auto cursor-pointer"
@click="mobileMenuOpen = false">
<span class="sr-only">Close menu</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
<!-- Search -->
<a href="#" class="ml-2 p-2 text-gray-400 hover:text-gray-500">
<span class="sr-only">Search</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</a>
</div>
<!-- Logo (lg-) -->
<a href="#" class="lg:hidden">
<span class="sr-only">Your Company</span>
<img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600" alt="" class="h-8 w-auto">
</a>
<div class="flex flex-1 items-center justify-end">
<div class="flex items-center lg:ml-8">
<div class="flex space-x-8">
<div class="hidden lg:flex">
<a href="#" class="-m-2 p-2 text-gray-400 hover:text-gray-500">
<span class="sr-only">Search</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</a>
</div>
<div class="flex">
<a href="#" class="-m-2 p-2 text-gray-400 hover:text-gray-500">
<span class="sr-only">Account</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
</a>
</div>
</div>
<span class="mx-4 h-6 w-px bg-gray-200 lg:mx-6" aria-hidden="true"></span>
<div class="flow-root">
<a href="#" class="group -m-2 flex items-center p-2">
<svg class="size-6 shrink-0 text-gray-400 group-hover:text-gray-500" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
<span class="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">0</span>
<span class="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Links -->
<div class="space-y-6 border-t border-zinc-200 px-4 py-4">
<div class="flow-root">
<a href="#"
class="-m-2 block p-3 font-medium text-zinc-900 hover:text-zinc-900 hover:bg-zinc-100 rounded-md">Start</a>
</div>
<div class="flow-root">
<a href="#"
class="-m-2 block p-3 font-medium text-zinc-900 hover:text-zinc-900 hover:bg-zinc-100 rounded-md">About</a>
</div>
<div class="flow-root">
<a href="#"
class="-m-2 block p-3 font-medium text-zinc-900 hover:text-zinc-900 hover:bg-zinc-100 rounded-md">Company</a>
</div>
<div class="flow-root">
<a href="#"
class="-m-2 block p-3 font-medium text-zinc-900 hover:text-zinc-900 hover:bg-zinc-100 rounded-md">Stores</a>
</div>
<div class="flow-root">
<a href="#"
class="-m-2 block p-3 font-medium text-zinc-900 hover:text-zinc-900 hover:bg-zinc-100 rounded-md">Contact</a>
</div>
</div>
<div class="space-y-6 border-t border-zinc-200 px-4 py-6">
<div class="flow-root">
<a href="#"
class="-m-2 block p-2 font-semibold text-white rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create
an account</a>
</div>
<div class="flow-root">
<a href="{{ config('domains.domain_portal_url') }}/login"
class="-m-2 block p-2 font-semibold text-white rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign
in</a>
</div>
</div>
<div class="space-y-6 border-t border-zinc-200 px-4 py-6">
<!-- Currency selector -->
<form>
<div class="-ml-2 inline-grid grid-cols-1">
<div class="flex items-center">
<svg class="size-6 text-zinc-500 mr-2" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
<select id="mobile-currency" name="currency" aria-label="Currency"
class="w-full appearance-none rounded-md bg-white py-0.5 pr-7 pl-2 text-base font-medium text-zinc-700 group-hover:text-zinc-800 focus:outline-2 sm:text-sm/6">
<option>DE</option>
<option>EN</option>
</select>
<svg class="pointer-events-none -ml-6 size-5 fill-zinc-500" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<header class="relative z-10">
<nav aria-label="Top">
<!-- Top navigation -->
<div class="bg-zinc-900">
<div class="mx-auto flex h-10 max-w-7xl items-center justify-between px-4 sm:px-6 lg:px-8">
<!-- Currency selector -->
<form class="hidden lg:block lg:flex-1">
<div class="-ml-2 inline-grid grid-cols-1">
<div class="flex items-center">
<svg class="size-6 text-zinc-300 mr-2" fill="none" stroke="currentColor"
viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z">
</path>
</svg>
<select id="desktop-currency" name="currency" aria-label="Currency"
class="w-full appearance-none rounded-md bg-zinc-900 py-0.5 pr-7 pl-2 text-left text-base font-medium text-white focus:outline-2 focus:-outline-offset-1 focus:outline-white sm:text-sm/6">
<option>DE</option>
<option>EN</option>
</select>
<svg class="pointer-events-none -ml-6 size-5 fill-zinc-300" viewBox="0 0 20 20"
fill="currentColor" aria-hidden="true" data-slot="icon">
<path fill-rule="evenodd"
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd" />
</svg>
</div>
</div>
</form>
<p class="flex-1 text-center text-sm font-medium text-white lg:flex-none">Get free delivery on orders
over $100</p>
<div class="hidden lg:flex lg:flex-1 lg:items-center lg:justify-end lg:space-x-6">
<a href="#" class="text-sm font-medium text-white hover:text-zinc-100">Create an account</a>
<span class="h-6 w-px bg-zinc-600" aria-hidden="true"></span>
<a href="{{ config('domains.domain_portal_url') }}"
class="text-sm font-medium text-white hover:text-zinc-100">Sign in</a>
</div>
</div>
</div>
<!-- Secondary navigation -->
<div class="bg-white">
<div class="border-b border-zinc-200">
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div class="flex h-16 items-center justify-between">
<!-- Logo (lg+) -->
<div class="hidden lg:flex lg:items-center">
<a href="#">
<span class="sr-only">Your Company</span>
<img class="h-8 w-auto"
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt="">
</a>
</div>
<div class="hidden h-full lg:flex">
<!-- Mega menus -->
<div class="ml-8 my-2">
<div class="flex h-full justify-center space-x-8">
<a href="#"
class="flex items-center text-base font-medium text-zinc-700 hover:text-zinc-900 hover:bg-zinc-100 rounded-md px-2 py-1">Start</a>
<a href="#"
class="flex items-center text-base font-medium text-zinc-700 hover:text-zinc-900 hover:bg-zinc-100 rounded-md px-2 py-1">About</a>
<a href="#"
class="flex items-center text-base font-medium text-zinc-700 hover:text-zinc-900 hover:bg-zinc-100 rounded-md px-2 py-1">Company</a>
<a href="#"
class="flex items-center text-base font-medium text-zinc-700 hover:text-zinc-900 hover:bg-zinc-100 rounded-md px-2 py-1">Stores</a>
<a href="#"
class="flex items-center text-base font-medium text-zinc-700 hover:text-zinc-900 hover:bg-zinc-100 rounded-md px-2 py-1">Contact</a>
</div>
</div>
</div>
<!-- Mobile menu and search (lg-) -->
<div class="flex flex-1 items-center lg:hidden">
<!-- Mobile menu toggle, controls the 'mobileMenuOpen' state. -->
<button type="button"
class="-ml-2 rounded-md bg-white p-2 text-zinc-400 pointer-events-auto cursor-pointer"
@click="mobileMenuOpen = true">
<span class="sr-only">Open menu</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</button>
<!-- Search -->
<a href="#" class="ml-2 p-2 text-zinc-400 hover:text-zinc-500">
<span class="sr-only">Search</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</a>
</div>
<!-- Logo (lg-) -->
<a href="#" class="lg:hidden">
<span class="sr-only">Your Company</span>
<img src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
alt="" class="h-8 w-auto">
</a>
<div class="flex flex-1 items-center justify-end">
<div class="flex items-center lg:ml-8">
<div class="flex space-x-8">
<div class="hidden lg:flex">
<a href="#" class="-m-2 p-2 text-zinc-400 hover:text-zinc-500">
<span class="sr-only">Search</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" aria-hidden="true"
data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</a>
</div>
<div class="flex">
<a href="#" class="-m-2 p-2 text-zinc-400 hover:text-zinc-500">
<span class="sr-only">Account</span>
<svg class="size-6" fill="none" viewBox="0 0 24 24"
stroke-width="1.5" stroke="currentColor" aria-hidden="true"
data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
</svg>
</a>
</div>
</div>
<span class="mx-4 h-6 w-px bg-zinc-200 lg:mx-6" aria-hidden="true"></span>
<div class="flow-root">
<a href="#" class="group -m-2 flex items-center p-2">
<svg class="size-6 shrink-0 text-zinc-400 group-hover:text-zinc-500"
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" aria-hidden="true" data-slot="icon">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
<span
class="ml-2 text-sm font-medium text-zinc-700 group-hover:text-zinc-800">0</span>
<span class="sr-only">items in cart, view bag</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
</header>

12
resources/views/web/layouts/web-master.blade.php
View file

@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="description" content="@yield('meta_description', $domainName ?? config('app.name', 'Laravel'))">
<title>@yield('title', $domainName ?? config('app.name', 'Laravel'))</title>
@ -19,7 +20,12 @@
$theme = config('app.theme', 'businessportal24');
@endphp
@vite([\App\Helpers\ThemeHelper::getThemeCssPath(), 'resources/js/app.js'], 'build/' . $theme)
@vite([\App\Helpers\ThemeHelper::getThemeCssPath(), 'resources/js/app.js'], $domainConfig['assets_dir'] ?? 'build/web')
@if (($theme ?? null) === 'businessportal24')
<link rel="preconnect" href="https://fonts.bunny.net" crossorigin>
<link href="https://fonts.bunny.net/css?family=inter-tight:400,500,600,700|source-serif-4:400,500,600,700|jetbrains-mono:400,500,600" rel="stylesheet" />
@endif
<!-- Sticky Header Script -->
<script>
@ -66,9 +72,7 @@
@stack('styles')
<!-- Domain-spezifische Fonts -->
@if ($font === 'Montserrat')
<link href="https://fonts.bunny.net/css?family=montserrat:400,500,600,700" rel="stylesheet" />
@else
@if (($theme ?? null) !== 'businessportal24')
<link href="https://fonts.bunny.net/css?family=montserrat:400,500,600,700" rel="stylesheet" />
@endif
</head>

104
resources/views/web/newsrooms.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -38,23 +38,23 @@
</section>
<!-- What is a Newsroom Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Was ist ein Newsroom?
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400">
<p class="text-lg text-zinc-600 dark:text-zinc-400">
Ihre digitale Pressezentrale für professionelle Unternehmenskommunikation
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<p class="text-lg text-zinc-900 dark:text-zinc-100 leading-relaxed mb-6">
Ein Newsroom ist Ihre dedizierte Unternehmensseite auf Business Portal, wo alle Ihre Pressemitteilungen gebündelt und professionell präsentiert werden. Journalisten, Partner und Interessenten finden hier alle relevanten Informationen zu Ihrem Unternehmen auf einen Blick.
</p>
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed">
<p class="text-lg text-zinc-900 dark:text-zinc-100 leading-relaxed">
Mit Ihrem individuellen Newsroom bauen Sie Vertrauen auf und schaffen eine zentrale Anlaufstelle für alle, die sich über Ihr Unternehmen informieren möchten.
</p>
</div>
@ -63,104 +63,104 @@
</section>
<!-- Features Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Newsroom Features
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Professionelle Features für Ihre Unternehmenskommunikation
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
<!-- Feature 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Individuelles Branding
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Gestalten Sie Ihren Newsroom mit Ihrem Logo, Unternehmensfarben und individuellen Inhalten.
</p>
</div>
<!-- Feature 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Zentrale Verwaltung
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Alle Pressemitteilungen chronologisch sortiert und nach Kategorien filterbar an einem Ort.
</p>
</div>
<!-- Feature 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
SEO-Optimiert
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Ihr Newsroom wird von Suchmaschinen indexiert und verbessert Ihre Online-Sichtbarkeit.
</p>
</div>
<!-- Feature 4 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 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 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Analytics & Insights
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Detaillierte Statistiken zu Besuchern, Views und Engagement Ihrer Pressemitteilungen.
</p>
</div>
<!-- Feature 5 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Medien-Kontakte
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Hinterlegen Sie Pressekontakte und ermöglichen Sie direkte Anfragen von Journalisten.
</p>
</div>
<!-- Feature 6 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mb-4">
<svg class="h-8 w-8 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.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
RSS-Feeds
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Automatische RSS-Feeds ermöglichen einfaches Abonnieren Ihrer Neuigkeiten.
</p>
</div>
@ -169,24 +169,24 @@
</section>
<!-- Pricing Tiers Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Newsroom Pakete
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Wählen Sie das passende Paket für Ihre Anforderungen
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
<!-- Basic Newsroom -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 hover:shadow-lg transition-all">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 hover:shadow-lg transition-all">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
Basic Newsroom
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Inklusive im Free-Tarif
</p>
<ul class="space-y-3 mb-6">
@ -194,32 +194,32 @@
<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-gray-600 dark:text-gray-400">Standard-Design</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Standard-Design</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-gray-600 dark:text-gray-400">Alle Pressemitteilungen</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Alle 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-gray-600 dark:text-gray-400">RSS-Feed</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">RSS-Feed</span>
</li>
</ul>
</div>
<!-- Professional Newsroom -->
<div class="bg-white dark:bg-gray-900 rounded-xl border-2 border-[var(--color-primary)] p-8 hover:shadow-lg transition-all relative">
<div class="bg-white dark:bg-zinc-900 rounded-xl border-2 border-[var(--color-primary)] p-8 hover:shadow-lg transition-all relative">
<div class="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] text-white text-sm font-medium rounded-full">
Beliebt
</div>
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
Professional Newsroom
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Professional-Tarif
</p>
<ul class="space-y-3 mb-6">
@ -227,35 +227,35 @@
<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-gray-600 dark:text-gray-400">Individuelles Branding</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Individuelles Branding</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-gray-600 dark:text-gray-400">Custom Domain</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Custom Domain</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-gray-600 dark:text-gray-400">Erweiterte Analytics</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Erweiterte 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-gray-600 dark:text-gray-400">Medien-Bibliothek</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Medien-Bibliothek</span>
</li>
</ul>
</div>
<!-- Enterprise Newsroom -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 hover:shadow-lg transition-all">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 hover:shadow-lg transition-all">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-2">
Enterprise Newsroom
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Enterprise-Tarif
</p>
<ul class="space-y-3 mb-6">
@ -263,25 +263,25 @@
<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-gray-600 dark:text-gray-400">White Label Lösung</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">White Label Lösung</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-gray-600 dark:text-gray-400">API-Zugang</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">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-gray-600 dark:text-gray-400">Prioritäts-Support</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">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-gray-600 dark:text-gray-400">Individuelle Features</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Individuelle Features</span>
</li>
</ul>
</div>
@ -303,7 +303,7 @@
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
Erstellen Sie in wenigen Minuten Ihren professionellen Unternehmens-Newsroom
</p>
<a href="/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
<a href="/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Jetzt kostenlos starten
</a>
</div>

50
resources/views/web/partner.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
@ -24,54 +24,54 @@
</section>
<!-- Partner Categories Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Medienpartner
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400">
<p class="text-lg text-zinc-600 dark:text-zinc-400">
Führende Medien und Verlage im DACH-Raum
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Partner 1</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Partner 1</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Partner 2</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Partner 2</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Partner 3</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Partner 3</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Partner 4</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Partner 4</span>
</div>
</div>
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Technologie-Partner
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400">
<p class="text-lg text-zinc-600 dark:text-zinc-400">
Innovative Technologie-Unternehmen
</p>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Tech Partner 1</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Tech Partner 1</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Tech Partner 2</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Tech Partner 2</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Tech Partner 3</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Tech Partner 3</span>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-gray-600 dark:text-gray-400 font-semibold">Tech Partner 4</span>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 flex items-center justify-center hover:shadow-lg transition-all">
<span class="text-zinc-600 dark:text-zinc-400 font-semibold">Tech Partner 4</span>
</div>
</div>
</div>
@ -79,13 +79,13 @@
</section>
<!-- Partner werden Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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="max-w-4xl mx-auto text-center">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Partner werden
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400 mb-8">
<p class="text-lg text-zinc-600 dark:text-zinc-400 mb-8">
Interessiert an einer Partnerschaft? Kontaktieren Sie uns für weitere Informationen.
</p>
<a href="/kontakt" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all" style="background: var(--gradient-hero);">

138
resources/views/web/preise.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -36,22 +36,22 @@
</section>
<!-- Pricing Cards -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 flex flex-col transition-all duration-300 hover:shadow-lg">
<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-gray-900 dark:text-gray-100 mb-2">
<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-gray-900 dark:text-gray-100">
<span class="text-4xl font-bold text-zinc-900 dark:text-zinc-100">
0€
</span>
<span class="text-gray-600 dark:text-gray-400">kostenlos</span>
<span class="text-zinc-600 dark:text-zinc-400">kostenlos</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Ideal für kleinere Unternehmen und Start-ups
</p>
</div>
@ -61,56 +61,56 @@
<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-gray-900 dark:text-gray-100">1 Pressemitteilung pro Monat</span>
<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-gray-900 dark:text-gray-100">Standard-Veröffentlichung</span>
<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-gray-900 dark:text-gray-100">Basis-Statistiken</span>
<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-gray-900 dark:text-gray-100">E-Mail-Support</span>
<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-gray-900 dark:text-gray-100">Community-Forum Zugang</span>
<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-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
<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-gray-900 rounded-xl border-2 border-[var(--color-primary)] p-8 flex flex-col relative shadow-lg transition-all duration-300 hover:shadow-xl">
<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-gray-900 dark:text-gray-100 mb-2">
<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-gray-900 dark:text-gray-100">
<span class="text-4xl font-bold text-zinc-900 dark:text-zinc-100">
99€
</span>
<span class="text-gray-600 dark:text-gray-400">pro Monat</span>
<span class="text-zinc-600 dark:text-zinc-400">pro Monat</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Für wachsende Unternehmen mit regelmäßigem Kommunikationsbedarf
</p>
</div>
@ -120,43 +120,43 @@
<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-gray-900 dark:text-gray-100">10 Pressemitteilungen pro Monat</span>
<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-gray-900 dark:text-gray-100">Premium-Platzierung</span>
<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-gray-900 dark:text-gray-100">Erweiterte Statistiken & Analytics</span>
<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-gray-900 dark:text-gray-100">Medienkit-Hosting</span>
<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-gray-900 dark:text-gray-100">Prioritäts-Support</span>
<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-gray-900 dark:text-gray-100">Social Media Distribution</span>
<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-gray-900 dark:text-gray-100">Eigener Newsroom</span>
<span class="text-sm text-zinc-900 dark:text-zinc-100">Eigener Newsroom</span>
</li>
</ul>
@ -166,20 +166,20 @@
</div>
<!-- Enterprise Plan -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 flex flex-col transition-all duration-300 hover:shadow-lg">
<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-gray-900 dark:text-gray-100 mb-2">
<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-gray-900 dark:text-gray-100">
<span class="text-4xl font-bold text-zinc-900 dark:text-zinc-100">
Individuell
</span>
</div>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3">
auf Anfrage
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Maßgeschneiderte Lösungen für große Organisationen
</p>
</div>
@ -189,53 +189,53 @@
<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-gray-900 dark:text-gray-100">Unbegrenzte Pressemitteilungen</span>
<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-gray-900 dark:text-gray-100">Top-Platzierung garantiert</span>
<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-gray-900 dark:text-gray-100">White-Label Newsroom</span>
<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-gray-900 dark:text-gray-100">Dedizierter Account Manager</span>
<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-gray-900 dark:text-gray-100">API-Zugang</span>
<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-gray-900 dark:text-gray-100">Custom Integrationen</span>
<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-gray-900 dark:text-gray-100">Individuelle SLAs</span>
<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-gray-900 dark:text-gray-100">Schulungen & Workshops</span>
<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-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
<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>
@ -244,86 +244,86 @@
</section>
<!-- Add-ons Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Zusätzliche Services
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-all duration-300 hover:shadow-lg">
<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-gray-900 dark:text-gray-100 mb-2">
<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-gray-600 dark:text-gray-400">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-all duration-300 hover:shadow-lg">
<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-gray-900 dark:text-gray-100 mb-2">
<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-gray-600 dark:text-gray-400">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-all duration-300 hover:shadow-lg">
<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-gray-900 dark:text-gray-100 mb-2">
<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-gray-600 dark:text-gray-400">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-all duration-300 hover:shadow-lg">
<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-gray-900 dark:text-gray-100 mb-2">
<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-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Detaillierte Auswertungen mit Reichweite, Engagement und Conversion-Tracking
</p>
</div>
@ -332,45 +332,45 @@
</section>
<!-- FAQ Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<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-gray-900 dark:text-gray-100 mb-8 text-center">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<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-gray-600 dark:text-gray-400">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<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-gray-600 dark:text-gray-400">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<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-gray-600 dark:text-gray-400">
<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-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 transition-colors duration-200">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<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-gray-600 dark:text-gray-400">
<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>
@ -388,7 +388,7 @@
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-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
<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">

78
resources/views/web/presse.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
@ -24,38 +24,38 @@
</section>
<!-- Press Contact Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Pressekontakt
</h2>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 transition-colors duration-200">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Presseabteilung</h3>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Presseabteilung</h3>
<div class="space-y-3">
<div class="flex items-start gap-3">
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">presse@businessportal.de</span>
<span class="text-zinc-600 dark:text-zinc-400">presse@businessportal.de</span>
</div>
<div class="flex items-start gap-3">
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
<span class="text-gray-600 dark:text-gray-400">+49 (0) 30 1234567-89</span>
<span class="text-zinc-600 dark:text-zinc-400">+49 (0) 30 1234567-89</span>
</div>
</div>
</div>
<div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4">Ansprechpartnerin</h3>
<p class="text-gray-600 dark:text-gray-400 mb-2">Lisa Müller</p>
<p class="text-sm text-gray-500 dark:text-gray-500">Head of Communications</p>
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Ansprechpartnerin</h3>
<p class="text-zinc-600 dark:text-zinc-400 mb-2">Lisa Müller</p>
<p class="text-sm text-zinc-500 dark:text-zinc-500">Head of Communications</p>
</div>
</div>
</div>
@ -64,23 +64,23 @@
</section>
<!-- Press Releases Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Aktuelle Pressemitteilungen
</h2>
</div>
<div class="space-y-6">
<!-- Press Release 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="text-sm text-gray-500 dark:text-gray-500 mb-2">15. Januar 2025</div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-3">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="text-sm text-zinc-500 dark:text-zinc-500 mb-2">15. Januar 2025</div>
<h3 class="font-semibold text-lg text-zinc-900 dark:text-zinc-100 mb-3">
Business Portal erreicht 15.000 registrierte Unternehmen
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Die führende Plattform für Unternehmenskommunikation im DACH-Raum verzeichnet weiteres Wachstum...
</p>
<a href="#" class="text-[var(--color-primary)] hover:underline text-sm font-medium">
@ -89,12 +89,12 @@
</div>
<!-- Press Release 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="text-sm text-gray-500 dark:text-gray-500 mb-2">10. Dezember 2024</div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-3">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="text-sm text-zinc-500 dark:text-zinc-500 mb-2">10. Dezember 2024</div>
<h3 class="font-semibold text-lg text-zinc-900 dark:text-zinc-100 mb-3">
Neue KI-Features für optimierte Presseveröffentlichungen
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Business Portal integriert fortschrittliche KI-Technologie zur Optimierung von Pressemitteilungen...
</p>
<a href="#" class="text-[var(--color-primary)] hover:underline text-sm font-medium">
@ -103,12 +103,12 @@
</div>
<!-- Press Release 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="text-sm text-gray-500 dark:text-gray-500 mb-2">5. November 2024</div>
<h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100 mb-3">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="text-sm text-zinc-500 dark:text-zinc-500 mb-2">5. November 2024</div>
<h3 class="font-semibold text-lg text-zinc-900 dark:text-zinc-100 mb-3">
Business Portal erweitert API-Funktionen
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Neue REST-API ermöglicht nahtlose Integration in bestehende Unternehmens-Systeme...
</p>
<a href="#" class="text-[var(--color-primary)] hover:underline text-sm font-medium">
@ -121,22 +121,22 @@
</section>
<!-- Press Kit Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Presse-Kit
</h2>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Logos, Bilder und Materialien zum Download
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Logos</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Logos</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Offizielle Logos in verschiedenen Formaten und Farben
</p>
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:underline text-sm font-medium">
@ -144,9 +144,9 @@
</a>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Pressemappen</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Pressemappen</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Umfassende Informationen über Business Portal
</p>
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:underline text-sm font-medium">
@ -154,9 +154,9 @@
</a>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Screenshots</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Screenshots</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Hochauflösende Screenshots der Plattform
</p>
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:underline text-sm font-medium">
@ -164,9 +164,9 @@
</a>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Factsheet</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Factsheet</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Kompakte Übersicht mit Zahlen und Fakten
</p>
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:underline text-sm font-medium">

133
resources/views/web/presseecho.blade copy.php
View file

@ -1,133 +0,0 @@
@extends('web.layouts.web-master')
@section('title', 'Pressemitteilungen - Presseecho')
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<!-- Burger Menu Component -->
<livewire:web.burger-menu />
<!-- Header Component -->
<livewire:web.header />
<!-- Filter Bar Component -->
<livewire:web.filter-bar />
<!-- Hero Banner -->
<section class="relative overflow-hidden text-white py-12 animate-fade-in" style="background: var(--gradient-hero);">
<div class="container mx-auto px-4">
<div class="max-w-4xl">
<h1 class="text-3xl md:text-4xl lg:text-5xl text-white/90 font-bold mb-4 animate-fade-in-up">
Aktuelle Pressemitteilungen
</h1>
<p class="text-base md:text-lg text-white/90 animate-fade-in-up animation-delay-200">
Die führende Plattform für Unternehmensnachrichten aus Deutschland, Österreich und der Schweiz
</p>
</div>
</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" 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)" />
</svg>
</div>
</section>
<!-- Featured Section -->
<section
class="bg-gray-50/50 dark:bg-gray-900/50 border-b border-gray-200 dark:border-gray-800 py-8 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between mb-6">
<h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
<span
class="w-1 h-6 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Top-Meldungen
</h2>
<span
class="text-xs text-amber-700 dark:text-amber-300 bg-amber-50 dark:bg-amber-900/30 border border-amber-200 dark:border-amber-700 px-2 py-1 rounded">Anzeige</span>
</div>
<livewire:web.featured-releases />
</div>
</section>
<!-- Main Content Grid -->
<section class="py-8 bg-white dark:bg-gray-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="flex items-center justify-between mb-6">
<h2 class="text-sm font-medium text-gray-600 dark:text-gray-400 flex items-center gap-2">
<span class="w-2 h-2 bg-[var(--color-primary)] rounded-full"></span>
247 Pressemitteilungen
</h2>
</div>
<livewire:web.press-releases-grid />
<!-- Pagination -->
<nav class="flex justify-center mt-12" aria-label="Seitennummerierung">
<div class="flex items-center gap-2">
<button
class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
disabled aria-label="Vorherige Seite">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
</path>
</svg>
</button>
<button
class="px-4 py-2 text-sm font-medium text-white rounded-lg shadow-md hover:shadow-lg transition-all"
style="background: var(--gradient-hero);" aria-current="page">
1
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
2
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
3
</button>
<span class="px-2 text-gray-600 dark:text-gray-400">...</span>
<button
class="px-4 py-2 text-sm font-medium text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">
10
</button>
<button
class="px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
aria-label="Nächste Seite">
<svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
</path>
</svg>
</button>
</div>
</nav>
</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'] ?? '#345636' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
}
/* Alpine.js Cloak */
[x-cloak] {
display: none !important;
}
</style>
@endpush

370
resources/views/web/presseecho.blade.php
View file

@ -1,362 +1,42 @@
@extends('web.layouts.web-master')
@section('title', 'Presseecho - Ihr Magazin für Wirtschaft & Industrie')
@php
$brand = config('domains.domains.presseecho.brand', []);
@endphp
@section('title', $brand['meta_title'] ?? 'Aktuelle Pressemitteilungen aus Wirtschaft & Industrie – presseecho')
@section('meta_description', $brand['meta_description'] ?? 'Redaktionell kuratierte Pressemitteilungen aus Wirtschaft und Industrie im DACH-Raum.')
@section('content')
<x-web.site-header />
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<!-- Burger Menu Component -->
<livewire:web.burger-menu />
<main class="bg-bg text-ink">
<x-web.focus-hero
:lead-release="$leadRelease ?? null"
:side-releases="$sideReleases ?? []" />
<!-- Header Component -->
<livewire:web.header />
<section class="max-w-layout mx-auto px-8 mt-16">
<div class="grid gap-9 grid-cols-1 lg:grid-cols-[1.7fr_1fr]">
<livewire:web.press-release-feed :portal="\App\Enums\Portal::Presseecho->value" />
<!-- Main Navigation for Presseecho -->
<nav class="sticky top-0 z-40 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 shadow-sm backdrop-blur-sm transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="flex items-center justify-center gap-8 h-14">
<a href="/themendossiers"
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
Themendossiers
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
</a>
<span class="text-gray-300 dark:text-gray-700">|</span>
<a href="/fachbereiche"
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
Fachbereiche
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
</a>
<span class="text-gray-300 dark:text-gray-700">|</span>
<a href="/experten"
class="text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-[var(--color-primary)] dark:hover:text-[var(--color-secondary)] transition-colors relative group py-4">
Experten
<span class="absolute bottom-0 left-0 w-0 h-0.5 bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] group-hover:w-full transition-all duration-300"></span>
</a>
</div>
</div>
</nav>
<!-- Hero Section - Recherche-fokussierte Überschrift -->
<section class="bg-gradient-to-br from-[var(--color-primary)]/5 via-white to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:via-gray-950 dark:to-[var(--color-secondary)]/10 py-12 border-b border-gray-100 dark:border-gray-900">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 dark:text-gray-100 mb-4 leading-tight">
Exklusive Branchenanalysen & Fachmeldungen<br class="hidden md:block">
<span class="text-[var(--color-primary)]">für Ihre Recherche</span>
</h1>
<p class="text-lg md:text-xl text-gray-600 dark:text-gray-400 leading-relaxed">
Kuratierte Wirtschaftsinformationen für Journalisten, Analysten und Entscheider
</p>
</div>
<aside class="flex flex-col gap-9">
<x-web.most-read :releases="$mostReadReleases ?? []" />
<x-web.publisher-cta />
<x-web.active-newsrooms :companies="$activeNewsrooms ?? []" />
</aside>
</div>
</section>
<!-- Block 1: Highlights der Woche (Hero Section) -->
<section class="relative overflow-hidden bg-white dark:bg-gray-950 py-12 md:py-16 animate-fade-in">
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="mb-8">
<h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
<span class="w-2 h-10 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Highlights der Woche
</h2>
<p class="text-gray-600 dark:text-gray-400 ml-5">Exklusive Einblicke und Top-Analysen</p>
</div>
<x-web.industry-spotlight />
<!-- Hero Article -->
<div class="card card-hover overflow-hidden group cursor-pointer">
<div class="grid md:grid-cols-2 gap-6">
<!-- Image -->
<div class="relative h-64 md:h-96 overflow-hidden bg-gray-100 dark:bg-gray-800">
<img src="https://placehold.co/800x600/345636/ffffff?text=Hero+Interview"
alt="Hero Article"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute top-4 left-4">
<span class="badge badge-primary shadow-md">
<svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path>
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path>
</svg>
Exklusiv-Interview
</span>
</div>
</div>
<x-web.events-week />
<!-- Content -->
<div class="flex flex-col justify-center p-6 md:p-8">
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 mb-4">
<span class="badge badge-secondary">KI & Innovation</span>
<span>•</span>
<time datetime="2024-10-17">17. Oktober 2024</time>
</div>
<x-web.industry-index :industries="($industryIndex ?? collect())->isNotEmpty() ? $industryIndex->toArray() : null" />
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4 group-hover:text-[var(--color-primary)] transition-colors">
Die Zukunft der KI im deutschen Mittelstand
</h3>
<x-web.newsletter-strip />
<p class="text-gray-700 dark:text-gray-300 text-base md:text-lg mb-6 line-clamp-3">
Im exklusiven Interview spricht Dr. Maria Schmidt, Leiterin des KI-Instituts München, über die Chancen und Herausforderungen der künstlichen Intelligenz für mittelständische Unternehmen.
</p>
<div class="flex items-center gap-4">
<div class="flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold">
MS
</div>
<div>
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">Dr. Maria Schmidt</p>
<p class="text-xs text-gray-600 dark:text-gray-400">Expertin für KI & Innovation</p>
</div>
</div>
</div>
<div class="mt-6">
<a href="#" class="btn-primary inline-flex items-center gap-2">
Interview lesen
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Block 2: Neueste Analysen & Experten-Interviews -->
<section class="py-12 md:py-16 bg-gray-50/50 dark:bg-gray-900/50">
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="mb-8">
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
<span class="w-1.5 h-8 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Neueste Analysen & Experten-Interviews
</h2>
<p class="text-gray-600 dark:text-gray-400 ml-5">Fundierte Einschätzungen von Branchenexperten</p>
</div>
<!-- Grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Article Card 1 -->
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
<img src="https://placehold.co/600x400/345636/ffffff?text=Analyse+1"
alt="Analyse 1"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute top-3 left-3">
<span class="badge badge-primary shadow-md text-xs">Analyse</span>
</div>
</div>
<div class="p-5">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
<span class="badge badge-secondary text-xs">Industrie 4.0</span>
<span>•</span>
<time datetime="2024-10-16">16. Okt 2024</time>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
Nachhaltigkeit in der Produktion: Neue Wege für die Industrie
</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
Eine umfassende Analyse zeigt, wie deutsche Unternehmen den Wandel zur nachhaltigen Produktion meistern.
</p>
<div class="flex items-center gap-2 text-xs">
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
TM
</div>
<span class="text-gray-600 dark:text-gray-400">Thomas Müller</span>
</div>
</div>
</article>
<!-- Article Card 2 -->
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
<img src="https://placehold.co/600x400/345636/ffffff?text=Interview+2"
alt="Interview 2"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute top-3 left-3">
<span class="badge badge-primary shadow-md text-xs">Interview</span>
</div>
</div>
<div class="p-5">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
<span class="badge badge-secondary text-xs">Digitalisierung</span>
<span>•</span>
<time datetime="2024-10-15">15. Okt 2024</time>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
Cybersecurity: "Prävention beginnt beim Menschen"
</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
IT-Sicherheitsexperte Klaus Weber erklärt, warum Schulung wichtiger ist als Technik.
</p>
<div class="flex items-center gap-2 text-xs">
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
KW
</div>
<span class="text-gray-600 dark:text-gray-400">Klaus Weber</span>
</div>
</div>
</article>
<!-- Article Card 3 -->
<article class="card card-hover overflow-hidden group cursor-pointer">
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-800">
<img src="https://placehold.co/600x400/345636/ffffff?text=Analyse+3"
alt="Analyse 3"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105">
<div class="absolute top-3 left-3">
<span class="badge badge-primary shadow-md text-xs">Analyse</span>
</div>
</div>
<div class="p-5">
<div class="flex items-center gap-2 text-xs text-gray-600 dark:text-gray-400 mb-3">
<span class="badge badge-secondary text-xs">Wirtschaft</span>
<span>•</span>
<time datetime="2024-10-14">14. Okt 2024</time>
</div>
<h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2 group-hover:text-[var(--color-primary)] transition-colors line-clamp-2">
Fachkräftemangel: Wie Unternehmen gegensteuern können
</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3 mb-4">
Neue Strategien im Recruiting und der Mitarbeiterbindung zeigen erste Erfolge.
</p>
<div class="flex items-center gap-2 text-xs">
<div class="w-6 h-6 rounded-full bg-gradient-to-br from-[var(--color-primary)] to-[var(--color-secondary)] flex items-center justify-center text-white font-semibold text-[10px]">
AS
</div>
<span class="text-gray-600 dark:text-gray-400">Anna Schmidt</span>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Block 3: Im Fokus: Themendossiers -->
<section class="py-12 md:py-16 bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 dark:from-[var(--color-primary)]/10 dark:to-[var(--color-secondary)]/10 border-y border-[var(--color-primary)]/10">
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="mb-8 text-center">
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
Im Fokus: Themendossiers
</h2>
<p class="text-gray-600 dark:text-gray-400">Umfassende Recherchen zu den wichtigsten Branchenthemen</p>
</div>
<!-- Dossier Grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Dossier 1 -->
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
<div class="relative h-56 overflow-hidden">
<img src="https://placehold.co/600x400/345636/ffffff?text=KI+in+der+Industrie"
alt="KI Dossier"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
12 Artikel
</span>
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
KI in der Industrie
</h3>
<p class="text-sm text-white/90 line-clamp-2">
Alle Facetten der künstlichen Intelligenz in Produktion und Logistik
</p>
</div>
</div>
</article>
<!-- Dossier 2 -->
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
<div class="relative h-56 overflow-hidden">
<img src="https://placehold.co/600x400/345636/ffffff?text=Energiewende"
alt="Energiewende Dossier"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
8 Artikel
</span>
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
Energiewende 2024
</h3>
<p class="text-sm text-white/90 line-clamp-2">
Wie Unternehmen die Transformation zur Klimaneutralität meistern
</p>
</div>
</div>
</article>
<!-- Dossier 3 -->
<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-gray-900 shadow-lg hover:shadow-2xl transition-all duration-300">
<div class="relative h-56 overflow-hidden">
<img src="https://placehold.co/600x400/345636/ffffff?text=New+Work"
alt="New Work Dossier"
class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
<div class="absolute bottom-0 left-0 right-0 p-5">
<span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
15 Artikel
</span>
<h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
New Work & Kultur
</h3>
<p class="text-sm text-white/90 line-clamp-2">
Moderne Arbeitsmodelle und ihre Auswirkungen auf Unternehmen
</p>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- Block 4: Ausgewählte Fachmeldungen -->
<section class="py-12 md:py-16 bg-white dark:bg-gray-950">
<div class="container mx-auto px-4">
<!-- Section Header -->
<div class="mb-8">
<h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2 flex items-center gap-3">
<span class="w-1.5 h-8 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Ausgewählte Fachmeldungen
</h2>
<p class="text-gray-600 dark:text-gray-400 ml-5">Redaktionell kuratierte Pressemitteilungen aus Wirtschaft und Industrie</p>
</div>
<!-- Press Releases Grid -->
<livewire:web.press-releases-grid />
<!-- Load More Button -->
<div class="mt-12 text-center">
<button class="btn-primary px-8 py-3 text-base inline-flex items-center gap-2">
Weitere Meldungen laden
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
</div>
</div>
</section>
<!-- Footer Component -->
<livewire:web.footer />
<x-web.quality-summary :stats="$homeStats ?? []" />
</main>
<x-web.site-footer />
@endsection
@push('styles')
<style>
/* Domain-spezifische Color-Variablen für Inline-Styles */
:root {
--color-primary: {{ $domainConfig['color_scheme']['primary'] ?? '#345636' }};
--color-secondary: {{ $domainConfig['color_scheme']['secondary'] ?? '#6b8f71' }};
}
/* Alpine.js Cloak */
[x-cloak] {
display: none !important;
}
</style>
@endpush

124
resources/views/web/release-detail.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -14,46 +14,46 @@
<!-- Article Content -->
<article class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Breadcrumbs -->
<nav class="text-sm text-gray-600 dark:text-gray-400 mb-6">
<a href="/" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors">Start</a>
<nav class="text-sm text-zinc-600 dark:text-zinc-400 mb-6">
<a href="/" class="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">Start</a>
<span class="mx-2">›</span>
<a href="/kategorie/it" class="hover:text-gray-900 dark:hover:text-gray-100 transition-colors">IT & Software</a>
<a href="/kategorie/it" class="hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors">IT & Software</a>
<span class="mx-2">›</span>
<span class="text-gray-900 dark:text-gray-100">KI-Revolution in Deutschland</span>
<span class="text-zinc-900 dark:text-zinc-100">KI-Revolution in Deutschland</span>
</nav>
<!-- Title -->
<h1 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-gray-100 mb-4 leading-tight">
<h1 class="text-3xl md:text-4xl font-bold text-zinc-900 dark:text-zinc-100 mb-4 leading-tight">
KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung
</h1>
<!-- Subtitle -->
<p class="text-xl text-gray-600 dark:text-gray-400 mb-6">
<p class="text-xl text-zinc-600 dark:text-zinc-400 mb-6">
Neue Studie zeigt massive Investitionen in künstliche Intelligenz für 2025
</p>
<!-- Meta Info -->
<div class="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-gray-200 dark:border-gray-800">
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-zinc-200 dark:border-zinc-800">
<div class="flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100">
<svg class="h-4 w-4 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="font-medium">Berlin</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100">
<svg class="h-4 w-4 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
</svg>
<span>6. Oktober 2025</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100">
<svg class="h-4 w-4 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>14:30 Uhr</span>
</div>
<div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center gap-2 text-sm text-zinc-600 dark:text-zinc-400">
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
@ -64,11 +64,11 @@
<!-- Key Facts Box - Desktop Side -->
<div class="lg:float-right lg:ml-8 lg:w-80 mb-8">
<div class="bg-gradient-to-br from-[var(--color-primary)]/5 to-[var(--color-secondary)]/5 border border-[var(--color-primary)]/20 dark:border-[var(--color-primary)]/30 rounded-xl p-6 transition-colors duration-200">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-4 flex items-center gap-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-4 flex items-center gap-2">
<span class="w-1 h-5 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] rounded-full"></span>
Key Facts
</h3>
<ul class="space-y-3 text-sm text-gray-900 dark:text-gray-100">
<ul class="space-y-3 text-sm text-zinc-900 dark:text-zinc-100">
<li class="flex items-start gap-2">
<span class="text-[var(--color-primary)] mt-0.5">•</span>
<span>15 Milliarden Euro Investitionsvolumen geplant</span>
@ -95,34 +95,34 @@
<!-- Article Content -->
<div class="prose prose-lg max-w-none">
<p class="text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
<p class="text-zinc-900 dark:text-zinc-100 leading-relaxed mb-6">
<strong>Berlin</strong> – Eine umfassende Studie des TechVision Analytics Instituts zeigt einen beispiellosen Wandel in der deutschen Unternehmenslandschaft: Für das Jahr 2025 planen Unternehmen im DACH-Raum Investitionen in Höhe von über 15 Milliarden Euro in KI-gestützte Automatisierungslösungen.
</p>
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mt-8 mb-4">
<h2 class="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 mt-8 mb-4">
Paradigmenwechsel in der Digitalisierung
</h2>
<p class="text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
<p class="text-zinc-900 dark:text-zinc-100 leading-relaxed mb-6">
Die Ergebnisse der Studie, für die über 1.200 Unternehmen verschiedener Größen und Branchen befragt wurden, zeichnen ein klares Bild: Künstliche Intelligenz hat sich vom Experimentierfeld zur strategischen Priorität entwickelt. 78% der befragten Unternehmen geben an, dass KI-gestützte Automatisierung fester Bestandteil ihrer Digitalisierungsstrategie ist.
</p>
<blockquote class="border-l-4 border-[var(--color-primary)] pl-6 my-8 italic text-lg text-gray-600 dark:text-gray-400">
<blockquote class="border-l-4 border-[var(--color-primary)] pl-6 my-8 italic text-lg text-zinc-600 dark:text-zinc-400">
"Wir erleben einen fundamentalen Wandel. KI ist nicht länger eine Zukunftsvision, sondern wird zur Grundlage moderner Geschäftsmodelle. Die Investitionen der kommenden Jahre werden die Wettbewerbsfähigkeit für die nächste Dekade bestimmen."
<footer class="text-sm font-medium text-gray-900 dark:text-gray-100 mt-2 not-italic">
<footer class="text-sm font-medium text-zinc-900 dark:text-zinc-100 mt-2 not-italic">
– Dr. Sarah Müller, Geschäftsführerin TechVision Analytics
</footer>
</blockquote>
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mt-8 mb-4">
<h2 class="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 mt-8 mb-4">
Schwerpunkte der Investitionen
</h2>
<p class="text-gray-900 dark:text-gray-100 leading-relaxed mb-4">
<p class="text-zinc-900 dark:text-zinc-100 leading-relaxed mb-4">
Die geplanten Investitionen konzentrieren sich auf mehrere Kernbereiche:
</p>
<ul class="list-disc pl-6 space-y-2 mb-6 text-gray-900 dark:text-gray-100">
<ul class="list-disc pl-6 space-y-2 mb-6 text-zinc-900 dark:text-zinc-100">
<li>Prozessautomatisierung und intelligente Workflow-Systeme</li>
<li>Predictive Analytics und datengesteuerte Entscheidungsfindung</li>
<li>Kundenservice-Automatisierung durch Chatbots und virtuelle Assistenten</li>
@ -130,20 +130,20 @@
<li>Personalisierte Marketing- und Vertriebsautomatisierung</li>
</ul>
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mt-8 mb-4">
<h2 class="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 mt-8 mb-4">
Produktivitätssteigerung als Hauptmotivation
</h2>
<p class="text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
<p class="text-zinc-900 dark:text-zinc-100 leading-relaxed mb-6">
Die Studie zeigt, dass Unternehmen, die bereits KI-Lösungen implementiert haben, eine durchschnittliche Produktivitätssteigerung von 35% verzeichnen. Gleichzeitig berichten 68% der Befragten von einer verbesserten Mitarbeiterzufriedenheit, da repetitive Aufgaben automatisiert werden und mehr Zeit für kreative und strategische Tätigkeiten bleibt.
</p>
</div>
<!-- Media Section -->
<div class="mt-12 mb-8">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Downloads & Medien</h3>
<h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Downloads & Medien</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-[var(--color-primary)]/10 rounded-lg flex items-center justify-center">
<svg class="h-6 w-6 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -151,12 +151,12 @@
</svg>
</div>
<div class="flex-1">
<p class="font-medium text-gray-900 dark:text-gray-100">Vollständige Studie (PDF)</p>
<p class="text-sm text-gray-600 dark:text-gray-400">2.4 MB</p>
<p class="font-medium text-zinc-900 dark:text-zinc-100">Vollständige Studie (PDF)</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">2.4 MB</p>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 hover:shadow-lg transition-all cursor-pointer">
<div class="flex items-center gap-3">
<div class="w-12 h-12 bg-[var(--color-secondary)]/10 rounded-lg flex items-center justify-center">
<svg class="h-6 w-6 text-[var(--color-secondary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -164,8 +164,8 @@
</svg>
</div>
<div class="flex-1">
<p class="font-medium text-gray-900 dark:text-gray-100">Infografiken (ZIP)</p>
<p class="text-sm text-gray-600 dark:text-gray-400">8.7 MB</p>
<p class="font-medium text-zinc-900 dark:text-zinc-100">Infografiken (ZIP)</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">8.7 MB</p>
</div>
</div>
</div>
@ -173,24 +173,24 @@
</div>
<!-- Contact Box -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 mb-8 transition-colors duration-200">
<h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4">Pressekontakt</h3>
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 mb-8 transition-colors duration-200">
<h3 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Pressekontakt</h3>
<div class="space-y-4">
<div>
<p class="font-medium text-gray-900 dark:text-gray-100">TechVision Analytics GmbH</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Ansprechpartnerin: Dr. Sarah Müller</p>
<p class="font-medium text-zinc-900 dark:text-zinc-100">TechVision Analytics GmbH</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">Ansprechpartnerin: Dr. Sarah Müller</p>
</div>
<div class="space-y-2">
<div class="flex items-center gap-2 text-sm">
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="h-4 w-4 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
<a href="mailto:presse@techvision.de" class="text-[var(--color-primary)] hover:underline">
presse@techvision.de
</a>
</div>
<div class="flex items-center gap-2 text-sm text-gray-900 dark:text-gray-100">
<svg class="h-4 w-4 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="flex items-center gap-2 text-sm text-zinc-900 dark:text-zinc-100">
<svg class="h-4 w-4 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
</svg>
<a href="tel:+493012345678" class="hover:text-[var(--color-primary)] transition-colors">
@ -198,23 +198,23 @@
</a>
</div>
</div>
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 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">
vCard herunterladen
</a>
</div>
</div>
<!-- Company Teaser -->
<div class="bg-gray-50/50 dark:bg-gray-900/50 rounded-xl border border-gray-200 dark:border-gray-800 p-6 mb-8 transition-colors duration-200">
<div class="bg-zinc-50/50 dark:bg-zinc-900/50 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 mb-8 transition-colors duration-200">
<div class="flex items-start gap-4">
<div class="w-16 h-16 bg-white dark:bg-gray-800 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="h-8 w-8 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<div class="w-16 h-16 bg-white dark:bg-zinc-800 rounded-lg flex items-center justify-center flex-shrink-0">
<svg class="h-8 w-8 text-zinc-500 dark:text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
</svg>
</div>
<div class="flex-1">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">TechVision Analytics</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">TechVision Analytics</h3>
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
TechVision Analytics ist ein führendes Forschungsinstitut für Technologie- und Marktanalysen mit Sitz in Berlin. Seit 2015 beraten wir Unternehmen bei strategischen Technologie-Entscheidungen.
</p>
<a href="#" class="inline-flex items-center text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors text-sm font-medium">
@ -225,20 +225,20 @@
</div>
<!-- Utility Bar -->
<div class="flex items-center gap-3 py-6 border-y border-gray-200 dark:border-gray-800">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
<div class="flex items-center gap-3 py-6 border-y border-zinc-200 dark:border-zinc-800">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 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">
<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
</svg>
Teilen
</a>
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 border border-gray-300 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition-all">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 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">
<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"></path>
</svg>
Drucken
</a>
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors ml-auto">
<a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 transition-colors ml-auto">
<svg class="h-4 w-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9"></path>
</svg>
@ -248,21 +248,21 @@
</article>
<!-- Related Articles -->
<section class="bg-gray-50/50 dark:bg-gray-900/50 py-12 mt-8 transition-colors duration-200">
<section class="bg-zinc-50/50 dark:bg-zinc-900/50 py-12 mt-8 transition-colors duration-200">
<div class="container mx-auto px-4 max-w-6xl">
<h2 class="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-6">Ähnliche Meldungen</h2>
<h2 class="text-2xl font-semibold text-zinc-900 dark:text-zinc-100 mb-6">Ähnliche Meldungen</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Related Article 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-5 hover:shadow-lg transition-all">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
IT & Software
</span>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2">
Cloud-Migration: 78% der deutschen Unternehmen setzen auf Hybrid-Cloud
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 line-clamp-2">
Neue Umfrage zeigt: Hybrid-Cloud wird zum Standard für maximale Flexibilität und Sicherheit.
</p>
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors">
@ -271,16 +271,16 @@
</div>
<!-- Related Article 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-5 hover:shadow-lg transition-all">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
IT & Software
</span>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2">
Cybersecurity: Unternehmen verstärken Schutzmaßnahmen gegen Hackerangriffe
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 line-clamp-2">
Investitionen in IT-Sicherheit steigen um durchschnittlich 35%. Neue Standards werden eingeführt.
</p>
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors">
@ -289,16 +289,16 @@
</div>
<!-- Related Article 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-5 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-5 hover:shadow-lg transition-all">
<div class="flex items-center gap-2 mb-3">
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-[var(--color-primary)]/10 text-[var(--color-primary)]">
IT & Software
</span>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2 line-clamp-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2 line-clamp-2">
5G-Rollout beschleunigt: Netzabdeckung erreicht 85% in Deutschland
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3 line-clamp-2">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-3 line-clamp-2">
Mobilfunkanbieter berichten von schnellerem Ausbau. IoT-Anwendungen profitieren enorm.
</p>
<a href="#" class="inline-flex items-center text-sm text-[var(--color-primary)] hover:text-[var(--color-secondary)] transition-colors">

94
resources/views/web/suche.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
@ -23,7 +23,7 @@
<!-- Search Form -->
<form class="animate-fade-in-up animation-delay-300" x-data="{ query: '' }">
<div class="relative">
<svg class="absolute left-6 top-1/2 -translate-y-1/2 h-6 w-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg class="absolute left-6 top-1/2 -translate-y-1/2 h-6 w-6 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
<input
@ -34,7 +34,7 @@
/>
<button
type="submit"
class="absolute right-2 top-1/2 -translate-y-1/2 px-8 py-3 bg-white text-[var(--color-primary)] font-medium rounded-lg hover:bg-gray-100 transition-all shadow-lg"
class="absolute right-2 top-1/2 -translate-y-1/2 px-8 py-3 bg-white text-[var(--color-primary)] font-medium rounded-lg hover:bg-zinc-100 transition-all shadow-lg"
>
Suchen
</button>
@ -45,23 +45,23 @@
</section>
<!-- Search Filters Section -->
<section class="py-8 bg-white dark:bg-gray-950 border-b border-gray-200 dark:border-gray-800 transition-colors duration-200">
<section class="py-8 bg-white dark:bg-zinc-950 border-b border-zinc-200 dark:border-zinc-800 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
<div class="flex flex-wrap gap-3">
<button class="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg text-sm font-medium transition-all">
Alle Kategorien
</button>
<button class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg text-sm font-medium transition-all">
<button class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-lg text-sm font-medium transition-all">
Wirtschaft
</button>
<button class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg text-sm font-medium transition-all">
<button class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-lg text-sm font-medium transition-all">
Technologie
</button>
<button class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg text-sm font-medium transition-all">
<button class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-lg text-sm font-medium transition-all">
Gesundheit
</button>
<button class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-lg text-sm font-medium transition-all">
<button class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-lg text-sm font-medium transition-all">
Mehr...
</button>
</div>
@ -70,7 +70,7 @@
</section>
<!-- Search Results / Placeholder Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-6xl mx-auto">
@ -81,39 +81,39 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Geben Sie einen Suchbegriff ein
</h2>
<p class="text-gray-600 dark:text-gray-400 mb-8 max-w-lg mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 mb-8 max-w-lg mx-auto">
Durchsuchen Sie unsere Datenbank mit über 10.000 Pressemitteilungen nach Stichworten, Unternehmen oder Themen
</p>
<!-- Popular Searches -->
<div class="max-w-2xl mx-auto">
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-4">Beliebte Suchen:</h3>
<h3 class="text-sm font-semibold text-zinc-900 dark:text-zinc-100 mb-4">Beliebte Suchen:</h3>
<div class="flex flex-wrap gap-2 justify-center">
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
<a href="#" class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full text-sm transition-all">
KI & Machine Learning
</a>
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
<a href="#" class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full text-sm transition-all">
Nachhaltigkeit
</a>
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
<a href="#" class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full text-sm transition-all">
E-Mobilität
</a>
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
<a href="#" class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full text-sm transition-all">
Digitalisierung
</a>
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
<a href="#" class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full text-sm transition-all">
Start-ups
</a>
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
<a href="#" class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full text-sm transition-all">
Fusionen & Übernahmen
</a>
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
<a href="#" class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full text-sm transition-all">
Produktneuheiten
</a>
<a href="#" class="px-4 py-2 bg-gray-100 dark:bg-gray-900 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-800 rounded-full text-sm transition-all">
<a href="#" class="px-4 py-2 bg-zinc-100 dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-200 dark:hover:bg-zinc-800 rounded-full text-sm transition-all">
Personalmeldungen
</a>
</div>
@ -124,11 +124,11 @@
<div class="hidden">
<div class="flex justify-between items-center mb-8">
<div>
<h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Suchergebnisse</h2>
<p class="text-gray-600 dark:text-gray-400 mt-1">127 Ergebnisse für "Künstliche Intelligenz"</p>
<h2 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">Suchergebnisse</h2>
<p class="text-zinc-600 dark:text-zinc-400 mt-1">127 Ergebnisse für "Künstliche Intelligenz"</p>
</div>
<div class="flex gap-2">
<select class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg text-sm">
<select class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 rounded-lg text-sm">
<option>Neueste zuerst</option>
<option>Älteste zuerst</option>
<option>Relevanz</option>
@ -139,21 +139,21 @@
<!-- Sample Result Items -->
<div class="space-y-6">
<!-- Result 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="flex gap-4">
<div class="flex-shrink-0 w-32 h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
<div class="flex-shrink-0 w-32 h-32 bg-zinc-200 dark:bg-zinc-800 rounded-lg"></div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 text-xs rounded-full">Technologie</span>
<span class="text-sm text-gray-500 dark:text-gray-500">15. Januar 2025</span>
<span class="text-sm text-zinc-500 dark:text-zinc-500">15. Januar 2025</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2 hover:text-[var(--color-primary)] transition-colors">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-2 hover:text-[var(--color-primary)] transition-colors">
<a href="#">KI-Revolution: Neues Framework für maschinelles Lernen vorgestellt</a>
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">
<p class="text-zinc-600 dark:text-zinc-400 mb-3">
Das innovative Unternehmen TechCorp präsentiert ein bahnbrechendes Framework für maschinelles Lernen, das die Entwicklung von KI-Anwendungen um 70% beschleunigt...
</p>
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-500">
<div class="flex items-center gap-4 text-sm text-zinc-500 dark:text-zinc-500">
<span>TechCorp AG</span>
<span>•</span>
<span>2 Min. Lesezeit</span>
@ -163,21 +163,21 @@
</div>
<!-- Result 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 hover:shadow-lg transition-all">
<div class="flex gap-4">
<div class="flex-shrink-0 w-32 h-32 bg-gray-200 dark:bg-gray-800 rounded-lg"></div>
<div class="flex-shrink-0 w-32 h-32 bg-zinc-200 dark:bg-zinc-800 rounded-lg"></div>
<div class="flex-1">
<div class="flex items-center gap-2 mb-2">
<span class="px-2 py-1 bg-green-100 dark:bg-green-900 text-green-700 dark:text-green-300 text-xs rounded-full">Gesundheit</span>
<span class="text-sm text-gray-500 dark:text-gray-500">14. Januar 2025</span>
<span class="text-sm text-zinc-500 dark:text-zinc-500">14. Januar 2025</span>
</div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2 hover:text-[var(--color-primary)] transition-colors">
<h3 class="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-2 hover:text-[var(--color-primary)] transition-colors">
<a href="#">KI-gestützte Diagnostik erreicht 98% Genauigkeit</a>
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-3">
<p class="text-zinc-600 dark:text-zinc-400 mb-3">
Medizinisches Start-up entwickelt KI-System zur Früherkennung von Krankheiten mit beeindruckender Präzision. Klinische Studien zeigen vielversprechende Ergebnisse...
</p>
<div class="flex items-center gap-4 text-sm text-gray-500 dark:text-gray-500">
<div class="flex items-center gap-4 text-sm text-zinc-500 dark:text-zinc-500">
<span>MediAI Solutions</span>
<span>•</span>
<span>3 Min. Lesezeit</span>
@ -189,13 +189,13 @@
<!-- Pagination -->
<div class="mt-12 flex justify-center gap-2">
<button class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
<button class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-all">
Zurück
</button>
<button class="px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg">1</button>
<button class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">2</button>
<button class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">3</button>
<button class="px-4 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-all">
<button class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-all">2</button>
<button class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-all">3</button>
<button class="px-4 py-2 border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-700 dark:text-zinc-300 rounded-lg hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-all">
Weiter
</button>
</div>
@ -206,19 +206,19 @@
</section>
<!-- Search Tips Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Such-Tipps
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Erweiterte Suche</h3>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Erweiterte Suche</h3>
<ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
<li class="flex items-start gap-2">
<span class="text-[var(--color-primary)] font-mono">"Begriff"</span>
<span>- Exakte Suche</span>
@ -238,9 +238,9 @@
</ul>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">Filter nutzen</h3>
<ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">Filter nutzen</h3>
<ul class="space-y-2 text-sm text-zinc-600 dark:text-zinc-400">
<li>✓ Nach Kategorie filtern</li>
<li>✓ Zeitraum eingrenzen</li>
<li>✓ Nach Unternehmen suchen</li>

94
resources/views/web/team.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -38,34 +38,34 @@
</section>
<!-- Leadership Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Führungsteam
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Visionäre Führung mit jahrzehntelanger Erfahrung
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- Leader 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 text-center hover:shadow-lg transition-all">
<div class="w-32 h-32 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="h-16 w-16 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-bold text-xl text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-bold text-xl text-zinc-900 dark:text-zinc-100 mb-2">
Dr. Michael Weber
</h3>
<p class="text-[var(--color-primary)] font-medium mb-4">Gründer & CEO</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
15+ Jahre Erfahrung in PR und Unternehmenskommunikation. Ehemaliger Chefredakteur bei führenden Wirtschaftsmedien.
</p>
<div class="flex justify-center gap-3">
<a href="#" class="text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
@ -74,21 +74,21 @@
</div>
<!-- Leader 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 text-center hover:shadow-lg transition-all">
<div class="w-32 h-32 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="h-16 w-16 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-bold text-xl text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-bold text-xl text-zinc-900 dark:text-zinc-100 mb-2">
Sarah Hoffmann
</h3>
<p class="text-[var(--color-primary)] font-medium mb-4">Chief Technology Officer</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Expertin für digitale Plattformen und Skalierung. Zuvor Tech Lead bei mehreren erfolgreichen Start-ups.
</p>
<div class="flex justify-center gap-3">
<a href="#" class="text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
@ -97,21 +97,21 @@
</div>
<!-- Leader 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 text-center hover:shadow-lg transition-all">
<div class="w-32 h-32 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-6">
<svg class="h-16 w-16 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-bold text-xl text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-bold text-xl text-zinc-900 dark:text-zinc-100 mb-2">
Thomas Schneider
</h3>
<p class="text-[var(--color-primary)] font-medium mb-4">Head of Customer Success</p>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-4">
Spezialist für Kundenzufriedenheit mit Fokus auf langfristige Partnerschaften und Account Management.
</p>
<div class="flex justify-center gap-3">
<a href="#" class="text-gray-400 hover:text-[var(--color-primary)] transition-colors">
<a href="#" class="text-zinc-400 hover:text-[var(--color-primary)] transition-colors">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
</svg>
@ -123,123 +123,123 @@
</section>
<!-- Departments Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unsere Teams
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Engagierte Profis in allen Bereichen
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Department 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Engineering
</h3>
<p class="text-2xl font-bold text-[var(--color-primary)] mb-2">12</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Entwickler & DevOps</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">Entwickler & DevOps</p>
</div>
<!-- Department 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Content & Redaktion
</h3>
<p class="text-2xl font-bold text-[var(--color-primary)] mb-2">8</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Redakteure & Lektoren</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">Redakteure & Lektoren</p>
</div>
<!-- Department 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Customer Success
</h3>
<p class="text-2xl font-bold text-[var(--color-primary)] mb-2">15</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Support & Account Manager</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">Support & Account Manager</p>
</div>
<!-- Department 4 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 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-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Sales & Marketing
</h3>
<p class="text-2xl font-bold text-[var(--color-primary)] mb-2">10</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Sales & Marketing Experten</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">Sales & Marketing Experten</p>
</div>
</div>
</div>
</section>
<!-- Values Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Was uns antreibt
</h2>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Die Werte, die unser Team vereinen
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Innovation & Exzellenz
</h3>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Wir streben nach kontinuierlicher Verbesserung und technologischer Innovation, um unseren Kunden die beste Plattform zu bieten.
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Kundenfokus
</h3>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Der Erfolg unserer Kunden ist unser Erfolg. Wir hören zu, verstehen Bedürfnisse und liefern maßgeschneiderte Lösungen.
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Zusammenarbeit
</h3>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Wir glauben an die Kraft der Zusammenarbeit – intern im Team und mit unseren Kunden und Partnern.
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 transition-colors duration-200">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Transparenz & Integrität
</h3>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Ehrlichkeit und Transparenz sind die Grundlage für Vertrauen und langfristige Partnerschaften.
</p>
</div>
@ -262,7 +262,7 @@
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
Wir suchen leidenschaftliche Menschen, die mit uns die Zukunft der Unternehmenskommunikation gestalten möchten
</p>
<a href="/karriere" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
<a href="/karriere" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Offene Stellen ansehen
</a>
</div>

114
resources/views/web/ueber-uns.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<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 />
@ -38,55 +38,55 @@
</section>
<!-- Stats Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<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-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
<div class="text-center">
<div class="text-4xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
250.000+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Veröffentlichte Meldungen</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Veröffentlichte Meldungen</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
15.000+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Registrierte Unternehmen</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Registrierte Unternehmen</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
2,5 Mio.
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Monatliche Leser</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Monatliche Leser</div>
</div>
<div class="text-center">
<div class="text-4xl font-bold bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] bg-clip-text text-transparent mb-2">
40+
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">Länder</div>
<div class="text-sm text-zinc-600 dark:text-zinc-400">Länder</div>
</div>
</div>
</div>
</section>
<!-- Mission Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unsere Mission
</h2>
<p class="text-lg text-gray-600 dark:text-gray-400">
<p class="text-lg text-zinc-600 dark:text-zinc-400">
Professionelle Unternehmenskommunikation für alle zugänglich machen
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-8 md:p-12 transition-colors duration-200">
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed mb-6">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-8 md:p-12 transition-colors duration-200">
<p class="text-lg text-zinc-900 dark:text-zinc-100 leading-relaxed mb-6">
Wir glauben daran, dass jedes Unternehmen – unabhängig von Größe oder Budget – die Möglichkeit haben sollte, seine Geschichte zu erzählen und mit relevanten Zielgruppen zu kommunizieren.
</p>
<p class="text-lg text-gray-900 dark:text-gray-100 leading-relaxed">
<p class="text-lg text-zinc-900 dark:text-zinc-100 leading-relaxed">
Business Portal demokratisiert professionelle PR-Arbeit durch innovative Technologie, faire Preismodelle und exzellenten Service. Wir schaffen Sichtbarkeit für wichtige Unternehmensnachrichten und verbinden Organisationen mit den Menschen, die ihre Botschaften lesen und teilen möchten.
</p>
</div>
@ -95,74 +95,74 @@
</section>
<!-- Values Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unsere Werte
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Diese Prinzipien leiten uns in allem, was wir tun
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
<!-- Value 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 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-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Qualität vor Quantität
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Wir setzen auf redaktionelle Qualität und kuratieren Inhalte sorgfältig, um höchste Standards zu gewährleisten.
</p>
</div>
<!-- Value 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
DACH-Expertise
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Spezialisiert auf den deutschsprachigen Raum mit tiefem Verständnis für regionale Besonderheiten.
</p>
</div>
<!-- Value 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Kundenfokus
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Ihre Zufriedenheit steht im Mittelpunkt. Wir bieten persönlichen Support und maßgeschneiderte Lösungen.
</p>
</div>
<!-- Value 4 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 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-gray-900 dark:text-gray-100 mb-3">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-3">
Innovation & Technologie
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Kontinuierliche Weiterentwicklung unserer Plattform mit modernsten Technologien und Features.
</p>
</div>
@ -171,78 +171,78 @@
</section>
<!-- Team Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unser Team
</h2>
<p class="text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">
<p class="text-zinc-600 dark:text-zinc-400 max-w-2xl mx-auto">
Erfahrene Experten aus PR, Technologie und Medien
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
<!-- Team Member 1 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-12 w-12 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
Dr. Michael Weber
</h3>
<p class="text-sm text-[var(--color-primary)] mb-3">Gründer & CEO</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
15+ Jahre Erfahrung in PR und Unternehmenskommunikation
</p>
</div>
<!-- Team Member 2 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-12 w-12 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
Sarah Hoffmann
</h3>
<p class="text-sm text-[var(--color-primary)] mb-3">Chief Technology Officer</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Expertin für digitale Plattformen und Skalierung
</p>
</div>
<!-- Team Member 3 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-12 w-12 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
Thomas Schneider
</h3>
<p class="text-sm text-[var(--color-primary)] mb-3">Head of Customer Success</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Spezialist für Kundenzufriedenheit und Account Management
</p>
</div>
<!-- Team Member 4 -->
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center hover:shadow-lg transition-all">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center hover:shadow-lg transition-all">
<div class="w-24 h-24 bg-gradient-to-br from-[var(--color-primary)]/20 to-[var(--color-secondary)]/20 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-12 w-12 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-1">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
Lisa Müller
</h3>
<p class="text-sm text-[var(--color-primary)] mb-3">Head of Content & Quality</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Journalistin mit Schwerpunkt digitale Medien
</p>
</div>
@ -251,10 +251,10 @@
</section>
<!-- Timeline Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4 max-w-4xl">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Unsere Geschichte
</h2>
</div>
@ -269,10 +269,10 @@
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Gründung
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Start als kleines Start-up mit der Vision, PR zu demokratisieren
</p>
</div>
@ -287,10 +287,10 @@
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Expansion
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Erreichen von 1.000 registrierten Unternehmen
</p>
</div>
@ -305,10 +305,10 @@
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Wachstum
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Launch der Premium-Features und Enterprise-Lösungen
</p>
</div>
@ -323,10 +323,10 @@
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Innovation
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Einführung KI-gestützter Reichweiten-Analytics
</p>
</div>
@ -341,10 +341,10 @@
<div class="w-0.5 h-16 bg-gradient-to-b from-[var(--color-primary)] to-[var(--color-secondary)] mt-2"></div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Marktführer
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Über 10.000 aktive Unternehmenskunden im DACH-Raum
</p>
</div>
@ -358,10 +358,10 @@
</div>
</div>
<div class="pb-8">
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Zukunft
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Internationalisierung und neue AI-Features
</p>
</div>
@ -384,7 +384,7 @@
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
Über 15.000 Unternehmen vertrauen bereits auf Business Portal
</p>
<a href="/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
<a href="/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Jetzt kostenlos starten
</a>
</div>

112
resources/views/web/veroeffentlichen.blade.php
View file

@ -4,7 +4,7 @@
@section('content')
<main class="min-h-screen flex flex-col bg-white dark:bg-gray-950 transition-colors duration-200">
<main class="min-h-screen flex flex-col bg-white dark:bg-zinc-950 transition-colors duration-200">
<livewire:web.burger-menu />
<livewire:web.header />
@ -24,7 +24,7 @@
</section>
<!-- Quick Access Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-secondary)] rounded-xl p-8 text-center text-white mb-16">
@ -33,20 +33,20 @@
Melden Sie sich im Backend-Portal an, um Ihre Pressemitteilung zu erstellen
</p>
<div class="flex flex-wrap gap-4 justify-center">
<a href="{{ config('domains.domain_admin_url') }}/login" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Zum Backend-Portal (pr-copilot)
<a href="{{ config('domains.domain_portal_url') }}/login" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Zum Backend-Portal ({{ config('app.name') }})
</a>
<a href="{{ config('domains.domain_admin_url') }}/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-white border-2 border-white hover:bg-white/10 rounded-lg transition-all">
<a href="{{ config('domains.domain_portal_url') }}/register" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium text-white border-2 border-white hover:bg-white/10 rounded-lg transition-all">
Kostenlos registrieren
</a>
</div>
</div>
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
So funktioniert's
</h2>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-zinc-600 dark:text-zinc-400">
Folgen Sie unserem einfachen 5-Schritte-Prozess
</p>
</div>
@ -55,7 +55,7 @@
</section>
<!-- Steps Section -->
<section class="py-16 bg-gray-50/50 dark:bg-gray-900/50 transition-colors duration-200">
<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="max-w-4xl mx-auto space-y-8">
@ -66,15 +66,15 @@
1
</div>
</div>
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
<div class="flex-1 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-3">
Account erstellen & anmelden
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
Registrieren Sie sich kostenlos im Backend-Portal (<strong>pr-copilot.test</strong>) oder melden Sie sich mit Ihrem bestehenden Account an.
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Registrieren Sie sich kostenlos im Backend-Portal (<strong>{{ config('domains.domain_portal') }}</strong>) oder melden Sie sich mit Ihrem bestehenden Account an.
</p>
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">
<div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400 mb-2">
<strong>Tipp:</strong> Die Registrierung dauert nur 2 Minuten und Sie können sofort loslegen.
</p>
</div>
@ -88,11 +88,11 @@
2
</div>
</div>
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
<div class="flex-1 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-3">
Grunddaten eingeben
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Geben Sie die wichtigsten Informationen zu Ihrer Pressemitteilung ein:
</p>
<ul class="space-y-2 mb-4">
@ -100,25 +100,25 @@
<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-gray-600 dark:text-gray-400">Aussagekräftiger Titel (max. 100 Zeichen)</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Aussagekräftiger Titel (max. 100 Zeichen)</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-gray-600 dark:text-gray-400">Kurze Zusammenfassung (Teaser)</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Kurze Zusammenfassung (Teaser)</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-gray-600 dark:text-gray-400">Passende Kategorie auswählen</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Passende Kategorie auswählen</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-gray-600 dark:text-gray-400">Veröffentlichungsdatum festlegen</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Veröffentlichungsdatum festlegen</span>
</li>
</ul>
</div>
@ -131,11 +131,11 @@
3
</div>
</div>
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
<div class="flex-1 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-3">
Content erstellen
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Verfassen Sie Ihre Pressemitteilung mit unserem intuitiven Editor:
</p>
<ul class="space-y-2 mb-4">
@ -143,25 +143,25 @@
<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-gray-600 dark:text-gray-400">WYSIWYG-Editor mit Formatierungsoptionen</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">WYSIWYG-Editor mit Formatierungsoptionen</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-gray-600 dark:text-gray-400">Überschriften, Listen und Formatierungen</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Überschriften, Listen und Formatierungen</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-gray-600 dark:text-gray-400">SEO-Score in Echtzeit</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">SEO-Score in Echtzeit</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-gray-600 dark:text-gray-400">Automatische Speicherung als Entwurf</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Automatische Speicherung als Entwurf</span>
</li>
</ul>
</div>
@ -174,11 +174,11 @@
4
</div>
</div>
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
<div class="flex-1 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-3">
Medien hochladen
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Ergänzen Sie Ihre Pressemitteilung mit aussagekräftigen Medien:
</p>
<ul class="space-y-2 mb-4">
@ -186,29 +186,29 @@
<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-gray-600 dark:text-gray-400">Bilder (JPG, PNG, WebP, max. 10 MB)</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Bilder (JPG, PNG, WebP, max. 10 MB)</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-gray-600 dark:text-gray-400">PDF-Dokumente (max. 25 MB)</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">PDF-Dokumente (max. 25 MB)</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-gray-600 dark:text-gray-400">Video-Einbettung (YouTube, Vimeo)</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Video-Einbettung (YouTube, Vimeo)</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-gray-600 dark:text-gray-400">Automatische Bildoptimierung</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Automatische Bildoptimierung</span>
</li>
</ul>
<div class="bg-gray-50 dark:bg-gray-950 rounded-lg p-4">
<p class="text-sm text-gray-600 dark:text-gray-400">
<div class="bg-zinc-50 dark:bg-zinc-950 rounded-lg p-4">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
<strong>Tipp:</strong> Hochauflösende Bilder erhöhen die Aufmerksamkeit um bis zu 80%
</p>
</div>
@ -222,11 +222,11 @@
5
</div>
</div>
<div class="flex-1 bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6">
<h3 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-3">
<div class="flex-1 bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6">
<h3 class="text-xl font-bold text-zinc-900 dark:text-zinc-100 mb-3">
Veröffentlichen
</h3>
<p class="text-gray-600 dark:text-gray-400 mb-4">
<p class="text-zinc-600 dark:text-zinc-400 mb-4">
Überprüfen Sie Ihre Pressemitteilung und veröffentlichen Sie sie:
</p>
<ul class="space-y-2 mb-4">
@ -234,25 +234,25 @@
<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-gray-600 dark:text-gray-400">Live-Vorschau vor Veröffentlichung</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Live-Vorschau vor 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-gray-600 dark:text-gray-400">Freischaltung innerhalb von 2-4 Stunden</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Freischaltung innerhalb von 2-4 Stunden</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-gray-600 dark:text-gray-400">E-Mail-Benachrichtigung bei Freischaltung</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">E-Mail-Benachrichtigung bei Freischaltung</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-gray-600 dark:text-gray-400">Sofortige Sichtbarkeit nach Freischaltung</span>
<span class="text-sm text-zinc-600 dark:text-zinc-400">Sofortige Sichtbarkeit nach Freischaltung</span>
</li>
</ul>
<div class="bg-gradient-to-r from-green-50 to-emerald-50 dark:from-green-950 dark:to-emerald-950 border border-green-200 dark:border-green-800 rounded-lg p-4">
@ -268,54 +268,54 @@
</section>
<!-- Benefits Section -->
<section class="py-16 bg-white dark:bg-gray-950 transition-colors duration-200">
<section class="py-16 bg-white dark:bg-zinc-950 transition-colors duration-200">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-12">
<h2 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-4">
<h2 class="text-3xl font-bold text-zinc-900 dark:text-zinc-100 mb-4">
Ihre Vorteile
</h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 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-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Schnell & Einfach
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
In unter 10 Minuten zur fertigen Pressemitteilung
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 text-[var(--color-primary)]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
</svg>
</div>
<h3 class="font-semibold text-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
SEO-Optimiert
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Maximale Sichtbarkeit in Suchmaschinen
</p>
</div>
<div class="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-800 p-6 text-center">
<div class="bg-white dark:bg-zinc-900 rounded-xl border border-zinc-200 dark:border-zinc-800 p-6 text-center">
<div class="w-16 h-16 bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-secondary)]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="h-8 w-8 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-gray-900 dark:text-gray-100 mb-2">
<h3 class="font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
Qualitätssicherung
</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">
<p class="text-sm text-zinc-600 dark:text-zinc-400">
Redaktionelle Prüfung vor Veröffentlichung
</p>
</div>
@ -333,7 +333,7 @@
<p class="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
Melden Sie sich im Backend-Portal an und veröffentlichen Sie Ihre erste Pressemitteilung
</p>
<a href="{{ config('domains.domain_admin_url') }}/login" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-gray-100 rounded-lg shadow-md hover:shadow-lg transition-all">
<a href="{{ config('domains.domain_portal_url') }}/login" class="inline-flex items-center justify-center px-8 py-4 text-sm font-medium bg-white text-[var(--color-primary)] hover:bg-zinc-100 rounded-lg shadow-md hover:shadow-lg transition-all">
Zum Backend-Portal →
</a>
</div>

6
resources/views/web/welcome.blade.php
View file

@ -5,8 +5,8 @@
@section('content')
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-gray-900 dark:text-gray-100">
<div class="bg-white dark:bg-zinc-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 text-zinc-900 dark:text-zinc-100">
<h1 class="text-2xl font-bold mb-4">Willkommensseite</h1>
<p class="mb-4">Dies ist die Willkommensseite mit dem {{ ucfirst(config('app.theme')) }} Theme.</p>
@ -24,7 +24,7 @@
Styling</h3>
<p>Die Styles werden basierend auf der Domain automatisch geladen:</p>
<ul class="list-disc pl-5 mt-2 space-y-1">
<li>pr-copilot.local - Hauptstil</li>
<li>presseportale.test – Hauptstil (Portal)</li>
<li>landing1.local - Landingpage 1</li>
<li>landing2.local - Landingpage 2</li>
</ul>