Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to compare websites built on different platforms—Claude, Lovable, and Base 44. The primary purpose is to inform visitors about the unique features and benefits of each platform, ultimately guiding them toward making an informed decision.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a tagline that highlights the comparison theme, accompanied by a prominent call-to-action button.
2. **Comparison Table**: A visually organized table that succinctly compares key features of each platform, allowing users to quickly assess differences.
3. **Platform Highlights**: Individual sections that detail the unique advantages of Claude, Lovable, and Base 44, including user testimonials and success stories.
4. **Call-to-Action (CTA)**: Clear and persuasive CTAs encouraging users to explore each platform further or sign up for a trial.
5. **Contact Form**: A simple contact form for inquiries, enhancing user engagement and support.

## 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**: A single-column layout for simplicity, with sections stacked vertically for easy navigation. Each section should have ample spacing to enhance readability.

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

## IMPLEMENTATION STEPS
1. **Set up the React project**: Utilize Create React App with TypeScript template.
2. **Install Tailwind CSS**: Follow the official documentation to integrate Tailwind CSS into the project.
3. **Add Google Fonts**: Link the Inter font in the index.html file for consistent typography.
4. **Create Components**: Build reusable components for the Hero section, Comparison Table, Platform Highlights, CTA buttons, and Contact Form.
5. **Implement Layout**: Structure the main App component to include all the sections in a single-column layout, ensuring proper spacing and alignment.
6. **Style Components**: Use Tailwind CSS classes to apply the minimalist design, color palette, and typography settings specified.
7. **Test Responsiveness**: Ensure the landing page is fully responsive across different devices.

## USER EXPERIENCE
Users will arrive at the landing page and be greeted by an engaging hero section that succinctly presents the purpose of the site. They can quickly scroll through the comparison table, which allows for easy side-by-side analysis of the platforms. Each platform's highlights will provide deeper insights, supported by testimonials, fostering trust and credibility. The straightforward CTAs will guide users to take the next steps, whether that be exploring further or reaching out for more information. The overall design ensures a pleasant and informative experience, with a focus on clarity and ease of navigation.