Portfolio / Selected work / Hawa Restaurant
Hawa Restaurant
An independent restaurant website rebuild focused on food discovery, gathering enquiries and a distinctive emerald-and-saffron visual identity. Recreated from the original web experience with editable WordPress and Elementor pages.
Project
Restaurant website rebuild
Role
UI/UX implementation & WordPress development
Platform
WordPress / Elementor / UAE / WPForms
Year
2026
On this page
01 Overview 02 The problem 03 My role 04 Technical approach 05 Design decisions 06 Challenges 07 Outcome 08 Evidence01 Overview
Hawa Restaurant & Party Centre is a multi-page restaurant website experience built in WordPress. The design combines a bold biryani-led hero, an illustrated fifteen-dish menu, category filtering, a selection drawer and a separate gathering-enquiry flow.
The pages use native Elementor elements and Full Width layouts, reusable UAE header and footer templates, custom CSS, and JavaScript for menu selection and interaction. WPForms handles gathering enquiries that prepare a WhatsApp message rather than automatically confirming reservations.
02 The problem
The challenge was reproducing a distinctive restaurant website in a visually editable WordPress environment without losing its expressive typography, food imagery, responsive layouts or practical enquiry flow.
• Preserve the original green, cream and saffron palette, editorial headings and food-first composition.
• Present fifteen menu dishes clearly, with working categories, search and a custom selection interface.
• Make gathering enquiries easy while clearly distinguishing requests from confirmed reservations.
03 My role
I rebuilt the restaurant pages using Elementor and Astra, configured shared UAE header and footer templates, styled the hero and food cards, integrated menu imagery, and implemented JavaScript-powered category filtering and selection logic. I also created the WPForms gathering-enquiry page and WhatsApp message flow.
04 Technical approach
WordPress and Elementor
Astra provides the WordPress foundation. Native Elementor containers, headings, images and buttons keep the site editable. UAE manages the shared header and footer across pages.
Restaurant page system
The website includes the Home, Menu, Checkout Enquiry, Enquiry Help and Plan a Gathering pages, with coordinated typography, food imagery, responsive sections and consistent calls to action.
Food menu and discovery
The fifteen-dish menu supports category filtering and text search. Food cards lead into a custom selection drawer where visitors adjust quantities before preparing their enquiry.
Gathering enquiry via WhatsApp
WPForms collects name, phone, estimated guests, preferred table number, date, time and optional requests. Successful submission prepares a prefilled WhatsApp message; guests must still send it, and Hawa must confirm availability.
Motion and interactions
Scoped CSS and JavaScript provide smooth scrolling, responsive navigation, subtle motion, native controls and selection persistence. Reduced-motion preferences are respected where supported.
Content and clarity
The layout separates menu browsing from sending enquiries, labels illustrative dish photography, and avoids presenting an enquiry as a confirmed reservation or payment.
05 Design decisions
Deep emerald backgrounds, saffron accents, warm cream content panels and large food imagery establish the visual identity. Manrope supports readable UI copy, while Cormorant Garamond provides expressive headline contrast.
The homepage uses a large layered biryani hero and three featured dishes. The main menu keeps categories and prices scannable, while mobile layouts preserve readable calls to action and clear navigation.
06 Challenges
Matching the original in Elementor
Reproducing the reference composition required careful grid and flex behavior, precise typography, image sizing and scoped CSS while keeping every major section editable.
Cart and enquiry behavior
A custom JavaScript selection drawer stores chosen dishes and quantities across page navigation. It remains distinct from WooCommerce's native cart and prepares enquiries rather than processing payments.
Responsive design consistency
The hero image, text arrangement, featured cards, footer and gathering page needed iterative adjustments to prevent clipping, misalignment and tiny controls on smaller screens.
07 Outcome
The result is a five-page restaurant experience with an editable WordPress frontend, an illustrated fifteen-item menu, filtering, persistent selection, and a WPForms-to-WhatsApp gathering enquiry.
This is an independent web-development case study. It demonstrates implementation and interaction design; no confirmed reservations, paid commissions, conversion lifts, Lighthouse scores or pixel-perfect claims are asserted.
08 Evidence
The image below shows food imagery used in the Hawa Restaurant website design. Explore the live site to see the complete hero, menu layout, gatherings page and responsive interactions.
01 / IDENTITY
Emerald and saffron
Deep green, warm cream, vivid saffron and editorial type build a recognizable restaurant aesthetic.
02 / MENU
Fifteen illustrated dishes
Searchable categories and dish imagery with a custom selection-and-enquiry interface.
03 / WORDPRESS
Editable Elementor build
WordPress, Astra, Elementor and UAE, supported by scoped styles, scripts and WPForms.
04 / GATHERINGS
WhatsApp enquiry flow
A dedicated gathering form prepares the guest's details in WhatsApp for restaurant confirmation.