/* global React, ReactDOM */ const { useState, useEffect, useMemo, useRef } = React; const D = window.ALGEDRA_DATA; /* ───────────────────────────────────────────────────────────────────────────── Small primitives ───────────────────────────────────────────────────────────────────────── */ const Eyebrow = ({ children, mono = false }) => (
{children}
); const Rule = ({ inset = 0 }) => (
); const SectionLabel = ({ index, label }) => (
{index} {label}
); const ArrowLink = ({ children, onClick, dir = "→" }) => ( ); const Btn = ({ children, onClick, kind = "primary", as = "button", href }) => { const cls = `btn btn--${kind}`; if (as === "a") return {children}; return ; }; /* Algedra rosette mark — abstracted from the logo, NOT a copy. */ const Rosette = ({ size = 36, color = "currentColor" }) => ( {Array.from({ length: 16 }).map((_, i) => { const a = (i * Math.PI * 2) / 16; const x1 = 32 + Math.cos(a) * 22.5, y1 = 32 + Math.sin(a) * 22.5; const x2 = 32 + Math.cos(a) * 30.5, y2 = 32 + Math.sin(a) * 30.5; return ; })} {Array.from({ length: 4 }).map((_, i) => { const a = (i * Math.PI) / 2; const cx = 32 + Math.cos(a) * 10, cy = 32 + Math.sin(a) * 10; return ; })} ); /* ───────────────────────────────────────────────────────────────────────────── Top navigation ───────────────────────────────────────────────────────────────────────── */ const NAV_ITEMS = [ { id: "projects", label: "Projects" }, { id: "sectors", label: "Sectors" }, { id: "services", label: "Services" }, { id: "fit-out", label: "Fit-Out" }, { id: "about", label: "About" }, { id: "awards", label: "Awards" }, { id: "contact", label: "Contact" }, ]; function Nav({ route, go, lang, setLang, openEnquiry }) { return (
{["EN", "AR", "RU", "ZH"].map((l) => ( ))}
); } /* ───────────────────────────────────────────────────────────────────────────── Footer ───────────────────────────────────────────────────────────────────────── */ function Footer({ go, openEnquiry }) { return ( ); } /* ───────────────────────────────────────────────────────────────────────────── Home ───────────────────────────────────────────────────────────────────────── */ function Home({ go, openEnquiry }) { const featured = useMemo(() => [ D.projects.find(p => p.id === "emirates-hills-villa"), D.projects.find(p => p.id === "fitout-china-avenue"), D.projects.find(p => p.id === "signature-neutral-townhouse"), D.projects.find(p => p.id === "abu-dhabi-hospital"), D.projects.find(p => p.id === "fitout-hills-signature-villa"), D.projects.find(p => p.id === "luxury-beauty-salon"), ], []); return (
{/* HERO */}
Dubai · since 2013 · all seven emirates

Luxury interior design,
architecture & turnkey
fit-out, from Dubai.

A full-service studio that authors a project and hands you the keys — residential, hospitality, commercial, retail and healthcare across the GCC, MENA and beyond.

Start a project go({ name: "projects" })}>See selected work
AwardDIAFA 2022 · Best Interior Designer
AwardLuxury Lifestyle Awards 2022
AwardArabian Award 2024
StudioJLT, Dubai · Istanbul · London · New York
{/* SELECTED WORK */}

Six projects, six rooms, one studio.

go({ name: "projects" })}>View all projects
{featured.map((p, i) => (
go({ name: "project", id: p.id })} >
{p.title}
No. {String(i + 1).padStart(2, "0")}

{p.title}

{p.sector} · {p.location} · {p.type}
))}
{/* SECTORS STRIP */}

A studio that works across every kind of room.

{D.sectors.map((s, i) => ( ))}
{/* SERVICES */}

From concept to the last screw.

ALGEDRA authors and delivers. Every line below is sold as standalone, or as part of an end-to-end turnkey programme — the way most of our residential clients prefer it.

{D.services.map((s, i) => (
{String(i + 1).padStart(2, "0")}

{s.title}{s.featured && Turnkey}

{s.body}

))}
{/* APPROACH */}
04 — Our approach

