// HotelCraft — responsive static landing page const { useEffect, useState } = React; const TWEAKS_DEFAULTS = /*EDITMODE-BEGIN*/{ "accent": "#492AED", "ctaCopy": "Get early access", "haloOpacity": 1, "heroOverlay": 0.3, "cardImageOpacity": 1 }/*EDITMODE-END*/; const AREAS = [ { title: "Guest reporting & compliance", blurb: "Government reporting, audit trails, and operational\nworkflows.", img: "assets/area-1.png" }, { title: "Lost & found operations", blurb: "Item tracking, recovery workflows, and internal\ncoordination.", img: "assets/area-2.png" }, { title: "Security operations", blurb: "Incident reporting, patrol workflows, and operational\nvisibility.", img: "assets/area-3.png" }, { title: "Hotel operations systems", blurb: "Tools designed to simplify internal hospitality workflows.", img: "assets/area-4.png" }, ]; // Add the deployed Google Apps Script Web App URL here after creating it. const GOOGLE_LEADS_ENDPOINT = "https://script.google.com/a/macros/hotelcraft.co/s/AKfycbxQF5Mj_n6WFgQud1YdEiK9-s9zWVjZEPEFqZsvi78SIyfUDsYn9PbTw2Z9YEOsgXndDw/exec"; function wait(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); } async function submitLeadToGoogle({ email, source }) { if (!GOOGLE_LEADS_ENDPOINT) { await wait(800); return; } const payload = new URLSearchParams({ email, source, page: window.location.href, userAgent: navigator.userAgent, }); await Promise.all([ fetch(GOOGLE_LEADS_ENDPOINT, { method: "POST", mode: "no-cors", body: payload, }), wait(500), ]); } function useRevealOnScroll() { useEffect(() => { const items = Array.from(document.querySelectorAll(".hc-reveal")); if (!items.length) return undefined; const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (reducedMotion || !("IntersectionObserver" in window)) { items.forEach((item) => item.classList.add("is-visible")); return undefined; } const revealElement = (entry, observerInstance) => { const target = entry.target; const cardNeedsMoreVisibility = target.classList.contains("hc-card") && entry.intersectionRatio < 0.32; if (!entry.isIntersecting || cardNeedsMoreVisibility) return; target.classList.add("is-visible"); observerInstance.unobserve(target); }; const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { revealElement(entry, observer); }); }, { threshold: 0.16, rootMargin: "0px 0px -8% 0px", }); const cardObserver = new IntersectionObserver((entries) => { entries.forEach((entry) => { revealElement(entry, cardObserver); }); }, { threshold: 0.32, rootMargin: "0px 0px -18% 0px", }); items.forEach((item) => { if (item.classList.contains("hc-card")) { cardObserver.observe(item); return; } observer.observe(item); }); return () => { observer.disconnect(); cardObserver.disconnect(); }; }, []); } function EmailForm({ accent, ctaCopy, variant = "light", className = "", style, successCard, source = "landing" }) { const [email, setEmail] = useState(""); const [state, setState] = useState("idle"); const [msg, setMsg] = useState(""); const onSubmit = async (e) => { e.preventDefault(); if (state === "submitting" || state === "ok") return; const trimmed = email.trim(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(trimmed)) { setState("error"); setMsg("Please enter a valid email."); return; } setState("submitting"); setMsg(""); try { await submitLeadToGoogle({ email: trimmed, source }); setState("ok"); setMsg("You're on the list — we'll be in touch."); } catch (error) { setState("error"); setMsg("Something went wrong. Please try again."); } }; const dark = variant === "dark"; const showSuccessCard = successCard ?? variant === "light"; const successIconColor = dark ? "#c9c2ff" : accent; const successIconFill = dark ? "rgba(201,194,255,0.16)" : `${accent}1f`; if (state === "ok" && showSuccessCard) { return (
You're on the list

{"We’ll share updates as we explore\nbetter systems for hotel operations."}

); } return (
{ setEmail(e.target.value); if (state === "error") { setState("idle"); setMsg(""); } }} aria-label="Email" aria-invalid={state === "error"} aria-describedby={msg ? `hc-${variant}-email-msg` : undefined} disabled={state === "submitting" || state === "ok"} />
{msg && (state !== "ok" || dark) ? (
{msg}
) : null}
); } function Logo() { return (
HotelCraft
); } function Hero({ accent, ctaCopy, heroOverlay }) { return (

{"Modern systems for\nhotel operations"}

We build modern tools for hospitality operations — guest compliance, lost & found, security, and the internal workflows hotels run on every day.

); } function Card({ area, accent, cardImageOpacity, revealDelay = "0ms" }) { return (
{area.title}
{area.blurb}
); } function Areas({ accent, haloOpacity, cardImageOpacity }) { return (

Areas we are exploring

Areas where hospitality operations still feel more complicated than they should.

{AREAS.map((a, i) => ( ))}
); } function CTA({ accent, ctaCopy }) { return (

Interested in early access?

); } function Footer() { return ( ); } function App() { const [t, setTweak] = window.useTweaks(TWEAKS_DEFAULTS); useRevealOnScroll(); return (
setTweak("accent", v)} options={["#492AED", "#0E8A4F", "#C32B5A", "#E07A1F", "#0F172A"]} /> setTweak("haloOpacity", v)} /> setTweak("heroOverlay", v)} /> setTweak("cardImageOpacity", v)} /> setTweak("ctaCopy", v)} />
); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();