const { useState, useEffect, useRef } = React; const { Icon, Tick, TextBubble, PhotoCardBubble, TypingBubble, Phone, HowIllu1, HowIllu2, HowIllu3, WobblyArrow } = window.WA; // ========================================================= // PHOTOS — one Unsplash URL per vertical (real photos in cards) // ========================================================= const VERTICAL_PHOTOS = { realestate: { url: "https://images.unsplash.com/photo-1545324418-cc1a3fa10c00?w=800&auto=format&q=80", alt: "Marina apartment exterior" }, clinic: { url: "https://images.unsplash.com/photo-1540555700478-4be289fbecef?w=800&auto=format&q=80", alt: "Treatment room interior" }, restaurant: { url: "https://images.unsplash.com/photo-1517248135467-4c7edcad34c4?w=800&auto=format&q=80", alt: "Plated restaurant dish" }, fitness: { url: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=800&auto=format&q=80", alt: "Fitness studio class" }, ecom: { url: "https://images.unsplash.com/photo-1591047139829-d91aecb6caea?w=800&auto=format&q=80", alt: "Product hero" }, }; // ========================================================= // HERO — short scripted Real Estate conversation, loops // ========================================================= function HeroPhone() { const [stage, setStage] = useState(0); useEffect(() => { const timings = [1600, 1500, 1700, 1500, 1600, 1800, 2400]; const t = setTimeout(() => setStage((s) => (s + 1) % 7), timings[stage]); return () => clearTimeout(t); }, [stage]); const photo = VERTICAL_PHOTOS.realestate; return ( {stage >= 0 && Hi! Is the 3-bed in Marina still available next weekend?} {stage === 1 && } {stage >= 2 && Yes — Saturday 11am viewing slot is open. Here are the details:} {stage >= 3 && } {stage >= 4 && Yes, book it} {stage === 5 && } {stage >= 6 && ✓ Confirmed. Sending location pin + agent contact now.} ); } // ========================================================= // INDUSTRIES (5 tabs, English-only chats, real photo cards) // ========================================================= const INDUSTRIES = [ { id: "realestate", tab: "Real Estate", kicker: "For brokers & property managers", headline: "Qualifies, schedules, and sends listings — in seconds.", body: "Every enquiry gets an answer in under 60 seconds. The AI pulls availability from your listing sheet, sends photos, and books the viewing — without you picking up the phone.", bullets: [ { text: "Replies in under 60 seconds, 24/7" }, { text: "Sends matching listings + photos instantly" }, { text: "Books viewings directly into your calendar" }, ], phone: { name: "Khaled A.", initials: "KA", avatar: "b", presence: "online" }, photo: VERTICAL_PHOTOS.realestate, card: { title: "JVC Diamond 4 — 2BR", sub: "AED 125K/yr · 1,150 sqft" }, chat: [ { dir: "in", time: "10:12", text: "Hi! Is the JVC apartment from your Property Finder listing still available?" }, { dir: "out", time: "10:12", text: "Yes — the 2BR in Diamond 4 is available at AED 125K/yr. Want photos and a viewing?" }, { card: true, dir: "out", time: "10:13" }, { dir: "in", time: "10:14", text: "Saturday 11am works" }, { dir: "out", time: "10:14", text: "✓ Booked. I'll send the location pin and Ahmed's contact." }, ], }, { id: "clinic", tab: "Clinics", kicker: "For aesthetics & wellness", headline: "Books treatments and answers prep questions automatically.", body: "Clients ask, the AI answers — with your exact treatment descriptions, pricing, and prep instructions. Bookings drop straight into your scheduling tool.", bullets: [ { text: "Sends prep instructions and aftercare info" }, { text: "Books into Fresha, MindBody, or Google Calendar", soon: true }, { text: "Answers pricing and treatment questions in your brand voice" }, ], phone: { name: "Aisha", initials: "A", avatar: "f", presence: "online" }, photo: VERTICAL_PHOTOS.clinic, card: { title: "Hydrafacial · 60 min", sub: "Fri 5:30 PM · Confirmed" }, chat: [ { dir: "in", time: "4:02 PM", text: "Can I book a hydrafacial this Friday?" }, { dir: "out", time: "4:02 PM", text: "Yes — 3pm or 5:30pm both open." }, { dir: "in", time: "4:03 PM", text: "5:30pm" }, { card: true, dir: "out", time: "4:03 PM" }, { dir: "out", time: "4:03 PM", text: "Sending prep instructions now." }, ], }, { id: "restaurant", tab: "Restaurants", kicker: "For venues & hospitality", headline: "Takes reservations and sends menus automatically.", body: "No more missed messages on Friday night. The AI takes the reservation, sends the menu, and flags allergies and dietary requirements to the kitchen.", bullets: [ { text: "Books into OpenTable or SevenRooms", soon: true }, { text: "Sends menus, directions, and parking info" }, { text: "Flags dietary requirements to the kitchen" }, ], phone: { name: "Marco R.", initials: "MR", avatar: "d", presence: "online" }, photo: VERTICAL_PHOTOS.restaurant, card: { title: "Fri Nov 14 · 8:00 PM", sub: "6 guests · Vegan menu noted" }, chat: [ { dir: "in", time: "7:41 PM", text: "Table for 6 Friday 8pm? One vegan in the group." }, { dir: "out", time: "7:41 PM", text: "Got it — 8pm Friday booked." }, { card: true, dir: "out", time: "7:41 PM" }, { dir: "out", time: "7:42 PM", text: "Sending the menu now. See you Friday." }, ], }, { id: "fitness", tab: "Fitness", kicker: "For studios & trainers", headline: "Class schedules, drop-ins, and bookings — all auto.", body: "Members ask \"what's tomorrow?\" and get your schedule back instantly. Drop-ins, memberships, and waitlists all run on autopilot.", bullets: [ { text: "Pulls live class schedule from MindBody or Glofox", soon: true }, { text: "Handles drop-ins and converts to memberships" }, { text: "Manages waitlists automatically" }, ], phone: { name: "Priya", initials: "P", avatar: "f", presence: "online" }, photo: VERTICAL_PHOTOS.fitness, card: { title: "Strength 45 · Wed 7:00 AM", sub: "Coach Mia · 2 spots left" }, chat: [ { dir: "in", time: "6:18 AM", text: "What class is tomorrow at 7am?" }, { dir: "out", time: "6:18 AM", text: "Strength 45 with Coach Mia — 2 spots left. Want me to book you in?" }, { card: true, dir: "out", time: "6:18 AM" }, { dir: "in", time: "6:19 AM", text: "Yes please!" }, { dir: "out", time: "6:19 AM", text: "Done ✓ See you at 7am." }, ], }, { id: "ecom", tab: "E-commerce", kicker: "For online stores", headline: "Tracking, returns, and product questions — handled.", body: "Answers product questions from your catalog, tracks orders, and initiates returns — all inside WhatsApp.", bullets: [ { text: "Live order tracking from Shopify or WooCommerce", soon: true }, { text: "Answers sizing, material, and stock questions" }, { text: "Starts returns and sends labels" }, ], phone: { name: "Tom K.", initials: "TK", avatar: "e", presence: "online" }, photo: VERTICAL_PHOTOS.ecom, card: { title: "Order #8421 — Out for delivery", sub: "DHL DX238... · Today 2–5pm" }, chat: [ { dir: "in", time: "11:04", text: "Hey where's my order #8421?" }, { dir: "out", time: "11:04", text: "Out for delivery — ETA today 2–5pm." }, { card: true, dir: "out", time: "11:04" }, { dir: "in", time: "11:05", text: "Can I change to my office address?" }, { dir: "out", time: "11:05", text: "Yes — send the new address and I'll update the courier." }, ], }, ]; function Industries() { const [active, setActive] = useState(0); const cur = INDUSTRIES[active]; const renderChat = (msg, i) => { if (msg.card) { return ; } return {msg.text}; }; return (
Industries

