// mart-app.jsx — Mart® homepage prototype. const { useState, useEffect, useRef, useMemo } = React; // ─── Tiny SVGs ─────────────────────────────────────────────────────────── const ArrowRight = ({ s = 14 }) => ( ); const ArrowUpRight = ({ s = 14 }) => ( ); const Check = ({ s = 12 }) => ( ); const MartWordmark = ({ height = 18 }) => ( // Inline white "Mart®" wordmark — sourced from supplied media/logo-mart-white.svg ); // ─── Nav ───────────────────────────────────────────────────────────────── function Nav({ copy, locale, setLocale, t }) { const [scrolled, setScrolled] = useState(false); useEffect(() => { const fn = () => setScrolled(window.scrollY > 8); window.addEventListener("scroll", fn, { passive: true }); fn(); return () => window.removeEventListener("scroll", fn); }, []); return (
{copy.nav.join} {copy.nav.quote}
); } // ─── Hero ──────────────────────────────────────────────────────────────── function Hero({ copy, heroIdx, setHeroIdx, useGreenHeadline }) { const img = MART_HERO_IMAGES[heroIdx] || MART_HERO_IMAGES[0]; return (
{copy.hero.eyebrow}

{copy.hero.h1a} {useGreenHeadline ? {copy.hero.h1g} : {copy.hero.h1g}} {copy.hero.h1b}

{copy.hero.lead}

{copy.hero.brandsV}
{copy.hero.brands}
{copy.hero.sectorsV}
{copy.hero.sectors}
{copy.hero.backingV}
{copy.hero.backing}
Workspace install
{img.cap}
{MART_HERO_IMAGES.map((h, i) => ( ))}
); } // ─── Section head ──────────────────────────────────────────────────────── function SectHead({ eyebrow, title, lead, cta }) { return (
{eyebrow}

{title}

{lead ?

{lead}

: null} {cta ?
{cta}
: null}
); } // ─── Services Journey ─────────────────────────────────────────────────── function ServicesJourney({ copy }) { const [active, setActive] = useState(0); const svc = MART_SERVICES[active]; return (
{MART_SERVICES.map((s, i) => ( ))}
STEP {svc.n} — {svc.title.toUpperCase()}

{svc.title}.

{svc.blurb}

DELIVERABLES
    {svc.deliverables.map((d, i) => (
  • {String(i + 1).padStart(2, "0")} {d}
    • ))}
{svc.title
); } // ─── Brand wall ───────────────────────────────────────────────────────── function Brands({ copy }) { return (
{MART_BRANDS.slice(0, 24).map((b, i) => (
{String(i + 1).padStart(2, "0")} {b.logo ? {b.name} : {b.name} }
))}
Third-party — logo rights pending + Torasen, Weisner, Colan and more on request
Full brand roster (PDF)
); } // ─── Projects ─────────────────────────────────────────────────────────── function Projects({ copy, showPermissionBadges }) { const [filter, setFilter] = useState("All"); const sectors = ["All", "Workspace", "Education", "Hospitality"]; const filtered = useMemo( () => MART_PROJECTS.filter(p => filter === "All" || p.sector === filter), [filter] ); return (
{sectors.map(s => ( ))}
{String(filtered.length).padStart(2, "0")} showing
{filtered.map((p, i) => (
{showPermissionBadges ?
Permission pending
: null} {p.name
SQ FT {p.sqft} SCOPE {p.scope}
{p.name} {p.sector}
))}
10 of 32 installs shown. Named-client case studies — including adidas, WSP and McDonald's Hamburger University — are published on a permission-by-permission basis.
See the full project book
); } // ─── Credibility ───────────────────────────────────────────────────────── function Cred({ copy }) { return (
{copy.cred.eyebrow}

{copy.cred.h2}

{copy.cred.lead}

