Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Today Animation is a modern animation studio website designed to showcase 2D, 3D, and AI animation services. The website will feature a clean and creative layout that highlights the studio's portfolio, services, and contact information, effectively engaging potential clients and showcasing the studio's capabilities.

## CORE FEATURES
1. **Hero Banner**: A visually striking introduction with a captivating tagline and a call-to-action button that directs users to the services or portfolio sections.
2. **About Section**: A brief overview of the studio, its mission, and the team, enhancing brand connection and trust.
3. **Services Section**: A detailed description of the animation services offered, including 2D, 3D, and AI animation, with engaging visuals.
4. **Portfolio Videos**: A showcase of selected works displayed in an interactive gallery format, allowing users to view and appreciate the studio's projects.
5. **Contact Form**: An easy-to-use form for potential clients to reach out, with fields for name, email, message, and a submit button.

## 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 be structured with a top navigation bar, followed by the hero banner, services section, portfolio, about section, and a footer with the contact form. Each section will be clearly defined with ample spacing for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for a static website, but can be added if dynamic features are implemented in the future.

## IMPLEMENTATION STEPS
1. **Create the React project**: Set up a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui components to the project.
3. **Set up Tailwind CSS**: Configure Tailwind to handle custom styles and ensure it works with your design specifications.
4. **Build Layout Structure**: Create components for each section (Hero, About, Services, Portfolio, Contact) and arrange them within the main App component.
5. **Develop Hero Section**: Design the hero banner with an attention-grabbing image or animation, tagline, and CTA button.
6. **Add Services Section**: List the animation services with appropriate icons or images that represent each service.
7. **Implement Portfolio Section**: Create a video gallery that displays clips of the studio's work, allowing users to click for more details.
8. **Contact Form**: Develop the contact form with necessary fields and a submit button, ensuring proper form validation.
9. **Responsive Design**: Test the website on different devices to ensure it is fully responsive and user-friendly.
10. **Deploy the Website**: Use a platform like Vercel or Netlify for deployment, ensuring the website is live and accessible.

## USER EXPERIENCE
The user experience will focus on intuitive navigation and a visually appealing interface. Users will be greeted by a stunning hero banner, guiding them through the services, showcasing the portfolio, and providing an easy way to contact the studio. The clean layout and modern design will enhance engagement, encouraging visitors to explore the website and learn more about Today Animation's offerings.