Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
"Today Animation" is a modern animation studio website designed to showcase the studio's services in 2D, 3D, and AI animation. The website will feature a clean, user-friendly interface that highlights the studio's portfolio, provides information about their services, and facilitates user engagement through a contact form.

## CORE FEATURES
1. **Hero Banner**: A visually striking hero section that introduces "Today Animation" with engaging visuals and a clear value proposition.
2. **About Section**: A concise overview of the studio's mission, vision, and team, establishing credibility and connection with potential clients.
3. **Services Section**: Details of animation services offered, including 2D, 3D, and AI animations, with visual examples to attract clients.
4. **Portfolio Videos**: An interactive showcase of selected animation projects, allowing users to view the studio's work and creativity.
5. **Contact Form**: A simple and effective contact form for inquiries, allowing potential clients to reach out easily.
6. **Responsive Design**: Ensures that the website is fully functional and visually appealing on various devices, enhancing the user experience.

## 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 include a full-width hero image at the top, followed by stacked sections for services, portfolio, about, and a contact form, maintaining a clear vertical flow.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required, but can utilize React's built-in hooks for managing state if needed.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript template.
2. **Install Dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create Layout Structure**: Develop the main layout structure with separate components for each section (Hero, About, Services, Portfolio, Contact).
4. **Design Components**: Style each component using Tailwind CSS, ensuring adherence to the specified design specifications.
5. **Develop Portfolio Section**: Implement a video showcase for the portfolio, accommodating different media formats.
6. **Implement Contact Form**: Create a functional contact form with validation to handle user inquiries.
7. **Ensure Responsiveness**: Test and adjust the layout on various screen sizes to ensure a seamless user experience.
8. **Optimize for Performance**: Review and optimize images and assets for faster loading times.

## USER EXPERIENCE
Users will land on a visually appealing hero section that immediately captures attention. They can easily navigate through the services offered, view the portfolio to appreciate the studio's work, read about the studio's story, and fill out the contact form to initiate communication. The minimalist design approach ensures that users can focus on content without distractions, providing a smooth and engaging experience across devices.