// The Kape — App shell + routing + Home page // All other page components live in pages.jsx and attach to window. const { useState, useEffect, useMemo, useRef } = React; // ── tiny router (hash-free, history.pushState) ────────────────── function useRoute() { const [route, setRoute] = useState(() => parseRoute(window.location.pathname + window.location.search)); useEffect(() => { const onPop = () => setRoute(parseRoute(window.location.pathname + window.location.search)); window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, []); const navigate = (path) => { window.history.pushState({}, "", path); setRoute(parseRoute(path)); window.scrollTo({ top: 0, behavior: "instant" }); }; return [route, navigate]; } function parseRoute(path) { // strip leading slash, allow query const [p, q] = path.split("?"); const parts = p.replace(/^\/+|\/+$/g, "").split("/").filter(Boolean); if (parts.length === 0) return { name: "home" }; const [a, b] = parts; if (a === "collections" && !b) return { name: "collections" }; if (a === "collections" && b) return { name: "collection", id: b }; if (a === "product" && b) return { name: "product", id: b }; if (a === "craft") return { name: "craft" }; if (a === "the-house") return { name: "house" }; if (a === "appointments") return { name: "appointments" }; if (a === "locate-us" || a === "contact") return { name: "locate" }; return { name: "home" }; } window.navigate = null; // set below const fmtAED = (n) => `AED ${n.toLocaleString("en-US")}`; // ── Nav ──────────────────────────────────────────────────────── function Nav({ route, navigate }) { const links = [ { label: "Collections", route: "/collections", match: ["collections", "collection", "product"] }, { label: "Craft", route: "/craft", match: ["craft"] }, { label: "The House", route: "/the-house", match: ["house"] }, { label: "Locate Us", route: "/locate-us", match: ["locate"] }, ]; return (

{ e.preventDefault(); navigate("/"); }}> THE KAPE

e.preventDefault()}>EN · AR e.preventDefault()}>AED { e.preventDefault(); navigate("/appointments"); }} >Book Appointment

); } // ── Footer ───────────────────────────────────────────────────── function Footer({ navigate }) { return ( ); } // ── WhatsApp FAB ─────────────────────────────────────────────── function WhatsAppFab() { return ( ); } // ── Home ─────────────────────────────────────────────────────── function Home({ navigate }) { const products = window.PRODUCTS; const collections = window.COLLECTIONS; const featured = [ "nara-silk-jader", "ayala-sapphire", "shouq-midnight", "gaida-deep-moss", "elaris", "rosalie", "nara-cupro-amber", "aurelia-beige", ].map(id => products.find(p => p.id === id)).filter(Boolean); return (

{/* Hero */}

Nara Silk Jader — The Kape × Louis Barthélemy

Resort 26 · Now in showroom

The Kape ×
Louis Barthélemy

Painterly prints drift across silk, velvet and cupro — palms, stars and stories carried as memory. A contemporary kape, made in the UAE.

{ e.preventDefault(); navigate("/collections/louis-barthelemy"); }}> Shop the collection → { e.preventDefault(); navigate("/appointments"); }}> Book an appointment

No. 01 / Painterly Prints Silk · Velvet · Cupro
AED 3,400 — 3,990

{/* Current collections strip */}

{collections.map(c => ( { e.preventDefault(); navigate(`/collections/${c.id}`); }}>

{c.name}

{c.name}

))}

{/* Featured products */}

The Edit

The Kapes,
this season.

{ e.preventDefault(); navigate("/collections"); }}> View all collections →

{featured.map(p => )}

{/* Craft teaser */}

Hand embroidery on Ayala Sapphire

The Craft

A modern interpretation
of tailoring.

Every Kape is cut and finished in our Dubai atelier — across luxury fabrics, digital prints and the embroidery practices we hold to. Tailoring leads; ornament follows.

01

Tailoring

Considered cuts and proportions, finished by hand.

02

Luxury Fabrics

Silk, velvet, cupro, jacquard — sourced with intent.

03

Digital Prints

Commissioned artworks translated onto cloth.

04

Embroidery

Hand-beaded panels, restraint over excess.

{ e.preventDefault(); navigate("/craft"); }}> Inside the atelier →

{/* Showroom band */}

By appointment

Step into the showroom
at d3.

Our boutique sits in Dubai Design District — travertine stone, epoxy resin, prefabricated cement. Try the collection, meet the team, fit your kape.

Address Showroom A208, Building 7
Dubai Design District, Dubai

By phone +971 50 437 1111 · +971 4 276 3333

{ e.preventDefault(); window.navigate("/appointments"); }}> Book a fitting → WhatsApp

DUBAI DESIGN DISTRICT

{/* Press band */}

As covered in

SUPERFUTUREDESIGN* Architonic Commercial Interior Design Archilovers RECKLI

); } // ── Product card (used across pages) ────────────────────────── function ProductCard({ p, navigate }) { return ( { e.preventDefault(); navigate(`/product/${p.id}`); }} >

{p.title}

{p.family} · {p.fabric}

{fmtAED(p.price)}

); } window.ProductCard = ProductCard; window.fmtAED = fmtAED; // ── App ─────────────────────────────────────────────────────── function App() { const [route, navigate] = useRoute(); window.navigate = navigate; let page; switch (route.name) { case "home": page = ; break; case "collections": page = ; break; case "collection": page = ; break; case "product": page = ; break; case "craft": page = ; break; case "house": page = ; break; case "appointments": page = ; break; case "locate": page = ; break; default: page = ; } return ( <>