Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project aims to revamp a web application by enhancing its interface to create a more attractive and engaging user experience. The focus is on moving away from a terminal-like appearance and introducing interactive elements that react to user interactions, particularly with video generation progress indicators.

## CORE FEATURES
1. **Interactive Progress Indicators**: Redesign the progress indicators for video generation to be visually appealing and engaging, incorporating animations that respond to user actions.
2. **Hover Effects**: Implement interactive elements that animate or change when users hover over them, creating a dynamic and lively interface.
3. **Clean UI Design**: Maintain a minimalist aesthetic with plenty of white space and a limited color palette to ensure focus on the content.
4. **User-Friendly Navigation**: Simplify navigation with clear pathways and intuitive design, allowing users to easily explore different features of the application.
5. **Responsive Design**: Ensure the application is fully responsive, providing a seamless experience across various devices and screen sizes.

## 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 a prominent hero section at the top, followed by features, testimonials, and a call-to-action (CTA) section, all designed to guide users through the application naturally.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Use Zustand or React Context API for managing state across components.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript using Create React App, and install dependencies (Tailwind CSS, shadcn/ui).
2. **Configure Tailwind CSS**: Set up Tailwind CSS by creating a configuration file and importing it into your main CSS file.
3. **Create Layout Components**: Develop reusable components for the header, footer, and main content area, applying the specified design specifications.
4. **Implement Progress Indicators**: Design and animate the progress indicators using CSS transitions and JavaScript for interactivity.
5. **Add Hover Effects**: Utilize Tailwind CSS utilities to create hover effects for buttons and interactive elements.
6. **Test Responsiveness**: Ensure that the application renders correctly on different devices by testing in various screen sizes and using responsive design techniques.
7. **Deploy Application**: Use a platform like Vercel or Netlify for deployment, ensuring the application is accessible online.

## USER EXPERIENCE
Users will experience a streamlined interface with an emphasis on interactivity. As they engage with the application, progress indicators will provide visual feedback on video generation stages. Hovering over elements will trigger animations, creating a lively atmosphere and enhancing user engagement. The minimalist design will ensure that users can easily navigate and interact with the application's core features without distractions.