Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is for a visually appealing landing page for "Just Guys Barbershop". The main purpose of the site is to showcase the barbershop’s services, highlight customer reviews, and encourage potential customers to book appointments. The design will focus on minimalism with engaging animations to enhance user experience.

## CORE FEATURES
1. **Hero Section**: A striking hero image with a catchy tagline and a call-to-action button, encouraging visitors to book an appointment.
2. **Services Offered**: A clear and concise list of services available at the barbershop, including descriptions and pricing.
3. **Customer Reviews**: A dedicated section displaying recent customer reviews with a star rating system to build trust and credibility.
4. **Photo Gallery**: An interactive gallery showcasing the barbershop's interior, haircuts, and styles to attract potential customers visually.
5. **Contact Information**: Clearly displayed contact details including phone number, address, and operating hours for easy access.
6. **Map Integration**: An embedded map for users to easily find the barbershop's location.

## 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 page will feature a vertical layout with a hero section at the top, followed by the services, customer reviews, photo gallery, contact information, and map section.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not required for this landing page as it is mostly static content.

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project using Create React App with TypeScript.
2. **Install dependencies**: Install Tailwind CSS and shadcn/ui components.
3. **Create the layout structure**: Set up the main components such as Hero, Services, Reviews, Gallery, Contact, and Map.
4. **Style the components**: Apply Tailwind CSS classes to achieve the minimalist design and ensure responsiveness.
5. **Add animations**: Implement subtle animations for the hero section and transitions for image hover effects in the gallery.
6. **Test responsiveness**: Ensure the landing page adjusts correctly across different devices and screen sizes.

## USER EXPERIENCE
The user journey begins with a captivating hero section that draws visitors in. Users can easily navigate through the services offered, read customer testimonials, and view a selection of images showcasing the barbershop's work. Contact information is readily accessible, and a map ensures customers can find the location without hassle. The overall experience is designed to be seamless, encouraging users to transition from browsing to booking an appointment effortlessly.