Fix auth form errors and redirects: Add React keys/useEffects for error rendering and scroll, Inertia::location in controllers for SPA navigation, extend RegistrationTest and add E2E. Update docs (changes/2025-10-02-registration-fixes.md, prp/13-backend-authentication.md). Add new UI components (accordion, carousel, progress, table, tabs), marketing/legal pages (Blog, Kontakt, Datenschutz, etc.), fonts, user migration (remove_name), views/css/package updates, seeders/factories.
This commit is contained in:
Codex Agent
69
docs/prp/marketing-frontend-unification.md
Normal file
69
docs/prp/marketing-frontend-unification.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# Vereinheitlichung des Marketing-Frontends: Von Hybrid (Blade + React) zu konsistentem Inertia/React-Layout
|
||||
|
||||
## Problemstellung
|
||||
Das aktuelle Marketing-Frontend kombiniert Blade-Templates (z.B. für statische Seiten wie Blog, Legal) mit Vite/React-Komponenten (z.B. Packages, Register). Bei rein React-gerenderten Seiten fehlt das Layout (Header, Footer) und das Styling (z.B. Aurora-Gradient, Fonts), was zu inkonsistentem UX führt:
|
||||
- Blade-Seiten: Vollständiges Layout via @extends('layouts.marketing').
|
||||
- React-Seiten: Nur Komponente, kein Wrapper → Kein Header/Footer, anderes Styling.
|
||||
|
||||
Ziel: Vollständige Migration zu Inertia.js für SPA-ähnliche Konsistenz, mit einem zentralen React-Layout für alle Marketing-Seiten. Vorteile: Einheitliches Design, bessere Navigation, einfachere Wartung.
|
||||
|
||||
## Architektur-Vorschlag
|
||||
### 1. Kernkomponenten
|
||||
- **MarketingLayout.tsx** (resources/js/layouts/MarketingLayout.tsx): Wrapper für alle Marketing-Seiten.
|
||||
- Header: Logo, Navigation (Home, Packages, Blog, Occasions, Register/Login).
|
||||
- Hauptinhalt: `{children}` (die spezifische Page-Komponente).
|
||||
- Footer: Impressum, Datenschutz, Social-Links, Copyright.
|
||||
- Styling: Tailwind-Klassen für Aurora-Gradient (bg-aurora-enhanced), Fonts (Playfair Display für Überschriften, Montserrat für Text).
|
||||
- **Globale Styles** (resources/css/app.css):
|
||||
- @font-face für Montserrat und Playfair Display (via Google Fonts oder lokal).
|
||||
- .bg-aurora-enhanced: radial-gradient(circle at 20% 80%, #a8edea 0%, #fed6e3 50%, #d299c2 100%) + linear-gradient + animation (shadcn-Style).
|
||||
- Theme: Primärfarbe #FFB6C1, responsive (mobile-first).
|
||||
|
||||
### 2. Routing & Controller
|
||||
- **web.php** (routes/web.php): Alle /marketing/*-Routes zu Inertia::render umstellen.
|
||||
- Beispiel: Route::inertia('/marketing/packages', 'Marketing/Packages');
|
||||
- **MarketingController.php** (app/Http/Controllers/MarketingController.php):
|
||||
- Methoden (z.B. packages(), blog(), register()) liefern Props (z.B. packages: Package::all()->map(fn($p) => ['id' => $p->id, 'features' => $p->features, 'limits' => $p->limits])).
|
||||
- Für dynamische Inhalte: DB-Queries (z.B. BlogPosts für /blog).
|
||||
|
||||
### 3. Page-Komponenten
|
||||
- Alle Marketing-Seiten als React/TSX (resources/js/pages/marketing/*.tsx):
|
||||
- z.B. Packages.tsx: Rendert Paket-Karten in Grid/Carousel (shadcn), mit Modal für Details/Upsell.
|
||||
- Wrapper: In App.tsx oder router.tsx: if (route.startsWith('/marketing')) return <MarketingLayout><Page /></MarketingLayout>;
|
||||
- Migration-Reihenfolge:
|
||||
1. Statische Seiten (Home, Blog-Index): Von Blade zu Inertia.
|
||||
2. Dynamische (Packages, Register): Props integrieren.
|
||||
3. Legal-Seiten: Als einfache Inertia-Pages (statischer Text).
|
||||
|
||||
### 4. Technische Umsetzung
|
||||
- **Inertia-Setup**: Stelle sicher, config/inertia.php hat middleware für SSR (optional) und shared props (z.B. auth, flash).
|
||||
- **Auth-Integration**: usePage().props.auth für CTAs (z.B. Login-Button im Header).
|
||||
- **Responsive Design**: Tailwind: block md:hidden für Mobile-Carousel in Packages.
|
||||
- **Fonts & Assets**: Vite-Plugin für Fonts/SVGs; preload in Layout.
|
||||
- **Tests**: E2E mit Playwright (z.B. navigate to /packages, check header/footer presence).
|
||||
|
||||
### 5. Diagramm: Layout-Struktur
|
||||
```
|
||||
MarketingLayout.tsx
|
||||
├── Header (Navigation, Logo)
|
||||
├── {children} (z.B. Packages.tsx)
|
||||
│ ├── Hero (Aurora-Gradient)
|
||||
│ ├── Content (Grid/Carousel)
|
||||
│ └── CTA-Section
|
||||
└── Footer (Legal-Links)
|
||||
```
|
||||
|
||||
### 6. Migrations-Schritte (für Code-Modus)
|
||||
1. Erstelle MarketingLayout.tsx und integriere in Router.
|
||||
2. Migriere eine Test-Seite (z.B. /packages): Controller + Page-Komponente.
|
||||
3. Passe app.css an (Fonts, Gradients).
|
||||
4. Test: npm run dev, Browser-Check auf Layout-Konsistenz.
|
||||
5. Vollständige Migration: Alle Blade-Seiten umstellen.
|
||||
6. Edge-Cases: SEO (Inertia Head), Performance (Lazy-Loading).
|
||||
|
||||
### 7. Risiken & Mitigation
|
||||
- Layout-Brüche während Migration: Fallback zu Blade via Feature-Flag.
|
||||
- Styling-Konflikte: CSS-Isolation mit Tailwind-Prefix.
|
||||
- Performance: Code-Splitting für große Pages.
|
||||
|
||||
Dieser Plan basiert auf bestehender Struktur (docs/prp/ als Referenz). Nach Umsetzung: Update PRP (docs/prp/01-architecture.md).
|
||||
41
docs/prp/packages-ui-improvements.md
Normal file
41
docs/prp/packages-ui-improvements.md
Normal file
@@ -0,0 +1,41 @@
|
||||
# Packages-Seite UI-Verbesserungen: Analyse und Plan
|
||||
|
||||
## Recherche-Zusammenfassung
|
||||
### Features und Abgrenzungen (aus docs/prp/15-packages-design.md, Model/Seeder)
|
||||
- **Endkunden-Pakete (Einmalkauf pro Event)**:
|
||||
- Free/Test (0€): max_photos=30, max_guests=50, gallery_days=7, max_tasks=5, watermark_allowed=true, features=['basic_uploads', 'limited_sharing'].
|
||||
- Starter (29€): max_photos=200, max_guests=100, gallery_days=30, max_tasks=10, watermark_allowed=true, features=['basic_uploads', 'unlimited_sharing', 'no_watermark', 'custom_tasks'].
|
||||
- Pro (79€): max_photos=1000, max_guests=500, gallery_days=90, max_tasks=20, watermark_allowed=false, features=['basic_uploads', 'unlimited_sharing', 'no_watermark', 'custom_tasks', 'advanced_analytics', 'priority_support', 'live_slideshow'].
|
||||
- **Reseller-Pakete (Subscription jährlich)**:
|
||||
- S (199€): max_events_per_year=5, max_photos=500 (per Event), features=['reseller_dashboard', 'custom_branding', 'priority_support'].
|
||||
- M (399€): max_events_per_year=15, max_photos=1000, features=['reseller_dashboard', 'custom_branding', 'priority_support', 'advanced_reporting'].
|
||||
- Enterprise (999€+): Unlimited, White-Label, Custom Domain.
|
||||
- **Limits**: max_photos, max_guests, gallery_days, max_tasks, max_events_per_year (vererbt an Events).
|
||||
- **Abgrenzungen**: Watermark/Branding (bool), Support (priority), Analytics (advanced), Galerie-Dauer, Task-Anzahl. Filament: TenantResource trackt active_package, remaining_events; RelationManagers für Purchases/Packages (manual add).
|
||||
|
||||
### Carousel-Umsetzung
|
||||
- Ja, vollständig: shadcn Carousel für mobile (block md:hidden, Swipe mit Previous/Next Buttons, basis-full Items); Desktop: hidden md:block Grid (md:grid-cols-3/2). Dynamisch aus Props (endcustomerPackages, resellerPackages).
|
||||
|
||||
### Umgesetzte UI-Verbesserungen
|
||||
- Responsive Design: Mobile Carousel vs Desktop Grid.
|
||||
- Dynamische Darstellung: Features map() aus JSON, partial Limits (max_photos, max_tenants).
|
||||
- Hero-Section: Aurora-Gradient (bg-aurora-enhanced), Playfair Display Überschrift, Montserrat Text.
|
||||
- Konsistentes Layout: MarketingLayout (Header mit Nav, Footer mit Legal-Links).
|
||||
- CTA: Links zu /buy-packages/{id}, Hover-Transitions.
|
||||
- Fonts: font-display (Playfair), font-sans-marketing (Montserrat).
|
||||
|
||||
### Offene/Mögliche Verbesserungen
|
||||
1. **Multi-Step-Modal auf Card-Click**: Dialog (shadcn) mit Tabs (Step 1: Details + Social Proof/Testimonials (3 Cards mit Stars); Step 2: Upsell-Tabelle (shadcn Table, Spalten: Features/Limits, Zeilen: alle Packages, Highlight selected mit bg-[#FFB6C1]); Step 3: CTA (usePage().props.auth ? Link /buy-packages : /register?package_id, localStorage pre-fill für Name/Email)).
|
||||
2. **Erweiterte Limits-Darstellung**: Vollständig in Cards (gallery_days, max_guests, max_tasks als <li>, watermark/branding als Badge/Check/X-Icons).
|
||||
3. **UI-Enhancements**: Progress Bar (33/66/100% für Steps), Micro-Interactions (Card-Hover: scale-105/shadow-lg), FAQ-Section (Accordion mit 4 Fragen: Free-Paket, Upgrade, Reseller, Zahlung), Testimonials-Section (3 Cards mit Quotes/Ratings).
|
||||
4. **Desktop Pricing Table**: Toggle-Button neben Grid (View: Table-Modus, Vergleichs-View mit Checkmarks für Features).
|
||||
5. **Weitere**: A/B-Testing (CTAs), Accessibility (ARIA-Labels für Carousel/Modal, Keyboard-Nav), SEO (Head meta description pro Package), Performance (Lazy Testimonials), Integration (Track Clicks mit Analytics).
|
||||
|
||||
## Implementierungs-Plan (Code-Modus)
|
||||
1. **Modal hinzufügen**: useState für open/selected/step; Dialog mit Tabs; Step 1: Details + Testimonials; Step 2: Table (alle Packages); Step 3: CTA (auth-check, pre-fill).
|
||||
2. **Limits erweitern**: In Cards <li> für gallery_days/max_guests/max_tasks; Badges für watermark/branding.
|
||||
3. **UI-Verbesserungen**: Progress in Modal, Hover auf Cards, FAQ-Accordion, Testimonials-Section.
|
||||
4. **Pricing Table**: useState für viewMode (Grid/Table); Table mit Check/X für Features.
|
||||
5. **Test**: npm run build/dev; Browser: Card-Click → Modal-Steps, Tabelle-Vergleich, CTA-Redirect, Responsiveness.
|
||||
|
||||
Nach Umsetzung: Update PRP (docs/prp/15-packages-design.md mit UI-Details).
|
||||
Reference in New Issue
Block a user