Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a minimalist movie website that showcases films, provides information about Cineby, and allows users to explore featured movies and genres. The site will focus on clean design and user-friendly navigation, perfect for movie enthusiasts seeking a streamlined experience.

## CORE FEATURES
1. **Hero Section**: A visually striking hero area featuring a prominent image of a featured movie with a brief description and a call-to-action button to explore more.
2. **Featured Movies**: A grid layout displaying the latest or most popular films, each with a thumbnail, title, and short description.
3. **Genres**: A section allowing users to browse movies by genre, enhancing discoverability and user engagement.
4. **Cineby Information**: A dedicated section explaining what Cineby is, its mission, and how it enhances the movie-watching experience.
5. **Contact Form**: A simple contact form for user inquiries or feedback, improving user interaction with the site.
6. **Responsive Design**: The layout will adapt seamlessly across devices, ensuring a consistent experience on mobile, tablet, and desktop.

## 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 consist of a full-width hero section at the top, followed by a grid layout for featured movies and genre categories, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for responsive design and styling.
- **UI Components**: shadcn/ui for pre-built components.
- **State Management**: Not specified at this stage, but consider using React's built-in state or context API if needed.

## 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**: Start with a main App component that includes the header, hero section, featured movies section, genres section, and footer.
3. **Implement Hero Section**: Design the hero area with a striking background image, title, description, and CTA button using Tailwind CSS.
4. **Add Featured Movies**: Create a MovieCard component to display movie details and map through an array of movie data to render them in a grid layout.
5. **Implement Genres Section**: Design a section that allows users to filter or browse movies by genre, possibly using buttons or a dropdown.
6. **Cineby Information Section**: Add a section dedicated to explaining Cineby, using simple text and engaging visuals.
7. **Create Contact Form**: Develop a contact form that captures user inquiries and integrates with an email service or backend if necessary.
8. **Responsive Design**: Ensure that all components are responsive using Tailwind's utility classes, testing on various screen sizes.
9. **Final Touches**: Review the design for consistency, accessibility, and performance optimization.

## USER EXPERIENCE
Users will be greeted by a visually appealing hero section that sets the tone of the website. They can easily navigate through featured movies and genres via clear, concise categories. The website will provide quick access to Cineby's mission and offer a contact form for easy communication. Overall, the user experience will be focused on simplicity and enjoyment, making it easy for visitors to explore and engage with the content provided.