Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for a barbershop located in Milan. The main purpose is to create an online presence that showcases the barbershop's services, location, and contact information, encouraging potential customers to visit or book an appointment.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction with a catchy tagline, a brief description of the barbershop, and a prominent call-to-action button for booking appointments.
2. **Services Offered**: A clear list of services provided by the barbershop, including descriptions and pricing to inform potential customers.
3. **Google Maps Integration**: An embedded Google Maps link that provides directions to the barbershop, making it easy for customers to find the location.
4. **Customer Testimonials**: A section showcasing reviews or testimonials from satisfied customers to build trust and credibility.
5. **Contact Information**: Easily accessible contact details including phone number and email address, along with a contact form for inquiries.
6. **Appointment Booking Call-to-Action**: A clear and attractive button that leads users to a booking platform or form.

## 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 will consist of a top navigation bar, a hero section with a full-width background image, followed by sections for services, testimonials, and contact information, all designed to be responsive on various devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically needed for this landing page.

## IMPLEMENTATION STEPS
1. Set up a new React project using Create React App with TypeScript.
2. Install Tailwind CSS and configure it according to the project's needs.
3. Create the main layout structure using functional components for each section (Hero, Services, Testimonials, Contact).
4. Implement the Hero section with a background image, tagline, description, and CTA button styled with Tailwind CSS.
5. Create the Services section, listing services with descriptions and prices, utilizing Tailwind's grid system for layout.
6. Integrate Google Maps by embedding the map iframe in the contact section.
7. Develop the Testimonials section by creating card components for each testimonial, ensuring they are visually appealing and easy to read.
8. Add a contact form to facilitate customer inquiries, styled with appropriate spacing and responsive design.
9. Test the landing page on various devices to ensure responsiveness and user experience are optimal.

## USER EXPERIENCE
Users will first be greeted by the visually appealing hero section that summarizes the barbershop's offerings. The smooth navigation will guide them through the services offered, backed by compelling testimonials that build trust. The embedded Google Maps link will allow users to easily find the barbershop's location, and the contact section will facilitate easy communication for bookings or inquiries. The layout will ensure a seamless experience, making it straightforward for users to engage with the barbershop online.