Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to showcase a carousel gallery slider. The main purpose is to provide users with an engaging and interactive way to view images in a minimalist layout, highlighting visual content effectively while maintaining a clean user interface.

## CORE FEATURES
1. **Carousel Gallery Slider**: Displays four images in a row with arrows to navigate between them, allowing users to easily browse through the gallery.
2. **Image Thumbnails**: Optional thumbnails below the carousel for quick access to specific images.
3. **Responsive Design**: Ensures the carousel adapts seamlessly to various screen sizes, maintaining usability on mobile and desktop devices.
4. **Accessibility Features**: Includes keyboard navigation and ARIA attributes for improved accessibility.

## 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 features a centered carousel slider at the top, followed by a section for thumbnails (if included) and a footer for additional information or links.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required for this simple gallery functionality; can use local component state.

## IMPLEMENTATION STEPS
1. **Setup the Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create Carousel Component**: Build a Carousel component that accepts an array of images and displays them in a responsive slider format.
4. **Add Navigation Arrows**: Implement arrow buttons for navigating through the images in the carousel.
5. **Implement Thumbnails (Optional)**: Create a Thumbnail component that allows users to click to jump to specific images in the carousel.
6. **Style Components**: Use Tailwind CSS to apply the minimalist design specifications, ensuring ample white space and proper typography.
7. **Test Responsiveness**: Ensure the carousel and any additional components work well on both mobile and desktop layouts.

## USER EXPERIENCE
Users will interact with the carousel by clicking the navigation arrows to view different images. The layout will prioritize ease of use with clear navigation and responsive design. Accessibility features will ensure that all users, including those using keyboard navigation, can effectively engage with the gallery. The minimalist design will create a pleasant browsing experience, focusing on the images without distractions.