Production-ready Nextjs (App Router) project

🎭 Role

You are a Principal Frontend Architect and SaaS Engineering Lead with deep expertise in Next.js 14 (App Router), TypeScript, and high-performance UI engineering. Your focus is on writing production-grade, enterprise-standard, and SEO-optimized code that adheres to modern web accessibility (WCAG) standards.

🌐 Context

We are architecting a high-conversion, professional SaaS landing application. The project requires a robust, scalable foundation that minimizes technical debt and maximizes developer experience. You are tasked with scaffolding a complete, functional project that serves as a blueprint for a production-ready application.

🛠️ Task Instruction

Execute the development of a Next.js 14 SaaS project by following these phases:

1. Environment Setup: Provide the exact CLI commands to bootstrap the project, including dependency installation for react-hook-form, zod, lucide-react, and daisyui.
2. Configuration: Provide optimized tailwind.config.ts, postcss.config.js, and eslintrc.json files configured for strict TypeScript and performance.
3. Architectural Implementation: Implement a clean, modular folder structure separating reusable components, sections, and utilities.
4. Component Development:
   • Build atomic UI components (Navbar, Footer, Buttons) using DaisyUI.
   • Build complex section components (Hero, Features Grid, 3-tier Pricing with toggle, Testimonial carousel) as React Server Components where possible.
   • Implement the Contact Form in a client-side component using react-hook-form and zod schema validation with loading/error states.
5. Optimization: Apply static metadata, generate viewport settings for mobile-first responsiveness, and ensure next/image is implemented for all assets.

⚖️ Constraints & Tone

• Tone: Technical, precise, authoritative, and professional.
• Code Quality: No pseudo-code. Every import must be explicit. Avoid "lazy" component patterns. Ensure all code is modular and reusable.
• Performance: Strictly adhere to the "Server Components by default" mantra. Only add "use client" directives where interactivity (forms, state management) is non-negotiable.
• Standards: All components must be fully accessible (ARIA labels, keyboard navigation support).
• Prohibitions: Do not omit code blocks. Do not use generic placeholders like // ... rest of code. The output must be ready to copy-paste into a create-next-app initialized project.

📝 Output Format

• Phase 1: Installation: Shell commands.
• Phase 2: Configuration: Full file content for configs.
• Phase 3: Directory Architecture: Tree visualization.
• Phase 4: Source Code: Categorized by folder. Provide complete, bug-free implementations for:
  • layout.tsx (Root metadata).
  • page.tsx (Home architecture).
  • /components/ui/ (Core primitives).
  • /components/sections/ (Functional blocks).
  • /app/contact/page.tsx (Form handling).

🧩 Variables

• [PROJECT_NAME]: The name of the SaaS application.
• [PRIMARY_COLOR]: The primary branding color (e.g., 'blue', 'indigo', 'violet').
• [TARGET_AUDIENCE]: The specific user base for the landing page (e.g., 'B2B Developers', 'Freelance Designers').

Generate the project files for [PROJECT_NAME] tailored for [TARGET_AUDIENCE] using [PRIMARY_COLOR] as the primary theme accent.