Create a complete Next.js 14+ SaaS framework foundation with the following specifications: ## Project Initialization Initialize a new Next.js project with: - npx create-next-app@latest saas-framework --typescript --tailwind --eslint --app --src-dir --import-alias - Use App Router (not Pages Router) - TypeScript for all files - Tailwind CSS with custom configuration ## shadcn/ui Integration 1. Initialize shadcn/ui with proper configuration 2. Install these essential components: button, card, input, label, form, dropdown-menu, navigation-menu, sheet, dialog, avatar 3. Configure the components.json file for consistent theming 4. Set up proper import aliases for components ## Project Structure Create this exact folder structure: src/ ├── app/ │ ├── globals.css │ ├── layout.tsx │ ├── page.tsx │ └── (auth)/ # Route groups for future auth pages ├── components/ │ ├── ui/ # shadcn components (auto-generated) │ ├── layout/ │ │ ├── header.tsx │ │ ├── footer.tsx │ │ └── navigation.tsx │ ├── features/ │ │ └── landing/ │ │ ├── hero-section.tsx │ │ ├── features-section.tsx │ │ └── pricing-preview.tsx │ └── common/ │ ├── loading-spinner.tsx │ └── theme-toggle.tsx ├── lib/ │ ├── utils.ts # cn() utility and helpers │ ├── constants.ts # App constants │ └── types.ts # Shared TypeScript types ├── styles/ │ └── globals.css # Additional custom styles └── types/ ├── auth.ts # Auth-related types (for future) └── subscription.ts # Subscription types (for future) ## Configuration Files 1. **tailwind.config.ts**: Extend with custom colors for SaaS branding (primary, secondary, accent colors) 2. **prettier.config.js**: Include tailwindcss plugin for class sorting 3. **next.config.js**: Optimize for production with proper headers and redirects setup 4. **.env.local.example**: Template for environment variables (include placeholders for SUPABASE_URL, etc.) ## Core Components to Build 1. **Layout Components:** - Header with logo, navigation, and auth button placeholders - Footer with company links and social media