Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a web app designed as a landing page for freelance web designers using WordPress. Its primary purpose is to attract potential clients by showcasing the designer's services, portfolio, and contact information, all while maintaining a clean and minimalist aesthetic to ensure a seamless user experience.

## CORE FEATURES
1. **Hero Section**: A prominent introductory area featuring a captivating headline and a brief description of services offered, accompanied by a call-to-action button for inquiries.
2. **Portfolio Gallery**: A visually appealing grid layout displaying selected projects, with hover effects that reveal project details including descriptions and links to live sites.
3. **Service Offerings**: A concise overview of the services provided, each with an icon and brief description, designed for easy readability and quick understanding.
4. **Client Testimonials**: A section dedicated to showcasing positive feedback from previous clients, enhancing credibility and trust.
5. **Contact Form**: A minimalist form allowing potential clients to easily get in touch, featuring fields for name, email, message, and a submit button.
6. **Call-to-Action Footer**: A closing section encouraging users to reach out, with links to social media profiles and an email address for direct contact.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The design should be clean and simple, utilizing ample white space to create a spacious feel. The focus should be on typography to enhance readability and user engagement.
- **Color Mode**: Light theme with dark text on light backgrounds to ensure high visibility and a pleasant reading experience.
- **Layout**: The layout should follow a single-column structure for mobile responsiveness, with sections stacked vertically. Main sections should be separated by subtle horizontal lines or ample spacing.
- **Typography**: Use a sans-serif font like "Montserrat" for headings to convey modernity, and "Open Sans" for body text to ensure legibility. Headings should be bold and larger, while body text should be regular weight and smaller, maintaining a clear hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript to ensure type safety and maintainability.
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid prototyping and consistent design.
- **UI Components**: Utilize shadcn/ui for pre-designed components that align with the minimalist aesthetic.
- **State Management**: Use React's built-in state management for form handling and interactivity.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React application with TypeScript and install Tailwind CSS along with shadcn/ui.
2. **Create Components**: Build reusable components for the Hero Section, Portfolio Gallery, Service Offerings, Client Testimonials, Contact Form, and Call-to-Action Footer.
3. **Style Components**: Apply Tailwind CSS classes to each component to achieve the minimalist design, ensuring consistent use of colors and typography.
4. **Implement Routing**: Set up React Router if multiple pages are planned, ensuring the landing page is the main focus.
5. **Add Form Functionality**: Implement form handling logic for the Contact Form, ensuring data validation and submission capabilities.
6. **Test Responsiveness**: Use responsive design practices to ensure the application looks great on both desktop and mobile devices.

## USER EXPERIENCE
The user experience will focus on intuitive navigation and easy access to information. Users will first encounter the Hero Section, inviting them to explore further. Portfolio pieces will be easily viewable, with each testimonial reinforcing trust. The contact form will be prominent, encouraging inquiries. Overall, the design will prioritize a smooth flow, allowing potential clients to quickly understand services and reach out without distraction.