Eco Choice Group — seven brands, one digital ecosystem.

Overview

Eco Choice Group is a UAE food innovation group. Its portfolio runs from B2B wholesale (Al Wholesale) and Halal meat manufacturing (Al Chef To Home) to farming (Emirate Farms), restaurants (O’Bites, Fuego), natural water (Go-si) and projects still in development.

The group needed one corporate home that could present seven brands without making them look identical — and turn interest into a real enquiry. I built the seven-page site (Home, About, Brands, Services, Sustainability, Events and Contact) with a shared design system, page-specific interactions and a PHP contact handler.

The challenge

A group site has a tension at its centre: the parent brand needs consistency, while every child brand needs its own personality. Add a sustainability story, an events programme and a lead form, and the site can easily become a brochure nobody finishes.

• Seven brands, one voice: shared navigation and layout without flattening each brand’s identity.
• Sustainability must feel credible: SDG mapping, four impact pillars and specific commitments, not a green badge.
• Events are visual: Gulfood, Culinary Guild and Make it in the Emirates need a gallery that stays fast with heavy images.
• The form has to actually deliver: no CMS or app backend — just Apache and PHP.
• A small team must maintain it: plain HTML, CSS and JS with no build step or dependency lock-in.
• Mobile-first: most corporate traffic arrives on a phone, often from a link or a message.

What I built

The result is a static site with a designed system underneath — so seven brands feel related without looking cloned.

• Seven-page architecture: shared header and footer, active navigation state and a consistent section system across every page.
• Brand portfolio: seven brand profiles with category filters (All, Trading, Food & Meat, Restaurants, Farming, Water), alternating layouts and brand-specific accents.
• Design system: a 1,334-line custom stylesheet, Cormorant Garamond and Plus Jakarta Sans, and a green, navy and gold palette with reusable cards, buttons and editorial blocks.
• Motion layer: sticky nav, IntersectionObserver reveals, animated counters and a subtle cursor glow on desktop.
• Editorial pages: a group timeline from 2018, vision and mission, six service capabilities, the full value chain and four sustainability pillars.
• Sustainability: impact numbers, UN SDG mapping and concrete commitments across sourcing, packaging and community.
• Events: an exhibition timeline and a click-to-zoom gallery for Gulfood, Culinary Guild and industry events.
• Contact experience: a structured enquiry form, FAQ accordions and clear success and error states.

The enquiry flow

The contact form is the one place where the site stops being static. It posts asynchronously to a PHP handler and returns a JSON response, so the page never reloads.

• Client-side experience: a fetch request with a disabled submit button, loading state and inline success or error messaging.
• Server-side validation: required fields, email format and interest selection are checked again in PHP.
• Branded admin email: a structured HTML email with name, company, phone, interest, consent and message.
• Auto-reply: the sender gets a branded confirmation with the group’s brand links and a 24-hour response promise.
• Graceful failure: validation and mail failures return readable errors instead of a blank page.

It is deliberately dependency-free: PHP’s mail(), a handful of validation rules and no database. For a corporate site, that is the right amount of backend.

Scope & impact

The site gives the group a single, coherent home while keeping each brand distinct — and turns the contact page into a working lead channel.

Tech stack