Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to create a minimalist landing page that replicates the core elements and functionalities of Cloudflare's website. The focus will be on presenting information clearly and concisely while promoting user engagement through an attractive design and effective call-to-action features.

## CORE FEATURES
1. **Hero Section**: A prominent hero area featuring a catchy tagline and a clear call-to-action button to engage visitors immediately.
2. **Features Overview**: A section highlighting the main features of the services offered, with brief descriptions and icons for visual appeal.
3. **Testimonials**: A dedicated area for customer testimonials to build trust and credibility with potential clients.
4. **Call to Action (CTA)**: A strategically placed CTA section encouraging users to sign up or learn more about the services.
5. **Contact Information**: A simple contact form allowing users to reach out for more information or support.
6. **Responsive Design**: Ensuring the landing page looks great on all devices, with a mobile-friendly layout.

## 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 consist of a full-width hero section at the top, followed by sections for features, testimonials, a CTA, and a contact form, each structured with clear headings and adequate spacing to enhance readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for a static landing page, but consider using React Context if user interactions increase.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and component management.
3. **Create Components**: Build React components for each section (Hero, Features, Testimonials, CTA, Contact).
4. **Implement Styling**: Use Tailwind CSS classes to style your components according to the design specifications.
5. **Add Content**: Populate each section with relevant content and styling, ensuring to maintain a minimalist aesthetic.
6. **Test Responsiveness**: Use CSS media queries and tools to ensure the landing page is fully responsive across devices.
7. **Deploy**: Deploy the completed landing page using a service like Vercel or Netlify for public access.

## USER EXPERIENCE
Key user interactions will include a straightforward navigation experience with prominent calls to action. Users will be able to easily scroll through the page, view features, read testimonials, and fill out the contact form. The minimalist design will ensure that the focus remains on the content, encouraging users to engage with the site without unnecessary distractions.