Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a visually stunning landing page that enhances the user's website with a minimalist aesthetic and a smooth flow akin to modern design platforms like Framer and Webflow. The focus will be on cleanliness, simplicity, and effective communication of the brand message.

## CORE FEATURES
1. **Hero Section**: A captivating introduction that includes a strong headline, a subheadline, and a prominent call-to-action button that guides visitors to the next step.
2. **Features Showcase**: A section highlighting the main features of the offerings, presented in a visually appealing layout with icons and brief descriptions.
3. **Testimonials**: A dedicated area for user feedback, showcasing quotes from satisfied customers to build trust and credibility.
4. **Contact Form**: An easy-to-use form for visitors to get in touch, featuring fields for name, email, and message, along with a submit button.
5. **Smooth Scrolling and Transitions**: Implement smooth scrolling effects and transitions between sections to enhance the user experience.

## 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-page layout with vertically stacked sections that are easily navigable via a sticky or fixed navigation bar at the top.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive and utility-first design.
- **UI Components**: shadcn/ui for building reusable components.
- **State Management**: Not required for a landing page but can be implemented if needed for forms or dynamic content.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Layout Structure**: Build the main layout using a functional component that includes sections for the hero, features, testimonials, and contact form.
3. **Implement Styling**: Use Tailwind CSS classes to achieve the minimalist design, applying the primary color and typography as specified.
4. **Add Hero Section**: Create the hero section with a compelling headline and call-to-action button styled with the primary color and rounded borders.
5. **Develop Features Section**: Implement a grid or flexbox layout to display features with icons and descriptions, ensuring spacing adheres to the minimalist style.
6. **Create Testimonials Area**: Add a carousel or grid layout for testimonials, ensuring easy readability and visual appeal.
7. **Build Contact Form**: Design a simple contact form that captures user details and includes validation for input fields.
8. **Implement Smooth Scrolling**: Add smooth scrolling effects and transitions between sections to enhance user experience.
9. **Testing and Optimization**: Test the landing page for responsiveness and usability on various devices and browsers. Optimize performance for fast loading.

## USER EXPERIENCE
Key user interactions include engaging with the hero section to learn about the offerings, exploring features through intuitive navigation, reading testimonials to build trust, and easily filling out the contact form. The overall flow should feel seamless, with visual feedback on button clicks and form submissions, ensuring a positive and engaging experience for visitors.