Elite Restaurant — Digital Menu & Ordering

Overview

Elite is a restaurant that runs several kitchens under one roof: two Western sections (Chick Fly and Different), the Elite Oven for manakish and pizza, an Aleppine kitchen led by Chef Dalal Al-Hennawi, the Crave It healthy section and Choco Melt desserts. We built it a fully Arabic, right-to-left digital menu that also takes orders. Guests can browse every kitchen, build one order and send it to the restaurant in a few taps on any device, with nothing to install.

What we built

• Cinematic landing hero: full-bleed food photography under a crimson gradient, the "مطعم Elite" title with the tagline "الذوق الفاخر" ("luxurious taste"), and quick buttons to open the menu or start a WhatsApp chat.
• Today's deals: a dark section for limited-time offers. Each deal card shows its discount badge (for example "Save 10%") and a "starting from" price.
• Multi-kitchen menu: six kitchen sections, each with its own logo. On desktop they sit in a tab bar that scrolls itself sideways. On phones they become a two-column grid of kitchen cards.
• Sub-category filters: inside each kitchen, pill filters such as fried chicken sandwiches, grilled chicken sandwiches, appetizers, fries and meals switch the product grid instantly, without reloading the page.
• Product cards: each card has a food photo, the item name, a description, the price in Syrian pounds and a quick-add button. "New" and "Featured" badges and an available add-ons note appear where they apply.
• Item detail modal: a large photo, the full description and contents, the price, sizes and add-ons where offered, and a note field for special requests. Next and previous arrows let guests move between items without closing the modal.
• Full order cart: quantity controls, a subtotal and total, coupon codes checked by the server, order notes and a clear-cart option.
• Pickup or delivery, WhatsApp or Telegram: delivery orders take an address and can share the guest's current location. The finished order goes to the restaurant as a formatted message over WhatsApp or Telegram.
• Order from your table: a dine-in flow where guests choose their table number, can pick a captain (waiter), and can add a name and phone number. The order goes straight to the restaurant's system, and the guest sees a confirmation.
• Customer reviews: an average rating and review cards on the page. A floating "Rate us" button opens a star-rating and comment form, and reviews are published only after the restaurant approves them.
• Contact and navigation: phone and WhatsApp contact cards, a footer with quick links, a sticky dark navigation bar with an "Order now" button, and a scroll progress bar.
• CMS-driven content: kitchens, categories, items, prices, deals, coupons, tables and reviews are managed from an admin panel, so the restaurant can update its menu without a developer.

Design approach

The palette comes from Elite's red badge logo: near-black surfaces with crimson accents and bold Cairo display type. The hero and deals sections are dark and dramatic. The menu sits on a clean white canvas with rounded cards, so the dark, studio-lit food photography stands out. The layout is right-to-left throughout and designed for phones first: the kitchens reflow into a two-column grid, products appear as two-up cards, item details open as a bottom sheet, and the cart slides in as a full-height drawer.

Technology

• Laravel backend with an admin CMS for kitchens, menu items, deals, coupons, tables and reviews
• Vite-built front end with Tailwind CSS utilities, the Cairo typeface and Font Awesome icons
• Arabic RTL layout (lang="ar" dir="rtl"), responsive from phone to desktop
• Cart kept in the browser, with order handoff through WhatsApp and Telegram deep links
• Server-side coupon validation and a dine-in order endpoint
• Review submission with CSRF protection and a moderation queue
• Scroll-reveal animations built on IntersectionObserver