241 lines
4.2 KiB
Markdown
241 lines
4.2 KiB
Markdown
# 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
|