Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for Horizz Caffe & Bar, a coffee shop located in Szekszárd. The main purpose of this website is to showcase the café's offerings, highlight customer reviews, and provide essential information to attract new visitors. The design will focus on a clean, minimalist aesthetic to ensure a user-friendly experience.

## CORE FEATURES
1. **Hero Section**: A welcoming introduction with the café's name, a high-quality image, and a brief tagline that captures the essence of Horizz Caffe & Bar.
2. **Menu Overview**: A visually appealing display of the café's menu items, including coffee, pastries, and drinks, with pricing and descriptions.
3. **Customer Reviews**: A section highlighting customer testimonials, showcasing the café's atmosphere and service quality, along with a rating summary.
4. **About Section**: Information about the café’s history, mission, and values, providing a personal touch to connect with potential customers.
5. **Contact Information**: Clear contact details including address, phone number, and links to social media, facilitating easy communication.
6. **Call to Action (CTA)**: Prominent buttons encouraging users to visit the café or view the menu, driving engagement and conversion.

## 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 vertical stacking format, with the hero section at the top, followed by the menu overview, reviews, about section, and contact information, ensuring a smooth scroll experience.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specifically required for a landing page but can be included if dynamic content is needed.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React application using Create React App with TypeScript.
2. **Install Tailwind CSS**: Follow the installation guide for Tailwind CSS to integrate it with the React application.
3. **Create Components**:
   - Develop a `Hero` component for the hero section.
   - Create a `Menu` component to display the menu items.
   - Design a `Reviews` component to showcase customer testimonials.
   - Build an `About` component for the café's background information.
   - Establish a `Contact` component for displaying contact details.
4. **Configure Routing**: Use React Router if navigation to different sections is needed, otherwise keep it simple for a single-page layout.
5. **Styling**: Apply Tailwind CSS classes to the components according to the design specifications.
6. **Deploy the Application**: Use platforms like Vercel or Netlify for hosting the landing page.

## USER EXPERIENCE
Users will have a seamless experience navigating through the landing page, starting from the eye-catching hero section that immediately captures attention. They can scroll down to see the menu, read customer reviews, learn about the café, and find contact information easily. The design will ensure that all elements are accessible, with clear call-to-action buttons encouraging users to visit the café or explore the menu further. The minimalist approach will keep the focus on the content, enhancing engagement and conversion rates.