Al Tayeb — Restaurant Digital Menu

Overview

Al Tayeb (مطعم الطيب) is a restaurant in Al-Malki, Damascus, that calls itself "the house of broasted and grills". It serves fried and grilled chicken, shawarma and wraps, and highlights its own line of "more than 18 years of experience". We built it a fully Arabic, right-to-left digital menu. Guests can browse the dishes, check sizes and prices, and put together an order on any device, with nothing to install.

What we built

• Brand-led landing hero: a warm cream-and-red opening with a framed signature photo of the restaurant's broasted chicken. The headline reads "مطعم الطيب" with the accent line "18 عاماً من الخبرة" ("18 years of experience"). Buttons open the menu or start a WhatsApp chat, and an address chip shows the location.
• Menu with category tabs: a tabbed menu section, "اكتشف نكهاتنا" ("discover our flavours"), with a responsive grid of 15 dishes, including broasted meals, chicken and meat shawarma sandwiches, Arabic shawarma plates and wraps.
• Product cards: each card shows a food photo, the dish name, a short description and the price in Syrian pounds. Dishes that come in more than one size list their sizes on the card, such as large and medium sandwiches.
• Item detail view: a large photo, a size picker that updates the price, an optional note field for each item (for example "no onions") and an "add to order" button. Arrows let guests step through all dishes without closing the view.
• Order basket: a slide-out basket with item thumbnails, quantity controls, a running total and order notes. A floating basket button shows the item count, and the basket is saved in the browser, so it is still there after a page reload.
• Kitchen reels: a red "شاهد واستمتع" ("watch and enjoy") band with a coverflow carousel of short videos from the kitchen. Uploaded videos play in a built-in player.
• Contact block: cards for phone, WhatsApp and the restaurant's location, with a Google Maps link and Facebook and Instagram profiles.
• Customer reviews: an average star rating with the review count, review cards, and a "شارك تقييمك" ("share your review") form for a star rating, name and comment. New reviews are published only after the restaurant approves them. A floating "قيّمنا" ("rate us") button keeps the form one tap away.
• Managed content: dishes, sizes, prices, photos, reels and contact details all come from the platform's admin panel, so the restaurant can update its menu itself.

Design approach

The visual language follows the brand's red packaging. Headings are set in El Messiri on a soft cream canvas, with italic red accent words such as "نكهاتنا", and body text is in Cairo. A deep wine tone replaces pure black for text. Details include ornamental dividers with a diamond motif, soft red glows behind the hero, gradient buttons with a shine sweep, a scroll progress bar, and sections that fade up as visitors scroll. On desktop, the hero photo and menu cards tilt gently under the cursor. The layout is right-to-left throughout and designed for phones first: the menu reflows into a two-column grid, navigation moves into a compact menu, and the item details and basket open full-screen.

Technology

• Laravel backend with an admin CMS for menu items, sizes, reels and reviews
• Vite-built front end with Tailwind CSS, Font Awesome icons and Google Fonts (Cairo, El Messiri)
• Arabic RTL layout (lang="ar" dir="rtl"), responsive from phone to desktop
• Client-side order basket kept in the browser, and WhatsApp and phone deep links
• Review submission with CSRF protection and a moderation queue