## **1. Project Overview** I want to build a **[type of project: landing page / SaaS dashboard / e-commerce store / portfolio site / blog / internal tool / AI-powered app]**. The purpose of this project is: **[state the primary goal — e.g., showcase product, allow signups, provide content, handle transactions, display analytics].** Target audience: **[e.g., startups, freelancers, enterprises, general consumers].** ## **2. Tech Stack Requirements** Please use the following technologies for consistency, scalability, and modern best practices: - **Frontend:** [React / Next.js 14 / Vue / Svelte / plain HTML] - **Language:** [JavaScript / TypeScript] - **Styling:** [TailwindCSS / Material UI / Chakra UI / Bootstrap / custom SCSS] - **Backend:** [Supabase / Firebase / Node.js + Express / custom API routes in Next.js] - **Database:** [PostgreSQL / MongoDB / SQLite / Supabase DB] - **Authentication:** [Supabase Auth / Auth0 / NextAuth.js / custom JWT-based auth] - **Payments:** [Stripe / Paddle / PayPal / none if not needed] - **Deployment:** Optimized for [Vercel / Netlify / AWS Amplify / Docker container]. If a chosen stack isn’t supported, pick the closest alternative but keep the architecture modular. ## **3. Core Features (Must-Haves)** The app must include the following features, implemented with production-level quality: 1. **Navigation & Layout** - Responsive navbar with logo, links, and CTA button - Sticky on scroll (desktop), collapsible hamburger menu (mobile) - Footer with links, social icons, and contact info 2. **Authentication (if applicable)** - Sign up, login, logout - Password reset flow - OAuth login (Google, GitHub, optional) - Protect private routes 3. **Content Sections** - **Hero section** with strong headline, subtext, and call-to-action - **Feature highlights** with icons and text blocks - **Testimonials / user reviews** with avatar + quote carousel - **Pricing table** with multiple tiers - **Dashboard preview / product screenshots** with animations or sliders 4. **Dashboard / App Area (if SaaS or tool)** - User-specific content fetched from database - Example dashboard with **charts/graphs** (use Chart.js, Recharts, or D3.js) - Search + filter functionality - Dark/light mode toggle 5. **Forms & Interactivity** - Contact form with validation + backend handling - Newsletter subscription (integrate with Mailchimp/Sendgrid or dummy API) - Drag-and-drop or infinite scroll (if relevant) ## **4. Advanced / Nice-to-Have Features** - Animations with Framer Motion or CSS transitions - Dark/light theme with persistent setting in local storage - SEO-friendly: meta tags, OpenGraph, sitemap - Image optimization (Next.js Image, lazy loading) - Accessibility (ARIA labels, keyboard navigation) - Internationalization (i18n) support - Reusable components (buttons, modals, cards) ## **5. Design Guidelines** The design should follow these principles: - **Style inspiration:** [Apple / Linear.app / Notion / Netflix / Airbnb] - **Color palette:** [Hex codes or general tones: e.g., white + blue accents, dark modern theme, pastel friendly tones] - **Typography:** Clean sans-serif fonts (e.g., Inter, Poppins, Roboto) - **Layout:** Minimalist, lots of whitespace, modern grid-based alignment - **UI kit feel:** Smooth buttons, subtle shadows, responsive grid If images are needed, use placeholder images or free sources (Unsplash, Pexels). ## **6. Code Quality Instructions** - Write clean, modular, and **well-commented code**. - Use best practices for **file structure** (components, hooks, utils, services). - Include **error handling** for API calls. - Make components reusable where possible. - Optimize for performance (lazy loading, code splitting). - Ensure the project runs out-of-the-box after `npm install && npm run dev`. ## **7. Content Handling** - Use placeholder/sample text if real content is not provided. - Use Lorem Ipsum only as a fallback — otherwise create **realistic placeholder copy**. - Clearly mark where content should be replaced. ## **8. Delivery & Output Requirements** - The final code should be **ready-to-deploy** on [Vercel / Netlify / Docker]. - Generate all necessary files: `package.json`, config files, `.env` placeholders. - Document setup steps in a short README (how to run locally, build, and deploy). - Output should be **copy-paste runnable** without major fixes.