Next.js SaaS Dashboard with Onboarding Flow

Follow these instructions closely: 1. Set up next.js and shadcn 2. Add a simple supabase authentication with a signup and login page 3. Set up the frontend according to the following prompt: <frontend prompt> <summary_title> Create detailed components with these requirements: 1. Use 'use client' directive for client-side components 2. Style with Tailwind CSS utility classes for responsive design 3. Use Lucide React for icons (from lucide-react package). Do NOT use other UI libraries unless requested 4. Use stock photos from https://t.co/kmBMYKBzp0 where appropriate, only valid URLs you know exist 5. Configure next.config.js image remotePatterns to enable stock photos from https://t.co/kmBMYKBzp0 6. Create root layout.tsx page that wraps necessary navigation items to all pages 7. MUST implement the navigation elements items in their rightful place i.e. Left sidebar, Top header 8. Accurately implement necessary grid layouts 9. Follow proper import practices: - Use @/ path aliases - Keep component imports organized - Update current src/app/page.tsx with new comprehensive code - Don't forget root route (page.tsx) handling - You MUST complete the entire prompt before stopping Modern SaaS Dashboard with Onboarding Flow </summary_title> <image_analysis> 1. Navigation Elements: - Left sidebar with: Dashboard, Content, Community, Marketing, Analytics, Sales, Storefront - Secondary bottom navigation with: Settings, Help - User profile section at top of sidebar 2. Layout Components: - Sidebar width: 240px - Main content area: flexible width - Card containers: ~500px width - Padding: 24px (consistent throughout) - Responsive container with 32px margins 3. Content Sections: - Welcome header with user greeting - Getting started checklist (4 steps) - Video call booking card - Page builder preview card - Progress indicators for completed tasks 4. Interactive Controls: - Checklist items with completion states - "Schedule time" and "Try it out" primary buttons - "Learn more" text links - Navigation menu items with hover states - Rich text editor controls in page builder 5. Colors: - Primary blue: #0066FF (buttons) - Background gray: #F5F5F7 - Text dark: #1A1A1A - Success green: #34C759 - Accent colors for avatars 6. Grid/Layout Structure: - Single column layout for main content - 24px gap between cards - Flexible width containers - Card grid system with rounded corners (12px) </image_analysis> <development_planning> 1. Project Structure: ``` src/ ├── components/ │ ├── layout/ │ │ ├── Sidebar │ │ ├── Header │ │ └── MainContent │ ├── features/ │ │ ├── Onboarding │ │ ├── VideoCall │ │ └── PageBuilder │ └── shared/ ├── assets/ ├── styles/ ├── hooks/ └── utils/ ``` 2. Key Features: - Onboarding checklist system - Video call scheduling - Page builder interface - Progress tracking - User dashboard 3. State Management: ```typescript interface AppState { ├── onboarding: { │ ├── steps: Step[] │ ├── completedSteps: string[] │ └── currentStep: number ├── user: { │ ├── profile: UserProfile │ ├── preferences: UserPreferences │ └── settings: UserSettings } ``` 4. Routes: ```typescript const routes = [ ├── '/dashboard', ├── '/content/*', ├── '/community/*', ├── '/marketing/*', ├── '/analytics/*', ├── '/sales/*', └── '/storefront/*' ] ``` 5. Component Architecture: - DashboardLayout (parent) - OnboardingCard (feature) - VideoCallCard (feature) - PageBuilderPreview (feature) - NavigationMenu (shared) - ActionButton (shared) 6. Responsive Breakpoints: ```scss $breakpoints: ( ├── 'mobile': 320px, ├── 'tablet': 768px, ├── 'desktop': 1024px, └── 'wide': 1440px ); ``` </development_planning> </frontend prompt> 4. Set up the page structure according to the following prompt <page structure prompt> Next.js route structure based on navigation menu items (excluding main route). Make sure to wrap all routes with the component: Routes: - /dashboard - /content - /community - /marketing - /analytics - /sales - /storefront - /settings - /help Page Implementations: /dashboard: Core Purpose: Provide overview of key metrics and quick access to main functions Key Components - Stats cards grid - Recent activity feed - Quick action buttons - Performance graphs - Task notifications Layout Structure - Grid-based layout with 12-column system - Responsive cards that stack on mobile - Sticky header with key metrics /content: Core Purpose: Manage and organize all content assets Key Components - Content list /grid view toggle - Search and filter system - Content editor - Media library - Version history Layout Structure: - Split view with sidebar navigation - Main content area with infinite scroll - Modal overlays for editing /community: Core Purpose: Manage user interactions and community features Key Components - Member directory - Discussion boards - Moderation tools - User reports - Activity logs Layout Structure - Three-column layout - Collapsible sidebar - Scrollable main content area /marketing: Core Purpose: Campaign management and marketing tools Key Components - Campaign creator - Email template builder - Analytics dashboard - Audience segments - A/B testing tools Layout Structure - Tabbed interface - Split view for editing - Preview pane /analytics: Core Purpose: Data visualization and reporting Key Components - Interactive charts - Custom report builder - Data export tools - Metric comparisons - Date range selector Layout Structure - Full-width graphs - Sticky filters header - Responsive data tables /sales: Core Purpose: Sales pipeline and order management Key Components - Order dashboard - Customer profiles - Invoice generator - Payment processing - Sales reports Layout Structure - Kanban board view - List view option - Detail panel /storefront: Core Purpose: E-commerce store management Key Components - Product manager - Inventory control - Store customizer - Order fulfillment - Shipping setup Layout Structure - Grid-based product layout - Quick edit sidebar - Preview mode /settings: Core Purpose: System configuration and user preferences Key Components - Account settings - System preferences - Integration setup - User management - Security settings Layout Structure - Categorized settings panels - Form-based layouts - Confirmation modals /help: Core Purpose: Support documentation and assistance Key Components - Search documentation - FAQ section - Contact support - Tutorial videos - Knowledge base Layout Structure - Searchable sidebar - Article view - Quick links panel Layouts: AdminLayout: - Applicable routes: All except /help - Core components - Top navigation bar - Sidebar navigation - User profile menu - Notifications - Breadcrumbs - Responsive behavior - Collapsible sidebar on mobile - Dropdown menu for navigation on small screens - Adjustable content width HelpLayout - Applicable routes: /help - Core components - Documentation sidebar - Search bar - Support chat widget - Back to admin button - Responsive behavior - Full-width on mobile - Floating action button for support - Collapsible sections </page structure prompt>