Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a premium cinematic landing page that emphasizes layered depth and motion to create an engaging user experience. The landing page will feature a hero section designed to captivate visitors, with a focus on minimalistic aesthetics and unusual animations that enhance user interaction.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area with a dramatic headline and background that utilizes translucency and motion blur for a cinematic effect.
2. **Scroll Animations**: Unique animations triggered by user scroll actions to create an interactive experience that guides visitors through the content.
3. **Hover Effects**: Engaging hover animations for buttons and links that provide instant feedback and enhance user engagement.
4. **Call to Action (CTA)**: Strategically placed CTAs throughout the landing page to encourage user conversion and interaction.
5. **Minimalistic Design**: A clean and simple layout with plenty of white space and a focus on typography to ensure readability and aesthetic appeal.
6. **Unusual Layout**: A creative and trendy arrangement of elements that breaks conventional layouts to capture attention and encourage exploration.

## 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 feature a full-screen hero section at the top, followed by sections that highlight features with engaging visuals and animations. Each section will maintain ample white space and utilize a grid-like structure to create an organized flow.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required for this landing page; consider using React context if needed for global state.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Layout**: Build the basic structure of the landing page, starting with the hero section. Use Tailwind CSS for styling.
3. **Implement the Hero Section**: Design the hero area with a dramatic headline and background, incorporating motion blur and translucency effects.
4. **Add Scroll Animations**: Use libraries like GSAP or Framer Motion to create scroll-triggered animations that enhance the landing page's interactivity.
5. **Develop Hover Effects**: Implement hover animations for buttons and links to provide engaging feedback to users.
6. **Design Additional Sections**: Create sections for features and CTAs, ensuring a consistent layout and visual style throughout the page.
7. **Responsive Design**: Ensure that the landing page is fully responsive and provides a seamless experience on all devices.
8. **Testing and Optimization**: Test the landing page across different browsers and devices, optimizing performance and user experience.

## USER EXPERIENCE
The landing page will provide users with a visually rich experience that encourages exploration through its interactive elements. Users will be able to engage with the content through dynamic scroll animations and hover effects, making the browsing experience feel premium and immersive. The strategically placed CTAs will guide users towards desired actions, ensuring a smooth and effective user journey.