// Shared vertical landing page component. // Each HTML file sets window.VERTICAL_CONFIG before this loads. const { useState, useEffect, useRef } = React; const { Icon, Tick, TextBubble, PhotoCardBubble, Phone } = window.WA; const cfg = window.VERTICAL_CONFIG; // -- SVG Logo (shared) -------------------------------------------------------- const LOGO_PATH = "M234.59,503.35C236.96,499.36 243.72,488.22 249.62,478.60C266.87,450.43 299.88,395.81 305.16,386.72L310.02,378.35L307.46,376.22C302.26,371.91 266.05,341.25 264.69,340.00C263.50,338.91 264.97,335.76 274.35,319.40C325.65,229.89 338.52,207.34 338.90,206.30C339.47,204.69 339.46,204.67 345.81,216.10C348.86,221.60 361.69,244.33 374.31,266.60C386.93,288.87 402.35,316.10 408.58,327.10C441.99,386.12 483.51,459.34 488.54,468.10C491.70,473.60 495.74,480.69 497.51,483.85L500.75,489.60L476.42,489.55L452.10,489.51L434.15,457.83C424.28,440.41 403.61,404.32 388.21,377.63C372.82,350.94 357.94,325.10 355.16,320.21C352.38,315.31 349.65,311.43 349.10,311.57C347.37,312.03 338.71,333.94 339.60,335.60C340.05,336.42 347.03,348.58 355.11,362.60C379.26,404.48 415.48,467.69 428.03,489.85L439.78,510.60L487.69,510.60C515.01,510.60 535.60,510.22 535.60,509.71C535.60,508.10 523.32,486.25 418.61,301.60C391.38,253.57 353.60,186.85 345.08,171.74L339.81,162.39L337.31,166.74C335.93,169.14 330.77,178.30 325.83,187.10C320.90,195.90 308.18,218.17 297.58,236.60C286.98,255.03 271.36,282.25 262.87,297.10C254.38,311.95 247.26,324.27 247.05,324.48C246.72,324.81 237.44,317.15 191.67,278.71C184.20,272.44 178.18,267.04 178.28,266.71C178.38,266.37 188.22,248.33 200.15,226.60C232.31,168.03 264.69,107.63 284.84,68.60C289.53,59.52 297.02,45.01 301.50,36.35C305.97,27.69 309.38,20.60 309.08,20.60C304.86,20.60 226.07,66.34 120.10,130.30C93.70,146.24 64.45,163.90 55.10,169.54C45.75,175.18 37.54,180.26 36.85,180.82C35.89,181.61 35.60,191.18 35.60,222.47L35.60,263.10L76.76,296.60C99.40,315.03 118.34,330.78 118.86,331.61C119.54,332.73 116.03,339.75 105.35,358.61C61.89,435.36 20.60,509.14 20.60,510.04C20.60,510.35 67.78,510.60 125.44,510.60L230.29,510.60L234.59,503.35ZM56.60,488.82C56.60,488.40 64.97,473.21 75.20,455.07C85.44,436.94 97.72,415.12 102.50,406.60C107.27,398.08 116.79,381.10 123.64,368.87C130.49,356.64 136.33,346.63 136.61,346.62C136.89,346.61 140.50,349.41 144.63,352.85C148.77,356.29 162.49,367.69 175.12,378.19C187.76,388.68 198.71,398.01 199.45,398.91C200.62,400.33 200.12,401.83 195.72,410.07L190.64,419.58L193.02,429.66C194.33,435.20 195.60,439.93 195.85,440.18C196.50,440.83 224.60,395.06 224.60,393.35C224.60,392.56 222.15,389.93 219.16,387.50C216.17,385.08 188.14,361.72 156.87,335.60C125.60,309.48 90.49,280.45 78.85,271.10L57.68,254.10L57.64,223.46L57.60,192.81L88.85,173.86C176.25,120.87 257.71,72.38 258.31,72.98C258.98,73.65 224.54,138.07 177.65,223.84L161.40,253.57L154.75,247.77C151.09,244.58 144.53,238.96 140.18,235.28L132.25,228.60L123.68,228.61C118.96,228.61 112.00,228.91 108.21,229.27L101.31,229.92L104.34,232.51C126.39,251.39 170.08,288.30 217.11,327.75C249.00,354.51 276.84,377.93 278.98,379.78L282.85,383.16L276.64,393.63C273.22,399.39 258.71,423.34 244.39,446.85L218.35,489.60L137.48,489.60C92.99,489.60 56.60,489.25 56.60,488.82Z"; function Logo({ size = 36 }) { return ; } // -- Pain point icons --------------------------------------------------------- const PainIcons = { clock: () => , repeat: () => , calendar: () => , phone: () => , users: () => , alertCircle: () => , package: () => , messageCircle: () => , scissors: () => , utensils: () => , shoppingBag: () => , ruler: () => , }; // -- Chat renderer ------------------------------------------------------------ function renderChat(msg, i) { if (msg.card) { return ; } return {msg.text}; } // -- FAQ Item ----------------------------------------------------------------- function FAQItem({ q, a, open, onClick }) { return (
{a}
); } // -- Main page component ------------------------------------------------------ function VerticalPage() { const [faqOpen, setFaqOpen] = useState(0); 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 ( <> {/* Scroll progress */}
{/* Nav */} {/* 1 — HERO */}
{/* 2 — PAIN POINTS */}
The problem

Without AI, you're leaving money on the table.

{cfg.painPoints.map((p, i) => { const PainIcon = PainIcons[p.icon] || PainIcons.alertCircle; return (

{p.title}

{p.body}

); })}
{/* 3 — FEATURES + PHONE DEMO */}
{cfg.hero.eyebrow}

See how it works.

{cfg.chat.map(renderChat)}
{cfg.hero.kicker}

{cfg.hero.featureHeadline}

{cfg.hero.featureBody}

    {cfg.features.map((f, i) => (
  • {f.title} — {f.body}
    • ))}
Try the live demo
{/* 4 — PRICING */}
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.

{/* 5 — VERTICAL FAQ */}
FAQ

Common questions.

{cfg.verticalFaqs.map((f, i) => ( setFaqOpen(faqOpen === i ? -1 : i)}/> ))}

See all FAQs →

{/* 6 — FINAL CTA */}

{cfg.cta.headline}{" "}{cfg.cta.headlineAccent}

{cfg.cta.sub}

Book a 15-min demo
{/* FOOTER */} ); } const root = ReactDOM.createRoot(document.getElementById("root")); root.render();