Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a minimalist landing page designed to showcase a 3D animated logo using a provided GLB file. The primary focus is on the interactive animation of the logo, which consists of the letters M, E, and V. The landing page will serve as a draft to highlight the logo's animations in a hero section, creating an engaging visual experience.

## CORE FEATURES
1. **Hero Section**: A prominent section at the top of the landing page featuring the 3D animated logo with interactive animations for each letter (M, E, V).
2. **Animation Effects**: Each letter will have a unique animation sequence where the central part of the 'M' appears first, followed by the left and right sides, with similar patterns for 'E' and 'V'.
3. **Responsive Design**: The landing page will be designed to be fully responsive, ensuring a seamless experience across different devices.
4. **Minimalist Aesthetic**: A clean and simple design with ample white space to keep the focus on the animated logo.
5. **Call to Action (CTA)**: A simple CTA button below the hero section encouraging users to engage further, such as "Learn More" or "Get Started".

## 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-column layout with the hero section at the top, followed by the CTA. The hero section will be the focal point with the 3D logo prominently displayed.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for streamlined styling.
- **UI Components**: shadcn/ui for pre-built UI components.
- **State Management**: Not necessary for this simple landing page.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project.
3. **Create Hero Section Component**: Develop a Hero component that imports and displays the 3D GLB model with animation effects.
4. **Implement Animation Logic**: Use a library like Three.js or similar to manage the GLB file and animate the logo elements as specified.
5. **Style the Landing Page**: Apply Tailwind CSS classes to achieve the minimalist design, ensuring proper spacing, colors, and typography.
6. **Add CTA Button**: Create a simple CTA button with the specified border radius and primary color, linking to further engagement options.
7. **Test Responsiveness**: Ensure the landing page displays correctly on various devices by testing with different screen sizes.

## USER EXPERIENCE
Users will land on the page and immediately see the animated 3D logo in the hero section. The animation will draw their attention as the letters M, E, and V animate into view one after the other. Below the hero section, a clear and inviting CTA will encourage users to explore further. The minimalist design ensures that the focus remains on the animation, providing a clean and engaging experience.