Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase four visually appealing cards with a futuristic and modern aesthetic. The main purpose is to attract users while providing them with a clean and minimalist experience that emphasizes the content of the cards without overwhelming them with color.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a brief description of the purpose of the cards, featuring a prominent call-to-action (CTA) button.
2. **Card Display**: Four interactive cards that highlight key features or offerings, each designed with a futuristic look and feel.
3. **Responsive Design**: The layout adjusts seamlessly across devices, ensuring a consistent user experience on desktops, tablets, and smartphones.
4. **Contact Section**: A simple contact form allowing users to get in touch for more information or inquiries.
5. **Footer**: A clean footer with links to social media, privacy policy, and terms of service.

## 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 feature a hero section at the top, followed by a grid display of the four cards, and a contact section at the bottom. The footer will be fixed at the bottom of the page.

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

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling components.
3. **Create Component Structure**: Build the main components: Hero, Card, ContactForm, and Footer.
4. **Design Hero Section**: Implement the hero section with a background image or color, a headline, subheadline, and CTA button styled with the primary color.
5. **Develop Card Component**: Create a card component that follows the minimalist design, ensuring it has the correct border radius and typography.
6. **Implement Contact Form**: Design the contact form with inputs for name, email, and message, styled to match the overall aesthetic.
7. **Responsive Design**: Use Tailwind CSS utility classes to ensure the layout is responsive across all devices.
8. **Test Functionality**: Ensure all interactive elements work correctly and the layout adjusts as expected on different screen sizes.

## USER EXPERIENCE
Users will first encounter the hero section, which draws them in with an engaging headline and a clear CTA. As they scroll down, they will see four visually striking cards that present information concisely. Each card will have hover effects to enhance interactivity. The contact form at the bottom encourages user engagement, while the clean footer provides additional navigation options. The entire experience will be smooth, with a focus on readability and ease of navigation.