# El Sabor Mexican Grill Template

An upscale Mexican restaurant website template built with the Responsive Slot Layout (RSL) framework. Inspired by modern fine-dining Mexican restaurants, this template features a rich burgundy and gold color scheme with elegant typography.

## Preview

Open `index.html` in your browser to preview the template.

## Features

- **Single-page design** with smooth scrolling navigation
- **Responsive layout** optimized for all devices
- **Dark mode support** with theme toggle
- **Accessibility-first** design (WCAG 2.1 AA compliant)
- **Reservation form** with date/time selection
- **Photo gallery** with lightbox functionality
- **Animated statistics** counters
- **Customer testimonials** with star ratings
- **Tab-based menu** with category filtering

## Sections Included

1. **Hero** - Full-screen background with call-to-action buttons
2. **About** - Restaurant story with features
3. **Stats** - Animated counters (Years, Guests, Rating, Menu Items)
4. **Menu** - Tabbed display with Appetizers, Mains, Drinks, Desserts
5. **Gallery** - Photo grid with lightbox
6. **Testimonials** - Customer reviews with star ratings
7. **Hours & Location** - Business hours and contact info
8. **Reservation** - Contact form for table bookings
9. **Footer** - Quick links, contact, social media

## RSL Components Used

This template showcases 10 RSL components:

| Component | Purpose |
|-----------|---------|
| **Grid** | Responsive layout system |
| **Navbar** | Sticky navigation with mobile toggle |
| **Stats** | Animated counter display |
| **Cards** | Menu item presentation |
| **Tabs** | Menu category switching |
| **Gallery** | Photo grid with lightbox |
| **Testimonial** | Customer reviews |
| **Star Rating** | 5-star rating display |
| **Form Elements** | Styled form inputs |
| **Accessibility Widget** | A11y controls |

## Customization

### Colors

The template uses CSS custom properties for easy theming. Edit `mexican-restaurant-style.css`:

```css
:root {
    /* Primary Colors */
    --restaurant-burgundy: #6B1D1D;
    --restaurant-burgundy-dark: #4A1414;
    --restaurant-gold: #D4A853;
    --restaurant-gold-light: #E5C07B;

    /* Neutral Colors */
    --restaurant-charcoal: #1A1A1A;
    --restaurant-cream: #F5F0E8;
}
```

### Typography

The template uses Google Fonts:
- **Playfair Display** - Headings and display text
- **Lato** - Body text

To change fonts, update the Google Fonts link in `index.html` and the CSS variables.

### Images

All images use Unsplash for placeholders. Replace with your own:
- Hero background: Update URL in `.hero-section` CSS
- Menu items: Update `src` attributes on `<img>` tags
- Gallery: Update images in the `.rsl-gallery` section

### Content

1. Update restaurant name and branding
2. Replace menu items and prices
3. Update hours and contact information
4. Replace testimonials with real reviews
5. Update social media links in footer

## Accessibility Features

- Skip links for keyboard navigation
- ARIA labels and roles throughout
- Keyboard-navigable tabs with arrow key support
- Focus management for smooth scrolling
- High contrast color combinations
- Screen reader-friendly structure
- Accessibility widget for user preferences

## Installation

1. Extract the template folder
2. Open `index.html` in your browser
3. All dependencies are included locally

## File Structure

```
mexican-restaurant-template/
├── index.html                      # Main template file
├── mexican-restaurant-style.css    # Custom styles (~320 lines)
├── mexican-restaurant-script.js    # Custom scripts
├── README.md                       # This file
├── LICENSE                         # MIT License
├── styles/                         # RSL CSS files
├── javascript/                     # RSL JavaScript files
└── images/                         # RSL images (favicons, etc.)
```

## Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## Credits

- Built with [Responsive Slot Layout (RSL)](https://rslayout.com)
- Fonts from [Google Fonts](https://fonts.google.com/)
- Icons from [Font Awesome](https://fontawesome.com/)
- Placeholder images from [Unsplash](https://unsplash.com/)

## License

MIT License - Free to use for personal and commercial projects.
