Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to impress visitors with an interactive hero section and engaging background elements. The goal is to create a visually stunning and minimalist web presence that communicates value and sophistication, making it feel worth $20,000.

## CORE FEATURES
1. **Interactive Hero Section**: A visually striking hero area featuring an animated cursor effect that responds to user movements, enhancing engagement.
2. **Custom Interactive Background**: A dynamic background that reacts to user interactions, creating a unique and immersive experience.
3. **Call to Action (CTA)**: A prominent button encouraging visitors to take action, such as signing up for a newsletter or exploring more about the services offered.
4. **Minimalist Feature Section**: A clean layout showcasing key services or features, with concise descriptions and icons to aid visual comprehension.
5. **Testimonials Section**: Space for client testimonials that can rotate or animate to build trust and credibility.
6. **Contact Form**: A simple and elegant contact form for inquiries, designed to be user-friendly and straightforward.

## 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 top navigation bar, followed by the hero section, feature section, testimonials, and a contact form, all spaced evenly for a balanced appearance.

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

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project with TypeScript. Install Tailwind CSS and configure it for styling.
2. **Create Layout Structure**: Build a main layout component that includes a navigation bar and sections for the hero, features, testimonials, and contact form.
3. **Implement Hero Section**: Create an interactive hero section that includes a responsive background and animated cursor effects using CSS animations.
4. **Develop Feature Section**: Design a minimalist feature section that presents key offerings with icons and short descriptions.
5. **Add Testimonials**: Implement a testimonials section that can rotate through different feedback using state management for interactivity.
6. **Build Contact Form**: Create a simple contact form with validation to collect user inquiries.
7. **Styling**: Use Tailwind CSS to apply the defined design specifications, ensuring a clean and cohesive look throughout the page.
8. **Testing**: Test the responsiveness and interactivity of the page across different devices and screen sizes.

## USER EXPERIENCE
Visitors will be greeted by an engaging hero section that captures their attention immediately. As they move their cursor, the interactive elements will respond, creating a memorable first impression. The feature section will clearly communicate the services offered, while the testimonials will build trust through social proof. The contact form will be easily accessible, encouraging users to reach out for more information. Overall, the design will focus on simplicity and elegance, providing a seamless user experience.