Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project involves creating a landing page for a restaurant, designed with a refined editorial-minimalist aesthetic. The site will utilize separate TanStack routes for proper server-side rendering (SSR) and search engine optimization (SEO), showcasing the restaurant's offerings while maintaining a clean and engaging user experience.

## CORE FEATURES
1. **Hero Section**: A full-bleed restaurant image featuring an oversized serif tagline, and primary and secondary calls to action ("Reserve a Table" and "View Menu").
2. **Featured Dishes Teaser**: A section displaying a preview of three featured dishes that link to the full menu.
3. **About Preview**: A two-column layout with an image and a brief story about the restaurant, linking to the full About page.
4. **Testimonials**: An editorial-style layout featuring three customer testimonials with names, enhancing credibility and engagement.
5. **Newsletter Signup**: Inline email input for newsletter subscriptions, with client-side validation and success toast on submission.
6. **Menu Page**: A clean grid layout showcasing the full menu with sections for Starters, Mains, Desserts, and Drinks, each item displaying an image, name, description, and price.

## 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 be asymmetric with generously spaced sections, utilizing oversized typography for emphasis and subtle grain textures for depth.

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

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a React project with TypeScript and install necessary dependencies including Tailwind CSS and Framer Motion.
2. **Create Routes**: Set up file-based routes in the `src/routes/` directory, including `index.tsx`, `menu.tsx`, `about.tsx`, and `contact.tsx`.
3. **Header and Footer**: Implement a shared header and footer in `__root.tsx`, ensuring navigation between routes using TanStack `<Link>`.
4. **Design Sections**: Develop each section on the homepage including the Hero, Featured Dishes, About, Testimonials, and Newsletter.
5. **Menu Page**: Create a structured menu display with grouped sections and ensure it links back to the homepage.
6. **About and Contact Pages**: Develop the about page with a long-form story and team photo, and the contact page with an embedded Google Map and a contact form.
7. **Form Validation**: Implement zod schemas for client-side validation on forms and display success toast messages upon submission.
8. **Styling**: Utilize Tailwind CSS to apply the design specifications, ensuring a cohesive and attractive visual presentation.

## USER EXPERIENCE
Users will first be greeted by a visually striking hero section that invites them to either reserve a table or view the menu. As they scroll, they will encounter engaging sections that highlight featured dishes, share the restaurant's story, and display customer testimonials, all designed to encourage exploration. The newsletter signup will be unobtrusive yet accessible, enhancing user engagement without detracting from the overall aesthetic. Each section will be seamlessly linked, providing an intuitive navigation experience throughout the site.