Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project will be a landing page for a barbershop, designed to provide essential information about the services offered, along with a prominent WhatsApp button for direct customer communication. The focus will be on a clean, minimalist aesthetic to ensure a pleasant user experience while encouraging conversions.

## CORE FEATURES
1. **Hero Section**: A captivating hero section with an eye-catching image or graphic representing the barbershop, accompanied by a brief tagline and a prominent WhatsApp button for immediate contact.
2. **Services Offered**: A section detailing the various grooming services available, each with a short description and pricing.
3. **Testimonials**: A section showcasing customer testimonials to build trust and credibility, featuring quotes from satisfied clients.
4. **About Us**: A brief overview of the barbershop's story, mission, and values, helping to connect with potential customers.
5. **Contact Information**: A dedicated contact section with the shop's location, phone number, and a WhatsApp button for easy communication.
6. **Call to Action (CTA)**: Strategically placed CTAs throughout the site encouraging users to book appointments or contact the shop directly via WhatsApp.

## 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 will follow a single-page structure with sections stacked vertically, featuring a fixed navigation bar that allows smooth scrolling to each section.

## 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 the React project**: Initialize a new React project with TypeScript using Create React App.
2. **Install dependencies**: Install Tailwind CSS and shadcn/ui for styling and UI components.
3. **Create the folder structure**: Organize components, styles, and assets within the project.
4. **Develop the Hero Section**: Implement the hero section with a background image, tagline, and WhatsApp button styled with the primary color.
5. **Build the Services Section**: Create a responsive grid layout to showcase the services offered, including images and descriptions.
6. **Add Testimonials**: Develop a testimonials carousel or grid to display customer feedback.
7. **Implement the About Us Section**: Write content that reflects the barbershop's mission and values.
8. **Create the Contact Section**: Include contact details and a WhatsApp button for easy access.
9. **Finalize Navigation**: Ensure the navigation bar is functional and enables smooth scrolling to each section.
10. **Test Responsiveness**: Check the layout on various devices to ensure a consistent user experience across mobile and desktop.

## USER EXPERIENCE
Users will be greeted by a visually appealing hero section that immediately conveys the barbershop's brand. The clear layout will guide them through services offered, enhancing understanding and interest. Testimonials will build trust, while the easy accessibility of the WhatsApp button will facilitate quick communication. The overall experience will be seamless, encouraging users to engage with the barbershop and ultimately book appointments.