Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to showcase a web scroll 3D animation. The primary purpose is to engage users through interactive and visually appealing animations while providing a seamless browsing experience. The minimalist design emphasizes clarity and user engagement, leading to higher conversion rates.

## CORE FEATURES
1. **Hero Section**: A dynamic hero section with an eye-catching 3D animation that immediately captures user attention and showcases the unique feature of the application.
2. **Features Section**: Highlighting key features of the 3D animation, including its interactive capabilities and user customization options.
3. **Testimonials**: A section for user testimonials to build trust and credibility, showcasing positive feedback from early users or beta testers.
4. **Call to Action (CTA)**: Prominent buttons encouraging users to take action, such as signing up for a newsletter or trying a demo of the animation.
5. **Contact Form**: A simple and accessible contact form for inquiries or feedback, ensuring users can easily reach out for more information.

## 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 scroll that includes a hero section at the top, followed by features, testimonials, CTA, and contact form sections, all clearly delineated with ample white space.

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

## IMPLEMENTATION STEPS
1. **Set Up Your React Project**: Initialize a new React project with TypeScript using Create React App or a similar tool.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui to manage styling and UI components.
3. **Create Core Components**: Develop core components for the hero section, features, testimonials, CTA, and contact form.
4. **Implement 3D Animation**: Use CSS or a JavaScript library to create the scroll-triggered 3D animation in the hero section.
5. **Style Components**: Apply Tailwind CSS classes to style each component according to the design specifications.
6. **Responsive Design**: Ensure that the layout is responsive and looks good on various screen sizes.
7. **Testing**: Test the landing page for functionality, responsiveness, and browser compatibility.
8. **Deployment**: Deploy the landing page to a web hosting platform.

## USER EXPERIENCE
Users will be greeted with an engaging hero section featuring a stunning 3D animation as they scroll down the page. They can easily navigate through sections, reading about the features and testimonials. The CTA buttons will stand out due to the primary color, encouraging users to take actions like signing up or reaching out. The contact form will be straightforward, ensuring that users can easily submit their inquiries or feedback, fostering a seamless and interactive user experience.