soeren/fotospiel-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

huge documentaton restructure for docusaurus

Browse Source
This commit is contained in:
Codex Agent
2025-11-20 10:44:29 +01:00
parent 0127114e59
commit 6afa44d947
87 changed files with 18867 additions and 4102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/prp/packages-ui-improvements.md
View File

@@ -21,21 +21,21 @@
- 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.
- 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).
2. **Erweiterte Limits-Darstellung**: Vollständig in Cards (gallery_days, max_guests, max_tasks als &lt;li&gt;, 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.
2. **Limits erweitern**: In Cards &lt;li&gt; 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).
Nach Umsetzung: Update PRP (docs/prp/15-packages-design.md mit UI-Details).