Built for businesses where every
message is revenue.

{INDUSTRIES.map((ind, i) => ( ))}
{cur.chat.map(renderChat)}
{cur.kicker}

{cur.headline}

{cur.body}

    {cur.bullets.map((b, i) => (
  • {b.text}{b.soon && Coming Q2}
    • ))}
); } // ========================================================= // INTEGRATIONS STRIP — tiny single-line strip // ========================================================= const STRIP_TOOLS = [ { name: "Cal.com", soon: false, logo: cal }, { name: "Google Calendar",soon: false, logo: }, { name: "Outlook", soon: false, logo: }, { name: "Fresha", soon: true, logo: }, { name: "OpenTable", soon: true, logo: }, { name: "Mindbody", soon: true, logo: }, { name: "Shopify", soon: true, logo: }, ]; function IntegrationsStrip() { return (
Connects with {STRIP_TOOLS.map((tool) => ( {tool.logo} {tool.name}{tool.soon && · Coming Q2} ))} + on request
); } // ========================================================= // TRY IT YOURSELF — interactive demo using window.claude.complete // ========================================================= const DEMO_VERTICALS = [ { id: "realestate", label: "Real Estate", persona: "Marina Real Estate (Dubai)", initials: "MR", placeholder: "Ask about an apartment, viewing, price…", suggestions: ["Is the 2BR in Marina available?", "Can I view this weekend?", "What's the price range?"], cardKeywords: ["apartment", "property", "flat", "bedroom", "bhk", "viewing", "marina", "villa", "townhouse", "rent", "buy", "see it", "show me"], cardTemplate: { title: "Marina View — 2BR Apartment", sub: "AED 165K/yr · Available now" }, }, { id: "clinic", label: "Clinic", persona: "Glow Aesthetics Clinic", initials: "GA", placeholder: "Ask about a treatment, booking, prep…", suggestions: ["Book a hydrafacial Friday", "How much is botox?", "What should I do before the appointment?"], cardKeywords: ["book", "appointment", "treatment", "facial", "botox", "filler", "schedule", "slot", "friday", "saturday", "tomorrow"], cardTemplate: { title: "Hydrafacial · 60 min", sub: "Fri 5:30 PM · Confirmed" }, }, { id: "restaurant", label: "Restaurant", persona: "Olive & Vine Restaurant", initials: "OV", placeholder: "Reserve a table, ask about the menu…", suggestions: ["Table for 4 tonight 8pm", "Do you have vegan options?", "What time do you close?"], cardKeywords: ["table", "reserve", "reservation", "book", "tonight", "dinner", "lunch", "menu", "guests"], cardTemplate: { title: "Reservation Confirmed", sub: "Tonight · 8:00 PM · 4 guests" }, }, { id: "fitness", label: "Fitness", persona: "Pulse Studio", initials: "PS", placeholder: "Ask about classes, schedule, booking…", suggestions: ["What class is at 7am tomorrow?", "Do you do drop-ins?", "Book me into yoga Saturday"], cardKeywords: ["class", "book", "yoga", "spin", "strength", "tomorrow", "drop", "session", "workout"], cardTemplate: { title: "Strength 45 · Wed 7:00 AM", sub: "Coach Mia · 2 spots left" }, }, { id: "ecom", label: "E-commerce", persona: "Linen & Co.", initials: "LC", placeholder: "Track an order, ask about a product…", suggestions: ["Where's my order #8421?", "What sizes do you have?", "How do I return something?"], cardKeywords: ["order", "tracking", "track", "delivery", "where", "shipped", "package", "return", "refund"], cardTemplate: { title: "Order #8421 — Out for delivery", sub: "DHL DX238... · Today 2–5pm" }, }, ]; const SCRIPTED_FALLBACK = { realestate: "Yes — that one's available. Want me to send photos and a viewing slot?", clinic: "Sure — I have Friday 3pm or 5:30pm open. Which works?", restaurant: "Got it. Booking your table now — confirming back in a sec.", fitness: "Yes! That class still has spots. Want me to book you in?", ecom: "On it — let me pull that up for you right now.", }; function TryItPhone({ verticalId }) { const vertical = DEMO_VERTICALS.find((v) => v.id === verticalId); const photo = VERTICAL_PHOTOS[verticalId]; const [messages, setMessages] = useState([]); const [typing, setTyping] = useState(false); const [input, setInput] = useState(""); const [sending, setSending] = useState(false); const [showCaption, setShowCaption] = useState(false); const bodyRef = useRef(null); const idleTimerRef = useRef(null); // Reset on vertical change useEffect(() => { setMessages([{ dir: "out", text: `Hi 👋 — this is ${vertical.persona}. How can I help?`, time: nowTime() }]); setTyping(false); setShowCaption(false); }, [verticalId]); // Auto-scroll to bottom useEffect(() => { if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight; }, [messages, typing]); function nowTime() { const d = new Date(); return d.toLocaleTimeString([], { hour: "numeric", minute: "2-digit" }); } async function handleSend(rawText) { const text = (rawText ?? input).trim(); if (!text || sending) return; setInput(""); setSending(true); setShowCaption(false); if (idleTimerRef.current) clearTimeout(idleTimerRef.current); // Add user msg setMessages((m) => [...m, { dir: "in", text, time: nowTime() }]); // Typing indicator after a tick await new Promise((r) => setTimeout(r, 350)); setTyping(true); let reply = ""; let triggerCard = false; try { // Build full conversation history for context const history = [...messages, { dir: "in", text }] .filter((m) => m.text && !m.card) .map((m) => ({ role: m.dir === "in" ? "user" : "assistant", content: m.text })); const apiResp = await fetch("/api/chat", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ vertical: verticalId, messages: history }), }); if (apiResp.ok) { const data = await apiResp.json(); const raw = (data && data.reply) || ""; if (typeof raw === "string" && raw.length > 0) { if (/\[SEND_CARD\]/i.test(raw)) { triggerCard = true; reply = raw.replace(/\[SEND_CARD\]/gi, "").trim(); } else { reply = raw.trim(); } } } } catch (e) { // fall through to scripted fallback } if (!reply) { reply = SCRIPTED_FALLBACK[verticalId]; const lc = text.toLowerCase(); triggerCard = vertical.cardKeywords.some((k) => lc.includes(k)); } // Show typing for ~1.2s minimum await new Promise((r) => setTimeout(r, 800)); setTyping(false); setMessages((m) => [...m, { dir: "out", text: reply, time: nowTime() }]); if (triggerCard) { await new Promise((r) => setTimeout(r, 500)); setMessages((m) => [...m, { card: true, dir: "out", time: nowTime() }]); } setSending(false); // Idle caption idleTimerRef.current = setTimeout(() => setShowCaption(true), 2000); } return ( <>
{vertical.initials}
{vertical.persona}
{typing ? "typing…" : "online"}
TODAY
{messages.map((m, i) => { if (m.card) { return ; } return {m.text}; })} {typing && }
{ e.preventDefault(); handleSend(); }}> setInput(e.target.value)} placeholder={vertical.placeholder} disabled={sending} />
{vertical.suggestions.map((s, i) => ( ))}
Live AI generation — your customers get the same speed and quality on their WhatsApp.
); } function TryIt() { const [verticalId, setVerticalId] = useState("realestate"); return (
Try it

Type anything.
Watch it work.

Same engine that runs in your customers' WhatsApp. Embedded here so you can feel it before you book a demo.

{DEMO_VERTICALS.map((v) => ( ))}
); } // ========================================================= // FAQ // ========================================================= const FAQS = [ { q: "How long does setup take?", a: "48 hours from sign-up to live. All we need from you: your WhatsApp Business number, your product or service catalog, and 10–20 sample messages from your inbox so the AI matches your tone. We handle the platform setup end-to-end on your behalf." }, { q: "Which WhatsApp setup do I need?", a: "Works with any WhatsApp Business number. We handle the platform setup end-to-end and cover platform fees as part of your monthly bill. You don't need a new number." }, { q: "Will my customers know it's AI?", a: "That's your call. Most clients prefer to disclose after a booking is confirmed. Customers care about speed and accuracy, not whether a human typed it." }, { q: "What if the AI gets a question wrong?", a: "It's conservative by default — if it's uncertain, it asks clarifying questions or escalates to you instantly. You see every conversation in real time and can intervene mid-thread." }, { q: "Can I see every conversation it has?", a: "All of them. Live, searchable, exportable. You can step into any conversation at any time." }, { q: "Can I cancel anytime?", a: "Yes. Month-to-month, cancel with 7 days' notice. 14-day money-back on your first month if it's not for you." }, ]; function FAQ() { const [open, setOpen] = useState(0); return (
{FAQS.map((f, i) => (
{f.a}
))}
); } // ========================================================= // APP // ========================================================= const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "showIndustries": true, "showHow": true, "showTryIt": true, "showPricing": true, "showFAQLink": true, "showFinalCTA": true }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [scrolled, setScrolled] = useState(false); const progressRef = useRef(null); useEffect(() => { document.documentElement.setAttribute("data-theme", "dark"); try { localStorage.removeItem("wa-theme"); } catch (e) {} }, []); useEffect(() => { const onScroll = () => { setScrolled(window.scrollY > 20); const h = document.documentElement.scrollHeight - window.innerHeight; const r = h > 0 ? window.scrollY / h : 0; if (progressRef.current) progressRef.current.style.transform = `scaleX(${r})`; }; window.addEventListener("scroll", onScroll); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) e.target.classList.add("in"); }); }, { threshold: 0.12, rootMargin: "-40px" }); document.querySelectorAll(".reveal, .reveal-stagger").forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); return ( <>
{/* 1 — HERO */}
{/* 2 — INDUSTRIES */} {t.showIndustries && } {/* 3 — HOW IT WORKS */} {t.showHow &&
How it works

Three steps. Live in 48 hours.

STEP 01
Connect your WhatsApp.
We connect to your existing WhatsApp Business number. No new number, no channel switch.
STEP 02
We configure your AI.
Send us your listings, menu, or services. We build your custom AI in 48 hours.
STEP 03
Every message answered.
Your AI handles every inquiry instantly. You handle the deals worth your personal time.
} {/* 4 — TRY IT YOURSELF */} {t.showTryIt && } {/* 5 — PRICING */} {t.showPricing &&
Pricing

Pay for the conversations
you actually use.

Starter
AED 499/mo
+ AED 1,800 setup (one-time)

For solo operators getting replies off their plate.

  • 200 conversations/mo · text replies + qualification
  • Calendar integration (Cal.com, Google, Outlook)
  • Email support
  • AED 1.50/conv beyond included
Most popular
Pro
AED 999/mo
+ AED 3,000 setup (one-time)

For businesses where every message is revenue.

  • 1,000 conversations/mo · everything in Starter
  • Booking integrations (Fresha, OpenTable)Coming Q2
  • Hot-lead detection + escalation
  • Priority support
  • AED 1.25/conv beyond included
Custom
Talk to us
Built for your scale

For brokerages with 100+ agents, multi-location chains, white-label needs, or high-volume verticals.

  • Unlimited conversations · everything in Pro
  • Multi-tenant + multi-location config
  • Custom knowledge base + integrations
  • White-label options
  • Dedicated success manager + SLA
  • Volume pricing on conversations

Month-to-month. 14-day money-back on month 1. Annual prepay: 15% off.

} {/* 6 — FAQ link callout */} {t.showFAQLink && } {/* 7 — FINAL CTA */} {t.showFinalCTA &&

Your next lead is sending
a WhatsApp right now.

Be the business that replies in 60 seconds — while you're busy with the last one.

Book a 15-min demo
} {/* FOOTER */} setTweak('showIndustries', v)} /> setTweak('showHow', v)} /> setTweak('showTryIt', v)} /> setTweak('showPricing', v)} /> setTweak('showFAQLink', v)} /> setTweak('showFinalCTA', v)} /> ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();