Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a single-page landing website for a barbershop, designed with a minimalist aesthetic. The purpose of the website is to showcase the barbershop's services, facilitate bookings, and enhance customer engagement through an elegant and simple user interface.

## CORE FEATURES
1. **Fixed Navigation**: A clean top navigation bar with the shop name on the left and anchor links to sections like Services, Gallery, Book, and Location on the right, providing easy access to different parts of the page.
2. **Hero Section**: A full viewport height section with a striking headline and a clear call-to-action button that encourages users to book their visit.
3. **Services & Pricing**: A structured display of services offered by the barbershop, including descriptions and pricing, organized into a clean list or grid format.
4. **Gallery**: A visually appealing grid layout showcasing the barbershop's work, allowing potential clients to see examples of past haircuts and styles.
5. **Booking Section**: A dedicated area for users to book appointments with a prominent call-to-action button, ensuring ease of use and accessibility.
6. **Testimonials**: A section featuring client reviews, enhancing credibility and trust for new customers.

## 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 layout consists of a single scrolling page with multiple sections, adapting responsively to mobile, tablet, and desktop breakpoints. Each section is spacious, with generous whitespace and a clean structure that enhances readability and user experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified but consider using React's Context API or a state management library if required for managing bookings.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create Components**: Build components for each section of the website (Navigation, Hero, About, Services, Gallery, Booking, Testimonials, Location, Footer).
3. **Implement Layout**: Use Tailwind CSS to create responsive styles for each component, ensuring they adapt correctly to mobile, tablet, and desktop layouts.
4. **Navigation Functionality**: Implement smooth scroll behavior for the fixed navigation links to anchor points on the page.
5. **Hero Section**: Add the hero section with a high-quality background image, centered text, and a styled CTA button.
6. **Service Cards**: Create a component for service cards that dynamically displays service names, descriptions, and prices in a grid.
7. **Gallery Section**: Build the gallery section using a grid layout, ensuring the aspect ratios of image placeholders are consistent.
8. **Booking Functionality**: Integrate a booking button leading to an external booking service like Booksy and include a note below it.
9. **Testimonials Section**: Design the testimonials section with client reviews displayed in a card layout.
10. **Location Section**: Embed a map and display shop details in a clean format.
11. **Footer**: Design a minimal footer with links and copyright information.
12. **Test Responsiveness**: Ensure the website functions well across all specified breakpoints and devices.

## USER EXPERIENCE
The user experience is designed to be straightforward and intuitive. Users will navigate through the site using a clean and fixed navigation bar, allowing them to easily explore different sections. The hero section immediately captures attention with a compelling message and clear call to action. Services are presented in an organized manner, and the booking process is simplified for quick access. Testimonials provide social proof, fostering trust. Overall, the layout emphasizes whitespace, ensuring that users can focus on content without distractions.