Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for a barbershop, designed to provide an elegant and formal online presence. It will allow users to register or log in, redirecting them to the main page upon successful authentication. Additionally, a contact section will facilitate communication via WhatsApp.

## CORE FEATURES
1. **Hero Section**: A visually appealing introduction to the barbershop, featuring a welcoming message and a prominent call-to-action (CTA) button for users to register or log in.
2. **Registration/Login Page**: A secure page for users to create an account or log in. Successful login redirects users to the main landing page.
3. **Contact Section**: A dedicated area that includes a WhatsApp contact box, allowing users to reach out directly for inquiries or appointments.
4. **Service Showcase**: Highlight various barber services offered, complete with brief descriptions and images.
5. **Testimonials**: A section featuring customer reviews to build trust and encourage new visitors to use the services.
6. **Footer**: Essential links, social media icons, and contact information to enhance connectivity and accessibility.

## 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 be structured with a top navigation bar, followed by the hero section, service showcase, testimonials, contact section, and footer, ensuring a smooth flow and easy navigation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Not specified, but could utilize React Context or Redux if needed for managing user authentication state.

## IMPLEMENTATION STEPS
1. **Set Up Development Environment**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Core Components**:
   - Develop the Hero Section with a title, subtitle, and CTA button.
   - Implement the Registration/Login functionality using forms and state management.
   - Build the Contact Section with a WhatsApp link.
   - Design the Service Showcase with cards for each service.
   - Add a Testimonials section to display customer feedback.
3. **Style Components**: Apply Tailwind CSS classes according to the design specifications, ensuring a consistent and minimalist aesthetic.
4. **Implement Authentication Logic**: Set up routes for the registration and login pages, and handle redirects upon successful authentication.
5. **Test Responsiveness**: Ensure that the layout is mobile-friendly and all components are responsive across different screen sizes.
6. **Deploy the Landing Page**: Once testing is complete, deploy the application to a suitable hosting service.

## USER EXPERIENCE
Users will land on a welcoming hero section where they can easily navigate to register or log in. After logging in, they will be directed to the main landing page featuring services and testimonials. The contact section will allow them to reach out via WhatsApp, ensuring a seamless experience from browsing to booking services. The overall flow will prioritize simplicity and ease of use, fostering a positive first impression of the barbershop.