Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web marketing site for a SaaS marketing agency specializing in web design. It aims to showcase the agency's services and portfolio with a high degree of polish and refined motion, serving as a benchmark for potential clients.

## CORE FEATURES
1. **Home Page**: A visually engaging introduction to the agency, featuring key value propositions and a call-to-action.
2. **Start Here**: A clear onboarding section that guides users through the agency's offerings and how to get started.
3. **How It Works**: An informative page that outlines the agency's process, using visuals to enhance understanding.
4. **Portfolio**: A grid layout showcasing completed projects with interactive before-and-after modals to demonstrate design effectiveness.
5. **Contact**: A functional contact form integrated with the agency’s CRM, allowing users to easily reach out for inquiries.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design that emphasizes clean lines and simplicity, utilizing plenty of white space to enhance readability and focus.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure maximum legibility and a modern feel.
- **Layout**: A responsive, grid-based layout that adapts seamlessly across devices, prioritizing content hierarchy and user navigation.
- **Typography**: Use a sans-serif font for body text (e.g., Inter or Helvetica Neue) and a bold serif font for headings to create a visual contrast that guides the user’s attention.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for a robust and scalable application.
- **Styling**: Tailwind CSS to facilitate quick styling and responsiveness while maintaining a clean design.
- **UI Components**: Utilize shadcn/ui for standardized, accessible components.
- **State Management**: Use React's Context API for managing global state, if needed.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Page Structure**: Develop the core pages based on provided XD/AI designs—Home, Start Here, How It Works, Portfolio, and Contact.
3. **Component Development**: Build reusable components with a focus on a clean component system using tokens and variables for consistency.
4. **Implement Animations**: Add purposeful animations such as subtle scroll reveals and micro-interactions on CTAs and cards, ensuring performance remains at 60fps.
5. **Responsive Design**: Ensure all pages are fully responsive, paying close attention to small breakpoints and adjusting layouts accordingly.
6. **Accessibility & SEO**: Integrate semantic HTML practices, ensuring all images have alt text, and optimize for search engines using proper meta tags and headings.
7. **CRM Integration**: Connect the contact form to the specified CRM endpoint to capture user inquiries.
8. **Documentation**: Document animation controls and key components in a short Loom video and notes for future reference.
9. **Quality Assurance**: Conduct thorough testing across modern browsers and devices to ensure a seamless experience.
10. **Post-Launch Support**: Provide a round of bug fixes after the site goes live to address any immediate issues.

## USER EXPERIENCE
The user experience is designed to be intuitive and engaging. Key interactions include smooth transitions between pages, responsive design that adapts to various screen sizes, and interactive elements such as modals in the portfolio section to enhance user engagement. The site will facilitate easy navigation with clear calls-to-action guiding users through the discovery of services and contact options, ensuring a seamless journey from interest to inquiry.