Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for "Roberto Peluqueros," an organic hair salon. The main purpose is to create an elegant and minimalist web presence that conveys a sense of wellness and professionalism while encouraging clients to book appointments via an app or WhatsApp.

## CORE FEATURES
1. **Header**: A minimalist header featuring the salon's logo on the left, a navigation menu on the right (Home, Services, Hair Health, Team), and a prominent "Book Appointment (App)" button.
2. **Hero Section**: A visually striking hero section with a high-quality image of the salon, the title "Organic Hair Health in [City]," and a clear call-to-action (CTA) button for the booking app.
3. **Service Highlights**: A section featuring three highlighted service blocks with elegant icons and images representing Organic Coloring, Sublime Treatment 10.31, and Micropigmentation (Eye Design).
4. **Hair Health Philosophy**: A dedicated area to explain the salon's philosophy regarding organic products and the use of a micro-camera for diagnostics.
5. **Sticky WhatsApp Button**: A floating button in the bottom right corner for easy access to WhatsApp for direct communication.
6. **Footer**: Contains the salon's hours, location with a Google Maps link, and an Instagram link.

## 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 feature a full-width header, a hero section with a background image, three equal-width service blocks in a row, and a footer with clear divisions for information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not required at this stage.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui as dependencies.
3. **Create Components**:
   - Header Component: Include logo, navigation links, and the appointment button.
   - Hero Section Component: Design with a background image, title, and CTA button.
   - Services Component: Create a grid layout for the service highlights.
   - Philosophy Section: Add a text area for the organic products philosophy.
   - Sticky WhatsApp Button: Implement a floating button using CSS for positioning.
   - Footer Component: Design with opening hours, location link, and Instagram link.
4. **Style Components**: Apply Tailwind CSS classes according to the design specifications.
5. **Responsive Design**: Ensure all components are responsive and adjust layout for mobile and desktop views.
6. **Testing**: Test the landing page on various devices to ensure functionality and design integrity.

## USER EXPERIENCE
Users will be greeted with a visually appealing landing page that clearly outlines the salon's offerings. The intuitive navigation makes it easy for visitors to explore services, understand the salon's philosophy, and quickly access the booking feature via the WhatsApp button. The minimalist design and ample white space create a calming atmosphere, encouraging users to engage with the content and book their appointments seamlessly.