Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for a modern design agency that focuses on web design and marketing services. The site aims to project a premium feel with sleek design elements and animations, effectively showcasing the agency's capabilities and previous successes while encouraging potential leads through strategic CTAs.

## CORE FEATURES
1. **Hero Section**: A visually engaging hero area with a large, impactful quote that fills with color on scroll, instantly capturing visitor attention.
2. **Process Cards**: A step-by-step display of the agency's workflow (Step 1, Step 2, Step 3, Step 4) using visually appealing cards to guide users through the process.
3. **About Us**: An informative section detailing the agency’s mission, vision, and team to build trust and connection with potential clients.
4. **Client Showcase**: A presentation of companies the agency has worked with, enhancing credibility and demonstrating experience.
5. **Case Studies**: Highlighting successful projects with metrics showing percentage growth to illustrate the effectiveness of the agency's services.
6. **Contact Form & CTA Banner**: A prominent contact form and a lead-generating contact banner to encourage user inquiries.

## DESIGN SPECIFICATIONS
- **Visual Style**: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- **Color Mode**: Light theme with dark text on light backgrounds
- **Primary Color**: #1978E5 (accent for buttons, links, highlights)
- **Typography**: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs
- **Layout**: The layout should be structured in a single-page format with smooth scrolling sections, including a hero section, process cards, about us, client showcase, case studies, FAQ, and contact form at the end.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required, but consider using context or a lightweight state management solution if necessary.

## IMPLEMENTATION STEPS
1. **Set up the React Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project.
3. **Create Layout Structure**: Develop the main layout using functional components for each section (Hero, Process Cards, About Us, etc.).
4. **Implement Hero Section**: Design the hero section with the quote and animation on scroll.
5. **Design Process Cards**: Create a card component for displaying the workflow steps and integrate them into the layout.
6. **Develop About Us and Client Showcase Sections**: Input the relevant content and style it according to the design specifications.
7. **Implement Case Studies**: Design a section to display case studies with growth metrics in a visually engaging manner.
8. **Create FAQ Section**: Add a simple FAQ section to address common questions.
9. **Build Contact Form**: Implement a contact form with necessary fields and validation.
10. **Testing and Optimization**: Ensure responsive design across devices and test all interactive elements for functionality.

## USER EXPERIENCE
The user experience should be smooth and intuitive, with clear navigation and sections that flow seamlessly into one another. Users will be able to easily scroll down the page, interact with the process cards for more information, and use the contact form to reach out without friction. The overall minimalist design will enhance readability and focus on the agency's offerings, resulting in a premium feel that aligns with the brand identity.