Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Create a landing page for a local barber shop that showcases its services, location, and contact information. The aim is to attract new customers and provide essential information in a clean and engaging format.

## CORE FEATURES
1. **Hero Section**: A visually appealing hero area with a captivating image of the barber shop, a welcome message, and a prominent call-to-action button (e.g., "Book an Appointment").
2. **Services Offered**: A clear display of the various barbering services available, including haircuts, shaves, and styling options with brief descriptions and prices.
3. **About Us Section**: A section dedicated to the barber shop's story, mission, and the team, helping to build trust and connection with potential clients.
4. **Testimonials**: A section featuring customer reviews and ratings to establish credibility and encourage new customers to visit.
5. **Contact Information**: Easily accessible contact details, including phone number, email, and location with a map to facilitate easy navigation.
6. **Booking CTA**: A clear call-to-action to encourage visitors to book appointments directly from the landing page.

## 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 structure consists of a full-width hero section at the top, followed by a grid or card layout for services, a dedicated section for testimonials, and a footer with contact information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS for efficient styling and responsive design.
- **UI Components**: shadcn/ui for consistent UI elements.
- **State Management**: Not specifically needed for this landing page, but consider using React Context or hooks for managing form submissions.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to your project.
3. **Create the Layout**: Structure the landing page with the hero section at the top, followed by services, testimonials, and contact information.
4. **Add Components**: Develop components for each section (Hero, Services, Testimonials, Contact).
5. **Style Components**: Use Tailwind CSS to style each component according to the design specifications.
6. **Implement Call-to-Action**: Ensure the booking button is prominent and linked to a booking form or external scheduling tool.
7. **Test Responsiveness**: Check the layout on various devices and screen sizes to ensure a smooth user experience.

## USER EXPERIENCE
Visitors will arrive at the landing page and immediately see the welcoming hero section. They can easily navigate through the services offered, read testimonials, and find contact information without any clutter. The booking CTA will be strategically placed to encourage immediate action, enhancing the likelihood of converting visitors into customers. The overall minimalist design will provide a straightforward, enjoyable browsing experience.