Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This application is a minimalist web component designed to display multimedia content, including images and videos, in a responsive layout. The primary objective is to create a clean and user-friendly interface that emphasizes the visual elements while maintaining a simple and elegant design.

## CORE FEATURES
1. **Responsive Design**: The component will adapt seamlessly to various screen sizes, ensuring an optimal viewing experience on mobile, tablet, and desktop devices.
2. **Image Display**: Four images will be included, sourced from specified URLs, with appropriate alt text for accessibility. Each image will be styled to maintain uniformity in size and spacing.
3. **Video Playback**: A video section will be integrated, pulling from a designated URL, with controls for play, pause, and fullscreen options.
4. **Hover Effects**: Subtle hover effects will be applied to images and the video container to enhance interactivity and user engagement.
5. **Accessibility Features**: All elements will include necessary ARIA roles and attributes to ensure accessibility for users with disabilities.
6. **Minimalist Aesthetic**: The design will focus on a clean layout with ample white space, ensuring that content is prioritized and easy to navigate.

## DESIGN SPECIFICATIONS
- **Visual Style**: Emphasis on a minimalist approach with a clean and simple design. The use of white space will enhance readability and user focus.
- **Color Mode**: A light theme will be utilized, featuring dark text on light backgrounds to ensure high contrast and readability.
- **Layout**: The component will be structured in a grid layout, with images and the video arranged in a visually appealing manner. Images will be placed in a uniform grid, and the video will take center stage below the images.
- **Typography**: Use a sans-serif font such as "Arial" or "Helvetica" for clarity and modernity. Headings will be bold and larger in size, while body text will be regular weight and slightly smaller, ensuring a clear visual hierarchy.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for utility-first styling, enabling rapid development and responsive design.
- **UI Components**: Utilize shadcn/ui for pre-built, customizable UI components that align with the minimalist aesthetic.
- **State Management**: No specific state management library is required for this component; however, local state can be managed using React hooks if needed for interactivity.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Create a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project dependencies.
3. **Create Component Structure**: Develop a functional component that includes sections for images and the video, ensuring to import any necessary components from shadcn/ui.
4. **Implement Responsive Layout**: Use Tailwind CSS classes to create a responsive grid layout for images and the video.
5. **Add Images and Video**: Integrate the specified image URLs and video URL into the component, ensuring to include alt text for images.
6. **Style the Component**: Apply Tailwind CSS styles to ensure adherence to the minimalist design specifications, focusing on spacing, typography, and hover effects.
7. **Test Responsiveness**: Ensure the component is fully responsive by testing it on various screen sizes and adjusting styles as necessary.

## USER EXPERIENCE
Users will interact with the component by viewing images and playing the video in a clean and uncluttered environment. The responsive design will allow for a smooth experience across devices, with hover effects enhancing engagement. Accessibility features will ensure that all users, regardless of ability, can enjoy the content provided in the component. The layout will guide users naturally through the content, promoting an intuitive and enjoyable browsing experience.