A single signature for two of Marrakech's most exacting verticals.

Oumix Marrakech began as a quiet idea among friends who knew the city well — that the best parts of a stay should never feel logistical. A car when you land. A villa with the keys already in the door. A number you can call at 2am when the world has decided to misbehave.

Today the house has two visible faces under one signature, OUMIX LUX. OUMIX CAR answers the question of mobility — from a discreet airport pick-up to a four-vehicle desert convoy. OUMIX VILLAS answers the question of refuge — a riad behind a medina door; an estate in the Palmeraie with staff already in place.

Behind both, the same telephone, answered by the same small team, in French, English, and Arabic, year-round.

The team · Gueliz HQ · est. 2018

{[ ["Owned", "Every vehicle and every contract is held by the house. Nothing sub-let."], ["Insured", "Comprehensive cover is part of the tariff, not a line-item."], ["Discreet", "Privacy is the rule. We are difficult to find, and proud of it."], ["Permanent", "A single concierge line, in three languages, around the clock."], ].map(([t, b]) => (

{t}

{b}

))}

); } function Contact() { const { BRAND } = window.OUMIX_DATA; const isMobile = useIsMobileA(); const [form, setForm] = useStateA({ name: "", email: "", service: "Both", dates: "", message: "" }); const [sent, setSent] = useStateA(false); return (

One concierge.
One single line.

Whether you need a car at 2am, a villa for sixteen this weekend, or both at once — speak to a human, in three languages, year-round.

{/* Left — channels */}

Telephone · 24/7

{BRAND.phoneDisplay}

FR · EN · AR

Visit us

Oumix Marrakech
Avenue Mohammed V
Gueliz, 40000 Marrakech
Kingdom of Morocco

{/* Right — form */}

{ e.preventDefault(); setSent(true); }} style={{ padding: 36, border: "1px solid rgba(230,198,135,0.22)", background: "rgba(20,20,22,0.5)", backdropFilter: "blur(20px)" }}> {sent ? (

Message received.

Karim, your concierge, will reply within 10 minutes. For anything urgent, call the line above.

) : ( <> setForm({...form, name: v})} placeholder="As it appears on your passport" /> setForm({...form, email: v})} placeholder="you@example.com" type="email" />

Service

{["Car","Villa","Both","Other"].map((s, i, arr) => ( ))}

setForm({...form, dates: v})} placeholder="12 → 19 June 2026" />

Tell us about your stay

setForm({...form, message: e.target.value})} placeholder="Group size, preferences, anything we should know…" rows={5} style={{
                    background: "transparent", border: "1px solid var(--line-2)",
                    color: "var(--text)", padding: 14, width: "100%", fontFamily: "inherit",
                    fontSize: 14, resize: "vertical",
                  }} />
                </div>
                <button type="submit" style={{
                  width: "100%", marginTop: 24,
                  background: "var(--gold)", color: "#0B0B0C",
                  border: 0, padding: 18,
                  fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", fontWeight: 700,
                  display: "flex", alignItems: "center", justifyContent: "center", gap: 14,
                }}>Send to Concierge <Icon.Arrow /></button>
                <div className="mono" style={{ fontSize: 9, letterSpacing: "0.24em", color: "var(--muted-2)", textTransform: "uppercase", textAlign: "center", marginTop: 14 }}>
                  Replies within 10 minutes · FR · EN · AR
                </div>
              </>
            )}
          </form>
        </div>
      </div>
    </div>
  );
}

function ChannelCard({ label, value }) {
  return (
    <div style={{ padding: 20, border: "1px solid var(--line-2)" }}>
      <div className="mono" style={{ fontSize: 9, letterSpacing: "0.3em", color: "var(--muted)", textTransform: "uppercase" }}>{label}</div>
      <div style={{ fontSize: 14, marginTop: 8, color: "var(--text)" }}>{value}</div>
    </div>
  );
}

