Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for “Tarif Gents Saloon,” a barber shop aimed at promoting its services and attracting new customers. The website will provide essential information, customer reviews, and a contact section to enhance user engagement and facilitate bookings.

## CORE FEATURES
1. **Hero Section**: A prominent area at the top featuring the salon's name, a tagline, and a call-to-action button for booking an appointment.
2. **Service Offerings**: A section highlighting the various services offered, such as haircuts, shaving, and styling, with brief descriptions and pricing.
3. **Customer Reviews**: A dedicated area showcasing customer feedback, including a selection of positive reviews to build trust and credibility.
4. **Contact Information**: Clear display of the salon's phone number, address, and operating hours, along with a Google Maps link for directions.
5. **Gallery**: A visual showcase of the salon’s interior, staff, and services through images to give potential customers a feel of the environment.
6. **Call-to-Action**: Strategically placed buttons prompting users to book appointments or contact the salon for inquiries.

## 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 and body text and UI elements.
- **Border Radius**: 8px (moderately rounded) for buttons, cards, and inputs.
- **Layout**: The layout will consist of a vertical stack of sections, starting with the hero at the top, followed by service offerings, customer reviews, gallery, and contact information, ensuring easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required 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 requirements.
3. Create the main components: Hero, Service, Reviews, Gallery, and Contact sections.
4. Use shadcn/ui for reusable UI components, maintaining consistent design and functionality.
5. Implement responsive design principles to ensure compatibility across devices.
6. Populate the sections with placeholder content and styles, then replace with actual content.
7. Test the landing page for responsiveness and functionality before launching.

## USER EXPERIENCE
Users will land on a visually appealing hero section that clearly communicates the salon’s brand. They can easily navigate to service offerings, view customer reviews, and get in touch using the contact information. The layout is designed for quick access to key information, enhancing user engagement and conversion rates for bookings.