Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase products with engaging scroll animations and 3D elements. The main purpose is to create an interactive and visually appealing experience for visitors, encouraging them to explore the offerings and ultimately convert into customers.

## CORE FEATURES
1. **Hero Section**: A captivating introduction with a large background image or animation and a concise tagline that highlights the unique selling proposition of the products.
2. **Product Showcase**: A visually striking display of products featuring dynamic scroll animations and 3D effects to enhance user engagement.
3. **Features Section**: A brief overview of the key features of the products, utilizing animated icons and text for a modern touch.
4. **Testimonials**: User reviews or testimonials presented in a visually appealing format, possibly with animations that reveal them as users scroll.
5. **Call to Action (CTA)**: Strategically placed buttons encouraging users to take action, such as "Shop Now" or "Learn More."
6. **Contact Section**: A simple contact form for inquiries, integrated with smooth animations for user feedback on submission.

## 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 a vertical scrolling structure. The hero section at the top, followed by the product showcase, features, testimonials, CTA, and contact section.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API (if needed for global state management)

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components to manage styling and UI elements.
3. **Create Layout Components**: Build reusable components for the hero section, product showcase, features, testimonials, CTA, and contact form.
4. **Implement Scroll Animations**: Use libraries like Framer Motion or GSAP to add engaging scroll animations and 3D effects to the product showcase.
5. **Design with Tailwind CSS**: Apply Tailwind CSS classes to achieve the desired minimalist design, ensuring responsiveness across devices.
6. **Testing and Optimization**: Test the landing page for performance and responsiveness, optimizing images and animations as needed.

## USER EXPERIENCE
Users will start their journey on the landing page, greeted by a visually striking hero section that captures their attention. As they scroll down, they will encounter smooth animations that reveal product features and testimonials, creating an engaging flow. The CTA will guide users towards making a purchase or contacting for more information, with the contact form designed for easy accessibility. The overall experience will be intuitive, with a focus on interaction and visual appeal, encouraging exploration and conversion.