Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a landing page for a coffee shop that embodies a質感黑金風格 (black and gold texture style) with a minimalist aesthetic. The main purpose is to create an engaging and informative entry point for visitors, showcasing the café's offerings, ambiance, and unique selling points to encourage visits and conversions.

## CORE FEATURES
1. **Hero Section**: A visually striking introduction with the café's name, tagline, and a call-to-action (CTA) button for reservations or menu access.
2. **Features Section**: Highlights of the café's specialties, including signature drinks and food items, presented with appealing visuals and brief descriptions.
3. **Gallery Section**: A collection of high-quality images showcasing the café's interior, ambiance, and food, presented in a grid format.
4. **Testimonials Section**: Customer reviews and testimonials that build trust and provide social proof.
5. **Contact Section**: Essential information including location, hours of operation, and a simple contact form for inquiries.
6. **Footer**: Links to social media, additional resources, and a subscription form for newsletters.

## 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 main layout will consist of a vertical stack of sections, starting with the hero, followed by features, gallery, testimonials, contact, and footer. Each section will have ample spacing and clear visual hierarchy to enhance readability.

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

## 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 to the project.
3. **Create Main Layout**: Structure the landing page using a main App component that houses the different sections.
4. **Develop Hero Section**: Implement the hero section with a background image and overlay text, along with a prominent CTA button.
5. **Build Features Section**: Create a grid or card layout for showcasing the café's offerings with images and descriptions.
6. **Add Gallery Section**: Use a responsive grid to display images of the café and its products.
7. **Implement Testimonials Section**: Design a section for customer testimonials, ensuring easy readability and visual appeal.
8. **Create Contact Section**: Include a form for inquiries and display café contact information.
9. **Footer**: Add links for social media and a newsletter subscription form.
10. **Responsive Design**: Ensure all sections are responsive and visually appealing on various screen sizes.

## USER EXPERIENCE
Users will have a seamless experience navigating through the landing page, starting from the eye-catching hero section that draws them in, to discovering the café’s specialties and ambiance through well-placed visuals and testimonials. The contact section will facilitate easy inquiries, making it simple for potential customers to engage with the café. The overall design will maintain a clean and minimalist approach, allowing users to focus on the content without distractions.