Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to present the core message and value proposition of the brand "U". The main purpose is to engage visitors through a clean, simple interface and encourage them to take action, such as signing up or learning more about the offerings.

## CORE FEATURES
1. **Hero Section**: A prominent introduction with a compelling headline, subheadline, and a call-to-action button to direct users to more information or sign up.
2. **Features Showcase**: Highlight key features or benefits of the service or product offered, presented in an easy-to-read format with icons or images.
3. **Testimonials**: A section dedicated to user testimonials to build trust and credibility among potential customers.
4. **Call to Action (CTA)**: A strategically placed CTA encouraging users to take action, such as signing up for a newsletter or creating an account.
5. **Contact Section**: A simple contact form that allows users to get in touch for more information or support, ensuring accessibility.

## 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 will follow a single-page structure with sections stacked vertically. The hero section will be at the top, followed by features, testimonials, CTA, and contact sections, all with ample spacing and alignment for easy readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page, but can be integrated if needed for future enhancements.

## IMPLEMENTATION STEPS
1. **Set up the project**:
   - Initialize a new React project with TypeScript.
   - Install Tailwind CSS and configure it with PostCSS.
   - Add shadcn/ui for UI components.

2. **Create the structure**:
   - Build the main App component that includes all sections: Hero, Features, Testimonials, CTA, and Contact.
   - Use functional components for each section for modularity.

3. **Design the Hero Section**:
   - Implement a full-width background with a headline and subheadline.
   - Add a prominent CTA button styled with Tailwind CSS and the primary color.

4. **Develop the Features Section**:
   - Create cards for each feature with icons and descriptions.
   - Ensure a responsive layout for mobile and tablet views.

5. **Integrate Testimonials**:
   - Design a simple carousel or list for testimonials.
   - Style text and spacing to maintain a clean look.

6. **Add the CTA Section**:
   - Include another strong CTA with a button leading to sign-up or more information.

7. **Build the Contact Section**:
   - Implement a contact form with fields for name, email, and message.
   - Ensure validation and basic styling for inputs.

8. **Test responsiveness**:
   - Check the layout and functionality across various devices and screen sizes.
   - Make adjustments to maintain usability and aesthetics.

## USER EXPERIENCE
Users will navigate through a seamless experience with a clear path from introduction to action. The minimalist design ensures that users are not distracted, allowing them to focus on the content. The responsive features will provide a consistent experience across devices, encouraging interaction and engagement with the landing page. The straightforward navigation will lead users to the desired actions, enhancing conversion rates.