Next.js SaaS Dashboard mit Onboarding-Ablauf

Verstanden. Ich werde die Anweisungen befolgen und die Übersetzung nur auf Deutsch liefern, ohne Präambel oder Formatierung. 1. Richten Sie Next.js und shadcn ein 2. Fügen Sie eine einfache Supabase-Authentifizierung mit einer Anmelde- und Registrierungsseite hinzu 3. Richten Sie das Frontend gemäß dem folgenden Prompt ein: <frontend prompt> <summary_title> Erstellen Sie detaillierte Komponenten mit diesen Anforderungen: 1. Verwenden Sie die Direktive 'use client' für clientseitige Komponenten 2. Gestalten Sie mit Tailwind CSS Utility-Klassen für responsives Design 3. Verwenden Sie Lucide React für Icons (aus dem Paket lucide-react). Verwenden Sie KEINE anderen UI-Bibliotheken, sofern nicht angefordert 4. Verwenden Sie Stockfotos von https://t.co/kmBMYKBzp0, wo angemessen, nur gültige URLs, von denen Sie wissen, dass sie existieren 5. Konfigurieren Sie next.config.js image remotePatterns, um Stockfotos von https://t.co/kmBMYKBzp0 zu ermöglichen 6. Erstellen Sie eine root layout.tsx-Seite, die notwendige Navigationselemente für alle Seiten umschließt 7. MÜSSEN die Navigationselemente an ihrem richtigen Platz implementieren, d.h. linke Seitenleiste, oberer Header 8. Implementieren Sie die notwendigen Grid-Layouts genau 9. Befolgen Sie die richtigen Importpraktiken: - Verwenden Sie @/ Pfad-Aliase - Halten Sie Komponentenimporte organisiert - Aktualisieren Sie die aktuelle src/app/page.tsx mit neuem umfassendem Code - Vergessen Sie nicht die Root-Route (page.tsx) Behandlung - Sie MÜSSEN den gesamten Prompt abschließen, bevor Sie aufhören Modernes SaaS-Dashboard mit Onboarding-Flow </summary_title> <image_analysis> 1. Navigationselemente: - Linke Seitenleiste mit: Dashboard, Inhalt, Community, Marketing, Analytik, Vertrieb, Storefront - Sekundäre untere Navigation mit: Einstellungen, Hilfe - Benutzerprofilbereich oben in der Seitenleiste 2. Layout-Komponenten: - Seitenleistenbreite: 240px - Hauptinhaltsbereich: flexible Breite - Kartencontainer: ~500px Breite - Abstand: 24px (durchgehend konsistent) - Responsiver Container mit 32px Rändern 3. Inhaltsabschnitte: - Willkommens-Header mit Benutzerbegrüßung - Checkliste für den Einstieg (4 Schritte) - Karte zur Buchung von Videoanrufen - Kartenvorschau des Seitenbuilders - Fortschrittsanzeigen für abgeschlossene Aufgaben 4. Interaktive Steuerelemente: - Checklistenelemente mit Abschlussstatus - Primärschaltflächen "Zeit planen" und "Ausprobieren" - Textlinks "Mehr erfahren" - Navigationsmenüpunkte mit Hover-Zuständen - Rich-Text-Editor-Steuerelemente im Seitenbuilder 5. Farben: - Primärblau: #0066FF (Schaltflächen) - Hintergrundgrau: #F5F5F7 - Dunkler Text: #1A1A1A - Erfolgsgrün: #34C759 - Akzentfarben für Avatare 6. Grid-/Layout-Struktur: - Einspaltiges Layout für den Hauptinhalt - 24px Abstand zwischen Karten - Container mit flexibler Breite - Kartengrid-System mit abgerundeten Ecken (12px) </image_analysis> <development_planning> 1. Projektstruktur: ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. Hauptfunktionen: - Onboarding-Checklisten-System - Videoanruf-Terminplanung - Seitenbuilder-Oberfläche - Fortschrittsverfolgung - Benutzer-Dashboard 3. Zustandsverwaltung: ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. Routen: ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. Komponentenarchitektur: - DashboardLayout (Elternkomponente) - OnboardingCard (Funktion) - VideoCallCard (Funktion) - PageBuilderPreview (Funktion) - NavigationMenu (geteilt) - ActionButton (geteilt) 6. Responsive Breakpoints: ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </development_planning> </frontend prompt> 4. Richten Sie die Seitenstruktur gemäß dem folgenden Prompt ein <page structure prompt> Next.js-Routenstruktur basierend auf den Navigationsmenüpunkten (ohne Hauptroute). Stellen Sie sicher, dass alle Routen mit der Komponente umschlossen werden: Routen: - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help Seitenimplementierungen: /dashboard: Kernzweck: Übersicht über Schlüsselkennzahlen und schnellen Zugriff auf Hauptfunktionen bieten Schlüsselkomponenten - Statistik-Kartenraster - Aktueller Aktivitätsfeed - Schnellaktionsschaltflächen - Leistungsdiagramme - Aufgabenbenachrichtigungen Layout-Struktur - Grid-basiertes Layout mit 12-Spalten-System - Responsive Karten, die auf Mobilgeräten gestapelt werden - Sticky-Header mit Schlüsselkennzahlen /content: Kernzweck: Alle Inhaltsressourcen verwalten und organisieren Schlüsselkomponenten - Inhaltsliste /Grid-Ansicht-Umschalter - Such- und Filtersystem - Inhaltseditor - Medienbibliothek - Versionsverlauf Layout-Struktur: - Geteilte Ansicht mit Seitenleisten-Navigation - Hauptinhaltsbereich mit unendlichem Scrollen - Modale Overlays für die Bearbeitung /community: Kernzweck: Benutzerinteraktionen und Community-Funktionen verwalten Schlüsselkomponenten - Mitgliederverzeichnis - Diskussionsforen - Moderationswerkzeuge - Benutzermeldungen - Aktivitätsprotokolle Layout-Struktur - Drei-Spalten-Layout - Einklappbare Seitenleiste - Scrollbarer Hauptinhaltsbereich /marketing: Kernzweck: Kampagnenverwaltung und Marketing-Tools Schlüsselkomponenten - Kampagnenersteller - E-Mail-Vorlagen-Builder - Analytik-Dashboard - Zielgruppensegmente - A/B-Test-Tools Layout-Struktur - Tabbed-Oberfläche - Geteilte Ansicht für die Bearbeitung - Vorschaufenster /analytics: Kernzweck: Datenvisualisierung und Berichterstattung Schlüsselkomponenten - Interaktive Diagramme - Benutzerdefinierter Berichts-Builder - Datenexport-Tools - Metrikvergleiche - Datumsbereichsauswahl Layout-Struktur - Vollbreite Diagramme - Sticky-Filter-Header - Responsive Datentabellen /sales: Kernzweck: Vertriebspipeline und Auftragsverwaltung Schlüsselkomponenten - Auftrags-Dashboard - Kundenprofile - Rechnungsgenerator - Zahlungsabwicklung - Vertriebsberichte Layout-Struktur - Kanban-Board-Ansicht - Listenansichtsoption - Detailpanel /storefront: Kernzweck: E-Commerce-Shop-Verwaltung Schlüsselkomponenten - Produktmanager - Bestandskontrolle - Shop-Anpasser - Auftragsabwicklung - Versandeinrichtung Layout-Struktur - Grid-basiertes Produktlayout - Schnellbearbeitungs-Seitenleiste - Vorschaumodus /settings: Kernzweck: Systemkonfiguration und Benutzereinstellungen Schlüsselkomponenten - Kontoeinstellungen - Systemeinstellungen - Integrationssetup - Benutzerverwaltung - Sicherheitseinstellungen Layout-Struktur - Kategorisierte Einstellungsfelder - Formularbasierte Layouts - Bestätigungsmodale /help: Kernzweck: Support-Dokumentation und Unterstützung Schlüsselkomponenten - Dokumentation durchsuchen - FAQ-Bereich - Support kontaktieren - Tutorial-Videos - Wissensdatenbank Layout-Struktur - Durchsuchbare Seitenleiste - Artikelansicht - Schnelllinks-Panel Layouts: AdminLayout: - Anwendbare Routen: Alle außer /help - Kernkomponenten - Obere Navigationsleiste - Seitenleisten-Navigation - Benutzerprofilmenü - Benachrichtigungen - Breadcrumbs - Responsives Verhalten - Einklappbare Seitenleiste auf Mobilgeräten - Dropdown-Menü für Navigation auf kleinen Bildschirmen - Anpassbare Inhaltsbreite HelpLayout - Anwendbare Routen: /help - Kernkomponenten - Dokumentations-Seitenleiste - Suchleiste - Support-Chat-Widget - Zurück-zum-Admin-Button - Responsives Verhalten - Vollbreite auf Mobilgeräten - Schwebende Aktionsschaltfläche für Support - Einklappbare Abschnitte </page structure prompt>