We are not a thumbnail grid.
We are a case study.

  1. i

    Brief

    Two studio visits, a written brief, a single point of contact.

  2. ii

    Concept

    Mood, plan, palette and a built 3D walkthrough.

  3. iii

    Materials & light

    Specified to a level a contractor can build without a phone call.

  4. iv

    Fit-out

    Our own build team — joinery atelier, MEP coordination, finishing.

  5. v

    Handover

    Styled, art-placed, snagged, photographed.

{/* AWARDS STRIP */}
{D.awards.map((a, i) => (
{a.year}
{a.title}
{a.issuer}
{a.recipient}
))}
); } /* ───────────────────────────────────────────────────────────────────────────── Projects (filterable) ───────────────────────────────────────────────────────────────────────── */ function Projects({ go, initialFilter = "All" }) { const [filter, setFilter] = useState(initialFilter); const [typeFilter, setTypeFilter] = useState("All"); const [view, setView] = useState("grid"); // grid | index const filters = ["All", ...D.sectors.map(s => s.id)]; const types = ["All", "Interior Design", "Fit-Out"]; const visible = D.projects.filter(p => (filter === "All" || p.sector === filter) && (typeFilter === "All" || p.type === typeFilter) ); return (
Projects · {visible.length} of {D.projects.length}

The portfolio.
Filterable by what you came for.

Every project below is a working case study — brief, concept, materials, process and outcome. Per-project metadata is shown where the client has confirmed publication.

Sector
{filters.map(f => ( ))}
Discipline
{types.map(t => ( ))}
View
{view === "grid" ? (
{visible.map((p, i) => (
go({ name: "project", id: p.id })}>
{p.title}
{String(i + 1).padStart(2, "0")} / {String(visible.length).padStart(2, "0")}

{p.title}

{p.sector}· {p.type}· {p.location}
))}
) : ( {visible.map((p, i) => ( go({ name: "project", id: p.id })}> ))}
No.ProjectSectorDisciplineLocation
{String(i + 1).padStart(2, "0")} {p.title} {p.sector} {p.type} {p.location} View case study →
)}
); } /* ───────────────────────────────────────────────────────────────────────────── Case study ───────────────────────────────────────────────────────────────────────── */ function CaseStudy({ id, go, openEnquiry }) { const p = D.projects.find(pr => pr.id === id) || D.projects[0]; const idx = D.projects.indexOf(p); const prev = D.projects[(idx - 1 + D.projects.length) % D.projects.length]; const next = D.projects[(idx + 1) % D.projects.length]; const [lightbox, setLightbox] = useState(null); return (
· {p.sector} · {p.type}
Case study · No. {String(idx + 1).padStart(2, "0")}

{p.title}

{p.title}
{[ ["Sector", p.sector], ["Discipline", p.type], ["Location", p.location], ["Year", p.year], ["Floor area", p.area], ["Scope", "Concept → fit-out"], ].map(([k, v]) => (
{k}
{v || "—"}
))}

Brief

{p.brief}

Concept

{p.concept}

Materials & light

{p.materials}

Process

{p.process}

{p.outcome && p.outcome !== "—" && (

Outcome

{p.outcome}

)}
{p.gallery && p.gallery.length > 1 && (
{p.gallery.map((g, i) => ( ))}
)} {lightbox && (
setLightbox(null)}>
)}
); } /* ───────────────────────────────────────────────────────────────────────────── Sectors & per-sector ───────────────────────────────────────────────────────────────────────── */ function Sectors({ go }) { return (
Sectors

One studio.
Five kinds of room.

Residential is our heartland; we deliver hospitality, commercial, retail and healthcare with the same level of authorship and the same in-house fit-out team.

{D.sectors.map((s, i) => { const examples = D.projects.filter(p => p.sector === s.id).slice(0, 3); return (
go({ name: "sector", id: s.id })}>
0{i + 1}

{s.label}

{s.blurb}

{D.projects.filter(p => p.sector === s.id).length} projects →
{examples.map(p => (
{p.title}
{p.title}
))}
); })}
); } function SectorPage({ id, go }) { const sec = D.sectors.find(s => s.id === id); if (!sec) return ; return (
Sector · {sec.label}

{sec.label}.

{sec.blurb}

); } /* ───────────────────────────────────────────────────────────────────────────── Fit-Out ───────────────────────────────────────────────────────────────────────── */ function FitOut({ go, openEnquiry }) { const fits = D.projects.filter(p => p.type === "Fit-Out"); return (
Turnkey · all seven emirates

Most studios design.
We design and build.

Our in-house atelier, joinery, MEP coordination and finishing team mean we hand back a styled and snagged residence, restaurant or commercial floor — not a drawing set.

{["Dubai", "Abu Dhabi", "Sharjah", "Ajman", "Al Ain", "Fujairah", "Ras Al Khaimah"].map(em => (
{em}
))}
{fits.map((p, i) => (
go({ name: "project", id: p.id })}>
{p.title}
{String(i + 1).padStart(2, "0")}

{p.title}

{p.sector}·{p.location}
))}
{[ ["01", "Design lock", "Drawings, FF&E and spec frozen at the end of design — no scope creep in build."], ["02", "Procurement", "Joinery to our atelier; long-lead imports placed against a costed schedule."], ["03", "Site", "Single foreperson, daily report, weekly client walkthrough."], ["04", "Finishing", "Our own painter and stone team — never a sub-of-a-sub."], ["05", "Handover", "Styled, art-placed, photographed; one defects window then sign-off."] ].map(([n, t, b]) => (
{n}

{t}

{b}

))}

Have a turnkey brief?

Start a project
); } /* ───────────────────────────────────────────────────────────────────────────── About / Awards / Contact ───────────────────────────────────────────────────────────────────────── */ function About({ go }) { return (
About · since 2013

A studio that authors a project
and hands you the keys.

ALGEDRA was founded in Dubai in 2013 by Mohab Ayoub with a focus on high-end residential interiors. Twelve years on, the studio has grown into a full-service practice — interior design, architecture, exterior, landscape and turnkey fit-out — operating from Jumeirah Lake Towers in Dubai, with offices in Istanbul, London and New York.

We work across residential (our heartland — villas, palaces, penthouses, apartments and majlis), hospitality, commercial, retail and healthcare. Our clients are mostly private — families, founders, investors — across the GCC, MENA, Türkiye, Russia and Europe.

We share a single point of view: luxury, exquisite, stunning, elegant, brilliant. We let the work speak.

A reception interior, residential — ALGEDRA visualisation studio.
{D.team.map((t) => (
PORTRAIT
TO BE SUPPLIED
{t.name}
{t.role}
{t.note &&
{t.note}
}
))}
{[ ["2013", "founded, in Dubai"], ["4", "international offices"], ["7/7", "UAE emirates served, turnkey"], ["100+", "completed projects (figure to be confirmed by client)"] ].map(([n, l]) => (
{n}
{l}
))}
); } function Awards() { return (
Recognition

Awards & recognition.

Attributed by issuer, year and recipient. We do not publish star ratings or aggregated review scores — the firm has no publicly verified star rating, and we won’t invent one.

{D.awards.map((a, i) => (
{a.year}
{a.title}
{a.issuer}
{a.recipient}
Certificate to be supplied
))}
Press & jury enquiries — hello@algedra.ae
); } function Contact({ openEnquiry }) { return (
Contact

Talk to the studio.

{D.offices.map(o => (
{o.city}{o.primary && HQ}
{o.country}
{o.address}
{o.primary && ( )}
))}
JBC 3 · Cluster Y · JLT
Office 1501 · 15th floor
Map coordinates to be confirmed with client before embed.

A brief is the shortest path.

Tell us about the project — sector, location, scope, deadline.
We respond within one working day.

Start a project
); } /* ───────────────────────────────────────────────────────────────────────────── Services page ───────────────────────────────────────────────────────────────────────── */ function ServicesPage({ openEnquiry }) { return (
Services

Six lines.
One studio.

Each line is sold as standalone, or — most often — as part of an end-to-end turnkey programme.

{D.services.map((s, i) => (
{String(i + 1).padStart(2, "0")}
{s.title} {s.featured && Turnkey · the differentiator}
{s.body}
))}
); } /* ───────────────────────────────────────────────────────────────────────────── Enquiry drawer ───────────────────────────────────────────────────────────────────────── */ function EnquiryDrawer({ open, close }) { const [step, setStep] = useState(1); const [form, setForm] = useState({ name: "", email: "", phone: "", type: "Residential", scope: "Interior design + fit-out", location: "Dubai", budget: "—", timeline: "Within 6 months", message: "" }); const set = (k, v) => setForm(f => ({ ...f, [k]: v })); const [sent, setSent] = useState(false); useEffect(() => { if (!open) { setStep(1); setSent(false); } }, [open]); return ( <>