Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Focaccia JT is a landing page for a restaurant inspired by the Subway or Qbano concept, offering a unique selection of focaccia-based dishes. The primary purpose of this landing page is to attract customers, showcase the menu, and encourage online orders or reservations while maintaining a clean and minimalist design.

## CORE FEATURES
1. **Hero Section**: An engaging hero banner featuring the restaurant's name, a delicious image of focaccia, and a prominent call-to-action button for ordering online or viewing the menu.
2. **Menu Showcase**: An attractive section displaying various focaccia options with images and descriptions to entice visitors.
3. **About Us**: A brief section introducing the restaurant's concept and mission, emphasizing quality ingredients and unique offerings.
4. **Customer Testimonials**: A section featuring reviews and testimonials from satisfied customers to build trust and credibility.
5. **Contact Information**: Easy-to-find contact details, including phone number, email, and location, along with an embedded map for directions.
6. **Call to Action**: A clear and compelling call-to-action section encouraging visitors to place an order or make a reservation.

## 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 structure will follow a single-page format with sections stacked vertically, each clearly defined for easy navigation.

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

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript using Create React App.
2. **Install Tailwind CSS**: Follow the Tailwind CSS installation guide to integrate it into your React project.
3. **Create Components**: Develop individual components for each section (Hero, Menu, About Us, Testimonials, Contact, CTA).
4. **Implement Layout**: Use Tailwind CSS classes to create a responsive layout that adapts to different screen sizes.
5. **Add Inter Font**: Import the Inter font from Google Fonts and apply it to headings and body text.
6. **Style Components**: Style each component using Tailwind CSS, applying the primary color and border radius as specified.
7. **Test Responsiveness**: Ensure the landing page looks great on various devices and screen sizes, adjusting styles as necessary.
8. **Deploy the Landing Page**: Use a platform like Vercel or Netlify to deploy the landing page for public access.

## USER EXPERIENCE
Visitors will be greeted with an inviting hero section that immediately captures their attention. The menu showcase will allow users to easily browse options, while the about us and testimonials sections build credibility. The contact information will be readily accessible, facilitating easy communication. Clear calls to action will guide users toward making orders or reservations, ensuring a smooth and engaging experience.