Visit KPS World About Mart®
{MART_CRED.map((c, i) => (
{String(i + 1).padStart(2, "0")} / {String(MART_CRED.length).padStart(2, "0")}
{c.v}
{c.l}
{c.src}
))}
); } // ─── Showroom ─────────────────────────────────────────────────────────── function Showroom({ copy }) { return (
Mart showroom interior — finishes & textures

By appointment — bring your project.

The Mart® showroom holds working samples from every brand on our roster — desking systems, task seating, acoustic pods, soft seating, lounge, finishes and textile libraries. Book a one-hour slot and we'll walk you through the long-list against your brief.

⚠ Address pending client confirmation. Current Mart® contact pages list Level Five, Building A3, Dubai CommerCity; KP Confidencia / KPS World still reference a d3 showroom. We'll publish the final visitor pin once the client confirms — both addresses remain reachable in the interim.
CURRENT MART® Level Five, Building A3
Dubai CommerCity
GROUP d3 — Dubai Design District
via KP Confidencia / KPS World
PHONE +971 4 423 8100
Toll-free 800 KPS (577)
HOURS Sun–Thu by appointment
(client to confirm published hours)
Book a showroom visit
); } // ─── Quote form ───────────────────────────────────────────────────────── function QuoteCTA({ copy }) { const [enquiry, setEnquiry] = useState("quote"); const [submitted, setSubmitted] = useState(false); const [fields, setFields] = useState({ name: "", company: "", email: "", phone: "", sector: "Workspace", sqft: "", brief: "" }); const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); setTimeout(() => setSubmitted(false), 5000); }; const enquiries = [ { id: "quote", label: "Request a quote" }, { id: "consult", label: "Project consultation" }, { id: "trade", label: "Trade enquiry" }, { id: "join", label: "Join Mart® (designer)" }, ]; return (

Talk to a project manager.

Every enquiry routes to a named PM within one working day. We don't pass briefs around — the person who answers the first email runs the install.

Phone +971 4 423 8100
Toll-free 800 KPS (577)
Group Mart® is owned by KP Confidencia.
KPS World — sister fit-out & construction brand.
Response SLA. One working day to a named PM. No call centres, no chatbots. Quotes typically returned within 5–10 working days depending on brand lead-times.
Enquiry type
{enquiries.map(e => ( ))}
setFields({ ...fields, name: e.target.value })} placeholder="Full name" />
setFields({ ...fields, company: e.target.value })} placeholder="Practice name" />
setFields({ ...fields, email: e.target.value })} placeholder="you@studio.com" />
setFields({ ...fields, phone: e.target.value })} placeholder="+971 …" />
setFields({ ...fields, sqft: e.target.value })} placeholder="e.g. 12,000" />
{submitted ? ✓ Sent — a PM will reply within 1 working day : "→ Routes to a named project manager"}
); } // ─── Footer ────────────────────────────────────────────────────────────── function Footer({ copy }) { return ( ); } // ─── Tweaks Panel ──────────────────────────────────────────────────────── function MartTweaks({ t, setTweak }) { return ( setTweak("accent", v)} /> setTweak("useGreenHeadline", v)} /> setTweak("density", v)} /> setTweak("heroIdx", parseInt(v, 10))} /> setTweak("locale", v)} /> setTweak("showPermissionBadges", v)} /> ); } // ─── App ──────────────────────────────────────────────────────────────── function App() { const [t, setTweak] = useTweaks(window.MART_TWEAK_DEFAULTS); // Apply tweaks to / :root useEffect(() => { document.documentElement.style.setProperty("--primary", t.accent); document.documentElement.style.setProperty("--focus", t.accent); document.body.classList.toggle("density-compact", t.density === "compact"); document.documentElement.lang = t.locale; document.documentElement.dir = t.locale === "ar" ? "rtl" : "ltr"; }, [t.accent, t.density, t.locale]); const copy = MART_COPY[t.locale] || MART_COPY.en; return (
); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();