Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to present information in a clean and stylish manner. The primary purpose is to enhance the website's aesthetic appeal while ensuring a user-friendly experience, focusing on typography and effective use of space.

## CORE FEATURES
1. **Hero Section**: A striking introduction with a clear value proposition, featuring a call-to-action button that draws attention.
2. **Features Section**: A brief overview of key offerings or services, presented in a visually appealing layout with icons or images.
3. **Testimonials**: A section showcasing user feedback or case studies to build trust and credibility.
4. **Call to Action (CTA)**: A prominent section encouraging visitors to take action, such as signing up or contacting for more information.
5. **Contact Form**: A simple form allowing users to easily get in touch, with fields for name, email, and message.

## 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 consists of a full-width hero section at the top, followed by horizontally aligned feature cards, a testimonials carousel, a CTA section, and a contact form at the bottom, ensuring an intuitive flow for users.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page; simple props will suffice.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Layout Components**: Build header, footer, and main sections as functional components.
3. **Implement Hero Section**: Design the hero with a background image or color, add a catchy headline and CTA button styled with the primary color.
4. **Develop Features Section**: Create feature cards using Tailwind CSS for styling and ensure responsiveness.
5. **Add Testimonials**: Use a carousel or grid layout to display testimonials, ensuring they are visually distinct but cohesive with the overall design.
6. **Set Up CTA Section**: Highlight the CTA with contrasting colors and an engaging message.
7. **Build Contact Form**: Implement a form with necessary fields and style it according to the design specifications.
8. **Ensure Responsiveness**: Use Tailwind’s responsive utilities to make sure the layout adjusts well on different screen sizes.
9. **Testing**: Conduct thorough testing to ensure all components function as expected and the design remains intact across devices.

## USER EXPERIENCE
Users will be greeted with a visually appealing hero section, encouraging them to explore the features. As they scroll down, engaging elements such as testimonials will provide social proof, enhancing trust. The CTA will guide them toward taking action, whether that’s contacting or signing up, and the contact form will make it easy for them to reach out with any inquiries. The overall experience will be smooth and intuitive, with a focus on clarity and ease of navigation.