Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a minimalist landing page similar to the reference website. The main purpose is to showcase a clean design with engaging scroll effects, allowing users to navigate seamlessly through various sections while maintaining a focus on typography and whitespace.

## CORE FEATURES
1. **Hero Section**: An eye-catching introductory area with a prominent title, subtitle, and a call-to-action button encouraging user engagement.
2. **Scroll Effects**: Smooth scrolling animations and transitions between sections to enhance user experience and visual engagement.
3. **Features Overview**: A section highlighting key features or offerings, presented with engaging visuals and succinct descriptions.
4. **Testimonials**: A section to display user testimonials or reviews, adding credibility and social proof to the landing page.
5. **Contact Form**: A simple contact form for users to reach out, including fields for name, email, and message.
6. **Footer**: A minimal footer with links to social media and other relevant resources.

## 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 will be a single-page structure with a clear vertical flow, featuring distinct sections for the hero, features, testimonials, contact form, and footer.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, as the application does not require complex state management.

## IMPLEMENTATION STEPS
1. **Set Up Project Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Structure Layout**: Create a main App component and define a basic structure for routing to different sections.
4. **Build Hero Section**: Implement the hero section with a title, subtitle, and call-to-action button styled with the primary color and border radius.
5. **Add Scroll Effects**: Utilize CSS animations or libraries to create smooth scrolling and transitions between sections.
6. **Develop Features Section**: Create a features overview section with cards or grids showcasing the key features.
7. **Implement Testimonials Section**: Build a testimonials area with user feedback styled appropriately.
8. **Create Contact Form**: Develop a contact form with necessary fields and validation.
9. **Finalize Footer**: Add a footer with links and social media icons, ensuring it is responsive.
10. **Test Responsiveness**: Ensure the layout is fully responsive across various devices.

## USER EXPERIENCE
Users will first encounter the hero section with engaging visuals that draw them in. As they scroll down, they will experience smooth transitions to different sections, enhancing their interaction with the content. The features and testimonials will build trust and provide essential information, while the contact form will be easily accessible for inquiries, ensuring a seamless user journey throughout the landing page.