Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page designed to enhance the visual elements and front-end experience of a website. The primary purpose is to create a unique identity that stands out from competitors through improved aesthetics, animations, and user interactions. The landing page will feature beautiful icons, a dynamic background, and engaging card transitions for a fluid user experience.

## CORE FEATURES
1. **Dynamic Background**: A deep black background with radial purple gradient accents that subtly move, creating a comfortable and immersive user experience.
2. **Animated Cards**: Cards that load gradually as the user scrolls down, showcasing content with smooth motion animations for better engagement.
3. **Carousel of Channels**: A visually appealing carousel displaying logos of available television channels, both open and paid, to highlight the range of options.
4. **Enhanced Typography**: Well-structured headings and body text using the Inter font to ensure readability and aesthetic appeal.
5. **Interactive Icons**: Beautifully designed icons that provide responsive feedback on user interactions, enhancing overall usability.

## 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 main layout will have a hero section at the top, followed by an animated features section, a carousel for channel logos, and a clear call-to-action at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified; consider using Context API or Redux if necessary for managing state.

## IMPLEMENTATION STEPS
1. **Set Up the React Project**: Create a new React app with TypeScript and install Tailwind CSS and shadcn/ui for styling.
2. **Design the Layout**: Use Tailwind CSS to create a responsive layout with a hero section, features section, carousel, and CTA.
3. **Implement the Dynamic Background**: Create a component for the background that uses CSS animations to create the moving radial gradient effect.
4. **Develop the Card Component**: Build a card component using Tailwind CSS that incorporates motion animations for loading and user interaction.
5. **Create the Carousel Component**: Implement the carousel to display channel logos, ensuring smooth transitioning and responsiveness.
6. **Enhance Typography**: Use the Inter font for all text elements and ensure proper spacing and hierarchy for readability.
7. **Test Responsiveness**: Ensure that the design is responsive across various devices and screen sizes.
8. **Deploy the Landing Page**: Once completed, deploy the landing page to a suitable hosting platform for public access.

## USER EXPERIENCE
The user will encounter a visually striking landing page that draws them in with its unique background and smooth animations. As they scroll, content will load dynamically, providing a sense of fluidity and engagement. The carousel will allow them to effortlessly browse through television channels, enhancing their understanding of what is offered. The overall design will focus on simplicity and clarity, ensuring a seamless experience that encourages interaction and exploration.