Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for "Kertas Kerja Cafe," a cozy coffee shop in Slawi, targeting students and young adults. The primary focus is to showcase the affordable prices and inviting atmosphere, encouraging visitors to explore the cafe’s offerings and location.

## CORE FEATURES
1. **Hero Section**: A full-width background image of the cafe interior with a catchy headline and subheadline, highlighting the affordable prices and inviting ambiance.
2. **About Us**: A two-column layout with an engaging description of the cafe alongside an appealing image, emphasizing ratings and location.
3. **Menu Highlight**: A section showcasing best-selling menu items with enticing images and prices displayed prominently.
4. **Gallery Section**: A grid layout featuring 3-6 images that capture the cafe's seating areas, workspaces, and Instagrammable spots.
5. **Why Visit Us**: A list of icons highlighting key selling points such as affordability, comfort, and strategic location.
6. **Location & Contact**: A clear section with an embedded Google Maps link, the complete address, and a WhatsApp contact button, along with a strong call-to-action for visitors to come by.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist design with a clean and simple layout, plenty of white space, and a warm aesthetic that resonates with a young audience.
- **Color Mode**: Light theme featuring a warm coffee brown (#4E342E), soft cream (#F5E6D3), and soft black (#222) for text.
- **Layout**: The landing page will follow a vertical scrolling structure with distinct sections for the hero, about, menu highlights, gallery, reasons to visit, and contact information.
- **Typography**: Modern fonts such as Poppins or Montserrat for headings and body text to ensure readability and a contemporary feel.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS for responsive design and utility-first styling.
- **UI Components**: Utilize shadcn/ui for clean and reusable components.
- **State Management**: Not required for this static landing page.

## IMPLEMENTATION STEPS
1. **Set up the React project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Tailwind CSS**: Configure Tailwind CSS according to the official documentation to handle styling.
3. **Create Components**: Develop reusable components for the Hero section, About section, Menu highlights, Gallery, and Contact. Ensure they are responsive.
4. **Implement Routing**: While this is a single-page application, set up basic routing if you plan to expand in the future.
5. **Add Images**: Gather and optimize images for the hero, menu items, and gallery to ensure fast loading times.
6. **Integrate Google Maps**: Embed Google Maps for location and ensure the WhatsApp button functions correctly for direct contact.

## USER EXPERIENCE
Visitors will be greeted with a visually appealing hero section that captures their attention, followed by a succinct introduction to the cafe. The menu highlight will showcase best-selling items, enticing users to explore further. The gallery will provide a visual representation of the cafe's atmosphere, enhancing the desire to visit. Clear calls-to-action will guide users to find the cafe's location or contact via WhatsApp, making the user journey straightforward and engaging.

This comprehensive prompt is designed to create an engaging and visually appealing landing page for Kertas Kerja Cafe, aligning with the user's vision while ensuring optimal user experience and responsiveness.