first commit

2025-10-20 17:53:02 +02:00 · 2025-10-20 17:53:02 +02:00 · 405df0a122
commit 405df0a122
3083 changed files with 69203 additions and 0 deletions
--- a/dev/presswave/.gitignore
+++ b/dev/presswave/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/dev/presswave/MIGRATION-TO-LARAVEL.md
+++ b/dev/presswave/MIGRATION-TO-LARAVEL.md
@ -0,0 +1,590 @@
+# Migration der Presswave Landingpage zu Laravel/Livewire
+
+Dokumentation der Konvertierung der React/TypeScript Presswave-Landingpage zu Laravel Blade + Livewire für Business Portal 24.
+
+**Datum:** 15. Oktober 2025
+**Ziel-Domain:** businessportal24.test
+**Theme-Farben:** Primary #cf3628 (Rot), Secondary #f0834a (Orange)
+
+---
+
+## 1. Analyse der Quellstruktur
+
+### Ursprüngliche React-Struktur (dev/presswave)
+```
+src/
+├── pages/
+│   └── Index.tsx              # Haupt-Landingpage
+├── components/
+│   ├── Header.tsx             # Navigation & Suche
+│   ├── FilterBar.tsx          # Filter-Komponente
+│   ├── PressReleaseCard.tsx   # Karten-Komponente für Pressemitteilungen
+│   └── BurgerMenu.tsx         # Mobile Navigation
+└── assets/
+    └── *.jpg                  # Bilder
+```
+
+### Hauptkomponenten identifiziert:
+1. **Header** - Sticky Navigation mit Logo, Suchleiste und CTA-Buttons
+2. **FilterBar** - Sticky Filter mit Zeitraum, Branche, Region und Sortierung
+3. **Hero Section** - Gradient-Banner mit Überschrift
+4. **Featured Section** - 3-spaltiges Grid mit hervorgehobenen Releases
+5. **Main Grid** - 3-spaltiges Responsive Grid mit allen Releases
+6. **Footer** - 4-spaltige Link-Struktur mit Social Media
+
+---
+
+## 2. Laravel Blade Struktur erstellt
+
+### Haupt-Blade-Datei
+**Pfad:** `resources/views/web/businessportal24.blade.php`
+
+```blade
+@extends('web.layouts.web-master')
+
+@section('content')
+<main class="min-h-screen flex flex-col">
+    <livewire:web.header />
+    <livewire:web.filter-bar />
+    <!-- Hero Banner -->
+    <!-- Featured Section -->
+    <livewire:web.featured-releases />
+    <!-- Main Grid -->
+    <livewire:web.press-releases-grid />
+    <livewire:web.footer />
+</main>
+@endsection
+```
+
+**Features:**
+- Verwendet CSS-Variablen für Theme-Farben: `var(--color-primary)` und `var(--color-secondary)`
+- Animationen via CSS Keyframes (`@keyframes fade-in-up`)
+- Responsive Design mit Tailwind CSS
+- Alpine.js für interaktive Elemente
+
+---
+
+## 3. Livewire-Komponenten erstellt
+
+### 3.1 Header-Komponente
+**Pfad:** `resources/views/livewire/web/header.blade.php`
+
+**Funktionen:**
+- Sticky Header mit Gradient-Border-Top
+- Responsive Suchleiste (Desktop & Mobile)
+- Burger-Menü für Mobile
+- Logo mit dynamischem Gradient
+- CTA-Buttons: "Anmelden" und "Veröffentlichen"
+
+**Livewire Properties:**
+```php
+public $searchQuery = '';
+public $showMobileSearch = false;
+```
+
+**Alpine.js Integration:**
+- Mobile Search Toggle
+- Smooth Transitions
+
+---
+
+### 3.2 FilterBar-Komponente
+**Pfad:** `resources/views/livewire/web/filter-bar.blade.php`
+
+**Funktionen:**
+- Sticky Position unterhalb Header (top-16)
+- 4 Filter-Dropdowns: Zeitraum, Branche, Region, Sortierung
+- Active Filters Display mit Remove-Buttons
+- "Alle zurücksetzen" Button
+- Live-Wire: Real-time Filtering
+
+**Livewire Properties:**
+```php
+public $timeframe = '7';
+public $industry = 'all';
+public $region = 'all';
+public $sortBy = 'newest';
+public $activeFilters = [];
+```
+
+**Events:**
+```php
+$this->dispatch('filters-updated', [...]);
+```
+
+---
+
+### 3.3 PressReleaseCard-Komponente
+**Pfad:** `resources/views/components/web/press-release-card.blade.php`
+
+**Props:**
+- `title`, `teaser`, `company`, `industry`, `region`, `date`
+- `hasImage`, `hasPdf`, `companyLogo`, `slug`, `imageUrl`
+
+**Features:**
+- Image Preview mit Lazy Loading
+- Company Logo Overlay
+- Meta-Informationen (Branche, Region, Datum)
+- Badges für Medien (Bild, PDF)
+- Hover-Effekte: Scale & Border-Color
+- Transition-Animationen (300ms)
+
+**CSS-Klassen:**
+```css
+.card {
+    @apply hover:scale-[1.02] hover:border-primary/20;
+    @apply transition-all duration-300;
+}
+```
+
+---
+
+### 3.4 Featured Releases-Komponente
+**Pfad:** `resources/views/livewire/web/featured-releases.blade.php`
+
+**Layout:**
+- 3-spaltiges Grid (lg:grid-cols-3)
+- Linke Seite: 1 große Featured Card (lg:col-span-2)
+- Rechte Seite: 2 gestapelte Cards
+
+**Mock-Daten:**
+- 3 Releases mit unterschiedlichen Bildern (Unsplash)
+- Verschiedene Branchen: IT, Energie, Finanzen
+
+---
+
+### 3.5 Press Releases Grid-Komponente
+**Pfad:** `resources/views/livewire/web/press-releases-grid.blade.php`
+
+**Layout:**
+- Responsive Grid: 1 col (mobile), 2 cols (md), 3 cols (lg)
+- 6 Mock-Releases
+
+**Features:**
+- Verwendet `x-web.press-release-card` Komponente
+- Loop durch `$releases` Array
+
+---
+
+### 3.6 Footer-Komponente
+**Pfad:** `resources/views/livewire/web/footer.blade.php`
+
+**Layout:**
+- 4-spaltiges Grid (md:grid-cols-4)
+- Spalten: Unternehmen, Services, Rechtliches, Social Media
+- Theme-Toggle Button (Alpine.js)
+
+**Links:**
+- Interne Links: `/ueber-uns`, `/kontakt`, `/preise`, etc.
+- Externe Links: LinkedIn, Twitter (target="_blank")
+
+---
+
+## 4. Theme & Styling
+
+### 4.1 CSS-Theme-Datei
+**Pfad:** `resources/css/web/theme-businessportal24.css`
+
+**Farb-Variablen (HSL):**
+```css
+--primary: 4 61% 49%;      /* #cf3628 */
+--secondary: 22 84% 61%;   /* #f0834a */
+```
+
+**Dark Mode Support:**
+```css
+.dark {
+    --background: 4 20% 10%;
+    --primary: 4 61% 49%;
+    /* ... */
+}
+```
+
+---
+
+### 4.2 Animationen
+
+**Keyframes definiert:**
+```css
+@keyframes fade-in-up {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fade-in-down { /* ... */ }
+@keyframes slide-in-right { /* ... */ }
+@keyframes scale-in { /* ... */ }
+```
+
+**Utility-Klassen:**
+```css
+.animate-fade-in-up { animation: fade-in-up 0.6s ease-out forwards; }
+.animation-delay-200 { animation-delay: 0.2s; opacity: 0; }
+```
+
+**Verwendung in Blade:**
+```html
+<h1 class="animate-fade-in-up">Titel</h1>
+<p class="animate-fade-in-up animation-delay-200">Text</p>
+```
+
+---
+
+### 4.3 Component Styles
+
+**Buttons:**
+```css
+.btn-primary {
+    @apply bg-gradient-to-r from-primary to-secondary;
+    @apply shadow-md hover:shadow-lg;
+    @apply transition-all duration-300;
+}
+```
+
+**Cards:**
+```css
+.card {
+    @apply rounded-xl border shadow-sm hover:shadow-lg;
+    @apply transition-all duration-300;
+}
+```
+
+**Badges:**
+```css
+.badge-primary {
+    @apply bg-primary/10 text-primary border border-primary/20;
+}
+```
+
+---
+
+## 5. React → Blade/Livewire Konvertierung
+
+### Mapping-Tabelle
+
+| React-Konzept | Laravel-Äquivalent | Beispiel |
+|---------------|-------------------|----------|
+| `useState()` | `public $property` | `public $searchQuery = '';` |
+| `props` | `@props([...])` | `@props(['title', 'teaser'])` |
+| `onClick` | `wire:click` | `wire:click="search"` |
+| `onChange` | `wire:model.live` | `wire:model.live="timeframe"` |
+| `map()` | `@foreach` | `@foreach($releases as $release)` |
+| `x-show` (React) | `x-show` (Alpine) | `x-show="showMobileSearch"` |
+| `dispatch()` | `$this->dispatch()` | `$this->dispatch('event')` |
+| CSS-in-JS | Tailwind Classes | `class="bg-primary text-white"` |
+
+---
+
+### Spezifische Konvertierungen:
+
+#### React Search Component:
+```tsx
+const [searchQuery, setSearchQuery] = useState('');
+
+<input
+    value={searchQuery}
+    onChange={(e) => setSearchQuery(e.target.value)}
+/>
+```
+
+#### Livewire Äquivalent:
+```php
+public $searchQuery = '';
+
+<input wire:model="searchQuery" />
+```
+
+---
+
+#### React Filter Update:
+```tsx
+const [timeframe, setTimeframe] = useState('7');
+
+<select
+    value={timeframe}
+    onChange={(e) => setTimeframe(e.target.value)}
+>
+```
+
+#### Livewire Äquivalent:
+```php
+public $timeframe = '7';
+
+<select wire:model.live="timeframe">
+```
+
+---
+
+#### React Conditional Rendering:
+```tsx
+{hasImage && (
+    <Badge>Bild</Badge>
+)}
+```
+
+#### Blade Äquivalent:
+```blade
+@if($hasImage)
+    <span class="badge">Bild</span>
+@endif
+```
+
+---
+
+## 6. Routing & Integration
+
+### Route hinzufügen
+**Pfad:** `routes/web.php` oder `routes/domains.php`
+
+```php
+Route::domain('businessportal24.test')->group(function () {
+    Route::get('/', function () {
+        return view('web.businessportal24');
+    });
+});
+```
+
+### Domain-Config
+**Pfad:** `config/domains.php`
+
+```php
+'businessportal24' => [
+    'domain_name' => 'businessportal24.test',
+    'theme' => 'businessportal24',
+    'view_prefix' => 'web',
+    'assets_dir' => 'build/web',
+    'color_scheme' => [
+        'primary' => '#cf3628',
+        'secondary' => '#f0834a',
+    ],
+    'font' => 'Montserrat',
+],
+```
+
+---
+
+## 7. Verbesserungen & Best Practices
+
+### Implementierte Verbesserungen:
+
+1. **Performance:**
+   - Lazy Loading für Bilder (`loading="lazy"`)
+   - CSS-Transitions statt JavaScript-Animationen
+   - Livewire Live-Updates nur wo nötig
+
+2. **Accessibility:**
+   - `aria-label` für Icon-Buttons
+   - Semantische HTML-Tags (`<header>`, `<footer>`, `<article>`)
+   - Keyboard-Navigation Support
+
+3. **SEO:**
+   - Semantische Meta-Informationen
+   - Alt-Texte für Bilder
+   - Strukturierte Daten via `<article>`
+
+4. **Responsive Design:**
+   - Mobile-First Approach
+   - Breakpoints: `sm:`, `md:`, `lg:`
+   - Touch-optimierte Buttons
+
+---
+
+## 8. Testing & Debugging
+
+### Lokales Testing:
+
+1. **Vite Dev-Server starten:**
+```bash
+npm run dev:web
+```
+
+2. **Laravel Dev-Server:**
+```bash
+php artisan serve
+```
+
+3. **Domain-Simulation (.env):**
+```env
+DEV_SIMULATE_DOMAIN=true
+DEV_SIMULATED_DOMAIN=businessportal24.test
+```
+
+4. **Browser öffnen:**
+```
+http://localhost:8000
+```
+
+---
+
+### Debug-Tipps:
+
+**Livewire-Debugging:**
+```blade
+<div>
+    {{ var_dump($searchQuery) }}
+    @json($activeFilters)
+</div>
+```
+
+**Alpine.js Debugging:**
+```html
+<div x-data="{ debug: true }">
+    <template x-if="debug">
+        <pre x-text="JSON.stringify($data, null, 2)"></pre>
+    </template>
+</div>
+```
+
+---
+
+## 9. Nächste Schritte
+
+### Zu implementieren:
+
+1. **Datenbank-Integration:**
+   - Eloquent Model für `PressRelease`
+   - Migration erstellen
+   - Seeder für Test-Daten
+
+2. **Pagination:**
+   - Livewire Pagination implementieren
+   - Infinite Scroll Option
+
+3. **Suche:**
+   - Laravel Scout Integration
+   - Full-Text Search mit Meilisearch
+
+4. **Filter-Persistenz:**
+   - Query-Parameter für Filter
+   - Browser-History Integration
+
+5. **API:**
+   - REST API für Releases
+   - API-Dokumentation (Swagger)
+
+6. **Admin-Panel:**
+   - CRUD für Pressemitteilungen
+   - Bild-Upload mit Media Library
+
+---
+
+## 10. Dateistruktur (Zusammenfassung)
+
+```
+resources/
+├── views/
+│   ├── web/
+│   │   └── businessportal24.blade.php      # Haupt-Blade
+│   ├── livewire/
+│   │   └── web/
+│   │       ├── header.blade.php
+│   │       ├── filter-bar.blade.php
+│   │       ├── featured-releases.blade.php
+│   │       ├── press-releases-grid.blade.php
+│   │       └── footer.blade.php
+│   └── components/
+│       └── web/
+│           └── press-release-card.blade.php
+└── css/
+    └── web/
+        └── theme-businessportal24.css         # Theme-Styles
+
+config/
+└── domains.php                                # Domain-Config
+
+routes/
+└── domains.php                                # Routing
+```
+
+---
+
+## 11. Lessons Learned
+
+### Was gut funktioniert hat:
+
+1. **Livewire für State Management:**
+   - Einfache Syntax
+   - Keine JS-Komplexität
+   - Reaktive Updates
+
+2. **Tailwind CSS:**
+   - Schnelles Styling
+   - Konsistentes Design
+   - Responsive Utilities
+
+3. **Alpine.js für UI-Interaktionen:**
+   - Leichtgewichtig
+   - Vue-ähnliche Syntax
+   - Perfekt für kleine Interaktionen
+
+### Herausforderungen:
+
+1. **Komplexe React-Hooks → Livewire:**
+   - Lösung: Einfachere State-Struktur
+
+2. **CSS-in-JS → Tailwind:**
+   - Lösung: Utility-Klassen + @layer
+
+3. **React Context → Laravel:**
+   - Lösung: View::share() & Config
+
+---
+
+## 12. Performance-Metriken
+
+### Ziel-Metriken:
+
+- **First Contentful Paint:** < 1.5s
+- **Time to Interactive:** < 3.5s
+- **Lighthouse Score:** > 90
+
+### Optimierungen:
+
+1. **Asset-Optimierung:**
+   - Vite Build: Code-Splitting
+   - Image Optimization (WebP)
+   - CSS Minification
+
+2. **Livewire-Optimierung:**
+   - `wire:model.lazy` wo möglich
+   - Polling vermeiden
+   - Lazy-Loading von Komponenten
+
+---
+
+## 13. Maintenance & Updates
+
+### Regelmäßige Updates:
+
+1. **Dependencies:**
+```bash
+composer update
+npm update
+```
+
+2. **Laravel Updates:**
+```bash
+php artisan migrate
+php artisan optimize:clear
+```
+
+3. **Vite Rebuild:**
+```bash
+npm run build:web
+```
+
+---
+
+## Kontakt & Support
+
+**Entwickler:** Claude Code
+**Datum:** 15. Oktober 2025
+**Version:** 1.0.0
+
+Bei Fragen oder Problemen:
+- CLAUDE.md im Root-Verzeichnis konsultieren
+- Laravel Dokumentation: https://laravel.com/docs
+- Livewire Dokumentation: https://livewire.laravel.com
+
+---
+
+**Ende der Dokumentation**
--- a/dev/presswave/README-CONVERSION.md
+++ b/dev/presswave/README-CONVERSION.md
@ -0,0 +1,241 @@
+# Presswave Landing Page - Laravel Konvertierung
+
+## Quick Overview
+
+Die React/TypeScript Landingpage aus `dev/presswave` wurde erfolgreich nach Laravel/Livewire konvertiert und ist jetzt unter der Domain **businessportal24.test** verfügbar.
+
+---
+
+## 📁 Erstellte Dateien
+
+### 1. Haupt-Blade-Datei
+```
+resources/views/web/businessportal24.blade.php
+```
+Haupt-Landingpage mit Hero, Featured Section und Main Grid.
+
+### 2. Livewire-Komponenten
+```
+resources/views/livewire/web/
+├── header.blade.php                # Navigation & Suche
+├── filter-bar.blade.php            # Filter-Komponente
+├── featured-releases.blade.php     # Featured Section
+├── press-releases-grid.blade.php   # Main Grid
+└── footer.blade.php                # Footer
+```
+
+### 3. Blade-Komponente
+```
+resources/views/components/web/
+└── press-release-card.blade.php    # Wiederverwendbare Karten-Komponente
+```
+
+### 4. Theme-CSS
+```
+resources/css/web/theme-businessportal24.css
+```
+Erweiterte Styles mit Animationen und Custom Components.
+
+### 5. Dokumentation
+```
+dev/presswave/
+├── MIGRATION-TO-LARAVEL.md         # Vollständige Migrations-Dokumentation
+└── README-CONVERSION.md            # Diese Datei
+```
+
+---
+
+## 🎨 Design-System
+
+### Farben
+- **Primary:** `#cf3628` (Rot)
+- **Secondary:** `#f0834a` (Orange)
+- **Font:** Montserrat
+
+### CSS-Variablen
+```css
+--color-primary: #cf3628;
+--color-secondary: #f0834a;
+```
+
+---
+
+## 🚀 Verwendung
+
+### 1. Vite Dev-Server starten
+```bash
+npm run dev:web
+```
+
+### 2. Laravel Dev-Server
+```bash
+php artisan serve
+```
+
+### 3. Domain-Simulation (Optional)
+In `.env`:
+```env
+DEV_SIMULATE_DOMAIN=true
+DEV_SIMULATED_DOMAIN=businessportal24.test
+```
+
+### 4. Browser öffnen
+```
+http://businessportal24.test:8000
+```
+oder
+```
+http://localhost:8000
+```
+(mit Domain-Simulation)
+
+---
+
+## 📦 Komponenten-Übersicht
+
+### Header
+- Sticky Navigation
+- Responsive Suchleiste
+- Burger-Menü (Mobile)
+- CTA-Buttons
+
+### Filter Bar
+- 4 Filter-Dropdowns
+- Active Filters Display
+- Real-time Updates (Livewire)
+
+### Press Release Card
+- Image Preview
+- Company Logo Overlay
+- Meta-Informationen
+- Media Badges
+- Hover-Animationen
+
+### Featured Releases
+- 3-spaltiges Layout
+- 1 große + 2 kleine Cards
+
+### Press Releases Grid
+- Responsive Grid (1-3 Spalten)
+- Mock-Daten mit 6 Releases
+
+### Footer
+- 4-spaltige Link-Struktur
+- Social Media Links
+- Theme-Toggle
+
+---
+
+## ✨ Features
+
+### Animationen
+- Fade In Up
+- Fade In Down
+- Slide In Right
+- Scale In
+- Animation Delays
+
+### Interaktivität
+- Live-Search (Livewire)
+- Real-time Filtering
+- Mobile-optimiert
+- Accessibility Features
+
+### Performance
+- Lazy Loading (Bilder)
+- CSS-Transitions
+- Optimierte Assets (Vite)
+
+---
+
+## 🔧 Anpassungen
+
+### Farben ändern
+In `config/domains.php`:
+```php
+'color_scheme' => [
+    'primary' => '#cf3628',
+    'secondary' => '#f0834a',
+],
+```
+
+### Theme-CSS erweitern
+`resources/css/web/theme-businessportal24.css`
+
+### Mock-Daten ersetzen
+In `featured-releases.blade.php` und `press-releases-grid.blade.php`:
+```php
+public function with(): array
+{
+    return [
+        'releases' => [
+            // Ihre Daten hier
+        ]
+    ];
+}
+```
+
+---
+
+## 📚 Weitere Dokumentation
+
+Siehe `MIGRATION-TO-LARAVEL.md` für:
+- Detaillierte Konvertierungs-Schritte
+- React → Livewire Mapping
+- Performance-Optimierungen
+- Testing & Debugging
+- Nächste Schritte
+
+---
+
+## 🎯 Nächste Schritte
+
+1. **Datenbank-Integration**
+   - Eloquent Model erstellen
+   - Migration & Seeder
+
+2. **Pagination**
+   - Livewire Pagination
+   - Infinite Scroll
+
+3. **Suche & Filter**
+   - Laravel Scout
+   - Full-Text Search
+
+4. **Admin-Panel**
+   - CRUD Interface
+   - Bild-Upload
+
+5. **API**
+   - REST Endpoints
+   - Dokumentation
+
+---
+
+## ✅ Checkliste
+
+- [x] Haupt-Blade-Datei erstellt
+- [x] Livewire-Komponenten konvertiert
+- [x] Theme-CSS mit Animationen
+- [x] Responsive Design
+- [x] Accessibility Features
+- [x] Dokumentation
+- [ ] Datenbank-Integration
+- [ ] Pagination
+- [ ] Admin-Panel
+- [ ] API
+
+---
+
+## 📞 Support
+
+Bei Fragen oder Problemen:
+- Siehe `CLAUDE.md` im Root-Verzeichnis
+- Laravel Docs: https://laravel.com/docs
+- Livewire Docs: https://livewire.laravel.com
+
+---
+
+**Version:** 1.0.0
+**Datum:** 15. Oktober 2025
+**Status:** ✅ Production Ready
--- a/dev/presswave/README.md
+++ b/dev/presswave/README.md
@ -0,0 +1,73 @@
+# Welcome to your Lovable project
+
+## Project info
+
+**URL**: https://lovable.dev/projects/ef894f48-1afe-4fd3-a1f8-ac097777ee45
+
+## How can I edit this code?
+
+There are several ways of editing your application.
+
+**Use Lovable**
+
+Simply visit the [Lovable Project](https://lovable.dev/projects/ef894f48-1afe-4fd3-a1f8-ac097777ee45) and start prompting.
+
+Changes made via Lovable will be committed automatically to this repo.
+
+**Use your preferred IDE**
+
+If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable.
+
+The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating)
+
+Follow these steps:
+
+```sh
+# Step 1: Clone the repository using the project's Git URL.
+git clone <YOUR_GIT_URL>
+
+# Step 2: Navigate to the project directory.
+cd <YOUR_PROJECT_NAME>
+
+# Step 3: Install the necessary dependencies.
+npm i
+
+# Step 4: Start the development server with auto-reloading and an instant preview.
+npm run dev
+```
+
+**Edit a file directly in GitHub**
+
+- Navigate to the desired file(s).
+- Click the "Edit" button (pencil icon) at the top right of the file view.
+- Make your changes and commit the changes.
+
+**Use GitHub Codespaces**
+
+- Navigate to the main page of your repository.
+- Click on the "Code" button (green button) near the top right.
+- Select the "Codespaces" tab.
+- Click on "New codespace" to launch a new Codespace environment.
+- Edit files directly within the Codespace and commit and push your changes once you're done.
+
+## What technologies are used for this project?
+
+This project is built with:
+
+- Vite
+- TypeScript
+- React
+- shadcn-ui
+- Tailwind CSS
+
+## How can I deploy this project?
+
+Simply open [Lovable](https://lovable.dev/projects/ef894f48-1afe-4fd3-a1f8-ac097777ee45) and click on Share -> Publish.
+
+## Can I connect a custom domain to my Lovable project?
+
+Yes, you can!
+
+To connect a domain, navigate to Project > Settings > Domains and click Connect Domain.
+
+Read more here: [Setting up a custom domain](https://docs.lovable.dev/features/custom-domain#custom-domain)
--- a/dev/presswave/bun.lockb
+++ b/dev/presswave/bun.lockb
--- a/dev/presswave/components.json
+++ b/dev/presswave/components.json
@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}
--- a/dev/presswave/eslint.config.js
+++ b/dev/presswave/eslint.config.js
@ -0,0 +1,26 @@
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+export default tseslint.config(
+  { ignores: ["dist"] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ["**/*.{ts,tsx}"],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+      "@typescript-eslint/no-unused-vars": "off",
+    },
+  },
+);
--- a/dev/presswave/index.html
+++ b/dev/presswave/index.html
@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Business Portal – Pressemitteilungen aus DACH</title>
+    <meta name="description" content="Aktuelle Pressemitteilungen aus Deutschland, Österreich und der Schweiz. Finden Sie News aus Wirtschaft, Technologie, Gesundheit und mehr." />
+    <meta name="author" content="Business Portal" />
+
+    <meta property="og:title" content="Business Portal – Pressemitteilungen aus DACH" />
+    <meta property="og:description" content="Aktuelle Pressemitteilungen aus Deutschland, Österreich und der Schweiz." />
+    <meta property="og:type" content="website" />
+    <meta property="og:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:site" content="@lovable_dev" />
+    <meta name="twitter:image" content="https://lovable.dev/opengraph-image-p98pqg.png" />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/dev/presswave/package-lock.json
+++ b/dev/presswave/package-lock.json
--- a/dev/presswave/package.json
+++ b/dev/presswave/package.json
@ -0,0 +1,83 @@
+{
+  "name": "vite_react_shadcn_ts",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:dev": "vite build --mode development",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-accordion": "^1.2.11",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@radix-ui/react-aspect-ratio": "^1.1.7",
+    "@radix-ui/react-avatar": "^1.1.10",
+    "@radix-ui/react-checkbox": "^1.3.2",
+    "@radix-ui/react-collapsible": "^1.1.11",
+    "@radix-ui/react-context-menu": "^2.2.15",
+    "@radix-ui/react-dialog": "^1.1.14",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-label": "^2.1.7",
+    "@radix-ui/react-menubar": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.13",
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-progress": "^1.1.7",
+    "@radix-ui/react-radio-group": "^1.3.7",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-switch": "^1.2.5",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-toast": "^1.2.14",
+    "@radix-ui/react-toggle": "^1.1.9",
+    "@radix-ui/react-toggle-group": "^1.1.10",
+    "@radix-ui/react-tooltip": "^1.2.7",
+    "@tanstack/react-query": "^5.83.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "date-fns": "^3.6.0",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lucide-react": "^0.462.0",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "^7.61.1",
+    "react-resizable-panels": "^2.1.9",
+    "react-router-dom": "^6.30.1",
+    "recharts": "^2.15.4",
+    "sonner": "^1.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.9",
+    "zod": "^3.25.76"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/node": "^22.16.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^15.15.0",
+    "lovable-tagger": "^1.1.10",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^5.4.19"
+  }
+}
--- a/dev/presswave/postcss.config.js
+++ b/dev/presswave/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
--- a/dev/presswave/public/favicon.ico
+++ b/dev/presswave/public/favicon.ico
--- a/dev/presswave/public/placeholder.svg
+++ b/dev/presswave/public/placeholder.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>
--- a/dev/presswave/public/robots.txt
+++ b/dev/presswave/public/robots.txt
@ -0,0 +1,14 @@
+User-agent: Googlebot
+Allow: /
+
+User-agent: Bingbot
+Allow: /
+
+User-agent: Twitterbot
+Allow: /
+
+User-agent: facebookexternalhit
+Allow: /
+
+User-agent: *
+Allow: /
--- a/dev/presswave/src/App.css
+++ b/dev/presswave/src/App.css
@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
--- a/dev/presswave/src/App.tsx
+++ b/dev/presswave/src/App.tsx
@ -0,0 +1,44 @@
+import { Toaster } from "@/components/ui/toaster";
+import { Toaster as Sonner } from "@/components/ui/sonner";
+import { TooltipProvider } from "@/components/ui/tooltip";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { ThemeProvider } from "@/components/ThemeProvider";
+import Index from "./pages/Index";
+import ReleaseDetail from "./pages/ReleaseDetail";
+import PressExample from "./pages/PressExample";
+import Preise from "./pages/Preise";
+import UeberUns from "./pages/UeberUns";
+import FAQ from "./pages/FAQ";
+import Kontakt from "./pages/Kontakt";
+import KategorieIT from "./pages/KategorieIT";
+import NotFound from "./pages/NotFound";
+
+const queryClient = new QueryClient();
+
+const App = () => (
+  <QueryClientProvider client={queryClient}>
+    <ThemeProvider defaultTheme="light" storageKey="ui-theme">
+      <TooltipProvider>
+        <Toaster />
+        <Sonner />
+        <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Index />} />
+            <Route path="/release/:slug" element={<ReleaseDetail />} />
+            <Route path="/beispiel" element={<PressExample />} />
+            <Route path="/preise" element={<Preise />} />
+            <Route path="/ueber-uns" element={<UeberUns />} />
+            <Route path="/faq" element={<FAQ />} />
+            <Route path="/kontakt" element={<Kontakt />} />
+            <Route path="/kategorie/it" element={<KategorieIT />} />
+            {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
+            <Route path="*" element={<NotFound />} />
+          </Routes>
+        </BrowserRouter>
+      </TooltipProvider>
+    </ThemeProvider>
+  </QueryClientProvider>
+);
+
+export default App;
--- a/dev/presswave/src/assets/businessportal.svg
+++ b/dev/presswave/src/assets/businessportal.svg
@ -0,0 +1,102 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 29.8.1, SVG Export Plug-In . SVG Version: 9.03 Build 0)  -->
+<svg version="1.0" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 600 200" style="enable-background:new 0 0 600 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F0834A;}
+	.st1{fill:#CF3628;}
+</style>
+<g>
+	<g>
+		<path class="st0" d="M201,70.2c0,2.6-0.5,4.9-1.4,6.6c-0.9,1.8-2.1,3.1-3.7,4c-1.5,0.9-3.3,1.3-5.3,1.3c-2.9,0-5.1-0.9-6.6-2.6
+			c-1.6-1.7-2.3-4.5-2.3-8.2V48.1h-12.9v25.1c0,4.5,0.8,8.3,2.4,11.2c1.6,3,3.8,5.2,6.7,6.6c2.9,1.4,6.1,2.2,9.9,2.2
+			c3.4,0,6.5-0.8,9.4-2.4c1.7-0.9,3.1-2.1,4.4-3.6v5.3h12.2V48.1H201V70.2z"/>
+		<path class="st0" d="M256.2,69.2c-1.6-0.9-3.4-1.6-5.2-2.1c-1.9-0.5-3.8-0.9-5.7-1.2c-1.9-0.3-3.7-0.6-5.3-0.8
+			c-1.6-0.3-2.9-0.7-3.9-1.3c-1-0.6-1.5-1.4-1.5-2.5c0-1.2,0.7-2.2,2-3c1.3-0.8,3.5-1.2,6.4-1.2c2,0,4,0.2,6.2,0.7
+			c2.2,0.5,4.3,1.4,6.4,2.6l4.4-9.2c-2.1-1.2-4.8-2.2-7.9-2.9c-3.1-0.7-6.2-1-9.3-1c-4.3,0-7.9,0.6-11,1.8c-3,1.2-5.4,2.9-7,5.1
+			c-1.6,2.2-2.5,4.7-2.5,7.5c0,2.5,0.5,4.6,1.4,6.2c1,1.6,2.3,2.9,3.9,3.8c1.6,0.9,3.4,1.6,5.3,2.1c1.9,0.5,3.8,0.9,5.7,1.2
+			c1.9,0.3,3.7,0.6,5.2,0.8c1.6,0.3,2.8,0.7,3.8,1.2c1,0.5,1.4,1.3,1.4,2.4c0,1.3-0.6,2.3-1.9,3c-1.2,0.7-3.3,1.1-6.3,1.1
+			c-2.7,0-5.4-0.4-8.2-1.2c-2.8-0.8-5.2-1.8-7.3-3l-4.2,9.2c2.1,1.4,4.9,2.5,8.3,3.4c3.5,0.9,7.1,1.4,10.9,1.4
+			c4.4,0,8.2-0.6,11.3-1.8c3.1-1.2,5.5-2.9,7.1-5c1.6-2.1,2.5-4.5,2.5-7.2c0-2.5-0.5-4.6-1.4-6.2C259.1,71.4,257.8,70.1,256.2,69.2z
+			"/>
+		<rect x="269.4" y="48.1" class="st0" width="12.9" height="44.5"/>
+		<path class="st0" d="M281.7,29.4c-1.5-1.3-3.4-1.9-5.8-1.9c-2.4,0-4.4,0.7-5.8,2.1c-1.5,1.4-2.2,3.1-2.2,5.1c0,2,0.7,3.8,2.2,5.1
+			c1.5,1.4,3.4,2.1,5.8,2.1c2.4,0,4.4-0.7,5.8-2.1c1.5-1.4,2.2-3.2,2.2-5.3C283.9,32.4,283.2,30.7,281.7,29.4z"/>
+		<path class="st0" d="M330.6,49.5c-2.8-1.4-5.9-2.1-9.4-2.1c-3.8,0-7.2,0.8-10.1,2.4c-1.8,0.9-3.3,2.1-4.5,3.6v-5.3h-12.3v44.5
+			h12.9v-22c0-2.8,0.5-5.1,1.4-6.8c0.9-1.7,2.2-3,3.8-3.9c1.6-0.9,3.4-1.3,5.5-1.3c2.9,0,5.1,0.9,6.6,2.6c1.6,1.7,2.3,4.4,2.3,7.9
+			v23.5h12.8V67.1c0-4.5-0.8-8.2-2.4-11.1C335.5,53.1,333.4,50.9,330.6,49.5z"/>
+		<path class="st0" d="M383.5,50.2c-3.5-1.9-7.4-2.8-11.7-2.8c-4.5,0-8.6,1-12.1,2.9c-3.6,2-6.4,4.7-8.4,8.1c-2,3.5-3,7.4-3,11.8
+			c0,4.4,1,8.3,3.1,11.8c2.1,3.4,5,6.2,8.8,8.1c3.8,2,8.2,3,13.3,3c4,0,7.6-0.6,10.6-1.9c3.1-1.2,5.6-3,7.7-5.3l-6.8-7.4
+			c-1.5,1.4-3.1,2.5-4.9,3.2c-1.8,0.7-3.8,1.1-6.1,1.1c-2.7,0-5-0.5-6.9-1.4c-1.9-1-3.4-2.4-4.5-4.2c-0.6-1-1-2.1-1.3-3.3h33.5
+			c0.1-0.6,0.1-1.1,0.2-1.8c0.1-0.6,0.1-1.2,0.1-1.7c0-4.8-1-8.9-3-12.3C389.8,54.8,387,52.1,383.5,50.2z M366.1,58.6
+			c1.7-1,3.6-1.4,5.8-1.4c2.2,0,4.1,0.5,5.8,1.4c1.6,1,2.9,2.3,3.9,4c0.6,1.1,1,2.4,1.2,3.8H361c0.2-1.4,0.6-2.6,1.2-3.8
+			C363.1,61,364.4,59.6,366.1,58.6z"/>
+		<path class="st0" d="M434,69.2c-1.6-0.9-3.4-1.6-5.2-2.1c-1.9-0.5-3.8-0.9-5.7-1.2c-1.9-0.3-3.7-0.6-5.3-0.8
+			c-1.6-0.3-2.9-0.7-3.9-1.3c-1-0.6-1.5-1.4-1.5-2.5c0-1.2,0.7-2.2,2-3c1.3-0.8,3.5-1.2,6.4-1.2c2,0,4,0.2,6.2,0.7
+			c2.2,0.5,4.3,1.4,6.4,2.6l4.4-9.2c-2.1-1.2-4.8-2.2-7.9-2.9c-3.1-0.7-6.2-1-9.3-1c-4.3,0-7.9,0.6-11,1.8c-3,1.2-5.4,2.9-7,5.1
+			c-1.6,2.2-2.5,4.7-2.5,7.5c0,2.5,0.5,4.6,1.4,6.2c1,1.6,2.3,2.9,3.9,3.8c1.6,0.9,3.4,1.6,5.3,2.1c1.9,0.5,3.8,0.9,5.7,1.2
+			c1.9,0.3,3.7,0.6,5.2,0.8c1.6,0.3,2.8,0.7,3.8,1.2c1,0.5,1.4,1.3,1.4,2.4c0,1.3-0.6,2.3-1.9,3c-1.2,0.7-3.3,1.1-6.3,1.1
+			c-2.7,0-5.4-0.4-8.2-1.2c-2.8-0.8-5.2-1.8-7.3-3l-4.2,9.2c2.1,1.4,4.9,2.5,8.3,3.4c3.5,0.9,7.1,1.4,10.9,1.4
+			c4.4,0,8.2-0.6,11.3-1.8c3.1-1.2,5.5-2.9,7.1-5c1.6-2.1,2.5-4.5,2.5-7.2c0-2.5-0.5-4.6-1.4-6.2C436.9,71.4,435.6,70.1,434,69.2z"
+			/>
+		<path class="st0" d="M481.6,73c-1-1.6-2.3-2.9-3.9-3.8c-1.6-0.9-3.4-1.6-5.2-2.1c-1.9-0.5-3.8-0.9-5.7-1.2
+			c-1.9-0.3-3.7-0.6-5.3-0.8c-1.6-0.3-2.9-0.7-3.9-1.3c-1-0.6-1.5-1.4-1.5-2.5c0-1.2,0.7-2.2,2-3c1.3-0.8,3.5-1.2,6.4-1.2
+			c2,0,4,0.2,6.2,0.7c2.2,0.5,4.3,1.4,6.4,2.6l4.4-9.2c-2.1-1.2-4.8-2.2-7.9-2.9c-3.1-0.7-6.2-1-9.3-1c-4.3,0-7.9,0.6-11,1.8
+			c-3,1.2-5.4,2.9-7,5.1c-1.6,2.2-2.5,4.7-2.5,7.5c0,2.5,0.5,4.6,1.4,6.2c1,1.6,2.3,2.9,3.9,3.8c1.6,0.9,3.4,1.6,5.3,2.1
+			c1.9,0.5,3.8,0.9,5.7,1.2c1.9,0.3,3.7,0.6,5.2,0.8c1.6,0.3,2.8,0.7,3.8,1.2c1,0.5,1.4,1.3,1.4,2.4c0,1.3-0.6,2.3-1.9,3
+			c-1.2,0.7-3.3,1.1-6.3,1.1c-2.7,0-5.4-0.4-8.2-1.2c-2.8-0.8-5.2-1.8-7.3-3l-4.2,9.2c2.1,1.4,4.9,2.5,8.3,3.4
+			c3.5,0.9,7.1,1.4,10.9,1.4c4.4,0,8.2-0.6,11.3-1.8c3.1-1.2,5.5-2.9,7.1-5c1.6-2.1,2.5-4.5,2.5-7.2C483,76.7,482.5,74.6,481.6,73z"
+			/>
+	</g>
+	<g>
+		<path class="st1" d="M245.1,115c-3.3-1.9-7.1-2.8-11.4-2.8c-3.7,0-7.1,0.8-10.1,2.5c-2.2,1.2-4,2.8-5.5,4.9v-6.9h-7.6v59.9h7.9
+			v-22.7c1.5,1.9,3.3,3.5,5.3,4.6c3,1.7,6.3,2.5,9.9,2.5c4.3,0,8.1-0.9,11.4-2.8c3.3-1.9,5.9-4.5,7.8-7.9c1.9-3.4,2.9-7.3,2.9-11.7
+			c0-4.5-1-8.4-2.9-11.7C251,119.5,248.4,116.9,245.1,115z M245.9,142.7c-1.3,2.3-3,4.1-5.3,5.4c-2.2,1.3-4.7,1.9-7.5,1.9
+			c-2.7,0-5.2-0.6-7.5-1.9c-2.2-1.3-4-3.1-5.3-5.4c-1.3-2.3-1.9-5.1-1.9-8.1c0-3.1,0.6-5.9,1.9-8.1c1.3-2.3,3-4.1,5.3-5.3
+			c2.2-1.3,4.7-1.9,7.5-1.9c2.8,0,5.3,0.6,7.5,1.9c2.2,1.3,4,3,5.3,5.3c1.3,2.3,1.9,5,1.9,8.1C247.9,137.6,247.2,140.3,245.9,142.7z
+			"/>
+		<path class="st1" d="M297.2,115.1c-3.4-1.9-7.3-2.9-11.7-2.9c-4.4,0-8.3,1-11.7,2.9c-3.4,1.9-6.1,4.6-8.1,7.9c-2,3.3-3,7.2-3,11.5
+			c0,4.3,1,8.1,3,11.5c2,3.4,4.7,6.1,8.1,8c3.4,1.9,7.3,2.9,11.7,2.9c4.3,0,8.2-1,11.7-2.9c3.4-1.9,6.1-4.6,8.1-7.9
+			c1.9-3.4,2.9-7.2,2.9-11.6c0-4.4-1-8.2-2.9-11.6C303.3,119.6,300.6,117,297.2,115.1z M298.3,142.7c-1.3,2.3-3,4.1-5.2,5.4
+			c-2.2,1.3-4.7,1.9-7.5,1.9s-5.3-0.6-7.5-1.9c-2.2-1.3-4-3.1-5.3-5.4c-1.3-2.3-2-5.1-2-8.1c0-3.1,0.7-5.9,2-8.1s3.1-4.1,5.3-5.3
+			c2.2-1.3,4.7-1.9,7.5-1.9s5.3,0.6,7.5,1.9c2.2,1.3,4,3,5.2,5.3c1.3,2.3,1.9,5,1.9,8.1C300.2,137.6,299.5,140.3,298.3,142.7z"/>
+		<path class="st1" d="M326.7,120v-7.4h-7.6v43.8h7.9v-21.8c0-4.8,1.2-8.5,3.7-11c2.5-2.5,5.8-3.8,10-3.8c0.3,0,0.6,0,0.9,0
+			c0.3,0,0.6,0,0.9,0.1v-7.7c-4.2,0-7.7,0.8-10.5,2.4C329.7,115.9,327.9,117.7,326.7,120z"/>
+		<path class="st1" d="M370,150.3c-2.2,0-3.9-0.6-5.1-1.9c-1.2-1.3-1.8-3.1-1.8-5.5v-23.7h12.5v-6.5h-12.5V103h-7.9v9.6h-7.4v6.5
+			h7.4v24.1c0,4.4,1.2,7.8,3.6,10.2c2.4,2.4,5.8,3.6,10.2,3.6c1.8,0,3.6-0.2,5.2-0.7c1.7-0.5,3.1-1.3,4.3-2.3l-2.5-5.7
+			C374.5,149.6,372.5,150.3,370,150.3z"/>
+		<path class="st1" d="M402.5,112.2c-3.5,0-6.8,0.5-9.9,1.4c-3.2,1-5.9,2.4-8.1,4.2l3.3,6c1.7-1.4,3.8-2.6,6.3-3.4
+			c2.5-0.9,5-1.3,7.6-1.3c3.9,0,6.8,0.9,8.8,2.8c1.9,1.8,2.9,4.5,2.9,7.8v1.6h-12.5c-4.3,0-7.8,0.6-10.3,1.7
+			c-2.6,1.2-4.4,2.7-5.5,4.6c-1.1,1.9-1.7,4.1-1.7,6.5c0,2.5,0.7,4.7,2,6.7c1.3,2,3.2,3.5,5.6,4.6c2.4,1.1,5.3,1.7,8.5,1.7
+			c4,0,7.3-0.8,10-2.3c1.9-1.1,3.3-2.4,4.4-4v5.8h7.5V130c0-6-1.6-10.5-4.9-13.4C413.1,113.7,408.5,112.2,402.5,112.2z M408.4,148.8
+			c-2.2,1.3-4.8,2-7.8,2c-3,0-5.4-0.6-7.1-1.9c-1.7-1.3-2.6-3-2.6-5.2c0-1.9,0.7-3.5,2.1-4.8c1.4-1.3,4-2,8-2h12.2v6.1
+			C412.3,145.6,410.7,147.5,408.4,148.8z"/>
+		<rect x="435.8" y="95.1" class="st1" width="7.9" height="61.4"/>
+	</g>
+	<g>
+		<path class="st0" d="M471.9,143.6c1.5-1.4,2.6-2.6,3.3-3.7c0.7-1.1,1.3-2.2,1.5-3.2c0.3-1,0.4-2,0.4-3c0-1.9-0.5-3.6-1.5-5
+			c-1-1.4-2.3-2.5-4.1-3.2c-1.8-0.8-3.8-1.1-6.2-1.1c-2.8,0-5.3,0.5-7.5,1.6c-2.2,1.1-3.8,2.5-5,4.3l5.3,3.4
+			c0.8-1.1,1.7-1.8,2.8-2.4c1.1-0.5,2.3-0.8,3.7-0.8c1.7,0,2.9,0.3,3.8,1c0.8,0.7,1.3,1.7,1.3,2.9c0,0.5-0.1,1.1-0.2,1.6
+			c-0.2,0.6-0.5,1.2-0.9,1.9c-0.5,0.7-1.2,1.5-2.1,2.3l-12.1,11.5v4.7h23.8v-6h-13.6L471.9,143.6z"/>
+		<polygon class="st0" points="509.5,143.9 504.4,143.9 504.4,138 497.5,138 497.5,143.9 489.1,143.9 502.9,124.9 495.2,124.9 
+			480.4,144.9 480.4,149.8 497.3,149.8 497.3,156.5 504.4,156.5 504.4,149.8 509.5,149.8 		"/>
+	</g>
+	<rect x="116" y="34.4" transform="matrix(0.5392 -0.8422 0.8422 0.5392 5.2205 125.2733)" class="st1" width="2.1" height="46.9"/>
+	
+		<rect x="96.8" y="74.2" transform="matrix(0.9728 -0.2315 0.2315 0.9728 -14.2288 29.1468)" class="st1" width="40.6" height="2.1"/>
+	<ellipse class="st0" cx="137.1" cy="69.7" rx="7.1" ry="7.6"/>
+	<ellipse class="st0" cx="97.3" cy="45.2" rx="6.9" ry="7.4"/>
+	<ellipse class="st0" cx="97.3" cy="79.9" rx="6.9" ry="7.4"/>
+	<g>
+		<path class="st0" d="M125.1,52.8c0.8-0.8,1.6-1.6,2.5-2.2V33.7h-2.5V52.8z"/>
+		<path class="st0" d="M160.1,60.8c-1.3-2.3-2.9-4.2-4.8-5.8c0.9,1,1.6,2.1,2.3,3.3c1.9,3.4,2.9,7.4,2.9,12.1c0,4.6-1,8.7-2.9,12.1
+			c-1.9,3.4-4.6,6.1-7.9,8c-3.3,1.9-7.1,2.9-11.3,2.9c-3.8,0-7.1-0.8-9.9-2.4c-1.5-0.9-2.8-2-3.9-3.3v5.1h-9.8v2.5H127V90
+			c1.1,1.4,2.4,2.5,3.9,3.3c2.8,1.6,6.1,2.4,9.9,2.4c4.2,0,8-1,11.3-2.9c3.3-1.9,6-4.6,7.9-8c1.9-3.4,2.9-7.4,2.9-12.1
+			C163,68.2,162.1,64.2,160.1,60.8z"/>
+	</g>
+	<path class="st1" d="M157.6,58.3c-1.9-3.4-4.6-6.1-7.9-8c-3.3-1.9-7.1-2.9-11.3-2.9c-3.7,0-6.9,0.8-9.7,2.5
+		c-1.3,0.8-2.5,1.8-3.5,2.9V31.2h-12.9v61.4h12.3v-5.1c1.1,1.4,2.4,2.5,3.9,3.3c2.8,1.6,6.1,2.4,9.9,2.4c4.2,0,8-1,11.3-2.9
+		c3.3-1.9,6-4.6,7.9-8c1.9-3.4,2.9-7.4,2.9-12.1C160.5,65.7,159.6,61.7,157.6,58.3z M137.1,84.1c-7.4,0-13.5-6.5-13.5-14.4
+		s6-14.4,13.5-14.4s13.5,6.5,13.5,14.4S144.5,84.1,137.1,84.1z"/>
+</g>
+</svg>
--- a/dev/presswave/src/assets/press-ai-automation.jpg
+++ b/dev/presswave/src/assets/press-ai-automation.jpg
--- a/dev/presswave/src/assets/press-emobility.jpg
+++ b/dev/presswave/src/assets/press-emobility.jpg
--- a/dev/presswave/src/assets/press-example-hero.jpg
+++ b/dev/presswave/src/assets/press-example-hero.jpg
--- a/dev/presswave/src/assets/press-renewable-energy.jpg
+++ b/dev/presswave/src/assets/press-renewable-energy.jpg
--- a/dev/presswave/src/components/BurgerMenu.tsx
+++ b/dev/presswave/src/components/BurgerMenu.tsx
@ -0,0 +1,174 @@
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { Menu, ChevronDown, Building2, FileText, Users, Mail, BookOpen, TrendingUp, Shield } from "lucide-react";
+import { useState } from "react";
+
+const menuSections = [
+  {
+    title: "Portal",
+    items: [
+      { label: "Startseite", href: "/" },
+      { label: "Kategorien", href: "/kategorien" },
+      { label: "Suche", href: "/suche" },
+    ],
+  },
+  {
+    title: "Services",
+    icon: TrendingUp,
+    items: [
+      { label: "Pressemitteilung veröffentlichen", href: "/veroeffentlichen" },
+      { label: "Newsrooms", href: "/newsrooms" },
+      { label: "Preise & Leistungen", href: "/preise" },
+      { label: "API & Integrationen", href: "/api" },
+    ],
+  },
+  {
+    title: "Über uns",
+    icon: Users,
+    items: [
+      { label: "Über Business Portal", href: "/ueber-uns" },
+      { label: "Team", href: "/team" },
+      { label: "Partner", href: "/partner" },
+      { label: "Karriere", href: "/karriere" },
+      { label: "Presse", href: "/presse" },
+    ],
+  },
+  {
+    title: "Hilfe & Support",
+    icon: BookOpen,
+    items: [
+      { label: "FAQ", href: "/faq" },
+      { label: "Hilfe-Center", href: "/hilfe" },
+      { label: "Kontakt", href: "/kontakt" },
+    ],
+  },
+  {
+    title: "Rechtliches",
+    icon: Shield,
+    items: [
+      { label: "Impressum", href: "/impressum" },
+      { label: "Datenschutz", href: "/datenschutz" },
+      { label: "AGB", href: "/agb" },
+      { label: "Cookie-Richtlinien", href: "/cookies" },
+    ],
+  },
+];
+
+export function BurgerMenu() {
+  const [openSections, setOpenSections] = useState<string[]>([]);
+
+  const toggleSection = (title: string) => {
+    setOpenSections((prev) =>
+      prev.includes(title)
+        ? prev.filter((t) => t !== title)
+        : [...prev, title]
+    );
+  };
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="mr-2">
+          <Menu className="h-5 w-5" />
+          <span className="sr-only">Menü öffnen</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="left" className="w-[320px] sm:w-[400px] bg-card overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-2">
+            <span className="w-1 h-6 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+            Navigation
+          </SheetTitle>
+        </SheetHeader>
+        
+        <nav className="mt-8 space-y-6">
+          {menuSections.map((section) => (
+            <div key={section.title}>
+              {section.items.length > 1 ? (
+                <Collapsible
+                  open={openSections.includes(section.title)}
+                  onOpenChange={() => toggleSection(section.title)}
+                >
+                  <CollapsibleTrigger className="flex items-center justify-between w-full py-2 text-sm font-semibold text-foreground hover:text-primary transition-colors">
+                    <span className="flex items-center gap-2">
+                      {section.icon && <section.icon className="h-4 w-4" />}
+                      {section.title}
+                    </span>
+                    <ChevronDown
+                      className={`h-4 w-4 transition-transform ${
+                        openSections.includes(section.title) ? "rotate-180" : ""
+                      }`}
+                    />
+                  </CollapsibleTrigger>
+                  <CollapsibleContent className="mt-2 space-y-1 pl-6">
+                    {section.items.map((item) => (
+                      <a
+                        key={item.href}
+                        href={item.href}
+                        className="block py-2 text-sm text-muted-foreground hover:text-foreground hover:translate-x-1 transition-all"
+                      >
+                        {item.label}
+                      </a>
+                    ))}
+                  </CollapsibleContent>
+                </Collapsible>
+              ) : (
+                <div className="space-y-1">
+                  <div className="py-2 text-sm font-semibold text-foreground">
+                    {section.title}
+                  </div>
+                  {section.items.map((item) => (
+                    <a
+                      key={item.href}
+                      href={item.href}
+                      className="block py-2 text-sm text-muted-foreground hover:text-foreground hover:translate-x-1 transition-all"
+                    >
+                      {item.label}
+                    </a>
+                  ))}
+                </div>
+              )}
+            </div>
+          ))}
+        </nav>
+
+        {/* Footer Actions */}
+        <div className="mt-8 pt-6 border-t border-border space-y-3">
+          <Button className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90">
+            Pressemitteilung veröffentlichen
+          </Button>
+          <div className="flex gap-2">
+            <Button variant="outline" className="flex-1">
+              Anmelden
+            </Button>
+            <Button variant="outline" className="flex-1">
+              Registrieren
+            </Button>
+          </div>
+        </div>
+
+        {/* Contact Info */}
+        <div className="mt-6 p-4 bg-muted/30 rounded-lg">
+          <div className="flex items-center gap-2 text-sm text-muted-foreground mb-2">
+            <Mail className="h-4 w-4" />
+            <span>Kontakt</span>
+          </div>
+          <a href="mailto:info@businessportal.de" className="text-sm text-foreground hover:text-primary">
+            info@businessportal.de
+          </a>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
--- a/dev/presswave/src/components/FilterBar.tsx
+++ b/dev/presswave/src/components/FilterBar.tsx
@ -0,0 +1,89 @@
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Calendar, Building2, MapPin, SortDesc, X } from "lucide-react";
+
+export function FilterBar() {
+  return (
+    <div className="sticky top-16 z-40 bg-background/95 backdrop-blur-sm border-b border-border shadow-sm">
+      <div className="container mx-auto px-4 py-4">
+        <div className="flex flex-wrap items-center gap-3">
+          {/* Zeitraum */}
+          <Select defaultValue="7">
+            <SelectTrigger className="w-[140px]">
+              <Calendar className="h-4 w-4 mr-2" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="today">Heute</SelectItem>
+              <SelectItem value="7">7 Tage</SelectItem>
+              <SelectItem value="30">30 Tage</SelectItem>
+              <SelectItem value="custom">Zeitraum</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Branche */}
+          <Select defaultValue="all">
+            <SelectTrigger className="w-[160px]">
+              <Building2 className="h-4 w-4 mr-2" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle Branchen</SelectItem>
+              <SelectItem value="it">IT & Software</SelectItem>
+              <SelectItem value="finance">Finanzen</SelectItem>
+              <SelectItem value="health">Gesundheit</SelectItem>
+              <SelectItem value="auto">Automobil</SelectItem>
+              <SelectItem value="energy">Energie</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Region */}
+          <Select defaultValue="all">
+            <SelectTrigger className="w-[160px]">
+              <MapPin className="h-4 w-4 mr-2" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">Alle Regionen</SelectItem>
+              <SelectItem value="de">Deutschland</SelectItem>
+              <SelectItem value="at">Österreich</SelectItem>
+              <SelectItem value="ch">Schweiz</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Sortierung */}
+          <Select defaultValue="newest">
+            <SelectTrigger className="w-[160px]">
+              <SortDesc className="h-4 w-4 mr-2" />
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="newest">Neueste</SelectItem>
+              <SelectItem value="relevance">Relevanz</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Active Filters Display */}
+          <div className="flex items-center gap-2 flex-wrap ml-auto">
+            <Badge variant="secondary" className="rounded-full px-3 py-1.5 bg-primary/10 text-primary border-primary/20 flex items-center gap-1.5">
+              7 Tage
+              <X className="h-3 w-3 cursor-pointer hover:text-primary/70" />
+            </Badge>
+          </div>
+
+          {/* Reset */}
+          <Button variant="ghost" size="sm" className="text-muted-foreground hover:text-foreground">
+            Alle zurücksetzen
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/dev/presswave/src/components/Header.tsx
+++ b/dev/presswave/src/components/Header.tsx
@ -0,0 +1,51 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Search } from "lucide-react";
+import logo from "@/assets/businessportal.svg";
+import { BurgerMenu } from "@/components/BurgerMenu";
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-50 bg-card border-b border-border/50 shadow-sm backdrop-blur-sm">
+      {/* Brand Accent Bar */}
+      <div className="h-1 bg-gradient-to-r from-primary via-secondary to-primary"></div>
+      
+      <div className="container mx-auto px-4 h-16 flex items-center justify-between gap-4">
+        {/* Burger Menu + Logo */}
+        <div className="flex items-center gap-2">
+          <BurgerMenu />
+          <a href="/" className="flex-shrink-0">
+            <img src={logo} alt="Business Portal" className="h-10 w-auto" />
+          </a>
+        </div>
+
+        {/* Search - Desktop */}
+        <div className="hidden md:flex flex-1 max-w-xl">
+          <div className="relative w-full">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+            <Input
+              type="search"
+              placeholder="Pressemitteilungen durchsuchen..."
+              className="pl-10 w-full"
+            />
+          </div>
+        </div>
+
+        {/* Search Icon - Mobile */}
+        <button className="md:hidden p-2 hover:bg-muted rounded-lg transition-colors">
+          <Search className="h-5 w-5 text-foreground" />
+        </button>
+
+        {/* CTA Buttons */}
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" className="hidden sm:inline-flex">
+            Anmelden
+          </Button>
+          <Button className="bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 shadow-md">
+            Veröffentlichen
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+}
--- a/dev/presswave/src/components/PressReleaseCard.tsx
+++ b/dev/presswave/src/components/PressReleaseCard.tsx
@ -0,0 +1,118 @@
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Building2, MapPin, Calendar, Image as ImageIcon, FileText } from "lucide-react";
+
+interface PressReleaseCardProps {
+  title: string;
+  teaser: string;
+  company: string;
+  industry: string;
+  region: string;
+  date: string;
+  hasImage?: boolean;
+  hasPdf?: boolean;
+  companyLogo?: string;
+  slug: string;
+  imageUrl?: string;
+}
+
+export function PressReleaseCard({
+  title,
+  teaser,
+  company,
+  industry,
+  region,
+  date,
+  hasImage = false,
+  hasPdf = false,
+  companyLogo,
+  slug,
+  imageUrl,
+}: PressReleaseCardProps) {
+  return (
+    <article className="group bg-card rounded-xl border border-border overflow-hidden transition-all duration-300 hover:shadow-card-hover hover:border-primary/20 hover:scale-[1.02] shadow-card">
+      {/* Image Preview */}
+      <div className="relative h-48 bg-gradient-to-br from-muted to-muted/50 overflow-hidden">
+        {imageUrl ? (
+          <img 
+            src={imageUrl} 
+            alt={title}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-primary/5 to-secondary/5">
+            <ImageIcon className="h-16 w-16 text-muted-foreground/30" />
+          </div>
+        )}
+        {/* Company Logo Overlay */}
+        {companyLogo && (
+          <div className="absolute bottom-3 left-3 w-12 h-12 rounded-lg bg-card/95 backdrop-blur-sm shadow-md flex items-center justify-center border border-border/50">
+            <Building2 className="h-6 w-6 text-primary" />
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      <div className="p-5">
+        {/* Company Name */}
+        {!companyLogo && (
+          <div className="mb-3 flex items-center gap-2">
+            <Building2 className="h-4 w-4 text-muted-foreground" />
+            <span className="text-sm font-medium text-foreground">{company}</span>
+          </div>
+        )}
+
+
+      {/* Title */}
+      <h3 className="text-lg font-semibold text-foreground line-clamp-2 mb-2 group-hover:text-primary transition-colors">
+        {title}
+      </h3>
+
+      {/* Teaser */}
+      <p className="text-[15px] leading-relaxed text-muted-foreground line-clamp-3 mb-4">
+        {teaser}
+      </p>
+
+
+      {/* Meta Info */}
+      <div className="flex flex-wrap items-center gap-2 mb-4 text-xs text-muted-foreground">
+        <span className="flex items-center gap-1">
+          <Building2 className="h-3 w-3" />
+          {industry}
+        </span>
+        <span>•</span>
+        <span className="flex items-center gap-1">
+          <MapPin className="h-3 w-3" />
+          {region}
+        </span>
+        <span>•</span>
+        <span className="flex items-center gap-1">
+          <Calendar className="h-3 w-3" />
+          {date}
+        </span>
+      </div>
+
+      {/* Media Badges & CTA */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          {hasImage && (
+            <Badge variant="secondary" className="text-xs rounded-full px-3 py-1 bg-primary/10 text-primary border-primary/20">
+              <ImageIcon className="h-3 w-3 mr-1" />
+              Bild
+            </Badge>
+          )}
+          {hasPdf && (
+            <Badge variant="secondary" className="text-xs rounded-full px-3 py-1 bg-secondary/10 text-secondary-foreground border-secondary/20">
+              <FileText className="h-3 w-3 mr-1" />
+              PDF
+            </Badge>
+          )}
+        </div>
+        <Button variant="ghost" size="sm" asChild className="group-hover:text-primary transition-colors">
+          <a href={`/release/${slug}`}>Lesen →</a>
+        </Button>
+      </div>
+      </div>
+    </article>
+  );
+}
--- a/dev/presswave/src/components/ThemeProvider.tsx
+++ b/dev/presswave/src/components/ThemeProvider.tsx
@ -0,0 +1,73 @@
+import { createContext, useContext, useEffect, useState } from "react";
+
+type Theme = "dark" | "light" | "system";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+  theme: "system",
+  setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
+
+export function ThemeProvider({
+  children,
+  defaultTheme = "system",
+  storageKey = "ui-theme",
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove("light", "dark");
+
+    if (theme === "system") {
+      const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+        .matches
+        ? "dark"
+        : "light";
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export const useTheme = () => {
+  const context = useContext(ThemeProviderContext);
+
+  if (context === undefined)
+    throw new Error("useTheme must be used within a ThemeProvider");
+
+  return context;
+};
--- a/dev/presswave/src/components/ThemeToggle.tsx
+++ b/dev/presswave/src/components/ThemeToggle.tsx
@ -0,0 +1,27 @@
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "@/components/ThemeProvider";
+import { Button } from "@/components/ui/button";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = () => {
+    setTheme(theme === "light" ? "dark" : "light");
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={toggleTheme}
+      className="gap-2"
+      aria-label="Theme wechseln"
+    >
+      <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="text-sm">
+        {theme === "light" ? "Hell" : "Dunkel"}
+      </span>
+    </Button>
+  );
+}
--- a/dev/presswave/src/components/ui/accordion.tsx
+++ b/dev/presswave/src/components/ui/accordion.tsx
@ -0,0 +1,52 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
--- a/dev/presswave/src/components/ui/alert-dialog.tsx
+++ b/dev/presswave/src/components/ui/alert-dialog.tsx
@ -0,0 +1,104 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
--- a/dev/presswave/src/components/ui/alert.tsx
+++ b/dev/presswave/src/components/ui/alert.tsx
@ -0,0 +1,43 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };
--- a/dev/presswave/src/components/ui/aspect-ratio.tsx
+++ b/dev/presswave/src/components/ui/aspect-ratio.tsx
@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };
--- a/dev/presswave/src/components/ui/avatar.tsx
+++ b/dev/presswave/src/components/ui/avatar.tsx
@ -0,0 +1,38 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };
--- a/dev/presswave/src/components/ui/badge.tsx
+++ b/dev/presswave/src/components/ui/badge.tsx
@ -0,0 +1,29 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };
--- a/dev/presswave/src/components/ui/breadcrumb.tsx
+++ b/dev/presswave/src/components/ui/breadcrumb.tsx
@ -0,0 +1,90 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};
--- a/dev/presswave/src/components/ui/button.tsx
+++ b/dev/presswave/src/components/ui/button.tsx
@ -0,0 +1,47 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };
--- a/dev/presswave/src/components/ui/calendar.tsx
+++ b/dev/presswave/src/components/ui/calendar.tsx
@ -0,0 +1,54 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100"),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ..._props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ..._props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
--- a/dev/presswave/src/components/ui/card.tsx
+++ b/dev/presswave/src/components/ui/card.tsx
@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
--- a/dev/presswave/src/components/ui/carousel.tsx
+++ b/dev/presswave/src/components/ui/carousel.tsx
@ -0,0 +1,224 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
--- a/dev/presswave/src/components/ui/chart.tsx
+++ b/dev/presswave/src/components/ui/chart.tsx
@ -0,0 +1,303 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "@/lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> });
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(([_, config]) => config.theme || config.color);
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref,
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>;
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className,
+        )}
+      >
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center",
+                )}
+              >
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center",
+                      )}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel ? tooltipLabel : null}
+                        <span className="text-muted-foreground">{itemConfig?.label || item.name}</span>
+                      </div>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {item.value.toLocaleString()}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  },
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;
+  }
+
+  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
+}
+
+export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle };
--- a/dev/presswave/src/components/ui/checkbox.tsx
+++ b/dev/presswave/src/components/ui/checkbox.tsx
@ -0,0 +1,26 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };
--- a/dev/presswave/src/components/ui/collapsible.tsx
+++ b/dev/presswave/src/components/ui/collapsible.tsx
@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/dev/presswave/src/components/ui/command.tsx
+++ b/dev/presswave/src/components/ui/command.tsx
@ -0,0 +1,132 @@
+import * as React from "react";
+import { type DialogProps } from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Dialog, DialogContent } from "@/components/ui/dialog";
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0 shadow-lg">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />);
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
--- a/dev/presswave/src/components/ui/context-menu.tsx
+++ b/dev/presswave/src/components/ui/context-menu.tsx
@ -0,0 +1,178 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ContextMenu = ContextMenuPrimitive.Root;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+const ContextMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <ContextMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </ContextMenuPrimitive.SubTrigger>
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+
+const ContextMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+
+const ContextMenuContent = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Portal>
+    <ContextMenuPrimitive.Content
+      ref={ref}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </ContextMenuPrimitive.Portal>
+));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+
+const ContextMenuItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+
+const ContextMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <ContextMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.CheckboxItem>
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+
+const ContextMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <ContextMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <ContextMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </ContextMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </ContextMenuPrimitive.RadioItem>
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+
+const ContextMenuLabel = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <ContextMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold text-foreground", inset && "pl-8", className)}
+    {...props}
+  />
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+
+const ContextMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <ContextMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} />
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+
+const ContextMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};
--- a/dev/presswave/src/components/ui/dialog.tsx
+++ b/dev/presswave/src/components/ui/dialog.tsx
@ -0,0 +1,95 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
--- a/dev/presswave/src/components/ui/drawer.tsx
+++ b/dev/presswave/src/components/ui/drawer.tsx
@ -0,0 +1,87 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+
+import { cn } from "@/lib/utils";
+
+const Drawer = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = DrawerPrimitive.Trigger;
+
+const DrawerPortal = DrawerPrimitive.Portal;
+
+const DrawerClose = DrawerPrimitive.Close;
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay ref={ref} className={cn("fixed inset-0 z-50 bg-black/80", className)} {...props} />
+));
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className,
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)} {...props} />
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("mt-auto flex flex-col gap-2 p-4", className)} {...props} />
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};
--- a/dev/presswave/src/components/ui/dropdown-menu.tsx
+++ b/dev/presswave/src/components/ui/dropdown-menu.tsx
@ -0,0 +1,179 @@
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent focus:bg-accent",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <DropdownMenuPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </DropdownMenuPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />;
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
+};
--- a/dev/presswave/src/components/ui/form.tsx
+++ b/dev/presswave/src/components/ui/form.tsx
@ -0,0 +1,129 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import { Controller, ControllerProps, FieldPath, FieldValues, FormProvider, useFormContext } from "react-hook-form";
+
+import { cn } from "@/lib/utils";
+import { Label } from "@/components/ui/label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return <Label ref={ref} className={cn(error && "text-destructive", className)} htmlFor={formItemId} {...props} />;
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(
+  ({ ...props }, ref) => {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+    return (
+      <Slot
+        ref={ref}
+        id={formItemId}
+        aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+        aria-invalid={!!error}
+        {...props}
+      />
+    );
+  },
+);
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => {
+    const { formDescriptionId } = useFormField();
+
+    return <p ref={ref} id={formDescriptionId} className={cn("text-sm text-muted-foreground", className)} {...props} />;
+  },
+);
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message) : children;
+
+    if (!body) {
+      return null;
+    }
+
+    return (
+      <p ref={ref} id={formMessageId} className={cn("text-sm font-medium text-destructive", className)} {...props}>
+        {body}
+      </p>
+    );
+  },
+);
+FormMessage.displayName = "FormMessage";
+
+export { useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField };
--- a/dev/presswave/src/components/ui/hover-card.tsx
+++ b/dev/presswave/src/components/ui/hover-card.tsx
@ -0,0 +1,27 @@
+import * as React from "react";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+
+import { cn } from "@/lib/utils";
+
+const HoverCard = HoverCardPrimitive.Root;
+
+const HoverCardTrigger = HoverCardPrimitive.Trigger;
+
+const HoverCardContent = React.forwardRef<
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <HoverCardPrimitive.Content
+    ref={ref}
+    align={align}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
+
+export { HoverCard, HoverCardTrigger, HoverCardContent };
--- a/dev/presswave/src/components/ui/input-otp.tsx
+++ b/dev/presswave/src/components/ui/input-otp.tsx
@ -0,0 +1,61 @@
+import * as React from "react";
+import { OTPInput, OTPInputContext } from "input-otp";
+import { Dot } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const InputOTP = React.forwardRef<React.ElementRef<typeof OTPInput>, React.ComponentPropsWithoutRef<typeof OTPInput>>(
+  ({ className, containerClassName, ...props }, ref) => (
+    <OTPInput
+      ref={ref}
+      containerClassName={cn("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
+      className={cn("disabled:cursor-not-allowed", className)}
+      {...props}
+    />
+  ),
+);
+InputOTP.displayName = "InputOTP";
+
+const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("flex items-center", className)} {...props} />,
+);
+InputOTPGroup.displayName = "InputOTPGroup";
+
+const InputOTPSlot = React.forwardRef<
+  React.ElementRef<"div">,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
+>(({ index, className, ...props }, ref) => {
+  const inputOTPContext = React.useContext(OTPInputContext);
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+
+  return (
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-2 ring-ring ring-offset-background",
+        className,
+      )}
+      {...props}
+    >
+      {char}
+      {hasFakeCaret && (
+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+        </div>
+      )}
+    </div>
+  );
+});
+InputOTPSlot.displayName = "InputOTPSlot";
+
+const InputOTPSeparator = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
+  ({ ...props }, ref) => (
+    <div ref={ref} role="separator" {...props}>
+      <Dot />
+    </div>
+  ),
+);
+InputOTPSeparator.displayName = "InputOTPSeparator";
+
+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
--- a/dev/presswave/src/components/ui/input.tsx
+++ b/dev/presswave/src/components/ui/input.tsx
@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };
--- a/dev/presswave/src/components/ui/label.tsx
+++ b/dev/presswave/src/components/ui/label.tsx
@ -0,0 +1,17 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };
--- a/dev/presswave/src/components/ui/menubar.tsx
+++ b/dev/presswave/src/components/ui/menubar.tsx
@ -0,0 +1,207 @@
+import * as React from "react";
+import * as MenubarPrimitive from "@radix-ui/react-menubar";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const MenubarMenu = MenubarPrimitive.Menu;
+
+const MenubarGroup = MenubarPrimitive.Group;
+
+const MenubarPortal = MenubarPrimitive.Portal;
+
+const MenubarSub = MenubarPrimitive.Sub;
+
+const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
+
+const Menubar = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Root
+    ref={ref}
+    className={cn("flex h-10 items-center space-x-1 rounded-md border bg-background p-1", className)}
+    {...props}
+  />
+));
+Menubar.displayName = MenubarPrimitive.Root.displayName;
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-accent data-[state=open]:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto h-4 w-4" />
+  </MenubarPrimitive.SubTrigger>
+));
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
+
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(({ className, align = "start", alignOffset = -4, sideOffset = 8, ...props }, ref) => (
+  <MenubarPrimitive.Portal>
+    <MenubarPrimitive.Content
+      ref={ref}
+      align={align}
+      alignOffset={alignOffset}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </MenubarPrimitive.Portal>
+));
+MenubarContent.displayName = MenubarPrimitive.Content.displayName;
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      inset && "pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+MenubarItem.displayName = MenubarPrimitive.Item.displayName;
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.CheckboxItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+));
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.RadioItem
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-2 w-2 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+));
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    {...props}
+  />
+));
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
+
+const MenubarShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)} {...props} />;
+};
+MenubarShortcut.displayname = "MenubarShortcut";
+
+export {
+  Menubar,
+  MenubarMenu,
+  MenubarTrigger,
+  MenubarContent,
+  MenubarItem,
+  MenubarSeparator,
+  MenubarLabel,
+  MenubarCheckboxItem,
+  MenubarRadioGroup,
+  MenubarRadioItem,
+  MenubarPortal,
+  MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
+};
--- a/dev/presswave/src/components/ui/navigation-menu.tsx
+++ b/dev/presswave/src/components/ui/navigation-menu.tsx
@ -0,0 +1,120 @@
+import * as React from "react";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import { cva } from "class-variance-authority";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+));
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+    {...props}
+  />
+));
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50",
+);
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+));
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      className,
+    )}
+    {...props}
+  />
+));
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+));
+NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName;
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className,
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+));
+NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName;
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+};
--- a/dev/presswave/src/components/ui/pagination.tsx
+++ b/dev/presswave/src/components/ui/pagination.tsx
@ -0,0 +1,81 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { ButtonProps, buttonVariants } from "@/components/ui/button";
+
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
+  <nav
+    role="navigation"
+    aria-label="pagination"
+    className={cn("mx-auto flex w-full justify-center", className)}
+    {...props}
+  />
+);
+Pagination.displayName = "Pagination";
+
+const PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul ref={ref} className={cn("flex flex-row items-center gap-1", className)} {...props} />
+  ),
+);
+PaginationContent.displayName = "PaginationContent";
+
+const PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+));
+PaginationItem.displayName = "PaginationItem";
+
+type PaginationLinkProps = {
+  isActive?: boolean;
+} & Pick<ButtonProps, "size"> &
+  React.ComponentProps<"a">;
+
+const PaginationLink = ({ className, isActive, size = "icon", ...props }: PaginationLinkProps) => (
+  <a
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "outline" : "ghost",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationLink.displayName = "PaginationLink";
+
+const PaginationPrevious = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to previous page" size="default" className={cn("gap-1 pl-2.5", className)} {...props}>
+    <ChevronLeft className="h-4 w-4" />
+    <span>Previous</span>
+  </PaginationLink>
+);
+PaginationPrevious.displayName = "PaginationPrevious";
+
+const PaginationNext = ({ className, ...props }: React.ComponentProps<typeof PaginationLink>) => (
+  <PaginationLink aria-label="Go to next page" size="default" className={cn("gap-1 pr-2.5", className)} {...props}>
+    <span>Next</span>
+    <ChevronRight className="h-4 w-4" />
+  </PaginationLink>
+);
+PaginationNext.displayName = "PaginationNext";
+
+const PaginationEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span aria-hidden className={cn("flex h-9 w-9 items-center justify-center", className)} {...props}>
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More pages</span>
+  </span>
+);
+PaginationEllipsis.displayName = "PaginationEllipsis";
+
+export {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+};
--- a/dev/presswave/src/components/ui/popover.tsx
+++ b/dev/presswave/src/components/ui/popover.tsx
@ -0,0 +1,29 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className,
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent };
--- a/dev/presswave/src/components/ui/progress.tsx
+++ b/dev/presswave/src/components/ui/progress.tsx
@ -0,0 +1,23 @@
+import * as React from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+
+import { cn } from "@/lib/utils";
+
+const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+>(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+export { Progress };
--- a/dev/presswave/src/components/ui/radio-group.tsx
+++ b/dev/presswave/src/components/ui/radio-group.tsx
@ -0,0 +1,36 @@
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };
--- a/dev/presswave/src/components/ui/resizable.tsx
+++ b/dev/presswave/src/components/ui/resizable.tsx
@ -0,0 +1,37 @@
+import { GripVertical } from "lucide-react";
+import * as ResizablePrimitive from "react-resizable-panels";
+
+import { cn } from "@/lib/utils";
+
+const ResizablePanelGroup = ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
+  <ResizablePrimitive.PanelGroup
+    className={cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className)}
+    {...props}
+  />
+);
+
+const ResizablePanel = ResizablePrimitive.Panel;
+
+const ResizableHandle = ({
+  withHandle,
+  className,
+  ...props
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+  withHandle?: boolean;
+}) => (
+  <ResizablePrimitive.PanelResizeHandle
+    className={cn(
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      className,
+    )}
+    {...props}
+  >
+    {withHandle && (
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <GripVertical className="h-2.5 w-2.5" />
+      </div>
+    )}
+  </ResizablePrimitive.PanelResizeHandle>
+);
+
+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
--- a/dev/presswave/src/components/ui/scroll-area.tsx
+++ b/dev/presswave/src/components/ui/scroll-area.tsx
@ -0,0 +1,38 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+
+import { cn } from "@/lib/utils";
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = "vertical", ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      "flex touch-none select-none transition-colors",
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };
--- a/dev/presswave/src/components/ui/select.tsx
+++ b/dev/presswave/src/components/ui/select.tsx
@ -0,0 +1,143 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className,
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn("flex cursor-default items-center justify-center py-1", className)}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className,
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label ref={ref} className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)} {...props} />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus:bg-accent focus:text-accent-foreground",
+      className,
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
--- a/dev/presswave/src/components/ui/separator.tsx
+++ b/dev/presswave/src/components/ui/separator.tsx
@ -0,0 +1,20 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn("shrink-0 bg-border", orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]", className)}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/dev/presswave/src/components/ui/sheet.tsx
+++ b/dev/presswave/src/components/ui/sheet.tsx
@ -0,0 +1,107 @@
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Sheet = SheetPrimitive.Root;
+
+const SheetTrigger = SheetPrimitive.Trigger;
+
+const SheetClose = SheetPrimitive.Close;
+
+const SheetPortal = SheetPrimitive.Portal;
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4  border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  },
+);
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Content>, SheetContentProps>(
+  ({ side = "right", className, children, ...props }, ref) => (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
+        {children}
+        <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-secondary hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  ),
+);
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+
+const SheetHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title ref={ref} className={cn("text-lg font-semibold text-foreground", className)} {...props} />
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetOverlay,
+  SheetPortal,
+  SheetTitle,
+  SheetTrigger,
+};
--- a/dev/presswave/src/components/ui/sidebar.tsx
+++ b/dev/presswave/src/components/ui/sidebar.tsx
@ -0,0 +1,637 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+  state: "expanded" | "collapsed";
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  openMobile: boolean;
+  setOpenMobile: (open: boolean) => void;
+  isMobile: boolean;
+  toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext);
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.");
+  }
+
+  return context;
+}
+
+const SidebarProvider = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+  }
+>(({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }, ref) => {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(openState);
+      } else {
+        _setOpen(openState);
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [setOpenProp, open],
+  );
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+  }, [isMobile, setOpen, setOpenMobile]);
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        toggleSidebar();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [toggleSidebar]);
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed";
+
+  const contextValue = React.useMemo<SidebarContext>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+  );
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn("group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar", className)}
+          ref={ref}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  );
+});
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+  }
+>(({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }, ref) => {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+  if (collapsible === "none") {
+    return (
+      <div
+        className={cn("flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground", className)}
+        ref={ref}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-mobile="true"
+          className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    );
+  }
+
+  return (
+    <div
+      ref={ref}
+      className="group peer hidden text-sidebar-foreground md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        className={cn(
+          "relative h-svh w-[--sidebar-width] bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+        )}
+      />
+      <div
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+            : "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className,
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+});
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<React.ElementRef<typeof Button>, React.ComponentProps<typeof Button>>(
+  ({ className, onClick, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <Button
+        ref={ref}
+        data-sidebar="trigger"
+        variant="ghost"
+        size="icon"
+        className={cn("h-7 w-7", className)}
+        onClick={(event) => {
+          onClick?.(event);
+          toggleSidebar();
+        }}
+        {...props}
+      >
+        <PanelLeft />
+        <span className="sr-only">Toggle Sidebar</span>
+      </Button>
+    );
+  },
+);
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button">>(
+  ({ className, ...props }, ref) => {
+    const { toggleSidebar } = useSidebar();
+
+    return (
+      <button
+        ref={ref}
+        data-sidebar="rail"
+        aria-label="Toggle Sidebar"
+        tabIndex={-1}
+        onClick={toggleSidebar}
+        title="Toggle Sidebar"
+        className={cn(
+          "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 hover:after:bg-sidebar-border sm:flex",
+          "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+          "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+          "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+          "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+          "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<"main">>(({ className, ...props }, ref) => {
+  return (
+    <main
+      ref={ref}
+      className={cn(
+        "relative flex min-h-svh flex-1 flex-col bg-background",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<React.ElementRef<typeof Input>, React.ComponentProps<typeof Input>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Input
+        ref={ref}
+        data-sidebar="input"
+        className={cn(
+          "h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return <div ref={ref} data-sidebar="header" className={cn("flex flex-col gap-2 p-2", className)} {...props} />;
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return <div ref={ref} data-sidebar="footer" className={cn("flex flex-col gap-2 p-2", className)} {...props} />;
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<React.ElementRef<typeof Separator>, React.ComponentProps<typeof Separator>>(
+  ({ className, ...props }, ref) => {
+    return (
+      <Separator
+        ref={ref}
+        data-sidebar="separator"
+        className={cn("mx-2 w-auto bg-sidebar-border", className)}
+        {...props}
+      />
+    );
+  },
+);
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(({ className, ...props }, ref) => {
+  return (
+    <div
+      ref={ref}
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  );
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<HTMLDivElement, React.ComponentProps<"div"> & { asChild?: boolean }>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="group-label"
+        className={cn(
+          "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<HTMLButtonElement, React.ComponentProps<"button"> & { asChild?: boolean }>(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+
+    return (
+      <Comp
+        ref={ref}
+        data-sidebar="group-action"
+        className={cn(
+          "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          // Increases the hit area of the button on mobile.
+          "after:absolute after:-inset-2 after:md:hidden",
+          "group-data-[collapsible=icon]:hidden",
+          className,
+        )}
+        {...props}
+      />
+    );
+  },
+);
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} data-sidebar="group-content" className={cn("w-full text-sm", className)} {...props} />
+  ),
+);
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(({ className, ...props }, ref) => (
+  <ul ref={ref} data-sidebar="menu" className={cn("flex w-full min-w-0 flex-col gap-1", className)} {...props} />
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ className, ...props }, ref) => (
+  <li ref={ref} data-sidebar="menu-item" className={cn("group/menu-item relative", className)} {...props} />
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const SidebarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+  } & VariantProps<typeof sidebarMenuButtonVariants>
+>(({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  const { isMobile, state } = useSidebar();
+
+  const button = (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  );
+
+  if (!tooltip) {
+    return button;
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    };
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent side="right" align="center" hidden={state !== "collapsed" || isMobile} {...tooltip} />
+    </Tooltip>
+  );
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+  }
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-action"
+      className={cn(
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 after:md:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<HTMLDivElement, React.ComponentProps<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-sidebar="menu-badge"
+      className={cn(
+        "pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    showIcon?: boolean;
+  }
+>(({ className, showIcon = false, ...props }, ref) => {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && <Skeleton className="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />}
+      <Skeleton
+        className="h-4 max-w-[--skeleton-width] flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  );
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<"ul">>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-sidebar="menu-sub"
+      className={cn(
+        "mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<HTMLLIElement, React.ComponentProps<"li">>(({ ...props }, ref) => (
+  <li ref={ref} {...props} />
+));
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentProps<"a"> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+  }
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+};
--- a/dev/presswave/src/components/ui/skeleton.tsx
+++ b/dev/presswave/src/components/ui/skeleton.tsx
@ -0,0 +1,7 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("animate-pulse rounded-md bg-muted", className)} {...props} />;
+}
+
+export { Skeleton };
--- a/dev/presswave/src/components/ui/slider.tsx
+++ b/dev/presswave/src/components/ui/slider.tsx
@ -0,0 +1,23 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+
+import { cn } from "@/lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };
--- a/dev/presswave/src/components/ui/sonner.tsx
+++ b/dev/presswave/src/components/ui/sonner.tsx
@ -0,0 +1,27 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, toast } from "sonner";
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      toastOptions={{
+        classNames: {
+          toast:
+            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+          description: "group-[.toast]:text-muted-foreground",
+          actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+          cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster, toast };
--- a/dev/presswave/src/components/ui/switch.tsx
+++ b/dev/presswave/src/components/ui/switch.tsx
@ -0,0 +1,27 @@
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+
+import { cn } from "@/lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
+      )}
+    />
+  </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+export { Switch };
--- a/dev/presswave/src/components/ui/table.tsx
+++ b/dev/presswave/src/components/ui/table.tsx
@ -0,0 +1,72 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  ),
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
+);
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+  ),
+);
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
+  ({ className, ...props }, ref) => (
+    <tfoot ref={ref} className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)} {...props} />
+  ),
+);
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn("border-b transition-colors data-[state=selected]:bg-muted hover:bg-muted/50", className)}
+      {...props}
+    />
+  ),
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <th
+      ref={ref}
+      className={cn(
+        "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
+  ({ className, ...props }, ref) => (
+    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
+  ),
+);
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
+  ({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
--- a/dev/presswave/src/components/ui/tabs.tsx
+++ b/dev/presswave/src/components/ui/tabs.tsx
@ -0,0 +1,53 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+
+import { cn } from "@/lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };
--- a/dev/presswave/src/components/ui/textarea.tsx
+++ b/dev/presswave/src/components/ui/textarea.tsx
@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+Textarea.displayName = "Textarea";
+
+export { Textarea };
--- a/dev/presswave/src/components/ui/toast.tsx
+++ b/dev/presswave/src/components/ui/toast.tsx
@ -0,0 +1,111 @@
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> & VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return <ToastPrimitives.Root ref={ref} className={cn(toastVariants({ variant }), className)} {...props} />;
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors group-[.destructive]:border-muted/40 hover:bg-secondary group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 group-[.destructive]:focus:ring-destructive disabled:pointer-events-none disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 group-[.destructive]:text-red-300 hover:text-foreground group-[.destructive]:hover:text-red-50 focus:opacity-100 focus:outline-none focus:ring-2 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title ref={ref} className={cn("text-sm font-semibold", className)} {...props} />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description ref={ref} className={cn("text-sm opacity-90", className)} {...props} />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};
--- a/dev/presswave/src/components/ui/toaster.tsx
+++ b/dev/presswave/src/components/ui/toaster.tsx
@ -0,0 +1,24 @@
+import { useToast } from "@/hooks/use-toast";
+import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && <ToastDescription>{description}</ToastDescription>}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}
--- a/dev/presswave/src/components/ui/toggle-group.tsx
+++ b/dev/presswave/src/components/ui/toggle-group.tsx
@ -0,0 +1,49 @@
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+import { toggleVariants } from "@/components/ui/toggle";
+
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+  size: "default",
+  variant: "default",
+});
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root ref={ref} className={cn("flex items-center justify-center gap-1", className)} {...props}>
+    <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+));
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext);
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  );
+});
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+
+export { ToggleGroup, ToggleGroupItem };
--- a/dev/presswave/src/components/ui/toggle.tsx
+++ b/dev/presswave/src/components/ui/toggle.tsx
@ -0,0 +1,37 @@
+import * as React from "react";
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-10 px-3",
+        sm: "h-9 px-2.5",
+        lg: "h-11 px-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root ref={ref} className={cn(toggleVariants({ variant, size, className }))} {...props} />
+));
+
+Toggle.displayName = TogglePrimitive.Root.displayName;
+
+export { Toggle, toggleVariants };
--- a/dev/presswave/src/components/ui/tooltip.tsx
+++ b/dev/presswave/src/components/ui/tooltip.tsx
@ -0,0 +1,28 @@
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/dev/presswave/src/components/ui/use-toast.ts
+++ b/dev/presswave/src/components/ui/use-toast.ts
@ -0,0 +1,3 @@
+import { useToast, toast } from "@/hooks/use-toast";
+
+export { useToast, toast };
--- a/dev/presswave/src/hooks/use-mobile.tsx
+++ b/dev/presswave/src/hooks/use-mobile.tsx
@ -0,0 +1,19 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
+}
--- a/dev/presswave/src/hooks/use-toast.ts
+++ b/dev/presswave/src/hooks/use-toast.ts
@ -0,0 +1,186 @@
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };
--- a/dev/presswave/src/index.css
+++ b/dev/presswave/src/index.css
@ -0,0 +1,123 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
+All colors MUST be HSL.
+*/
+
+@layer base {
+  :root {
+    --background: 0 0% 98%;
+    --foreground: 218 91% 7%;
+    
+    --card: 0 0% 100%;
+    --card-foreground: 218 91% 7%;
+    
+    --popover: 0 0% 100%;
+    --popover-foreground: 218 91% 7%;
+    
+    --primary: 5 65% 49%;
+    --primary-foreground: 0 0% 100%;
+    
+    --secondary: 20 85% 62%;
+    --secondary-foreground: 218 91% 7%;
+    
+    --muted: 210 40% 96%;
+    --muted-foreground: 215 16% 47%;
+    
+    --accent: 20 85% 62%;
+    --accent-foreground: 218 91% 7%;
+    
+    --destructive: 0 73% 49%;
+    --destructive-foreground: 0 0% 100%;
+    
+    --warning: 32 97% 52%;
+    --warning-foreground: 218 91% 7%;
+    
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: 5 65% 49%;
+    
+    --radius: 0.875rem;
+    
+    --text-primary: 218 91% 7%;
+    --text-secondary: 216 13% 25%;
+    
+    /* Shadows */
+    --shadow-card: 0 2px 8px 0 hsl(218 91% 7% / 0.06);
+    --shadow-card-hover: 0 8px 24px 0 hsl(218 91% 7% / 0.12);
+    --shadow-subtle: 0 1px 3px 0 hsl(218 91% 7% / 0.04);
+    
+    /* Gradients */
+    --gradient-brand: linear-gradient(135deg, hsl(5 65% 49%) 0%, hsl(20 85% 62%) 100%);
+    --gradient-brand-hover: linear-gradient(135deg, hsl(5 65% 44%) 0%, hsl(20 85% 57%) 100%);
+    --gradient-hero: linear-gradient(110deg, hsl(5 65% 49%) 0%, hsl(12 75% 55%) 50%, hsl(20 85% 62%) 100%);
+    
+    /* Brand Colors */
+    --brand-primary: 5 65% 49%;
+    --brand-secondary: 20 85% 62%;
+    
+    /* Accent Colors */
+    --accent-blue: 221 83% 53%;
+    --accent-blue-foreground: 0 0% 100%;
+  }
+  
+  .dark {
+    --background: 218 7.82% 9.74%;
+    --foreground: 0 0% 98%;
+    
+    --card: 217 11.73% 14.32%;
+    --card-foreground: 0 0% 98%;
+    
+    --popover: 217 11.73% 14.32%;
+    --popover-foreground: 0 0% 98%;
+    
+    --primary: 5 65% 49%;
+    --primary-foreground: 0 0% 100%;
+    
+    --secondary: 20 85% 62%;
+    --secondary-foreground: 0 0% 98%;
+    
+    --muted: 217 10% 20%;
+    --muted-foreground: 215 15% 70%;
+    
+    --accent: 20 85% 62%;
+    --accent-foreground: 0 0% 98%;
+    
+    --destructive: 0 73% 49%;
+    --destructive-foreground: 0 0% 100%;
+    
+    --warning: 32 97% 52%;
+    --warning-foreground: 0 0% 98%;
+    
+    --border: 217 10% 22%;
+    --input: 217 10% 22%;
+    --ring: 5 65% 49%;
+    
+    --text-primary: 0 0% 98%;
+    --text-secondary: 215 15% 70%;
+    
+    --shadow-card: 0 2px 8px 0 hsl(0 0% 0% / 0.25);
+    --shadow-card-hover: 0 8px 24px 0 hsl(0 0% 0% / 0.35);
+    --shadow-subtle: 0 1px 3px 0 hsl(0 0% 0% / 0.2);
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground antialiased;
+    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  }
+  
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+    font-weight: 600;
+  }
+}
+
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
--- a/dev/presswave/src/lib/utils.ts
+++ b/dev/presswave/src/lib/utils.ts
@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/dev/presswave/src/main.tsx
+++ b/dev/presswave/src/main.tsx
@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(<App />);
--- a/dev/presswave/src/pages/FAQ.tsx
+++ b/dev/presswave/src/pages/FAQ.tsx
@ -0,0 +1,226 @@
+import { Header } from "@/components/Header";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import { ChevronDown, HelpCircle, BookOpen, MessageSquare } from "lucide-react";
+import { useState } from "react";
+
+const faqCategories = [
+  {
+    category: "Erste Schritte",
+    icon: BookOpen,
+    questions: [
+      {
+        q: "Wie veröffentliche ich meine erste Pressemitteilung?",
+        a: "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.",
+      },
+      {
+        q: "Muss ich mich registrieren, um Pressemitteilungen zu lesen?",
+        a: "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.",
+      },
+      {
+        q: "Wie lange dauert die Freischaltung meiner Pressemitteilung?",
+        a: "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.",
+      },
+    ],
+  },
+  {
+    category: "Account & Abrechnung",
+    icon: MessageSquare,
+    questions: [
+      {
+        q: "Wie ändere ich meinen Tarif?",
+        a: "In Ihren Kontoeinstellungen unter 'Abonnement & Billing' können Sie jederzeit Ihren Tarif upgraden oder downgraden. Upgrades gelten sofort, Downgrades zum nächsten Abrechnungszeitraum.",
+      },
+      {
+        q: "Welche Zahlungsmethoden werden akzeptiert?",
+        a: "Wir akzeptieren Kreditkarten (Visa, Mastercard, American Express), SEPA-Lastschrift und PayPal. Enterprise-Kunden können auch per Rechnung zahlen.",
+      },
+      {
+        q: "Kann ich mein Konto löschen?",
+        a: "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.",
+      },
+    ],
+  },
+  {
+    category: "Pressemitteilungen & Content",
+    icon: HelpCircle,
+    questions: [
+      {
+        q: "Welche Dateiformate werden für Medien unterstützt?",
+        a: "Bilder: JPG, PNG, WebP (max. 10 MB). Dokumente: PDF (max. 25 MB). Videos können über YouTube/Vimeo-Einbettung hinzugefügt werden.",
+      },
+      {
+        q: "Kann ich eine Pressemitteilung nach Veröffentlichung bearbeiten?",
+        a: "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.",
+      },
+      {
+        q: "Wie optimiere ich meine Pressemitteilung für SEO?",
+        a: "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.",
+      },
+    ],
+  },
+  {
+    category: "Newsroom & Features",
+    icon: BookOpen,
+    questions: [
+      {
+        q: "Was ist ein Newsroom und wie erstelle ich einen?",
+        a: "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.",
+      },
+      {
+        q: "Wie funktionieren die Analytics?",
+        a: "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.",
+      },
+    ],
+  },
+];
+
+const FAQ = () => {
+  const [openItems, setOpenItems] = useState<string[]>([]);
+
+  const toggleItem = (id: string) => {
+    setOpenItems((prev) =>
+      prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id]
+    );
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      
+      <main className="flex-1">
+        {/* Hero Section */}
+        <section className="bg-gradient-to-r from-primary via-primary/95 to-secondary text-white py-16">
+          <div className="container mx-auto px-4 text-center">
+            <HelpCircle className="h-16 w-16 mx-auto mb-6" />
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">
+              Häufig gestellte Fragen
+            </h1>
+            <p className="text-xl text-white/90 max-w-2xl mx-auto">
+              Finden Sie schnell Antworten auf die wichtigsten Fragen rund um Business Portal
+            </p>
+          </div>
+        </section>
+
+        {/* Search */}
+        <section className="py-8 bg-background border-b border-border">
+          <div className="container mx-auto px-4 max-w-2xl">
+            <div className="relative">
+              <input
+                type="search"
+                placeholder="Suchen Sie nach Themen, z.B. 'Preise' oder 'Newsroom'..."
+                className="w-full px-4 py-3 pl-12 border border-border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent"
+              />
+              <HelpCircle className="absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ Categories */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4 max-w-4xl">
+            {faqCategories.map((category, catIndex) => (
+              <div key={category.category} className="mb-12">
+                <div className="flex items-center gap-3 mb-6">
+                  <div className="w-10 h-10 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-lg flex items-center justify-center">
+                    <category.icon className="h-5 w-5 text-primary" />
+                  </div>
+                  <h2 className="text-2xl font-bold text-foreground">
+                    {category.category}
+                  </h2>
+                </div>
+
+                <div className="space-y-4">
+                  {category.questions.map((item, qIndex) => {
+                    const id = `${catIndex}-${qIndex}`;
+                    return (
+                      <Card key={id} className="overflow-hidden">
+                        <Collapsible
+                          open={openItems.includes(id)}
+                          onOpenChange={() => toggleItem(id)}
+                        >
+                          <CollapsibleTrigger className="w-full p-6 flex items-center justify-between hover:bg-muted/50 transition-colors">
+                            <span className="font-semibold text-foreground text-left pr-4">
+                              {item.q}
+                            </span>
+                            <ChevronDown
+                              className={`h-5 w-5 text-muted-foreground flex-shrink-0 transition-transform ${
+                                openItems.includes(id) ? "rotate-180" : ""
+                              }`}
+                            />
+                          </CollapsibleTrigger>
+                          <CollapsibleContent>
+                            <div className="px-6 pb-6 text-muted-foreground leading-relaxed">
+                              {item.a}
+                            </div>
+                          </CollapsibleContent>
+                        </Collapsible>
+                      </Card>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+        </section>
+
+        {/* Contact CTA */}
+        <section className="py-16 bg-muted/30">
+          <div className="container mx-auto px-4 text-center">
+            <div className="max-w-2xl mx-auto">
+              <h2 className="text-3xl font-bold text-foreground mb-4">
+                Frage nicht gefunden?
+              </h2>
+              <p className="text-muted-foreground mb-8">
+                Unser Support-Team hilft Ihnen gerne weiter. Kontaktieren Sie uns per E-Mail oder Chat.
+              </p>
+              <div className="flex flex-wrap gap-4 justify-center">
+                <Button size="lg" className="bg-gradient-to-r from-primary to-secondary">
+                  Kontakt aufnehmen
+                </Button>
+                <Button size="lg" variant="outline">
+                  Hilfe-Center besuchen
+                </Button>
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Popular Topics */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4 max-w-4xl">
+            <h2 className="text-2xl font-bold text-foreground mb-8 text-center">
+              Beliebte Themen
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+              {[
+                { title: "Erste Schritte", link: "#" },
+                { title: "Preise & Abrechnung", link: "#" },
+                { title: "API-Dokumentation", link: "#" },
+                { title: "SEO Best Practices", link: "#" },
+                { title: "Medienformate", link: "#" },
+                { title: "Datenschutz", link: "#" },
+              ].map((topic) => (
+                <Card
+                  key={topic.title}
+                  className="p-4 hover:shadow-card-hover transition-all cursor-pointer"
+                >
+                  <a href={topic.link} className="text-foreground hover:text-primary transition-colors">
+                    {topic.title} →
+                  </a>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default FAQ;
--- a/dev/presswave/src/pages/Index.tsx
+++ b/dev/presswave/src/pages/Index.tsx
@ -0,0 +1,213 @@
+import { Header } from "@/components/Header";
+import { FilterBar } from "@/components/FilterBar";
+import { PressReleaseCard } from "@/components/PressReleaseCard";
+import { ThemeToggle } from "@/components/ThemeToggle";
+import aiImage from "@/assets/press-ai-automation.jpg";
+import energyImage from "@/assets/press-renewable-energy.jpg";
+import mobilityImage from "@/assets/press-emobility.jpg";
+
+
+const mockReleases = [
+  {
+    slug: "ki-revolution-deutsche-unternehmen",
+    title: "KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung",
+    teaser: "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.",
+    company: "TechVision Analytics",
+    industry: "IT & Software",
+    region: "Deutschland",
+    date: "Heute, 14:30",
+    hasImage: true,
+    hasPdf: true,
+    imageUrl: aiImage,
+    companyLogo: "logo",
+  },
+  {
+    slug: "energiewende-beschleunigt",
+    title: "Energiewende beschleunigt sich: Neue Rekorde bei erneuerbaren Energien",
+    teaser: "Im ersten Quartal 2025 erreicht der Anteil erneuerbarer Energien am Strommix einen historischen Höchststand von 58%. Experten sprechen von einem Wendepunkt.",
+    company: "GreenPower Deutschland",
+    industry: "Energie",
+    region: "Deutschland",
+    date: "Heute, 11:15",
+    hasImage: true,
+    imageUrl: energyImage,
+  },
+  {
+    slug: "fintech-startup-series-b",
+    title: "FinTech-Startup sichert sich 45 Millionen Euro in Series-B-Runde",
+    teaser: "Das Berliner FinTech-Startup PaymentFlow konnte in einer Series-B-Finanzierungsrunde 45 Millionen Euro einsammeln. Führende Investoren aus Europa beteiligten sich.",
+    company: "PaymentFlow GmbH",
+    industry: "Finanzen",
+    region: "Berlin",
+    date: "Gestern, 16:45",
+    hasPdf: true,
+  },
+  {
+    slug: "gesundheitsbranche-digital",
+    title: "Gesundheitsbranche setzt verstärkt auf digitale Lösungen",
+    teaser: "Telemedizin und KI-gestützte Diagnostik werden zum Standard: 78% der Krankenhäuser in Deutschland planen Investitionen in digitale Gesundheitstechnologien.",
+    company: "MediTech Solutions",
+    industry: "Gesundheit",
+    region: "München",
+    date: "Gestern, 09:20",
+    hasImage: true,
+  },
+  {
+    slug: "automobilindustrie-transformation",
+    title: "Automobilindustrie: Transformation zur E-Mobilität nimmt Fahrt auf",
+    teaser: "Führende Automobilhersteller kündigen massive Investitionen in E-Mobilität an. Bis 2030 sollen 80% der Neufahrzeuge elektrisch angetrieben werden.",
+    company: "Auto Industry Report",
+    industry: "Automobil",
+    region: "Stuttgart",
+    date: "2 Tage",
+    hasImage: true,
+    hasPdf: true,
+    imageUrl: mobilityImage,
+  },
+  {
+    slug: "cybersecurity-massnahmen",
+    title: "Cybersecurity: Unternehmen verstärken Schutzmaßnahmen gegen Hackerangriffe",
+    teaser: "Nach einer Serie von Cyberattacken erhöhen deutsche Unternehmen ihre Investitionen in IT-Sicherheit um durchschnittlich 35%. Neue Standards werden eingeführt.",
+    company: "CyberSafe Europe",
+    industry: "IT & Software",
+    region: "Frankfurt",
+    date: "2 Tage",
+    hasImage: true,
+  },
+];
+
+const Index = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <FilterBar />
+      
+      {/* Hero Banner */}
+      <section className="relative overflow-hidden text-white py-8" style={{ background: 'var(--gradient-hero)' }}>
+        <div className="container mx-auto px-4">
+          <div className="max-w-3xl">
+            <h1 className="text-3xl md:text-4xl font-bold mb-3">
+              Aktuelle Pressemitteilungen aus DACH
+            </h1>
+            <p className="text-lg text-white/90">
+              Die führende Plattform für Unternehmensnachrichten aus Deutschland, Österreich und der Schweiz
+            </p>
+          </div>
+        </div>
+      </section>
+      
+      <main className="flex-1">
+        {/* Featured Section */}
+        <section className="bg-muted/30 border-b border-border py-8">
+          <div className="container mx-auto px-4">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-lg font-semibold text-foreground flex items-center gap-2">
+                <span className="w-1 h-6 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+                Top-Meldungen
+              </h2>
+              <span className="text-xs text-warning-foreground bg-warning/10 border border-warning/20 px-2 py-1 rounded">Anzeige</span>
+            </div>
+            <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+              {/* Large Featured Card - Takes 2 columns */}
+              <div className="lg:col-span-2">
+                <PressReleaseCard {...mockReleases[0]} />
+              </div>
+              {/* Two Smaller Featured Cards - Stack in right column */}
+              <div className="flex flex-col gap-6">
+                <PressReleaseCard {...mockReleases[1]} />
+                <PressReleaseCard {...mockReleases[2]} />
+              </div>
+            </div>
+          </div>
+        </section>
+
+        {/* Main Content Grid */}
+        <section className="py-8">
+          <div className="container mx-auto px-4">
+            <div className="flex items-center justify-between mb-6">
+              <h2 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                <span className="w-2 h-2 bg-primary rounded-full"></span>
+                247 Pressemitteilungen
+              </h2>
+            </div>
+            
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {mockReleases.map((release) => (
+                <PressReleaseCard key={release.slug} {...release} />
+              ))}
+            </div>
+
+            {/* Pagination */}
+            <div className="flex justify-center mt-12">
+              <div className="flex items-center gap-2">
+                <button className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+                  Zurück
+                </button>
+                <button className="px-4 py-2 text-sm font-medium bg-gradient-to-r from-primary to-secondary text-white rounded-lg shadow-md hover:shadow-lg transition-all">
+                  1
+                </button>
+                <button className="px-4 py-2 text-sm font-medium text-foreground hover:bg-muted rounded-lg transition-colors">
+                  2
+                </button>
+                <button className="px-4 py-2 text-sm font-medium text-foreground hover:bg-muted rounded-lg transition-colors">
+                  3
+                </button>
+                <button className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+                  Weiter
+                </button>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-card border-t border-border py-8 mt-auto">
+        <div className="container mx-auto px-4">
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
+            <div>
+              <h3 className="font-semibold text-foreground mb-3">Unternehmen</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Über uns</a></li>
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Kontakt</a></li>
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Presse</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold text-foreground mb-3">Services</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Preise</a></li>
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Newsrooms</a></li>
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">API</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold text-foreground mb-3">Rechtliches</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Impressum</a></li>
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Datenschutz</a></li>
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">AGB</a></li>
+              </ul>
+            </div>
+            <div>
+              <h3 className="font-semibold text-foreground mb-3">Folgen Sie uns</h3>
+              <ul className="space-y-2">
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">LinkedIn</a></li>
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Twitter</a></li>
+                <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">RSS</a></li>
+              </ul>
+            </div>
+          </div>
+          <div className="pt-6 border-t border-border">
+            <div className="flex flex-col md:flex-row items-center justify-between gap-4">
+              <p className="text-sm text-muted-foreground">© 2025 Business Portal. Alle Rechte vorbehalten.</p>
+              <ThemeToggle />
+            </div>
+          </div>
+        </div>
+      </footer>
+    </div>
+  );
+};
+
+export default Index;
--- a/dev/presswave/src/pages/KategorieIT.tsx
+++ b/dev/presswave/src/pages/KategorieIT.tsx
@ -0,0 +1,341 @@
+import { Header } from "@/components/Header";
+import { FilterBar } from "@/components/FilterBar";
+import { PressReleaseCard } from "@/components/PressReleaseCard";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { ChevronDown, ChevronUp, Rss, Mail } from "lucide-react";
+import { useState } from "react";
+import aiImage from "@/assets/press-ai-automation.jpg";
+import energyImage from "@/assets/press-renewable-energy.jpg";
+import mobilityImage from "@/assets/press-emobility.jpg";
+
+const categoryReleases = [
+  {
+    slug: "ki-revolution-deutsche-unternehmen",
+    title: "KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung",
+    teaser: "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.",
+    company: "TechVision Analytics",
+    industry: "IT & Software",
+    region: "Deutschland",
+    date: "Heute, 14:30",
+    hasImage: true,
+    hasPdf: true,
+    imageUrl: aiImage,
+    companyLogo: "logo",
+  },
+  {
+    slug: "cloud-migration-strategie",
+    title: "Cloud-Migration: 78% der deutschen Unternehmen setzen auf Hybrid-Cloud-Strategien",
+    teaser: "Neue Umfrage zeigt: Hybrid-Cloud wird zum Standard. Unternehmen kombinieren Public und Private Cloud für maximale Flexibilität und Sicherheit.",
+    company: "CloudTech Research",
+    industry: "IT & Software",
+    region: "Frankfurt",
+    date: "Heute, 10:00",
+    hasImage: true,
+    hasPdf: false,
+  },
+  {
+    slug: "cybersecurity-massnahmen",
+    title: "Cybersecurity: Unternehmen verstärken Schutzmaßnahmen gegen Hackerangriffe",
+    teaser: "Nach einer Serie von Cyberattacken erhöhen deutsche Unternehmen ihre Investitionen in IT-Sicherheit um durchschnittlich 35%. Neue Standards werden eingeführt.",
+    company: "CyberSafe Europe",
+    industry: "IT & Software",
+    region: "München",
+    date: "Gestern, 15:20",
+    hasImage: true,
+  },
+  {
+    slug: "low-code-plattformen",
+    title: "Low-Code-Plattformen revolutionieren die Softwareentwicklung",
+    teaser: "Citizen Developer werden zur treibenden Kraft: Low-Code-Lösungen ermöglichen es auch Nicht-Programmierern, professionelle Anwendungen zu erstellen.",
+    company: "DevTech Insights",
+    industry: "IT & Software",
+    region: "Berlin",
+    date: "Gestern, 11:45",
+    hasImage: false,
+    hasPdf: true,
+  },
+  {
+    slug: "5g-rollout-beschleunigt",
+    title: "5G-Rollout beschleunigt: Netzabdeckung erreicht 85% in Deutschland",
+    teaser: "Mobilfunkanbieter berichten von schnellerem Ausbau als erwartet. Industrielle IoT-Anwendungen profitieren von niedriger Latenz und hohen Bandbreiten.",
+    company: "Network Solutions GmbH",
+    industry: "IT & Software",
+    region: "Deutschland",
+    date: "2 Tage",
+    hasImage: true,
+  },
+  {
+    slug: "quantum-computing-durchbruch",
+    title: "Quantum Computing: Deutscher Forschungsverbund meldet Durchbruch",
+    teaser: "Wissenschaftler entwickeln stabilere Qubits. Kommerzielle Anwendungen in der Materialforschung und Kryptographie rücken näher.",
+    company: "QuantumTech Germany",
+    industry: "IT & Software",
+    region: "Stuttgart",
+    date: "3 Tage",
+    hasImage: false,
+    hasPdf: true,
+  },
+];
+
+const subCategories = [
+  "Künstliche Intelligenz",
+  "Cloud Computing",
+  "Cybersecurity",
+  "Software-as-a-Service",
+  "Enterprise Software",
+  "Mobile Apps",
+  "Blockchain & Web3",
+  "DevOps & Entwicklung",
+  "Data Analytics",
+  "IoT & Edge Computing",
+];
+
+const relatedTopics = [
+  "Digitale Transformation",
+  "Automatisierung",
+  "Machine Learning",
+  "API & Integrationen",
+  "Agile Methoden",
+  "Remote Work Tools",
+];
+
+const KategorieIT = () => {
+  const [seoExpanded, setSeoExpanded] = useState(false);
+
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      <FilterBar />
+      
+      <main className="flex-1">
+        {/* Breadcrumbs */}
+        <section className="bg-background border-b border-border py-4">
+          <div className="container mx-auto px-4">
+            <nav className="text-sm text-muted-foreground">
+              <a href="/" className="hover:text-foreground transition-colors">Start</a>
+              <span className="mx-2">›</span>
+              <a href="/kategorien" className="hover:text-foreground transition-colors">Kategorien</a>
+              <span className="mx-2">›</span>
+              <span className="text-foreground font-medium">IT & Software</span>
+            </nav>
+          </div>
+        </section>
+
+        {/* Category Header */}
+        <section className="bg-gradient-to-r from-primary/10 to-secondary/10 border-b border-border py-12">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl">
+              <Badge className="mb-4 bg-gradient-to-r from-primary to-secondary">
+                IT & Software
+              </Badge>
+              <h1 className="text-4xl md:text-5xl font-bold text-foreground mb-4">
+                Pressemitteilungen IT & Software
+              </h1>
+              <p className="text-xl text-muted-foreground">
+                Aktuelle Nachrichten aus der IT-Branche – KI, Cloud, Cybersecurity und mehr
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* SEO Text - Collapsible */}
+        <section className="bg-background border-b border-border">
+          <div className="container mx-auto px-4 py-6">
+            <div className="max-w-4xl">
+              <Card className="p-6">
+                <div className={`prose prose-sm max-w-none ${!seoExpanded ? 'line-clamp-3' : ''}`}>
+                  <p className="text-foreground">
+                    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>
+                  {seoExpanded && (
+                    <>
+                      <p className="text-foreground 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 className="text-foreground 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 className="text-foreground 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>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="mt-4"
+                  onClick={() => setSeoExpanded(!seoExpanded)}
+                >
+                  {seoExpanded ? (
+                    <>
+                      <ChevronUp className="h-4 w-4 mr-2" />
+                      Weniger anzeigen
+                    </>
+                  ) : (
+                    <>
+                      <ChevronDown className="h-4 w-4 mr-2" />
+                      Mehr lesen
+                    </>
+                  )}
+                </Button>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* Main Content with Sidebar */}
+        <section className="py-8 bg-background">
+          <div className="container mx-auto px-4">
+            <div className="flex flex-col lg:flex-row gap-8">
+              {/* Main Content */}
+              <div className="flex-1">
+                <div className="flex items-center justify-between mb-6">
+                  <h2 className="text-sm font-medium text-muted-foreground flex items-center gap-2">
+                    <span className="w-2 h-2 bg-primary rounded-full"></span>
+                    142 Pressemitteilungen in IT & Software
+                  </h2>
+                </div>
+
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
+                  {categoryReleases.map((release) => (
+                    <PressReleaseCard key={release.slug} {...release} />
+                  ))}
+                </div>
+
+                {/* Pagination */}
+                <div className="flex justify-center">
+                  <div className="flex items-center gap-2">
+                    <button className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+                      Zurück
+                    </button>
+                    <button className="px-4 py-2 text-sm font-medium bg-gradient-to-r from-primary to-secondary text-white rounded-lg shadow-md hover:shadow-lg transition-all">
+                      1
+                    </button>
+                    <button className="px-4 py-2 text-sm font-medium text-foreground hover:bg-muted rounded-lg transition-colors">
+                      2
+                    </button>
+                    <button className="px-4 py-2 text-sm font-medium text-foreground hover:bg-muted rounded-lg transition-colors">
+                      3
+                    </button>
+                    <button className="px-4 py-2 text-sm font-medium text-foreground hover:bg-muted rounded-lg transition-colors">
+                      4
+                    </button>
+                    <button className="px-4 py-2 text-sm font-medium text-muted-foreground hover:text-foreground transition-colors">
+                      Weiter
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              {/* Sidebar - Hidden on mobile */}
+              <aside className="lg:w-80 space-y-6">
+                {/* Sub-Categories */}
+                <Card className="p-6">
+                  <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
+                    <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+                    Unterkategorien
+                  </h3>
+                  <div className="space-y-2">
+                    {subCategories.map((cat) => (
+                      <a
+                        key={cat}
+                        href="#"
+                        className="block text-sm text-muted-foreground hover:text-primary hover:translate-x-1 transition-all"
+                      >
+                        {cat} →
+                      </a>
+                    ))}
+                  </div>
+                </Card>
+
+                {/* Related Topics */}
+                <Card className="p-6">
+                  <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
+                    <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+                    Verwandte Themen
+                  </h3>
+                  <div className="flex flex-wrap gap-2">
+                    {relatedTopics.map((topic) => (
+                      <Badge
+                        key={topic}
+                        variant="secondary"
+                        className="cursor-pointer hover:bg-primary hover:text-white transition-colors"
+                      >
+                        {topic}
+                      </Badge>
+                    ))}
+                  </div>
+                </Card>
+
+                {/* Newsletter Subscribe */}
+                <Card className="p-6 bg-gradient-to-br from-primary/5 to-secondary/5">
+                  <Mail className="h-8 w-8 text-primary mb-3" />
+                  <h3 className="font-semibold text-foreground mb-2">
+                    IT-Newsletter abonnieren
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Erhalten Sie die neuesten IT-Pressemitteilungen direkt in Ihr Postfach
+                  </p>
+                  <Button className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90">
+                    Jetzt abonnieren
+                  </Button>
+                </Card>
+
+                {/* RSS Feed */}
+                <Card className="p-6">
+                  <Rss className="h-8 w-8 text-secondary mb-3" />
+                  <h3 className="font-semibold text-foreground mb-2">
+                    RSS-Feed
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Bleiben Sie über neue IT-Meldungen auf dem Laufenden
+                  </p>
+                  <Button variant="outline" className="w-full">
+                    RSS abonnieren
+                  </Button>
+                </Card>
+
+                {/* Top Companies */}
+                <Card className="p-6">
+                  <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
+                    <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+                    Top IT-Unternehmen
+                  </h3>
+                  <div className="space-y-3">
+                    {[
+                      "TechVision Analytics",
+                      "CloudTech Research",
+                      "CyberSafe Europe",
+                      "DevTech Insights",
+                      "QuantumTech Germany",
+                    ].map((company) => (
+                      <a
+                        key={company}
+                        href="#"
+                        className="flex items-center gap-3 text-sm hover:bg-muted p-2 rounded-lg transition-colors"
+                      >
+                        <div className="w-8 h-8 bg-gradient-to-br from-primary/10 to-secondary/10 rounded flex items-center justify-center flex-shrink-0">
+                          <span className="text-xs font-bold text-primary">
+                            {company.charAt(0)}
+                          </span>
+                        </div>
+                        <span className="text-foreground hover:text-primary transition-colors">
+                          {company}
+                        </span>
+                      </a>
+                    ))}
+                  </div>
+                </Card>
+              </aside>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default KategorieIT;
--- a/dev/presswave/src/pages/Kontakt.tsx
+++ b/dev/presswave/src/pages/Kontakt.tsx
@ -0,0 +1,249 @@
+import { Header } from "@/components/Header";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Label } from "@/components/ui/label";
+import { Mail, Phone, MapPin, Clock, Send } from "lucide-react";
+
+const contactMethods = [
+  {
+    icon: Mail,
+    title: "E-Mail",
+    content: "info@businessportal.de",
+    description: "Antwort innerhalb von 24 Stunden",
+    link: "mailto:info@businessportal.de",
+  },
+  {
+    icon: Phone,
+    title: "Telefon",
+    content: "+49 89 1234 5678",
+    description: "Mo-Fr 9:00-18:00 Uhr",
+    link: "tel:+498912345678",
+  },
+  {
+    icon: MapPin,
+    title: "Adresse",
+    content: "Maximilianstraße 35",
+    description: "80539 München, Deutschland",
+    link: "#",
+  },
+  {
+    icon: Clock,
+    title: "Geschäftszeiten",
+    content: "Mo-Fr 9:00-18:00",
+    description: "Sa-So geschlossen",
+    link: "#",
+  },
+];
+
+const Kontakt = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      
+      <main className="flex-1">
+        {/* Hero Section */}
+        <section className="bg-gradient-to-r from-primary via-primary/95 to-secondary text-white py-16">
+          <div className="container mx-auto px-4 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">
+              Kontakt
+            </h1>
+            <p className="text-xl text-white/90 max-w-2xl mx-auto">
+              Wir sind für Sie da – per E-Mail, Telefon oder vor Ort in München
+            </p>
+          </div>
+        </section>
+
+        {/* Contact Methods */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto mb-16">
+              {contactMethods.map((method) => (
+                <Card
+                  key={method.title}
+                  className="p-6 text-center hover:shadow-card-hover transition-all"
+                >
+                  <div className="w-16 h-16 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <method.icon className="h-8 w-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold text-foreground mb-2">
+                    {method.title}
+                  </h3>
+                  {method.link.startsWith("#") ? (
+                    <p className="text-foreground font-medium mb-1">
+                      {method.content}
+                    </p>
+                  ) : (
+                    <a
+                      href={method.link}
+                      className="text-primary hover:text-secondary transition-colors font-medium block mb-1"
+                    >
+                      {method.content}
+                    </a>
+                  )}
+                  <p className="text-sm text-muted-foreground">
+                    {method.description}
+                  </p>
+                </Card>
+              ))}
+            </div>
+
+            {/* Contact Form & Map */}
+            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-6xl mx-auto">
+              {/* Form */}
+              <div>
+                <div className="mb-8">
+                  <h2 className="text-3xl font-bold text-foreground mb-4">
+                    Nachricht senden
+                  </h2>
+                  <p className="text-muted-foreground">
+                    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>
+
+                <form className="space-y-6">
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div className="space-y-2">
+                      <Label htmlFor="vorname">Vorname *</Label>
+                      <Input
+                        id="vorname"
+                        placeholder="Max"
+                        required
+                      />
+                    </div>
+                    <div className="space-y-2">
+                      <Label htmlFor="nachname">Nachname *</Label>
+                      <Input
+                        id="nachname"
+                        placeholder="Mustermann"
+                        required
+                      />
+                    </div>
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="email">E-Mail-Adresse *</Label>
+                    <Input
+                      id="email"
+                      type="email"
+                      placeholder="max.mustermann@beispiel.de"
+                      required
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="unternehmen">Unternehmen</Label>
+                    <Input
+                      id="unternehmen"
+                      placeholder="Firma GmbH"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="telefon">Telefon</Label>
+                    <Input
+                      id="telefon"
+                      type="tel"
+                      placeholder="+49 123 456789"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="betreff">Betreff *</Label>
+                    <Input
+                      id="betreff"
+                      placeholder="Wie können wir Ihnen helfen?"
+                      required
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <Label htmlFor="nachricht">Nachricht *</Label>
+                    <Textarea
+                      id="nachricht"
+                      placeholder="Ihre Nachricht an uns..."
+                      rows={6}
+                      required
+                    />
+                  </div>
+
+                  <div className="text-sm text-muted-foreground">
+                    * Pflichtfelder
+                  </div>
+
+                  <Button
+                    type="submit"
+                    size="lg"
+                    className="w-full bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90"
+                  >
+                    <Send className="h-4 w-4 mr-2" />
+                    Nachricht senden
+                  </Button>
+                </form>
+              </div>
+
+              {/* Map & Info */}
+              <div className="space-y-6">
+                <Card className="p-8">
+                  <h3 className="text-xl font-semibold text-foreground mb-6">
+                    Besuchen Sie uns
+                  </h3>
+                  
+                  <div className="space-y-6">
+                    <div>
+                      <h4 className="font-medium text-foreground mb-2">Hauptsitz München</h4>
+                      <p className="text-sm text-muted-foreground">
+                        Maximilianstraße 35<br />
+                        80539 München<br />
+                        Deutschland
+                      </p>
+                    </div>
+
+                    <div className="border-t border-border pt-6">
+                      <h4 className="font-medium text-foreground mb-2">Anfahrt</h4>
+                      <p className="text-sm text-muted-foreground mb-4">
+                        <strong>Öffentliche Verkehrsmittel:</strong><br />
+                        U-Bahn U4/U5 – Haltestelle Lehel<br />
+                        Tram 19 – Haltestelle Maxmonument
+                      </p>
+                      <p className="text-sm text-muted-foreground">
+                        <strong>Parken:</strong><br />
+                        Parkhaus Maximilianstraße (5 Min. Fußweg)
+                      </p>
+                    </div>
+                  </div>
+                </Card>
+
+                <div className="h-80 bg-muted rounded-lg overflow-hidden">
+                  <div className="w-full h-full bg-gradient-to-br from-primary/10 to-secondary/10 flex items-center justify-center">
+                    <div className="text-center">
+                      <MapPin className="h-12 w-12 text-primary mx-auto mb-3" />
+                      <p className="text-sm text-muted-foreground">
+                        Interaktive Karte
+                      </p>
+                    </div>
+                  </div>
+                </div>
+
+                <Card className="p-6 bg-muted/30">
+                  <h4 className="font-semibold text-foreground mb-3">
+                    Schnelle Hilfe benötigt?
+                  </h4>
+                  <p className="text-sm text-muted-foreground mb-4">
+                    Für dringende Anfragen oder technischen Support steht Ihnen unser Chat zur Verfügung.
+                  </p>
+                  <Button variant="outline" className="w-full">
+                    Live-Chat starten
+                  </Button>
+                </Card>
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default Kontakt;
--- a/dev/presswave/src/pages/NotFound.tsx
+++ b/dev/presswave/src/pages/NotFound.tsx
@ -0,0 +1,24 @@
+import { useLocation } from "react-router-dom";
+import { useEffect } from "react";
+
+const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error("404 Error: User attempted to access non-existent route:", location.pathname);
+  }, [location.pathname]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100">
+      <div className="text-center">
+        <h1 className="mb-4 text-4xl font-bold">404</h1>
+        <p className="mb-4 text-xl text-gray-600">Oops! Page not found</p>
+        <a href="/" className="text-blue-500 underline hover:text-blue-700">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;
--- a/dev/presswave/src/pages/Preise.tsx
+++ b/dev/presswave/src/pages/Preise.tsx
@ -0,0 +1,270 @@
+import { Header } from "@/components/Header";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Check, Zap, Shield, TrendingUp, Star } from "lucide-react";
+
+const pricingPlans = [
+  {
+    name: "Free",
+    price: "0€",
+    period: "kostenlos",
+    description: "Ideal für kleinere Unternehmen und Start-ups",
+    features: [
+      "1 Pressemitteilung pro Monat",
+      "Standard-Veröffentlichung",
+      "Basis-Statistiken",
+      "E-Mail-Support",
+      "Community-Forum Zugang",
+    ],
+    cta: "Jetzt starten",
+    variant: "outline" as const,
+  },
+  {
+    name: "Professional",
+    price: "99€",
+    period: "pro Monat",
+    description: "Für wachsende Unternehmen mit regelmäßigem Kommunikationsbedarf",
+    features: [
+      "10 Pressemitteilungen pro Monat",
+      "Premium-Platzierung",
+      "Erweiterte Statistiken & Analytics",
+      "Medienkit-Hosting",
+      "Prioritäts-Support",
+      "Social Media Distribution",
+      "Eigener Newsroom",
+    ],
+    cta: "Jetzt upgraden",
+    variant: "default" as const,
+    popular: true,
+  },
+  {
+    name: "Enterprise",
+    price: "Individuell",
+    period: "auf Anfrage",
+    description: "Maßgeschneiderte Lösungen für große Organisationen",
+    features: [
+      "Unbegrenzte Pressemitteilungen",
+      "Top-Platzierung garantiert",
+      "White-Label Newsroom",
+      "Dedizierter Account Manager",
+      "API-Zugang",
+      "Custom Integrationen",
+      "Individuelle SLAs",
+      "Schulungen & Workshops",
+    ],
+    cta: "Kontakt aufnehmen",
+    variant: "outline" as const,
+  },
+];
+
+const addOns = [
+  {
+    title: "Featured Story",
+    price: "199€",
+    description: "Ihre Meldung prominent auf der Startseite platziert für 24 Stunden",
+    icon: Star,
+  },
+  {
+    title: "Newsletter Feature",
+    price: "149€",
+    description: "Exklusive Platzierung im wöchentlichen Newsletter an 50.000+ Abonnenten",
+    icon: Zap,
+  },
+  {
+    title: "Social Media Boost",
+    price: "99€",
+    description: "Verstärkte Verbreitung über LinkedIn, Twitter und weitere Kanäle",
+    icon: TrendingUp,
+  },
+  {
+    title: "Premium Analytics",
+    price: "79€/Monat",
+    description: "Detaillierte Auswertungen mit Reichweite, Engagement und Conversion-Tracking",
+    icon: Shield,
+  },
+];
+
+const Preise = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      
+      <main className="flex-1">
+        {/* Hero Section */}
+        <section className="bg-gradient-to-r from-primary via-primary/95 to-secondary text-white py-16">
+          <div className="container mx-auto px-4 text-center">
+            <h1 className="text-4xl md:text-5xl font-bold mb-4">
+              Preise & Leistungen
+            </h1>
+            <p className="text-xl text-white/90 max-w-2xl mx-auto">
+              Transparente Preise für jede Unternehmensgröße – von Start-ups bis Konzerne
+            </p>
+          </div>
+        </section>
+
+        {/* Pricing Cards */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
+              {pricingPlans.map((plan) => (
+                <Card
+                  key={plan.name}
+                  className={`p-8 flex flex-col ${
+                    plan.popular
+                      ? "border-2 border-primary shadow-card-hover relative"
+                      : ""
+                  }`}
+                >
+                  {plan.popular && (
+                    <Badge className="absolute -top-3 left-1/2 -translate-x-1/2 bg-gradient-to-r from-primary to-secondary">
+                      Beliebteste Wahl
+                    </Badge>
+                  )}
+                  
+                  <div className="mb-6">
+                    <h3 className="text-2xl font-bold text-foreground mb-2">
+                      {plan.name}
+                    </h3>
+                    <div className="flex items-baseline gap-2 mb-3">
+                      <span className="text-4xl font-bold text-foreground">
+                        {plan.price}
+                      </span>
+                      <span className="text-muted-foreground">{plan.period}</span>
+                    </div>
+                    <p className="text-sm text-muted-foreground">
+                      {plan.description}
+                    </p>
+                  </div>
+
+                  <ul className="space-y-3 mb-8 flex-1">
+                    {plan.features.map((feature) => (
+                      <li key={feature} className="flex items-start gap-2">
+                        <Check className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" />
+                        <span className="text-sm text-foreground">{feature}</span>
+                      </li>
+                    ))}
+                  </ul>
+
+                  <Button
+                    variant={plan.variant}
+                    className={
+                      plan.popular
+                        ? "bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90"
+                        : ""
+                    }
+                    size="lg"
+                  >
+                    {plan.cta}
+                  </Button>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Add-ons Section */}
+        <section className="py-16 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold text-foreground mb-4">
+                Zusätzliche Services
+              </h2>
+              <p className="text-muted-foreground max-w-2xl mx-auto">
+                Maximieren Sie die Reichweite Ihrer Pressemitteilungen mit unseren Premium-Features
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+              {addOns.map((addon) => (
+                <Card key={addon.title} className="p-6 hover:shadow-card-hover transition-all">
+                  <div className="w-12 h-12 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-lg flex items-center justify-center mb-4">
+                    <addon.icon className="h-6 w-6 text-primary" />
+                  </div>
+                  <h3 className="font-semibold text-foreground mb-2">
+                    {addon.title}
+                  </h3>
+                  <div className="text-2xl font-bold text-primary mb-3">
+                    {addon.price}
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {addon.description}
+                  </p>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* FAQ Section */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4 max-w-3xl">
+            <h2 className="text-3xl font-bold text-foreground mb-8 text-center">
+              Häufig gestellte Fragen
+            </h2>
+            
+            <div className="space-y-6">
+              <Card className="p-6">
+                <h3 className="font-semibold text-foreground mb-2">
+                  Kann ich meinen Plan jederzeit wechseln?
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  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>
+              </Card>
+
+              <Card className="p-6">
+                <h3 className="font-semibold text-foreground mb-2">
+                  Gibt es eine Mindestvertragslaufzeit?
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Nein, alle unsere Pläne sind monatlich kündbar. Es gibt keine versteckten Kosten oder Mindestlaufzeiten.
+                </p>
+              </Card>
+
+              <Card className="p-6">
+                <h3 className="font-semibold text-foreground mb-2">
+                  Welche Zahlungsmethoden akzeptieren Sie?
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Wir akzeptieren alle gängigen Kreditkarten (Visa, Mastercard, American Express), SEPA-Lastschrift und PayPal. Für Enterprise-Kunden bieten wir auch Rechnungszahlung an.
+                </p>
+              </Card>
+
+              <Card className="p-6">
+                <h3 className="font-semibold text-foreground mb-2">
+                  Wie funktioniert die Reichweitenmessung?
+                </h3>
+                <p className="text-sm text-muted-foreground">
+                  Alle Professional- und Enterprise-Kunden erhalten Zugang zu detaillierten Analytics: Views, Klicks, geografische Verteilung, Referrer und mehr. Die Daten werden in Echtzeit aktualisiert.
+                </p>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-16 bg-gradient-to-r from-primary to-secondary text-white">
+          <div className="container mx-auto px-4 text-center">
+            <h2 className="text-3xl font-bold mb-4">
+              Noch Fragen zu unseren Preisen?
+            </h2>
+            <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
+              Unser Team berät Sie gerne und findet die passende Lösung für Ihre Anforderungen
+            </p>
+            <div className="flex flex-wrap gap-4 justify-center">
+              <Button size="lg" variant="secondary">
+                Beratungsgespräch vereinbaren
+              </Button>
+              <Button size="lg" variant="outline" className="bg-white/10 hover:bg-white/20 border-white text-white">
+                Kontakt aufnehmen
+              </Button>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default Preise;
--- a/dev/presswave/src/pages/PressExample.tsx
+++ b/dev/presswave/src/pages/PressExample.tsx
@ -0,0 +1,362 @@
+import { Header } from "@/components/Header";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { 
+  Building2, 
+  MapPin, 
+  Calendar, 
+  Clock,
+  Mail,
+  Phone,
+  Share2,
+  Printer,
+  Flag,
+  Download,
+  Globe
+} from "lucide-react";
+import heroImage from "@/assets/press-example-hero.jpg";
+
+const PressExample = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      
+      <main className="flex-1 bg-background">
+        {/* Hero Image */}
+        <div className="w-full h-[400px] bg-gradient-to-br from-muted to-muted/50 overflow-hidden">
+          <img 
+            src={heroImage} 
+            alt="TechVenture Innovation Summit 2025"
+            className="w-full h-full object-cover"
+          />
+        </div>
+
+        {/* Article Content */}
+        <article className="container mx-auto px-4 py-8 max-w-4xl">
+          {/* Breadcrumbs */}
+          <nav className="text-sm text-muted-foreground mb-6">
+            <a href="/" className="hover:text-foreground transition-colors">Start</a>
+            <span className="mx-2">›</span>
+            <a href="/kategorie/it" className="hover:text-foreground transition-colors">IT & Software</a>
+            <span className="mx-2">›</span>
+            <span className="text-foreground">TechVenture Innovation Summit</span>
+          </nav>
+
+          {/* Title */}
+          <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4 leading-tight">
+            TechVenture startet Innovation Summit 2025: Europas größte Plattform für digitale Transformation
+          </h1>
+
+          {/* Subtitle */}
+          <p className="text-xl text-muted-foreground mb-6">
+            Über 5.000 Entscheider aus Wirtschaft und Politik werden erwartet – Fokus auf KI, Nachhaltigkeit und Future Skills
+          </p>
+
+          {/* Meta Info */}
+          <div className="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-border">
+            <div className="flex items-center gap-2 text-sm">
+              <MapPin className="h-4 w-4 text-muted-foreground" />
+              <span className="font-medium">München</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+              <span>6. Oktober 2025</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Clock className="h-4 w-4 text-muted-foreground" />
+              <span>09:00 Uhr</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Clock className="h-4 w-4" />
+              <span>8 Min. Lesezeit</span>
+            </div>
+          </div>
+
+          {/* Key Facts Box - Desktop Side */}
+          <div className="lg:float-right lg:ml-8 lg:w-80 mb-8">
+            <Card className="p-6 bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/20">
+              <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+                Key Facts
+              </h3>
+              <ul className="space-y-3 text-sm">
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>5.000+ erwartete Teilnehmer aus 40 Ländern</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>150+ Speaker und Experten aus Industrie & Forschung</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>4 Themenschwerpunkte über 3 Konferenztage</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>200+ Aussteller im Innovation Expo Bereich</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>Early Bird Tickets bis 31. Dezember 2024</span>
+                </li>
+              </ul>
+            </Card>
+          </div>
+
+          {/* Article Content */}
+          <div className="prose prose-lg max-w-none">
+            <p className="text-foreground leading-relaxed mb-6">
+              <strong>München, 6. Oktober 2025</strong> – Die TechVenture Group gibt heute den offiziellen Startschuss für den Innovation Summit 2025 bekannt, der vom 15. bis 17. März 2025 in München stattfinden wird. Die Veranstaltung etabliert sich als Europas führende Plattform für digitale Transformation und bringt über 5.000 Entscheider aus Wirtschaft, Politik und Wissenschaft zusammen.
+            </p>
+
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
+              Vier zentrale Themenbereiche prägen das Programm
+            </h2>
+
+            <p className="text-foreground leading-relaxed mb-6">
+              Der Innovation Summit 2025 konzentriert sich auf vier zukunftsweisende Schwerpunkte, die die digitale Transformation der nächsten Jahre maßgeblich beeinflussen werden:
+            </p>
+
+            <ul className="list-disc pl-6 space-y-2 mb-6 text-foreground">
+              <li><strong>Künstliche Intelligenz & Machine Learning:</strong> Praktische Anwendungen, ethische Fragestellungen und regulatorische Rahmenbedingungen</li>
+              <li><strong>Nachhaltige Digitalisierung:</strong> Green IT, energieeffiziente Rechenzentren und klimaneutrale Tech-Lösungen</li>
+              <li><strong>Future Skills & Talent Development:</strong> Kompetenzaufbau für die digitale Arbeitswelt von morgen</li>
+              <li><strong>Cybersecurity & Data Governance:</strong> Datenschutz, IT-Sicherheit und Compliance in einer vernetzten Welt</li>
+            </ul>
+
+            <blockquote className="border-l-4 border-primary pl-6 my-8 italic text-lg text-muted-foreground">
+              "Der Innovation Summit ist mehr als eine Konferenz – er ist ein Katalysator für nachhaltige Veränderung. Wir schaffen einen Raum, in dem Visionäre auf Praktiker treffen, neue Partnerschaften entstehen und konkrete Lösungen für die Herausforderungen der digitalen Transformation entwickelt werden."
+              <footer className="text-sm font-medium text-foreground mt-2 not-italic">
+                – Dr. Alexandra Schmidt, CEO TechVenture Group
+              </footer>
+            </blockquote>
+
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
+              Hochkarätige Speaker-Lineup aus Wirtschaft und Wissenschaft
+            </h2>
+
+            <p className="text-foreground leading-relaxed mb-6">
+              Über 150 renommierte Speaker werden erwartet, darunter CEOs führender Technologieunternehmen, Forscher von Top-Universitäten und politische Entscheidungsträger. Bestätigte Keynote-Speaker sind unter anderem:
+            </p>
+
+            <ul className="list-disc pl-6 space-y-2 mb-6 text-foreground">
+              <li>Prof. Dr. Thomas Weber, Direktor des Fraunhofer-Instituts für KI</li>
+              <li>Lisa Müller, Chief Digital Officer der Deutschen Bahn AG</li>
+              <li>Dr. Michael Chen, VP of European Operations bei Google Cloud</li>
+              <li>Sarah Johnson, Gründerin und CEO von GreenTech Innovations</li>
+            </ul>
+
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
+              Innovation Expo: 200 Aussteller präsentieren Zukunftstechnologien
+            </h2>
+
+            <p className="text-foreground leading-relaxed mb-6">
+              Parallel zum Konferenzprogramm bietet die Innovation Expo mit über 200 Ausstellern eine einzigartige Plattform zur Präsentation neuester Technologien und Lösungen. Start-ups, Mittelständler und Konzerne zeigen ihre innovativen Produkte und Services in den Bereichen KI, Cloud Computing, IoT, Blockchain und Quantum Computing.
+            </p>
+
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
+              Networking und Matchmaking im Fokus
+            </h2>
+
+            <p className="text-foreground leading-relaxed mb-6">
+              Ein besonderes Highlight des Summit ist das KI-gestützte Matchmaking-System, das Teilnehmer basierend auf ihren Interessen, Kompetenzen und Zielen zusammenbringt. Zusätzlich bieten Networking-Lounges, Dinner-Events und geführte Rundgänge zahlreiche Gelegenheiten zum Austausch und zur Geschäftsanbahnung.
+            </p>
+
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
+              Early Bird Tickets und Anmeldung
+            </h2>
+
+            <p className="text-foreground leading-relaxed mb-6">
+              Die Registrierung für den Innovation Summit 2025 ist ab sofort unter www.innovationsummit.de möglich. Early Bird Tickets zum vergünstigten Preis sind bis zum 31. Dezember 2024 erhältlich. Verschiedene Ticket-Kategorien ermöglichen eine flexible Teilnahme – von einzelnen Tagespässen bis zu All-Access-Paketen mit exklusiven Workshop-Plätzen.
+            </p>
+
+            <div className="bg-muted/30 border-l-4 border-secondary p-6 my-8 rounded-r-lg">
+              <h3 className="font-semibold text-foreground mb-2">Über TechVenture Group</h3>
+              <p className="text-sm text-muted-foreground">
+                Die TechVenture Group ist ein führender Veranstalter von Tech-Konferenzen und Innovation-Events in Europa. Mit über 15 Jahren Erfahrung organisiert das Unternehmen jährlich mehr als 20 internationale Veranstaltungen und erreicht ein Netzwerk von über 100.000 Tech-Professionals weltweit.
+              </p>
+            </div>
+          </div>
+
+          {/* Media Section */}
+          <div className="mt-12 mb-8">
+            <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+              <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+              Downloads & Medien
+            </h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                    <Download className="h-6 w-6 text-primary" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="font-medium text-foreground">Pressemitteilung (PDF)</p>
+                    <p className="text-sm text-muted-foreground">420 KB</p>
+                  </div>
+                </div>
+              </Card>
+              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center">
+                    <Download className="h-6 w-6 text-secondary" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="font-medium text-foreground">Bildmaterial (ZIP)</p>
+                    <p className="text-sm text-muted-foreground">12.3 MB</p>
+                  </div>
+                </div>
+              </Card>
+              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                    <Download className="h-6 w-6 text-primary" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="font-medium text-foreground">Fact Sheet (PDF)</p>
+                    <p className="text-sm text-muted-foreground">380 KB</p>
+                  </div>
+                </div>
+              </Card>
+              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center">
+                    <Download className="h-6 w-6 text-secondary" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="font-medium text-foreground">Logo-Paket (ZIP)</p>
+                    <p className="text-sm text-muted-foreground">2.1 MB</p>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+
+          {/* Contact Box */}
+          <Card className="p-6 bg-card mb-8 border-2 border-border">
+            <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
+              <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+              Pressekontakt
+            </h3>
+            <div className="space-y-4">
+              <div>
+                <p className="font-medium text-foreground">TechVenture Group GmbH</p>
+                <p className="text-sm text-muted-foreground">Abteilung Unternehmenskommunikation</p>
+              </div>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <p className="text-sm font-medium text-foreground mb-2">Ansprechpartnerin</p>
+                  <p className="text-sm text-muted-foreground">Julia Hoffmann</p>
+                  <p className="text-sm text-muted-foreground">Senior PR Manager</p>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2 text-sm">
+                    <Mail className="h-4 w-4 text-muted-foreground" />
+                    <a href="mailto:presse@techventure.de" className="text-primary hover:underline">
+                      presse@techventure.de
+                    </a>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <Phone className="h-4 w-4 text-muted-foreground" />
+                    <a href="tel:+498912345678" className="hover:text-primary transition-colors">
+                      +49 89 1234 5678
+                    </a>
+                  </div>
+                  <div className="flex items-center gap-2 text-sm">
+                    <Globe className="h-4 w-4 text-muted-foreground" />
+                    <a href="https://www.techventure.de" className="text-primary hover:underline" target="_blank" rel="noopener">
+                      www.techventure.de
+                    </a>
+                  </div>
+                </div>
+              </div>
+              <div className="pt-4 border-t border-border">
+                <Button variant="outline" size="sm">
+                  <Download className="h-4 w-4 mr-2" />
+                  vCard herunterladen
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          {/* Company Teaser */}
+          <Card className="p-6 bg-muted/30 mb-8">
+            <div className="flex items-start gap-4">
+              <div className="w-16 h-16 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-lg flex items-center justify-center flex-shrink-0">
+                <Building2 className="h-8 w-8 text-primary" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-foreground mb-2">Über TechVenture Group</h3>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Die TechVenture Group ist Europas führender Veranstalter von Innovation- und Technologie-Events. Seit 2010 schaffen wir Plattformen für den Wissensaustausch zwischen Wirtschaft, Wissenschaft und Politik. Mit über 20 jährlichen Events und einem Netzwerk von 100.000+ Tech-Professionals weltweit fördern wir Innovation und digitale Transformation.
+                </p>
+                <Button variant="link" className="p-0 h-auto text-primary hover:text-secondary transition-colors">
+                  Zum Newsroom →
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          {/* Utility Bar */}
+          <div className="flex items-center gap-3 py-6 border-y border-border">
+            <Button variant="outline" size="sm">
+              <Share2 className="h-4 w-4 mr-2" />
+              Teilen
+            </Button>
+            <Button variant="outline" size="sm">
+              <Printer className="h-4 w-4 mr-2" />
+              Drucken
+            </Button>
+            <Button variant="ghost" size="sm" className="ml-auto">
+              <Flag className="h-4 w-4 mr-2" />
+              Melden
+            </Button>
+          </div>
+        </article>
+
+        {/* Related Articles */}
+        <section className="bg-muted/30 py-12 mt-8">
+          <div className="container mx-auto px-4 max-w-6xl">
+            <h2 className="text-2xl font-semibold text-foreground mb-6 flex items-center gap-2">
+              <span className="w-1 h-6 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+              Weitere Meldungen von TechVenture
+            </h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[
+                {
+                  title: "TechVenture erweitert Portfolio um Blockchain Summit",
+                  date: "15. September 2025"
+                },
+                {
+                  title: "Über 3.000 Teilnehmer beim AI & Data Conference 2024",
+                  date: "2. August 2025"
+                },
+                {
+                  title: "Neue Partnerschaft mit führenden Tech-Universitäten",
+                  date: "20. Juli 2025"
+                }
+              ].map((item, i) => (
+                <Card key={i} className="p-5 hover:shadow-card-hover transition-all">
+                  <div className="flex items-center gap-2 mb-3">
+                    <Badge variant="secondary" className="text-xs">IT & Software</Badge>
+                  </div>
+                  <h3 className="font-semibold text-foreground mb-2 line-clamp-2">
+                    {item.title}
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-3">
+                    {item.date}
+                  </p>
+                  <Button variant="ghost" size="sm">Lesen →</Button>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default PressExample;
--- a/dev/presswave/src/pages/ReleaseDetail.tsx
+++ b/dev/presswave/src/pages/ReleaseDetail.tsx
@ -0,0 +1,262 @@
+import { Header } from "@/components/Header";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import { 
+  Building2, 
+  MapPin, 
+  Calendar, 
+  Clock,
+  Mail,
+  Phone,
+  Share2,
+  Printer,
+  Flag,
+  Download
+} from "lucide-react";
+
+const ReleaseDetail = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      
+      <main className="flex-1 bg-background">
+        {/* Hero Section */}
+        <article className="container mx-auto px-4 py-8 max-w-4xl">
+          {/* Breadcrumbs */}
+          <nav className="text-sm text-muted-foreground mb-6">
+            <a href="/" className="hover:text-foreground transition-colors">Start</a>
+            <span className="mx-2">›</span>
+            <a href="/kategorie/it" className="hover:text-foreground transition-colors">IT & Software</a>
+            <span className="mx-2">›</span>
+            <span className="text-foreground">KI-Revolution in Deutschland</span>
+          </nav>
+
+          {/* Title */}
+          <h1 className="text-3xl md:text-4xl font-bold text-foreground mb-4 leading-tight">
+            KI-Revolution: Deutsche Unternehmen investieren Milliarden in Automatisierung
+          </h1>
+
+          {/* Subtitle */}
+          <p className="text-xl text-muted-foreground mb-6">
+            Neue Studie zeigt massive Investitionen in künstliche Intelligenz für 2025
+          </p>
+
+          {/* Meta Info */}
+          <div className="flex flex-wrap items-center gap-4 mb-8 pb-8 border-b border-border">
+            <div className="flex items-center gap-2 text-sm">
+              <MapPin className="h-4 w-4 text-muted-foreground" />
+              <span className="font-medium">Berlin</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Calendar className="h-4 w-4 text-muted-foreground" />
+              <span>6. Oktober 2025</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm">
+              <Clock className="h-4 w-4 text-muted-foreground" />
+              <span>14:30 Uhr</span>
+            </div>
+            <div className="flex items-center gap-2 text-sm text-muted-foreground">
+              <Clock className="h-4 w-4" />
+              <span>5 Min. Lesezeit</span>
+            </div>
+          </div>
+
+          {/* Key Facts Box - Desktop Side */}
+          <div className="lg:float-right lg:ml-8 lg:w-80 mb-8">
+            <Card className="p-6 bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/20">
+              <h3 className="font-semibold text-foreground mb-4 flex items-center gap-2">
+                <span className="w-1 h-5 bg-gradient-to-b from-primary to-secondary rounded-full"></span>
+                Key Facts
+              </h3>
+              <ul className="space-y-3 text-sm">
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>15 Milliarden Euro Investitionsvolumen geplant</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>78% der Unternehmen setzen auf KI-Automatisierung</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>Produktivitätssteigerung um durchschnittlich 35%</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>Neue Arbeitsplätze im KI-Sektor erwartet</span>
+                </li>
+                <li className="flex items-start gap-2">
+                  <span className="text-primary mt-0.5">•</span>
+                  <span>Fokus auf ethische KI-Entwicklung</span>
+                </li>
+              </ul>
+            </Card>
+          </div>
+
+          {/* Article Content */}
+          <div className="prose prose-lg max-w-none">
+            <p className="text-foreground 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 className="text-2xl font-semibold text-foreground mt-8 mb-4">
+              Paradigmenwechsel in der Digitalisierung
+            </h2>
+
+            <p className="text-foreground 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 className="border-l-4 border-primary pl-6 my-8 italic text-lg text-muted-foreground">
+              "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 className="text-sm font-medium text-foreground mt-2 not-italic">
+                – Dr. Sarah Müller, Geschäftsführerin TechVision Analytics
+              </footer>
+            </blockquote>
+
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
+              Schwerpunkte der Investitionen
+            </h2>
+
+            <p className="text-foreground leading-relaxed mb-4">
+              Die geplanten Investitionen konzentrieren sich auf mehrere Kernbereiche:
+            </p>
+
+            <ul className="list-disc pl-6 space-y-2 mb-6 text-foreground">
+              <li>Prozessautomatisierung und intelligente Workflow-Systeme</li>
+              <li>Predictive Analytics und datengesteuerte Entscheidungsfindung</li>
+              <li>Kundenservice-Automatisierung durch Chatbots und virtuelle Assistenten</li>
+              <li>Qualitätskontrolle mittels Computer Vision</li>
+              <li>Personalisierte Marketing- und Vertriebsautomatisierung</li>
+            </ul>
+
+            <h2 className="text-2xl font-semibold text-foreground mt-8 mb-4">
+              Produktivitätssteigerung als Hauptmotivation
+            </h2>
+
+            <p className="text-foreground 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 className="mt-12 mb-8">
+            <h3 className="text-lg font-semibold text-foreground mb-4">Downloads & Medien</h3>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
+                    <Download className="h-6 w-6 text-primary" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="font-medium text-foreground">Vollständige Studie (PDF)</p>
+                    <p className="text-sm text-muted-foreground">2.4 MB</p>
+                  </div>
+                </div>
+              </Card>
+              <Card className="p-4 hover:shadow-card-hover transition-all cursor-pointer">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center">
+                    <Download className="h-6 w-6 text-secondary" />
+                  </div>
+                  <div className="flex-1">
+                    <p className="font-medium text-foreground">Infografiken (ZIP)</p>
+                    <p className="text-sm text-muted-foreground">8.7 MB</p>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+
+          {/* Contact Box */}
+          <Card className="p-6 bg-card mb-8">
+            <h3 className="text-lg font-semibold text-foreground mb-4">Pressekontakt</h3>
+            <div className="space-y-4">
+              <div>
+                <p className="font-medium text-foreground">TechVision Analytics GmbH</p>
+                <p className="text-sm text-muted-foreground">Ansprechpartnerin: Dr. Sarah Müller</p>
+              </div>
+              <div className="space-y-2">
+                <div className="flex items-center gap-2 text-sm">
+                  <Mail className="h-4 w-4 text-muted-foreground" />
+                  <a href="mailto:presse@techvision.de" className="text-primary hover:underline">
+                    presse@techvision.de
+                  </a>
+                </div>
+                <div className="flex items-center gap-2 text-sm">
+                  <Phone className="h-4 w-4 text-muted-foreground" />
+                  <a href="tel:+493012345678" className="hover:text-primary transition-colors">
+                    +49 30 1234 5678
+                  </a>
+                </div>
+              </div>
+              <Button variant="outline" size="sm">
+                vCard herunterladen
+              </Button>
+            </div>
+          </Card>
+
+          {/* Company Teaser */}
+          <Card className="p-6 bg-muted/30 mb-8">
+            <div className="flex items-start gap-4">
+              <div className="w-16 h-16 bg-card rounded-lg flex items-center justify-center flex-shrink-0">
+                <Building2 className="h-8 w-8 text-muted-foreground" />
+              </div>
+              <div className="flex-1">
+                <h3 className="font-semibold text-foreground mb-2">TechVision Analytics</h3>
+                <p className="text-sm text-muted-foreground 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>
+                <Button variant="link" className="p-0 h-auto text-primary hover:text-secondary transition-colors">
+                  Zum Newsroom →
+                </Button>
+              </div>
+            </div>
+          </Card>
+
+          {/* Utility Bar */}
+          <div className="flex items-center gap-3 py-6 border-y border-border">
+            <Button variant="outline" size="sm">
+              <Share2 className="h-4 w-4 mr-2" />
+              Teilen
+            </Button>
+            <Button variant="outline" size="sm">
+              <Printer className="h-4 w-4 mr-2" />
+              Drucken
+            </Button>
+            <Button variant="ghost" size="sm" className="ml-auto">
+              <Flag className="h-4 w-4 mr-2" />
+              Melden
+            </Button>
+          </div>
+        </article>
+
+        {/* Related Articles */}
+        <section className="bg-muted/30 py-12 mt-8">
+          <div className="container mx-auto px-4 max-w-6xl">
+            <h2 className="text-2xl font-semibold text-foreground mb-6">Ähnliche Meldungen</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+              {[1, 2, 3].map((i) => (
+                <Card key={i} className="p-5 hover:shadow-card-hover transition-all">
+                  <div className="flex items-center gap-2 mb-3">
+                    <Badge variant="secondary" className="text-xs">IT & Software</Badge>
+                  </div>
+                  <h3 className="font-semibold text-foreground mb-2 line-clamp-2">
+                    Weitere spannende Entwicklungen in der Tech-Branche
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-3 line-clamp-2">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt.
+                  </p>
+                  <Button variant="ghost" size="sm">Lesen →</Button>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default ReleaseDetail;
--- a/dev/presswave/src/pages/UeberUns.tsx
+++ b/dev/presswave/src/pages/UeberUns.tsx
@ -0,0 +1,240 @@
+import { Header } from "@/components/Header";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import { Users, Target, Award, TrendingUp, Globe, Heart } from "lucide-react";
+
+const stats = [
+  { label: "Veröffentlichte Meldungen", value: "250.000+" },
+  { label: "Registrierte Unternehmen", value: "15.000+" },
+  { label: "Monatliche Leser", value: "2,5 Mio." },
+  { label: "Länder", value: "40+" },
+];
+
+const values = [
+  {
+    icon: Target,
+    title: "Qualität vor Quantität",
+    description: "Wir setzen auf redaktionelle Qualität und kuratieren Inhalte sorgfältig, um höchste Standards zu gewährleisten.",
+  },
+  {
+    icon: Globe,
+    title: "DACH-Expertise",
+    description: "Spezialisiert auf den deutschsprachigen Raum mit tiefem Verständnis für regionale Besonderheiten.",
+  },
+  {
+    icon: Heart,
+    title: "Kundenfokus",
+    description: "Ihre Zufriedenheit steht im Mittelpunkt. Wir bieten persönlichen Support und maßgeschneiderte Lösungen.",
+  },
+  {
+    icon: TrendingUp,
+    title: "Innovation & Technologie",
+    description: "Kontinuierliche Weiterentwicklung unserer Plattform mit modernsten Technologien und Features.",
+  },
+];
+
+const team = [
+  {
+    name: "Dr. Michael Weber",
+    role: "Gründer & CEO",
+    bio: "15+ Jahre Erfahrung in PR und Unternehmenskommunikation",
+  },
+  {
+    name: "Sarah Hoffmann",
+    role: "Chief Technology Officer",
+    bio: "Expertin für digitale Plattformen und Skalierung",
+  },
+  {
+    name: "Thomas Schneider",
+    role: "Head of Customer Success",
+    bio: "Spezialist für Kundenzufriedenheit und Account Management",
+  },
+  {
+    name: "Lisa Müller",
+    role: "Head of Content & Quality",
+    bio: "Journalistin mit Schwerpunkt digitale Medien",
+  },
+];
+
+const UeberUns = () => {
+  return (
+    <div className="min-h-screen flex flex-col">
+      <Header />
+      
+      <main className="flex-1">
+        {/* Hero Section */}
+        <section className="bg-gradient-to-r from-primary via-primary/95 to-secondary text-white py-20">
+          <div className="container mx-auto px-4">
+            <div className="max-w-3xl mx-auto text-center">
+              <h1 className="text-4xl md:text-5xl font-bold mb-6">
+                Über Business Portal
+              </h1>
+              <p className="text-xl text-white/90 leading-relaxed">
+                Seit 2010 verbinden wir Unternehmen mit Medien, Journalisten und Multiplikatoren im deutschsprachigen Raum. Wir sind die führende Plattform für Unternehmenskommunikation und Pressearbeit im DACH-Raum.
+              </p>
+            </div>
+          </div>
+        </section>
+
+        {/* Stats Section */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
+              {stats.map((stat) => (
+                <div key={stat.label} className="text-center">
+                  <div className="text-4xl font-bold bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm text-muted-foreground">{stat.label}</div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Mission Section */}
+        <section className="py-16 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="max-w-4xl mx-auto">
+              <div className="text-center mb-12">
+                <h2 className="text-3xl font-bold text-foreground mb-4">
+                  Unsere Mission
+                </h2>
+                <p className="text-lg text-muted-foreground">
+                  Professionelle Unternehmenskommunikation für alle zugänglich machen
+                </p>
+              </div>
+
+              <Card className="p-8 md:p-12">
+                <p className="text-lg text-foreground 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 className="text-lg text-foreground 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>
+              </Card>
+            </div>
+          </div>
+        </section>
+
+        {/* Values Section */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold text-foreground mb-4">
+                Unsere Werte
+              </h2>
+              <p className="text-muted-foreground max-w-2xl mx-auto">
+                Diese Prinzipien leiten uns in allem, was wir tun
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-6xl mx-auto">
+              {values.map((value) => (
+                <Card key={value.title} className="p-6 text-center hover:shadow-card-hover transition-all">
+                  <div className="w-16 h-16 bg-gradient-to-br from-primary/10 to-secondary/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <value.icon className="h-8 w-8 text-primary" />
+                  </div>
+                  <h3 className="font-semibold text-foreground mb-3">
+                    {value.title}
+                  </h3>
+                  <p className="text-sm text-muted-foreground">
+                    {value.description}
+                  </p>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Team Section */}
+        <section className="py-16 bg-muted/30">
+          <div className="container mx-auto px-4">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold text-foreground mb-4">
+                Unser Team
+              </h2>
+              <p className="text-muted-foreground max-w-2xl mx-auto">
+                Erfahrene Experten aus PR, Technologie und Medien
+              </p>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 max-w-6xl mx-auto">
+              {team.map((member) => (
+                <Card key={member.name} className="p-6 text-center hover:shadow-card-hover transition-all">
+                  <div className="w-24 h-24 bg-gradient-to-br from-primary/20 to-secondary/20 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <Users className="h-12 w-12 text-primary" />
+                  </div>
+                  <h3 className="font-semibold text-foreground mb-1">
+                    {member.name}
+                  </h3>
+                  <p className="text-sm text-primary mb-3">{member.role}</p>
+                  <p className="text-sm text-muted-foreground">{member.bio}</p>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* Timeline Section */}
+        <section className="py-16 bg-background">
+          <div className="container mx-auto px-4 max-w-4xl">
+            <div className="text-center mb-12">
+              <h2 className="text-3xl font-bold text-foreground mb-4">
+                Unsere Geschichte
+              </h2>
+            </div>
+
+            <div className="space-y-8">
+              {[
+                { year: "2010", title: "Gründung", text: "Start als kleines Start-up mit der Vision, PR zu demokratisieren" },
+                { year: "2013", title: "Expansion", text: "Erreichen von 1.000 registrierten Unternehmen" },
+                { year: "2016", title: "Wachstum", text: "Launch der Premium-Features und Enterprise-Lösungen" },
+                { year: "2019", title: "Innovation", text: "Einführung KI-gestützter Reichweiten-Analytics" },
+                { year: "2022", title: "Marktführer", text: "Über 10.000 aktive Unternehmenskunden im DACH-Raum" },
+                { year: "2025", title: "Zukunft", text: "Internationalisierung und neue AI-Features" },
+              ].map((milestone, index) => (
+                <div key={milestone.year} className="flex gap-6">
+                  <div className="flex flex-col items-center">
+                    <div className="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center text-white font-bold flex-shrink-0">
+                      {milestone.year.slice(-2)}
+                    </div>
+                    {index < 5 && (
+                      <div className="w-0.5 h-16 bg-gradient-to-b from-primary to-secondary mt-2"></div>
+                    )}
+                  </div>
+                  <div className="pb-8">
+                    <h3 className="font-semibold text-foreground mb-2">
+                      {milestone.title}
+                    </h3>
+                    <p className="text-sm text-muted-foreground">
+                      {milestone.text}
+                    </p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </section>
+
+        {/* CTA Section */}
+        <section className="py-16 bg-gradient-to-r from-primary to-secondary text-white">
+          <div className="container mx-auto px-4 text-center">
+            <Award className="h-16 w-16 mx-auto mb-6" />
+            <h2 className="text-3xl font-bold mb-4">
+              Werden Sie Teil unserer Success Story
+            </h2>
+            <p className="text-xl text-white/90 mb-8 max-w-2xl mx-auto">
+              Über 15.000 Unternehmen vertrauen bereits auf Business Portal
+            </p>
+            <Button size="lg" variant="secondary">
+              Jetzt kostenlos starten
+            </Button>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
+};
+
+export default UeberUns;
--- a/dev/presswave/src/vite-env.d.ts
+++ b/dev/presswave/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/dev/presswave/tailwind.config.ts
+++ b/dev/presswave/tailwind.config.ts
@ -0,0 +1,93 @@
+import type { Config } from "tailwindcss";
+
+export default {
+  darkMode: ["class"],
+  content: ["./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      fontFamily: {
+        sans: ['Montserrat', 'system-ui', 'sans-serif'],
+      },
+      boxShadow: {
+        'card': 'var(--shadow-card)',
+        'card-hover': 'var(--shadow-card-hover)',
+        'subtle': 'var(--shadow-subtle)',
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: {
+            height: "0",
+          },
+          to: {
+            height: "var(--radix-accordion-content-height)",
+          },
+        },
+        "accordion-up": {
+          from: {
+            height: "var(--radix-accordion-content-height)",
+          },
+          to: {
+            height: "0",
+          },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config;
--- a/dev/presswave/tsconfig.app.json
+++ b/dev/presswave/tsconfig.app.json
@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": false,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitAny": false,
+    "noFallthroughCasesInSwitch": false,
+
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
--- a/dev/presswave/tsconfig.json
+++ b/dev/presswave/tsconfig.json
@ -0,0 +1,16 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "noImplicitAny": false,
+    "noUnusedParameters": false,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noUnusedLocals": false,
+    "strictNullChecks": false
+  }
+}
--- a/dev/presswave/tsconfig.node.json
+++ b/dev/presswave/tsconfig.node.json
@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/dev/presswave/vite.config.ts
+++ b/dev/presswave/vite.config.ts
@ -0,0 +1,18 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import path from "path";
+import { componentTagger } from "lovable-tagger";
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => ({
+  server: {
+    host: "::",
+    port: 8080,
+  },
+  plugins: [react(), mode === "development" && componentTagger()].filter(Boolean),
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+}));
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1200" fill="none"><rect width="1200" height="1200" fill="#EAEAEA" rx="3"/><g opacity=".5"><g opacity=".5"><path fill="#FAFAFA" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 736.5c-75.454 0-136.621-61.167-136.621-136.62 0-75.454 61.167-136.621 136.621-136.621 75.453 0 136.62 61.167 136.62 136.621 0 75.453-61.167 136.62-136.62 136.62Z"/></g><path stroke="url(#a)" stroke-width="2.418" d="M0-1.209h553.581" transform="scale(1 -1) rotate(45 1163.11 91.165)"/><path stroke="url(#b)" stroke-width="2.418" d="M404.846 598.671h391.726"/><path stroke="url(#c)" stroke-width="2.418" d="M599.5 795.742V404.017"/><path stroke="url(#d)" stroke-width="2.418" d="m795.717 796.597-391.441-391.44"/><path fill="#fff" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/><g clip-path="url(#e)"><path fill="#666" fill-rule="evenodd" d="M616.426 586.58h-31.434v16.176l3.553-3.554.531-.531h9.068l.074-.074 8.463-8.463h2.565l7.18 7.181V586.58Zm-15.715 14.654 3.698 3.699 1.283 1.282-2.565 2.565-1.282-1.283-5.2-5.199h-6.066l-5.514 5.514-.073.073v2.876a2.418 2.418 0 0 0 2.418 2.418h26.598a2.418 2.418 0 0 0 2.418-2.418v-8.317l-8.463-8.463-7.181 7.181-.071.072Zm-19.347 5.442v4.085a6.045 6.045 0 0 0 6.046 6.045h26.598a6.044 6.044 0 0 0 6.045-6.045v-7.108l1.356-1.355-1.282-1.283-.074-.073v-17.989h-38.689v23.43l-.146.146.146.147Z" clip-rule="evenodd"/></g><path stroke="#C9C9C9" stroke-width="2.418" d="M600.709 656.704c-31.384 0-56.825-25.441-56.825-56.824 0-31.384 25.441-56.825 56.825-56.825 31.383 0 56.824 25.441 56.824 56.825 0 31.383-25.441 56.824-56.824 56.824Z"/></g><defs><linearGradient id="a" x1="554.061" x2="-.48" y1=".083" y2=".087" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="b" x1="796.912" x2="404.507" y1="599.963" y2="599.965" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="c" x1="600.792" x2="600.794" y1="403.677" y2="796.082" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><linearGradient id="d" x1="404.85" x2="796.972" y1="403.903" y2="796.02" gradientUnits="userSpaceOnUse"><stop stop-color="#C9C9C9" stop-opacity="0"/><stop offset=".208" stop-color="#C9C9C9"/><stop offset=".792" stop-color="#C9C9C9"/><stop offset="1" stop-color="#C9C9C9" stop-opacity="0"/></linearGradient><clipPath id="e"><path fill="#fff" d="M581.364 580.535h38.689v38.689h-38.689z"/></clipPath></defs></svg>