Skip to content

VISUAL_GUIDE.md

Latest commit

 

History

History
228 lines (183 loc) · 11.1 KB

VISUAL_GUIDE.md

File metadata and controls

228 lines (183 loc) · 11.1 KB

Little Lemon Restaurant - Visual Guide

Page Previews

1. Home Page (/restaurant/)

┌─────────────────────────────────────────────────────────────┐
│ Logo  Little Lemon     [Home] [Menu] [Bookings] [About] ☰  │
└─────────────────────────────────────────────────────────────┘

╔═══════════════════════════════════════════════════════════╗
║                                                             ║
║         Welcome to Little Lemon                            ║
║  Experience the finest Mediterranean cuisine               ║
║                                                             ║
║           [Explore Our Menu]                               ║
║                                                             ║
╚═══════════════════════════════════════════════════════════╝

Why Choose Little Lemon?

┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐
│    🍋    │  │   👨‍🍳    │  │    🌟    │  │    📅    │
│  Fresh   │  │  Expert  │  │ Premium  │  │   Easy   │
│Ingredients│  │  Chefs   │  │ Service  │  │ Booking  │
└──────────┘  └──────────┘  └──────────┘  └──────────┘

Featured Dishes

┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│   [Image]   │ │   [Image]   │ │   [Image]   │
│             │ │             │ │             │
│ Gourmet     │ │ Grilled     │ │ Pasta       │
│ Salad       │ │ Steak       │ │ Primavera   │
│ $12.99      │ │ $28.99      │ │ $16.99      │
└─────────────┘ └─────────────┘ └─────────────┘

Ready to Dine With Us?
[Reserve a Table]

Footer with contact info and links

2. Menu Page (/restaurant/menu-page/)

┌─────────────────────────────────────────────────────────────┐
│ Logo  Little Lemon     [Home] [Menu] [Bookings] [About] ☰  │
└─────────────────────────────────────────────────────────────┘

╔═══════════════════════════════════════════════════════════╗
║              Our Menu                                       ║
║  Discover our exquisite selection                          ║
╚═══════════════════════════════════════════════════════════╝

┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│   [Food 1]  │ │   [Food 2]  │ │   [Food 3]  │
│ Gourmet     │ │ Grilled     │ │ Pasta       │
│ Salad       │ │ Steak       │ │ Primavera   │
│ $12.99      │ │ $28.99      │ │ $16.99      │
│ Avail: 100  │ │ Avail: 50   │ │ Avail: 75   │
└─────────────┘ └─────────────┘ └─────────────┘

┌─────────────┐ ┌─────────────┐ ┌─────────────┐
│   [Food 4]  │ │   [Food 5]  │ │   [Food 6]  │
│ Seafood     │ │ Dessert     │ │ Chef's      │
│ Platter     │ │ Special     │ │ Special     │
│ $32.99      │ │ $8.99       │ │ $24.99      │
│ Avail: 30   │ │ Avail: 100  │ │ Avail: 20   │
└─────────────┘ └─────────────┘ └─────────────┘

3. Bookings Page (/restaurant/bookings-page/)

┌─────────────────────────────────────────────────────────────┐
│ Logo  Little Lemon     [Home] [Menu] [Bookings] [About] ☰  │
└─────────────────────────────────────────────────────────────┘

╔═══════════════════════════════════════════════════════════╗
║         Reserve Your Table                                  ║
║   Book your dining experience at Little Lemon              ║
╚═══════════════════════════════════════════════════════════╝

┌────────────────────────────────────────────────┐
│       Make a Reservation                        │
│                                                 │
│ Full Name:                                      │
│ [________________________]                      │
│                                                 │
│ Number of Guests:                               │
│ [Select ▼]                                      │
│                                                 │
│ Date & Time:                                    │
│ [YYYY-MM-DD HH:MM]                             │
│                                                 │
│ Special Requests (Optional):                    │
│ [________________________]                      │
│ [________________________]                      │
│                                                 │
│      [Confirm Reservation]                      │
└────────────────────────────────────────────────┘

My Reservations

┌────────────────────────────────────────────────────┐
│ Name      │ Guests │ Date & Time         │ Action │
├───────────┼────────┼────────────────────┼────────┤
│ John Doe  │ 4      │ Jan 15, 2024 7:00PM│[Cancel]│
│ Jane Smith│ 2      │ Jan 20, 2024 8:30PM│[Cancel]│
└────────────────────────────────────────────────────┘

4. About Page (/restaurant/about/)

┌─────────────────────────────────────────────────────────────┐
│ Logo  Little Lemon     [Home] [Menu] [Bookings] [About] ☰  │
└─────────────────────────────────────────────────────────────┘

╔═══════════════════════════════════════════════════════════╗
║            About Little Lemon                               ║
║   Our story, our passion, our commitment                    ║
╚═══════════════════════════════════════════════════════════╝

Our Story
────────────────────────────────────────────────────
Little Lemon was founded with a simple vision: to bring
the authentic flavors of Mediterranean cuisine to the
heart of Chicago. What started as a small family
restaurant has grown into a beloved dining destination...

Our Philosophy
────────────────────────────────────────────────────
We believe that great food starts with great
ingredients. That's why we partner with local
farmers and suppliers...

[Restaurant Interior Image]

Our Values

┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐
│    🌱    │  │    ❤️     │  │    👥    │  │    🎨    │
│Sustain-  │  │ Quality  │  │Community │  │Innovation│
│ability   │  │          │  │          │  │          │
└──────────┘  └──────────┘  └──────────┘  └──────────┘

[Make a Reservation]

Design Features Demonstrated

Navigation

  • Sticky header that stays visible
  • Mobile hamburger menu (☰)
  • Active page highlighting
  • Smooth transitions

Hero Sections

  • Full-width gradient backgrounds
  • Large typography
  • Clear call-to-action buttons
  • Professional imagery

Cards

  • Consistent card design
  • Hover effects (subtle lift)
  • Image + text + price layout
  • Responsive grid

Forms

  • Clean, intuitive design
  • Proper labeling
  • Validation feedback
  • Large touch targets

Tables

  • Clear column headers
  • Alternating row colors on hover
  • Action buttons
  • Responsive (mobile scrollable)

Footer

  • Multi-column layout
  • Quick links
  • Contact information
  • Hours of operation

Responsive Behavior

Desktop (> 768px)

  • 3-column card grids
  • Horizontal navigation
  • Side-by-side layouts
  • Full-width hero

Tablet (768px)

  • 2-column card grids
  • Adjusted spacing
  • Maintained navigation
  • Optimized typography

Mobile (< 768px)

  • Single-column layouts
  • Hamburger menu
  • Stacked sections
  • Touch-optimized buttons

Animation Timeline

On Page Load

  1. Hero content fades in (0-0.5s)
  2. Navigation slides in from top (0.3s)
  3. Cards appear with stagger (0.5s+)

On Scroll

  1. Elements detect when visible
  2. Fade + slide up animation
  3. Staggered timing for groups
  4. Runs once per element

On Interaction

  1. Buttons: hover scale + shadow
  2. Links: underline animation
  3. Cards: lift effect
  4. Forms: focus highlights