Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project entails creating a landing page featuring a minimalist design with scroll animations and a parallax effect. The main purpose of the website is to captivate visitors with engaging visual transitions while effectively communicating the brand's message and encouraging conversions.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area with a compelling headline, subheadline, and a prominent call-to-action button that utilizes the primary color for visibility.
2. **Scroll Animation**: Implement smooth scrolling effects that enhance user engagement as visitors navigate through the page.
3. **Parallax Effect**: Integrate a parallax scrolling effect, allowing background elements to move at a different speed than foreground content for a dynamic experience.
4. **Features Section**: Highlight key features or offerings with concise descriptions and visually appealing icons or images.
5. **Testimonials Section**: Display user testimonials or reviews to build trust and credibility with potential customers.
6. **Contact Section**: Provide a simple contact form for inquiries, ensuring that it is easily accessible to users.

## 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 consists of a full-width hero section at the top, followed by the features and testimonials sections, and concludes with a contact section at the bottom. Each section is separated with ample white space to maintain a clean and uncluttered look.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this landing page, but consider using React Context for managing any shared states in future updates.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui for UI components.
2. **Create Layout Structure**: Develop a main layout component that includes the hero, features, testimonials, and contact sections.
3. **Implement Hero Section**: Add the hero section with a background image and styled text using Tailwind CSS, ensuring the call-to-action button stands out.
4. **Add Scroll Animation**: Utilize a library like Framer Motion to implement smooth scrolling animations between sections.
5. **Incorporate Parallax Effect**: Use CSS properties or a library to create the parallax effect, adjusting the background speed relative to the foreground.
6. **Develop Features and Testimonials Sections**: Create the features and testimonials sections with responsive design in mind, ensuring layout adapts well to various screen sizes.
7. **Build Contact Form**: Implement a simple contact form with necessary fields and style it using Tailwind CSS, ensuring accessibility and responsiveness.
8. **Test and Deploy**: Thoroughly test the landing page for usability and responsiveness before deploying it to a hosting service.

## USER EXPERIENCE
Visitors will be welcomed with an engaging hero section that encourages them to scroll down for more information. As they navigate through the page, smooth animations will guide their attention, while the parallax effects create an immersive experience. The features section will succinctly explain the offerings, followed by testimonials that reinforce trust. Finally, the contact section allows users to easily reach out, enhancing overall user engagement and conversion potential.