function Field({ label, value, onChange, placeholder, type }) {
  return (
    <div style={{ marginTop: 22 }}>
      <div className="mono" style={{ fontSize: 10, letterSpacing: "0.32em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 10 }}>{label}</div>
      <input type={type || "text"} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} style={{
        background: "transparent", border: 0, borderBottom: "1px solid var(--line-2)",
        color: "var(--text)", padding: "10px 0", width: "100%", fontFamily: "inherit", fontSize: 15,
        outline: "none",
      }} onFocus={e => e.target.style.borderBottomColor = "var(--gold)"}
         onBlur={e => e.target.style.borderBottomColor = "var(--line-2)"} />
    </div>
  );
}

// ——— Tweaks panel
function TweaksApp({ tweaks, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Accent" />
      <TweakColor label="Gold" value={tweaks.gold}
        options={["#E6C687", "#D4AF6A", "#B8956A", "#F2D998", "#C9A86A"]}
        onChange={(v) => setTweak("gold", v)} />
      <TweakSection label="Background" />
      <TweakRadio label="Tone" value={tweaks.bg}
        options={["obsidian", "deep warm"]}
        onChange={(v) => setTweak("bg", v)} />
      <TweakSection label="Typography" />
      <TweakRadio label="Display" value={tweaks.font}
        options={["italiana", "cormorant"]}
        onChange={(v) => setTweak("font", v)} />
      <TweakSection label="Hero" />
      <TweakRadio label="Layout" value={tweaks.hero}
        options={["split", "stacked"]}
        onChange={(v) => setTweak("hero", v)} />
      <TweakSection label="Cards" />
      <TweakRadio label="Style" value={tweaks.cards}
        options={["glass", "outline"]}
        onChange={(v) => setTweak("cards", v)} />
    </TweaksPanel>
  );
}

// ——— App router
function App() {
  const [route, setRoute] = useStateA({ page: "landing", id: null });
  const tweaksDefaults = /*EDITMODE-BEGIN*/{
    "gold": "#E6C687",
    "bg": "obsidian",
    "font": "italiana",
    "hero": "split",
    "cards": "glass"
  }/*EDITMODE-END*/;
  const [tweaks, setTweak] = useTweaks(tweaksDefaults);

// apply tweaks to CSS vars
  useEffectA(() => {
    document.documentElement.style.setProperty("--gold", tweaks.gold);
    if (tweaks.bg === "deep warm") {
      document.documentElement.style.setProperty("--bg", "#0c0907");
      document.documentElement.style.setProperty("--bg-2", "#100b08");
      document.body.style.background = "#0c0907";
    } else {
      document.documentElement.style.setProperty("--bg", "#0B0B0C");
      document.documentElement.style.setProperty("--bg-2", "#0F0F11");
      document.body.style.background = "#0B0B0C";
    }
    const displayFont = tweaks.font === "cormorant"
      ? "'Cormorant Garamond', serif"
      : "'Italiana', 'Cormorant Garamond', serif";
    document.querySelectorAll(".display").forEach(el => {
      el.style.fontFamily = displayFont;
    });
  }, [tweaks.gold, tweaks.bg, tweaks.font]);

const go = (next) => {
    setRoute(next);
    window.scrollTo({ top: 0, behavior: "instant" });
  };

return (
    <div data-screen-label={
      route.page === "landing" ? "Landing — Dual Gate"
      : route.page === "cars" ? "Catalog — Fleet"
      : route.page === "villas" ? "Catalog — Villas"
      : route.page === "detail-car" ? "Detail — Vehicle"
      : route.page === "detail-villa" ? "Detail — Villa"
      : route.page === "about" ? "About"
      : route.page === "contact" ? "Contact"
      : "Page"
    }>
      <Navbar page={route.page} go={go} />
      <main key={route.page + (route.id || "")}>
        {route.page === "landing" && <Landing go={go} tweaks={tweaks} />}
        {route.page === "cars" && <CarCatalog go={go} />}
        {route.page === "villas" && <VillaCatalog go={go} />}
        {route.page === "detail-car" && <ListingDetail kind="car" id={route.id} go={go} />}
        {route.page === "detail-villa" && <ListingDetail kind="villa" id={route.id} go={go} />}
        {route.page === "about" && <About />}
        {route.page === "contact" && <Contact />}
      </main>
      <ConciergeFooter />
      <TweaksApp tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

A single signature for two of Marrakech's most exacting verticals.

One concierge.One single line.

Message received.

One concierge.
One single line.