Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a modern, minimalist portfolio website for showcasing next-generation SaaS products. It will serve as a marketing landing page that highlights key features, provides engaging visuals, and encourages user interaction through clear calls to action.

## CORE FEATURES
1. **Hero Section**: A striking introduction featuring a headline, subheadline, and a prominent call-to-action button that invites visitors to learn more or get started.
2. **Features Showcase**: A section dedicated to displaying the unique features of the SaaS offerings, with brief descriptions and relevant icons or illustrations.
3. **Testimonials**: A section that includes quotes from satisfied users or clients, enhancing credibility and building trust.
4. **Contact Form**: A simple, user-friendly contact form allowing potential clients to reach out for more information or inquiries.
5. **Responsive Design**: Ensures the website is fully functional and visually appealing on all devices, including desktops, tablets, and mobile phones.

## 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 main layout will consist of a vertical flow, starting with a hero section at the top, followed by features, testimonials, and a contact form at the bottom, ensuring a logical progression of information for visitors.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, but consider using Context API or Zustand for managing state if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React app using Create React App with TypeScript and install Tailwind CSS.
2. **Design Hero Section**: Create a responsive hero component featuring a headline, subheadline, and button styled with the primary color (#1978E5).
3. **Build Features Section**: Develop a grid layout to display key features with icons and descriptions, ensuring text is legible and visually appealing.
4. **Add Testimonials**: Implement a carousel or grid layout for testimonials, ensuring they are easy to read and visually cohesive.
5. **Create Contact Form**: Build a simple contact form with input fields and a submit button, styled for consistency with the rest of the site.
6. **Implement Responsive Design**: Use Tailwind CSS utilities to ensure that the layout adjusts gracefully across different screen sizes.
7. **Test Functionality**: Review all sections for responsiveness and usability, making necessary adjustments based on testing.

## USER EXPERIENCE
The user experience will prioritize clarity and ease of navigation. Visitors will be greeted with a visually appealing hero section, allowing them to quickly understand the value proposition. As they scroll down, they will encounter engaging features and testimonials that provide social proof, culminating in an easy-to-use contact form that encourages inquiries. The responsive design ensures that users on any device will have a seamless experience.