import { Brand, BrandWordmark, PlatformLogo } from "@/components/brand"; import { useBrandName } from "@/hooks/use-brand-name"; import { usePlatformBranding } from "@/hooks/use-platform-branding"; import { BRAND_NAME } from "@/lib/branding/brand"; import { useState, useEffect, useRef, type ReactNode } from "react"; import { docsUrl } from "@/lib/docs/links"; import { SHOW_RESOURCE_LINKS } from "@/lib/docs/visibility"; import { createFileRoute, Link } from "@tanstack/react-router"; import { MessagesSquare, Sparkles, Zap, ShieldCheck, BarChart3, Users, ArrowRight, ArrowUpRight, Check, Github, Server, Bot, Workflow, Headphones, CalendarClock, Globe2, Star, Plug, Database, KeyRound, Layers, Megaphone, Ticket, Tag, Inbox, X, Clock, TrendingUp, GitBranch, Store, LifeBuoy, Blocks, Play, MessageCircle, QrCode, Camera, Send, Mail, MessageSquare, Instagram, ShoppingCart, Building2, GraduationCap, HeartPulse, Plane, Plus, Minus, Maximize2, MoreHorizontal, Settings, ChevronRight, type LucideIcon, ArrowLeft, UserPlus, AtSign, Phone, Book, BookOpen, Download, } from "lucide-react"; import { ThemeSwitcher } from "@/components/app/theme-switcher"; import GatewayFlow from "@/components/ui/gateway-flow"; import { Button } from "@/components/ui/button"; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"; import { DotPattern } from "@/components/ui/dot-pattern"; import { LeadCaptureForm } from "@/components/marketing/lead-capture-form"; import { SiAnthropic, SiGooglecalendar, SiGooglegemini, SiInstagram, SiMessenger, SiPaddle, SiStripe, SiTelegram, SiWhatsapp, } from "react-icons/si"; import { BsOpenai } from "react-icons/bs"; import { WhatsAppCtaButton, WhatsAppFloatingCta } from "@/components/marketing/whatsapp-cta-button"; import { ctaAttrs, trackMarketing } from "@/lib/analytics/events"; import { CurrentPlanBanner, CurrentPlanPill, isCurrentPlan, } from "@/components/app/marketing/current-plan-badge"; import { formatPlanPrice, isContactSalesPlan, monthlyEquivalent, planBullets, useMyPlanSummary, usePublicPlans, } from "@/lib/billing/public-plans"; import platformStackImg from "@/assets/marketing/platform-stack-illustration.png"; import featureAnalyticsImg from "@/assets/marketing/feature-analytics-new.png"; import featureAutomationsImg from "@/assets/marketing/feature-automations-new.png"; import featureBroadcastImg from "@/assets/marketing/feature-broadcast-new.png"; import featureHelpdeskImg from "@/assets/marketing/feature-helpdesk-new.png"; import featureAiStudioImg from "@/assets/marketing/feature-ai-studio.png"; import featureSharedInboxImg from "@/assets/marketing/feature-shared-inbox.png"; import stepperInboxImg from "@/assets/marketing/stepper-inbox.jpg"; import stepperFlowImg from "@/assets/marketing/stepper-flow.jpg"; import stepperCampaignImg from "@/assets/marketing/stepper-campaign.jpg"; import stepperBotImg from "@/assets/marketing/stepper-bot.jpg"; import stepperEcommerceImg from "@/assets/marketing/stepper-ecommerce.jpg"; import { FaqSection } from "@/components/marketing/faq-section"; import { LANDING_SOCIAL_DESCRIPTION, OG_IMAGE_URL, SITE_URL, getLandingContent, landingJsonLd, } from "@/lib/marketing/landing-content"; import { platformBrandingQueryOptions } from "@/hooks/use-platform-branding"; import { useTenantCurrency } from "@/hooks/use-currency"; import { redirectSignedInFromMarketing } from "@/lib/auth/marketing-redirect"; export const Route = createFileRoute("/")({ ssr: false, beforeLoad: redirectSignedInFromMarketing, loader: ({ context }) => context.queryClient.ensureQueryData(platformBrandingQueryOptions()), head: ({ loaderData: branding }) => { const content = getLandingContent(branding.platformName); return { meta: [ { title: content.title }, { name: "description", content: content.description }, { property: "og:title", content: content.title }, { property: "og:description", content: LANDING_SOCIAL_DESCRIPTION }, { property: "og:type", content: "website" }, { property: "og:url", content: `${SITE_URL}/` }, { property: "og:image", content: OG_IMAGE_URL }, { property: "og:image:width", content: "1200" }, { property: "og:image:height", content: "630" }, { property: "og:image:alt", content: "Omnichannel CRM shared inbox" }, { name: "twitter:card", content: "summary_large_image" }, { name: "twitter:title", content: content.title }, { name: "twitter:description", content: LANDING_SOCIAL_DESCRIPTION }, { name: "twitter:image", content: OG_IMAGE_URL }, { name: "twitter:image:alt", content: "Omnichannel CRM shared inbox" }, ], links: [{ rel: "canonical", href: `${SITE_URL}/` }], scripts: [ { type: "application/ld+json", children: JSON.stringify(landingJsonLd(branding.platformName)), }, ], }; }, component: LandingPage, }); function LandingPage() { return (
); } /* ============================================================ */ /* Nav */ /* ============================================================ */ function Nav() { const links = [ { href: "#features", label: "Features" }, { href: "#workflow", label: "Product" }, { href: "#industries", label: "Solutions" }, { href: "#pricing", label: "Pricing" }, { href: "#demo", label: "Book a demo" }, ]; return (
); } /* ============================================================ */ /* Hero — split: promise left, live WhatsApp mockup right */ /* ============================================================ */ function Hero() { return (
{/* Soft gradient wash */}
{/* Animated flow-line background — only lightly dimmed behind the centered text so copy stays legible */}
{/* CSS selects the palette before hydration; both documents use fixed modes so React never leaves an SSR fallback in the iframe. */}
{/* Theme-aware radial glow — strongest at center, fading outward */}
{/* Clipped separately from the section so the corner marks below aren't cut off too */}
WhatsApp, Messenger & Instagram APIs · Self-hosted

Every conversation.
{/* gradient text */} One unified workspace. {/* underline bar */}

unifies WhatsApp, Messenger, Instagram, Telegram and email into one CRM workspace — with sales pipelines, AI chatbots, broadcast campaigns and automation, on infrastructure you own.

{[ { Icon: SiWhatsapp, name: "WhatsApp", bg: "#25D366" }, { Icon: SiMessenger, name: "Messenger", bg: "#0084FF" }, { Icon: SiInstagram, name: "Instagram", bg: "#E1306C" }, { Icon: SiTelegram, name: "Telegram", bg: "#2CA5E0" }, { Icon: MessageSquare, name: "SMS", bg: "#FF6B00" }, { Icon: Headphones, name: "Live Chat", bg: "#00B5A3" }, { Icon: Mail, name: "Email", bg: "#64748B" }, ].map(({ Icon, name, bg }) => (
{name}
))}
); } /* ============================================================ */ /* Inbox demo — interactive mini UI for "Why WACRM" card 01 */ /* ============================================================ */ function InboxDemo() { const tabs = ["All", "WhatsApp", "Instagram", "Email", "Messenger"] as const; type Tab = (typeof tabs)[number]; const convs = [ { id: 1, name: "Sarah Johnson", init: "SJ", channel: "WhatsApp" as Tab, dot: "bg-[#25D366]", Icon: MessageCircle, msg: "Hi! I'd like to know about the premium plan 😊", time: "2m", unread: 2, tag: "Lead", tagCls: "bg-amber-500/10 text-amber-600", }, { id: 2, name: "Ahmed Hassan", init: "AH", channel: "Instagram" as Tab, dot: "bg-pink-500", Icon: Camera, msg: "Loved your post! Can I get a quote for 50 units?", time: "15m", unread: 1, tag: "Support", tagCls: "bg-blue-500/10 text-blue-600", }, { id: 3, name: "maria.garcia@example.com", init: "MG", channel: "Email" as Tab, dot: "bg-blue-500", Icon: Mail, msg: "Following up on order #4521 — any updates?", time: "1h", unread: 0, tag: null, tagCls: "", }, { id: 4, name: "James Lee", init: "JL", channel: "Messenger" as Tab, dot: "bg-blue-700", Icon: MessageSquare, msg: "Is this available in blue? Need it by Friday", time: "3h", unread: 0, tag: null, tagCls: "", }, { id: 5, name: "maria.garcia@example.com", init: "MG", channel: "Email" as Tab, dot: "bg-blue-500", Icon: Mail, msg: "Following up on order #4521 — any updates?", time: "1h", unread: 0, tag: null, tagCls: "", }, ]; const [activeTab, setActiveTab] = useState("All"); const filtered = activeTab === "All" ? convs : convs.filter((c) => c.channel === activeTab); return (
{/* Header */}
Inbox 12
3 agents online
{/* Channel tabs */}
{tabs.map((t) => ( ))}
{/* Conversation list */}
{filtered.length === 0 ? (

No conversations in {activeTab}

) : ( filtered.map((c, i) => (
{/* Avatar + channel dot */}
{c.init}
{/* Name + preview */}
{c.name} {c.tag && ( {c.tag} )} {c.time}

{c.msg}

{c.unread > 0 && ( {c.unread} )}
)) )}
); } /* ============================================================ */ /* Channel strip */ /* ============================================================ */ interface ChannelDef { name: string; Icon: LucideIcon; bg: string; tooltip: { badge: string; desc: string; features: string[]; }; } const CHANNELS: ChannelDef[] = [ { name: "WhatsApp Cloud API", Icon: MessageCircle, bg: "#25D366", tooltip: { badge: "Official Meta API", desc: "Full-scale WhatsApp via Meta's Cloud API — no phone required.", features: [ "Broadcast & template messages", "AI automation & chatbots", "Green tick badge eligible", "Unlimited concurrent sessions", ], }, }, { name: "WhatsApp QR", Icon: QrCode, bg: "#25D366", tooltip: { badge: "QR / Personal Number", desc: "Connect any WhatsApp number by scanning a QR code — no Meta approval needed.", features: [ "Zero approval process", "Personal or business number", "Multi-device support", "Instant setup in minutes", ], }, }, { name: "Instagram DM", Icon: Camera, bg: "#E1306C", tooltip: { badge: "Meta Graph API", desc: "Handle Instagram Direct Messages, story replies and comment-to-DM in one inbox.", features: [ "Story reply auto-capture", "Comment-to-DM flows", "Reels & post DMs", "Requires Meta Business approval", ], }, }, { name: "Messenger", Icon: MessagesSquare, bg: "#0084FF", tooltip: { badge: "Facebook Pages", desc: "Manage all Facebook Page messages from a shared team inbox.", features: [ "Persistent menus & quick replies", "24h messaging window support", "Multi-page management", "Handover protocol for bots", ], }, }, { name: "Telegram", Icon: Send, bg: "#2CA5E0", tooltip: { badge: "Telegram Bot API", desc: "Connect a Telegram bot to receive and send messages at scale.", features: [ "Inline keyboards & commands", "Group & channel support", "File sharing up to 2 GB", "No message window limits", ], }, }, { name: "Live Chat", Icon: Headphones, bg: "#00B5A3", tooltip: { badge: "Real-time Widget", desc: "Embed a live chat bubble on any website and capture visitors instantly.", features: [ "Real-time visitor presence", "Offline message fallback", "Custom brand colors & logo", "Pre-chat form & lead capture", ], }, }, { name: "SMS", Icon: MessageSquare, bg: "#FF6B00", tooltip: { badge: "SMS Gateway", desc: "Send and receive two-way SMS via Twilio or any local gateway.", features: [ "Two-way SMS conversations", "Bulk SMS campaigns", "OTP & transactional SMS", "Supports local & toll-free numbers", ], }, }, { name: "Email", Icon: Mail, bg: "#4285F4", tooltip: { badge: "IMAP / SMTP", desc: "Turn your support inbox into a shared team queue with full thread history.", features: [ "Full CC / BCC support", "Attachment handling", "Email-to-ticket threading", "Works with Gmail, Outlook & more", ], }, }, { name: "Web Widget", Icon: Globe2, bg: "#475569", tooltip: { badge: "Embeddable Widget", desc: "Drop a no-code chat widget on any site — connects to all your channels.", features: [ "One-line embed script", "Multi-language support", "Custom branding & avatars", "Mobile-responsive by default", ], }, }, ]; function ChannelStrip() { return (

One timeline for every conversation your customers start

{CHANNELS.map(({ name, Icon, bg, tooltip }) => ( {name}
{name}
{tooltip.badge}

{tooltip.desc}

    {tooltip.features.map((f) => (
  • {f}
    • ))}
))}
); } /* ============================================================ */ /* Bot demo — interactive chat for "AI that knows your */ /* business" card 02 */ /* ============================================================ */ function BotDemo() { type Msg = { id: number; from: "customer" | "bot"; text: string; context?: string }; const allMsgs: Msg[] = [ { id: 1, from: "customer", text: "Hi! When will my order arrive?" }, { id: 2, from: "bot", text: "Hi Sarah! 👋 Order #4521 is out for delivery — expected today by 6 PM.", context: "Order #4521 · CRM", }, { id: 3, from: "customer", text: "Can I also check my reward points?" }, { id: 4, from: "bot", text: "You have 840 pts — enough for a ₹200 discount on your next order! 🎉", context: "CRM · Loyalty", }, ]; const [shown, setShown] = useState(1); const [typing, setTyping] = useState(false); const scrollRef = useRef(null); useEffect(() => { if (shown >= allMsgs.length) { const t = setTimeout(() => { setShown(1); setTyping(false); }, 3000); return () => clearTimeout(t); } const next = allMsgs[shown]; if (next.from === "bot") { setTyping(true); const t = setTimeout(() => { setTyping(false); setShown((s) => s + 1); }, 1200); return () => clearTimeout(t); } else { const t = setTimeout(() => setShown((s) => s + 1), 1600); return () => clearTimeout(t); } }, [shown]); // eslint-disable-line react-hooks/exhaustive-deps useEffect(() => { scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: "smooth" }); }, [shown, typing]); const visible = allMsgs.slice(0, shown); return (
{/* Header */}

AI Assistant

● Online

CRM context
{/* Messages */}
{visible.map((m) => (
{m.context && (

{m.context}

)}
{m.text}
))} {typing && (
)}
{/* Input */}
Reply...
); } /* ============================================================ */ /* Campaign demo — animated stats for "Campaigns" card 03 */ /* ============================================================ */ function CampaignDemo() { const stats = [ { label: "Sent", value: 1240, pct: 100, color: "bg-blue-400" }, { label: "Delivered", value: 1198, pct: 97, color: "bg-indigo-400" }, { label: "Read", value: 891, pct: 72, color: "bg-whatsapp" }, { label: "Replied", value: 143, pct: 12, color: "bg-amber-400" }, ]; const [animate, setAnimate] = useState(false); useEffect(() => { const t = setTimeout(() => setAnimate(true), 400); return () => clearTimeout(t); }, []); return (
{/* Campaign header */}

Diwali Sale 2024 🪔

Premium customers · 1,240 contacts

Completed
{/* Animated stats */}
{stats.map((s) => (
{s.label}
{s.value.toLocaleString()} {s.pct}%
))}
{/* Template preview */}

Template

🪔 Hi {"{{name}}"}! Our biggest sale is live — up to 40% off. Shop now 👇

); } /* ============================================================ */ /* Stack replacement — before / after */ /* ============================================================ */ function StackReplacement() { const channelCards = [ { Icon: SiWhatsapp, name: "WhatsApp Business", bg: "#25D366", desc: "Official WhatsApp Cloud API. Send templates, broadcasts and 24/7 automated replies.", }, { Icon: SiMessenger, name: "Facebook Messenger", bg: "#0084FF", desc: "Reply to Page messages, comments and story mentions from the same inbox.", }, { Icon: SiInstagram, name: "Instagram DMs", bg: "#E1306C", desc: "Manage Instagram direct messages, comments and mentions in real time.", }, { Icon: MessageSquare, name: "SMS Campaigns", bg: "#FF6B00", desc: "Reach customers instantly with high-deliverability SMS broadcasts and alerts.", }, { Icon: Mail, name: "Email", bg: "#64748B", desc: "Send transactional and marketing email from the same contact timeline.", }, { Icon: SiTelegram, name: "Telegram", bg: "#26A5E4", desc: "Connect a Telegram bot in seconds — no business verification, no message templates.", }, ]; const features = [ { num: "01", title: "One inbox, every channel", desc: "WhatsApp, Messenger, Instagram, email and live chat — all conversations in a single workspace. No tab-switching, no missed messages, no per-agent fees.", link: "/helpdesk", linkLabel: "Open Inbox", image: featureSharedInboxImg, imageAlt: "Unified inbox showing conversations from multiple messaging channels", }, { num: "02", title: "AI that knows your business", desc: "Bot flows with live CRM context, product catalog and order history. Handles FAQs, qualifies leads and escalates automatically — no developer required.", link: "/wa-chatbot", linkLabel: "Build AI Flows", image: stepperBotImg, imageAlt: "AI chatbot flow builder connected to CRM and product catalog", }, { num: "03", title: "Campaigns that actually convert", desc: "Segment contacts straight from live CRM data, send approved WhatsApp templates and track delivery, opens and revenue — all in one dashboard.", link: "/messenger/send", linkLabel: "Launch Campaign", image: stepperCampaignImg, imageAlt: "WhatsApp broadcast campaign dashboard with delivery stats and segmented lists", }, ]; return (
{/* Header row */}
{/* Left — title */}
Why

Stop juggling four tools.
One platform does it all.

{/* Centre — lede with left accent border */}

Most teams bolt a chatbot onto a helpdesk, export contacts into a CRM, then pay a fourth vendor to send campaigns. collapses that into one platform with one shared database.

{/* Right — text CTA */}
View all modules
{/* 3-col × 2-row feature grid */} {/*
*/} {/* Row 1 — text */} {/*
{features.map((f) => (
{f.num}

{f.title}

{f.desc}

{f.linkLabel}
))}
*/} {/* Row 2 — illustrations */} {/*
{features.map((f, i) => (
{i === 0 ? : i === 1 ? : }
))}
*/} {/*
*/} {/* Connection map */}
{/* Channel coverage — every messaging channel in one shared inbox */}
{channelCards.map((c) => (

{c.name}

{c.desc}

))}
); } /* ============================================================ */ /* Features — bento grid */ /* ============================================================ */ function FeatureCardAutomations() { return (
{/* ── Connector lines ── */} {/* Trigger → Condition */} {/* Condition → Assign Agent */} {/* Condition → Bot Reply */} {/* Assign Agent → Notify Team */} {/* Bot Reply → Tag Contact */} {/* ── TRIGGER node ── */} {/* live pulse dot */} TRIGGER New WhatsApp message {/* ── CONDITION node ── */} CONDITION Business hours? {/* Yes / No branch labels */} Yes No {/* ── ACTION: Assign Agent ── */} Assign to agent {/* ── ACTION: Bot Reply ── */} Send bot reply {/* ── ACTION: Notify Team ── */} Notify sales team {/* ── ACTION: Tag Contact ── */} Tag: follow-up
); } function FeatureCardBroadcast() { return (
{/* Campaign Trigger */} Campaign Trigger Audience segment 2,400 contacts · Flash Sale {/* Trigger → API */} {/* WhatsApp API */} WhatsApp API Throttled delivery · per-message read receipts SENDING 2,390 / 2,400 {/* API → 3 results */} {/* Delivered */} Delivered 98.6% 2,367 messages {/* Opened */} Opened 42.1% 1,010 read {/* Clicked */} Clicked 8.3% 199 link taps
); } function FeatureCardAnalytics() { const days = ["M", "T", "W", "T", "F", "S", "S"]; return (
{/* Chart background */} {/* Grid lines */} {/* Area fills */} {/* Lines */} {/* Peak highlight */} {/* Legend */} Messages sent Read {/* Day labels */} {days.map((d, i) => ( {d} ))} {/* KPI tile — Response */} Avg. Response 4m 12s 18% faster vs last week {/* KPI tile — CSAT */} CSAT Score 4.8 ★ 342 ratings · last 30 days
); } function FeatureCardHelpdesk() { return (
{/* OPEN column */} OPEN 12 #1042 · Sarah J. Billing issue · High #1043 · Ahmed H. Refund request · Med #1044 · James K. Onboarding help · Low {/* Arrow Open→Pending */} {/* PENDING column */} PENDING 5 #1038 · Maria G. Awaiting reply · Med #1041 · Chen L. Under review · Low +3 more {/* Arrow Pending→Resolved */} {/* RESOLVED column */} RESOLVED 48 #1030 · Priya M. ✓ Closed · 1h 32m #1031 · Li W. ✓ Closed · 45m +46 more ✓ {/* SLA alert */} SLA breach in 18 min · Ticket #1042 · Billing issue — High priority
); } function FeatureCardCommerce() { return (
{/* Catalog node */} WhatsApp Catalog {/* Product 1 */} Premium Bundle All features · WhatsApp + 5 channels $49 / mo Add {/* Product 2 */} Starter Plan WhatsApp · 1 agent · Core features $19 / mo Add {/* Cart */} Cart · 2 items $68.00 {/* Arrow catalog → order */} {/* Order node */} Order Created Order ID #ORD-2847 ✓ Confirmed Items · Premium Bundle · Starter Plan Total $68.00 {/* Bottom WA notification */} W WhatsApp order update sent to customer Order #ORD-2847 confirmed · Tracking link attached View Order
); } function FeatureCardAppointments() { const days = ["M", "T", "W", "T", "F", "S", "S"]; const slots = [ false, true, false, true, true, false, false, true, false, true, false, true, false, false, ]; return (
{/* Calendar node */} Booking Calendar Oct 2026 {/* Day headers */} {days.map((d, i) => ( {d} ))} {/* Calendar slots */} {slots.map((active, i) => { const col = i % 7; const row = Math.floor(i / 7); const cx = 14 + col * 18; const cy = 36 + row * 18; return ( {i + 8} ); })} {/* Next appointment */} Next: Today 3:00 PM · Demo call {/* Arrow calendar → confirmation */} {/* Booking Confirmation node */} Booking Confirmed Customer Sarah Johnson Service Demo Call · 30 min Date & Time Oct 9 · 3:00 PM ✓ WA Reminder Sent {/* Bottom upcoming bar */} Upcoming Oct 9 · 3:00 PM Oct 10 · 10:00 AM Oct 11 · 2:00 PM +9
); } // Small "+" mark centered exactly on a border intersection — reusable across // any `relative` bordered block. The translate direction has to flip per // corner (top/left corners pull back toward 0, bottom/right corners push // forward past 100%) or the mark centers on the wrong side of the line. function CornerPlus({ corner, className, size = "size-3.5", }: { corner: "tl" | "tr" | "bl" | "br"; /** Color override for marks on a dark/inverse surface (default: text-foreground/90). */ className?: string; /** Tailwind size-* class — override when the mark sits on a thicker/wider line. */ size?: string; }) { const vertical = corner[0] === "t" ? "top-0 -translate-y-1/2" : "bottom-0 translate-y-1/2"; const horizontal = corner[1] === "l" ? "left-0 -translate-x-1/2" : "right-0 translate-x-1/2"; return ( ); } type PlatformCard = { title: string; desc: string; image: string; }; function Features() { const leftCards: PlatformCard[] = [ { title: "Shared Inbox", desc: "Every channel, one queue — assign, tag, snooze and hand off between bot and human without losing a message.", image: featureSharedInboxImg, }, { title: "AI Studio", desc: "Reply suggestions, summaries and sentiment — powered by Gemini, OpenAI, Anthropic or Groq.", image: featureAiStudioImg, }, { title: "Automations", desc: "Trigger-based workflows for welcome messages, tagging, escalation and off-hours auto-reply.", image: featureAutomationsImg, }, ]; const rightCards: PlatformCard[] = [ { title: "Broadcast Campaigns", desc: "Approved templates, segmented lists and throttled sending with per-message delivery reporting.", image: featureBroadcastImg, }, { title: "Analytics", desc: "Delivery, read, response and CSAT metrics with team-level performance breakdowns.", image: featureAnalyticsImg, }, { title: "Helpdesk & SLA", desc: "Tickets, priorities, business hours and automatic breach alerts on every thread.", image: featureHelpdeskImg, }, ]; const pillars = [ { icon: MessagesSquare, title: "Omnichannel Messaging", desc: "Manage WhatsApp, Messenger, Instagram, Telegram and Email from one unified inbox.", }, { icon: Users, title: "Team Collaboration", desc: "Assign conversations, share context and keep every team member aligned.", }, { icon: BarChart3, title: "CRM & Sales", desc: "Turn conversations into leads, customers and stronger business relationships.", }, { icon: Zap, title: "Automation & Bots", desc: "Automate repetitive tasks with workflows, chatbots and smart routing.", }, ]; // Shared Inbox is active by default; hovering another card switches to it, // and the panel stays on the last-hovered card instead of resetting. const [active, setActive] = useState<{ side: "left" | "right"; index: number }>({ side: "left", index: 0, }); return (
Platform Featues

Everything you need to run omnichannel support at scale.

Forty-plus modules share one contact graph, so a chatbot, a campaign and a sales rep all see the same customer.

{/* Left column */}
{leftCards.map((card, i) => (
setActive({ side: "left", index: i })} className={`px-8 py-9 transition-colors md:px-12 ${i !== leftCards.length - 1 ? "border-b border-border" : ""} ${active.side === "left" && active.index === i ? "bg-muted/50" : ""}`} >

{card.title}

{card.desc}

))}
{/* Center image — full-bleed, crossfades + scales on hover/change */}
{[ ...leftCards.map((card, i) => ({ card, side: "left" as const, index: i })), ...rightCards.map((card, i) => ({ card, side: "right" as const, index: i })), ].map(({ card, side, index }) => { const isActive = active.side === side && active.index === index; return ( {card.title} ); })}
{/* Right column */}
{rightCards.map((card, i) => (
setActive({ side: "right", index: i })} className={`px-8 py-9 transition-colors md:px-12 ${i !== rightCards.length - 1 ? "border-b border-border" : ""} ${active.side === "right" && active.index === i ? "bg-muted/50" : ""}`} >

{card.title}

{card.desc}

))}
{/* Four pillars — why teams pick WACRM, folded into Platform Features */}
{pillars.map(({ icon: Icon, title, desc }) => (

{title}

{desc}

))}
); } /* ============================================================ */ /* Isometric platform stack — four layers (channels → AI → */ /* CRM → your data) threaded with brand/feature icons along a */ /* diagonal, inside a dotted isometric box wireframe. */ /* ============================================================ */ function PlatformStackIllustration() { const brandName = useBrandName(); return ( // lg:flex-1 + lg:self-stretch (flexbox, not grid — grid's percentage-height // stretch is unreliable here) matches this to the text column's full // height; object-bottom then anchors the artwork to the bottom edge so it // lines up with the CTA button beside it, instead of its top.
{/*
*/}
{/* A normal in-flow block respects the parent's padding directly — an `absolute inset-0` image ignores padding unless height/width are left unset, which fought with object-cover here. */} {`Isometric {/* Brand badge overlaid on the stock illustration */} Platform {/* Caption chip, bottom-right */} One connected stack
); } /* ============================================================ */ /* Industry / use cases — six verticals + an illustrated inbox */ /* mockup, directly below Platform Features. */ /* ============================================================ */ function IndustryUseCases() { const industries = [ { icon: ShoppingCart, title: "E-commerce & Retail", desc: "Turn customer inquiries into sales with connected conversations and faster support.", color: "bg-emerald-50 text-emerald-600 dark:bg-emerald-500/10 dark:text-emerald-400", }, { icon: Store, title: "Local Businesses", desc: "Manage customer messages, appointments and everyday communication in one workspace.", color: "bg-sky-50 text-sky-600 dark:bg-sky-500/10 dark:text-sky-400", }, { icon: Building2, title: "Real Estate & Property", desc: "Capture inquiries, organize leads and keep every property conversation moving.", color: "bg-slate-100 text-slate-600 dark:bg-slate-500/10 dark:text-slate-300", }, { icon: GraduationCap, title: "Education & Training", desc: "Simplify student inquiries, admissions communication and follow-ups.", color: "bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400", }, { icon: HeartPulse, title: "Healthcare & Clinics", desc: "Coordinate patient inquiries, appointment communication and team responses.", color: "bg-rose-50 text-rose-600 dark:bg-rose-500/10 dark:text-rose-400", }, { icon: Plane, title: "Hospitality & Travel", desc: "Deliver more connected guest experiences, from first inquiry to ongoing support.", color: "bg-cyan-50 text-cyan-600 dark:bg-cyan-500/10 dark:text-cyan-400", }, ]; return (
Built for every industry

One platform. Endless possibilities.

From growing businesses to established teams, brings customer conversations, sales and automation together.

{/* Image aligns with just the card grid, not the copy/CTA row above */}
{industries.map(({ icon: Icon, title, desc, color }) => (

{title}

{desc}

))}
{/* Right — isometric platform stack: channels → AI → CRM → your data */}
); } /* ============================================================ */ /* Unified inbox spotlight — dedicated deep-dive on the shared */ /* omnichannel inbox, with an illustrated browser mockup. */ /* ============================================================ */ function UnifiedInboxSpotlight() { const highlights = [ { num: "01", title: "All Conversations in One Place", desc: "Manage messages from every connected channel without switching between apps.", }, { num: "02", title: "Seamless Team Collaboration", desc: "Assign conversations, coordinate responses, and keep your team working together.", }, { num: "03", title: "Complete Customer Context", desc: "Access customer profiles, conversation history, tags, and CRM information alongside every chat.", }, { num: "04", title: "Smarter Conversation Management", desc: "Organize conversations with filters, statuses, ownership, and quick actions.", }, ]; // Hovering a highlight calls out the matching zone of the inbox mockup on // the right; the mockup stays on the last-hovered zone instead of resetting. const [active, setActive] = useState(0); return (
{/* Header row */}
{/* Left — title */}
Unified Omnichannel Inbox

Every channel.
One powerful inbox.

{/* Centre — lede with left accent border */}

Bring WhatsApp, Messenger, Instagram, Telegram, and Email conversations together in one shared workspace. Respond faster, collaborate effortlessly, and keep every customer interaction organized.

{/* Right — text CTA */}
Omnichannel Inbox
{/* Left — copy */}
    {highlights.map((h, i) => (
  • setActive(i)} className={`flex gap-4 p-8 border-b border-border transition-colors cursor-default ${ active === i ? "bg-muted/50" : "" }`} > {h.num}

    {h.title}

    {h.desc}

    • ))}
{/* Right — illustrated inbox mockup */}
); } function UnifiedInboxMockup({ active = 0 }: { active?: number }) { // Placeholder zone call-outs standing in for real screenshots/components — // index matches the left-hand numbered highlights (01-04) so hovering one // rings the matching part of the mockup. Swap for real content later. const zoneRing = (zone: number) => active === zone ? "ring-2 ring-inset ring-[#015941]" : "ring-2 ring-inset ring-transparent"; const channelDots = [ { Icon: SiWhatsapp, bg: "#25D366" }, { Icon: SiMessenger, bg: "#0084FF" }, { Icon: SiInstagram, bg: "#E1306C" }, { Icon: SiTelegram, bg: "#2CA5E0" }, { Icon: Mail, bg: "#4285F4" }, ]; const conversations = [ { name: "Priya Sharma", snippet: "Is the order still available?", Icon: SiWhatsapp, bg: "#25D366", active: true, }, { name: "Daniel Cruz", snippet: "Thanks for the quick reply!", Icon: SiMessenger, bg: "#0084FF", }, { name: "Amara Okafor", snippet: "Can I get a discount code?", Icon: SiInstagram, bg: "#E1306C", }, { name: "Tom Becker", snippet: "Sent the invoice, please check.", Icon: Mail, bg: "#4285F4" }, { name: "Lena Fischer", snippet: "See you at 3pm then!", Icon: SiTelegram, bg: "#2CA5E0" }, { name: "Sophie Laurent", snippet: "Do you ship internationally?", Icon: SiInstagram, bg: "#E1306C", }, { name: "Marcus Webb", snippet: "Received the samples, thank you!", Icon: SiWhatsapp, bg: "#25D366", }, { name: "Isabella Rossi", snippet: "Can we reschedule the call?", Icon: SiMessenger, bg: "#0084FF", }, ]; // Shuffle the conversation list to the front per selected highlight, so the // list visibly reorders (not just the main panel) — indices into // `conversations` above. First index in each row becomes the open thread. const orderByZone: Record = { 0: [0, 1, 2, 3, 4, 5, 6, 7], 1: [1, 3, 0, 2, 4, 5, 6, 7], 2: [2, 6, 0, 1, 3, 4, 5, 7], 3: [4, 5, 7, 0, 1, 2, 3, 6], }; const orderedConversations = orderByZone[active].map((i) => conversations[i]); const openContactName = orderedConversations[0].name; return (
{/* BG Gradient */} {/*
*/}
{/* Decorative dot-grid pattern behind the whole mockup */}
{/* Decorative mint blob behind the mockup */}
{/* Browser chrome */}
— Unified Inbox
{/* Dark sidebar — zone 1: Seamless Team Collaboration */}
{[MessageSquare, Users, BarChart3, Megaphone, Ticket, Workflow].map((Icon, i) => ( ))}
{/* Conversation list — zone 0: All Conversations in One Place */}
All Channels ▾
{orderedConversations.map((c, i) => (

{c.name}

{c.snippet}

))}
{/* Main panel — content actually swaps per selected highlight instead of just ringing a static view (zoneRing isn't used here since every state 0-3 gets its own distinct view below). Placeholder views stand in for real screenshots. */}
{/* 00 — All Conversations: the live chat thread */}

{openContactName}

Today, 10:42 AM

Hi! Is the order still available?
Yes! We still have it in stock 🎉
Great, I'll place the order now.
Perfect! I'll send the payment link right away.
Received, paying now 👍
Awesome, your order will ship today!
Type a message
{/* 01 — Seamless Team Collaboration: assignment, mentions, internal notes */}

{openContactName}

{["#015941", "#0284c7", "#d97706"].map((bg, i) => ( {["A", "S", "M"][i]} ))}
Internal note — VIP customer, prioritize response.
Great, I'll place the order now.
Alex — can you confirm stock before I reply?
Perfect! I'll send the payment link right away.
Alex is typing
{/* 02 — Complete Customer Context: profile, tags, order history */}

{openContactName}

Full profile
VIP Returning Customer
priya.sharma@email.com
+1 (555) 012-3344

Lifetime value

$420.00

Orders

3

Order #4471 — Delivered

{/* 03 — Smarter Conversation Management: status board + quick actions */}

Board view

Filters
{[ { label: "Open", color: "#015941", items: ["Priya Sharma", "Marcus Webb"] }, { label: "Pending", color: "#d97706", items: ["Daniel Cruz", "Lena Fischer"], }, { label: "Resolved", color: "#64748b", items: ["Amara Okafor", "Tom Becker"], }, ].map((col) => (
{col.label}
{col.items.map((name) => (
{name}
))}
))}
{/* Floating channel selector — top right */}
{channelDots.map(({ Icon, bg }, i) => ( ))}
{/* Floating conversation-distribution card — bottom left — zone 3: Smarter Conversation Management */}
); } /* ============================================================ */ /* CRM & Sales spotlight — pipeline deep-dive, directly below */ /* the Unified Inbox spotlight, with an illustrated CRM mockup. */ /* ============================================================ */ function CRMSalesSpotlight() { const highlights = [ { num: "01", title: "Lead & Contact Management", desc: "Keep leads, contacts, and customer information organized in one centralized workspace.", }, { num: "02", title: "Sales Pipeline Visibility", desc: "Track opportunities, manage deals, and follow every stage of your sales process.", }, { num: "03", title: "Complete Customer Profiles", desc: "Access customer details, conversation history, tags, and ownership information in one place.", }, { num: "04", title: "Sales Insights & Team Visibility", desc: "Stay informed with customer activities, sales performance, and clearer team coordination.", }, ]; // Hovering a highlight calls out the matching zone of the mockup; column // order now matches the Unified Omnichannel Inbox section exactly (narrow // list left, wide mockup right) — only the alive background sets this // section apart. const [active, setActive] = useState(0); return (
{/* Header row — same 2-track template as the body grid below (narrow track first, wide track second) so the divider lines up. */}
{/* Left — title */}
CRM & Sales

Turn conversations into customer relationships.

{/* Centre — lede */}

Manage leads, organize contacts, track sales opportunities, and build stronger customer relationships — all within your connected CRM workspace.

{/* Right — text CTA */}
CRM & Sales
{/* Left — copy */}
    {highlights.map((h, i) => (
  • setActive(i)} className={`flex gap-4 p-8 border-b border-border transition-colors cursor-default ${ active === i ? "bg-muted/50" : "" }`} > {h.num}

    {h.title}

    {h.desc}

    • ))}
{/* Right — illustrated CRM mockup */}
); } function CRMSalesMockup({ active = 0 }: { active?: number }) { // Zone call-outs matching the left-hand... now right-hand numbered // highlights (01-04), same placeholder pattern as the other spotlights. const zoneRing = (zone: number) => active === zone ? "ring-2 ring-inset ring-[#015941]" : "ring-2 ring-inset ring-transparent"; const stats = [ { label: "Open Leads", value: "128", sub: "+12 this week", icon: Users }, { label: "Pipeline Value", value: "$84.2k", sub: "24 active deals", icon: BarChart3 }, { label: "Win Rate", value: "38%", sub: "+4% vs last month", icon: TrendingUp }, { label: "Avg. Deal Size", value: "$3,510", sub: "68 closed won", icon: Star }, ]; const stages = [ { name: "New Lead", deals: [ { name: "Horizon Textiles", value: "$2,400", dot: "#25D366" }, { name: "Blue Harbor Co.", value: "$1,150", dot: "#38bdf8" }, { name: "Nova Retail Group", value: "$3,800", dot: "#25D366" }, ], }, { name: "Qualified", deals: [ { name: "Hilltop Logistics", value: "$5,200", dot: "#38bdf8" }, { name: "Crestline Media", value: "$2,950", dot: "#38bdf8" }, { name: "Dune Apparel", value: "$1,800", dot: "#f59e0b" }, ], }, { name: "Proposal Sent", deals: [ { name: "Vertex Labs", value: "$7,400", dot: "#f59e0b" }, { name: "Solace Interiors", value: "$2,100", dot: "#38bdf8" }, { name: "Marbleton Foods", value: "$4,650", dot: "#25D366" }, ], }, { name: "Won", deals: [ { name: "Echo Fitness", value: "$6,300", dot: "#015941" }, { name: "Palmview Realty", value: "$9,100", dot: "#015941" }, { name: "Juniper & Co.", value: "$3,250", dot: "#015941" }, ], }, ]; const leads = [ { name: "Horizon Textiles", contact: "Maria Chen", Icon: SiWhatsapp, color: "#25D366", tag: "New Lead", }, { name: "Blue Harbor Co.", contact: "James Patel", Icon: Mail, color: "#64748B", tag: "Contacted", }, { name: "Nova Retail Group", contact: "Elena Sousa", Icon: SiMessenger, color: "#0084FF", tag: "New Lead", }, { name: "Hilltop Logistics", contact: "Omar Said", Icon: SiTelegram, color: "#2CA5E0", tag: "Qualified", }, ]; const team = [ { name: "Alex Rivera", closed: "14 deals", value: "$32.4k" }, { name: "Sarah Chen", closed: "11 deals", value: "$24.8k" }, { name: "Marcus Lee", closed: "9 deals", value: "$18.1k" }, ]; return (
{/* BG Gradient */} {/*
*/}
{/* Soft mint halo, centered behind the whole mockup */}
{/* Small dot-grid clusters in opposite corners, echoing the reference */}
{/* Browser chrome */}
— CRM & Sales
{/* Dark sidebar */}
{[Inbox, MessageSquare, Users, Megaphone, Ticket, Workflow].map((Icon, i) => ( ))}
{/* Main content — the view swaps per selected highlight instead of just ringing a static Sales Pipeline page. */}
{/* Header — title swaps with the selected highlight */}

{ [ "Leads & Contacts", "Sales Pipeline", "Customer Profile", "Sales Insights", ][active] }

{ [ "128 open leads", "24 active deals · $84.2k total value", "Complete activity & ownership", "Team performance overview", ][active] }

New Deal
{/* 00 — Lead & Contact Management: leads list */}
{leads.map((l) => (

{l.name}

{l.contact}

{l.tag}
))}
{/* 01 — Sales Pipeline Visibility: kanban board */}
{stages.map((stage) => (

{stage.name}

{stage.deals.length}
{stage.deals.map((d) => (

{d.name}

{d.value}

))}
))}
{/* 02 — Complete Customer Profiles: single contact detail */}
PS

Priya Sharma

Horizon Textiles

VIP Returning

$2,400

Open deal

Recent activity

"Is the order still available?" — via WhatsApp

Owned by Alex Rivera

{/* 03 — Sales Insights & Team Visibility: stats + rep leaderboard */}
{stats.map((s) => (

{s.label}

{s.value}

))}

Top performers

{team.map((m) => (
{m.name .split(" ") .map((p) => p[0]) .join("")}

{m.name}

{m.closed}

{m.value}
))}
{/* Floating performance summary widget — bottom-center, overlapping the mockup's bottom edge like the reference, instead of off to one side — zone 3: Sales Insights & Team Visibility */}
); } /* ============================================================ */ /* Automation & Bots spotlight — below CRM & Sales. */ /* ============================================================ */ function AutomationBotsSpotlight() { const highlights = [ { num: "01", title: "Visual Flow Builder", desc: "Design automated conversation journeys with an intuitive drag-and-drop workflow builder.", }, { num: "02", title: "Intelligent Chatbots", desc: "Deliver instant, automated responses and guide customers through structured conversations.", }, { num: "03", title: "Smart Triggers & Actions", desc: "Automatically initiate workflows based on incoming messages, conditions, and customer interactions.", }, { num: "04", title: "Seamless Team Handoffs", desc: "Route conversations to the right team members when personal assistance is needed.", }, ]; // Hovering a highlight calls out the matching list row, mirroring the // Unified Omnichannel Inbox section's framed-box layout and interaction. const [active, setActive] = useState(0); return (
{/* Header row — same 2-track template as the body grid below (no extra "auto" track) so the column divider lines up exactly. */}
{/* Left — title */}
Automation & Bots

Automate conversations.
Focus on what matters.

{/* Centre — lede */}

Build powerful workflows, automate customer interactions, and let intelligent chatbots handle repetitive conversations — all from one connected workspace.

{/* Right — text CTA */}
Automation & Bots
{/* Left — copy */}
    {highlights.map((h, i) => (
  • setActive(i)} className={`flex gap-4 p-8 border-b border-border transition-colors cursor-default ${ active === i ? "bg-muted/50" : "" }`} > {h.num}

    {h.title}

    {h.desc}

    • ))}
{/* Right — illustrated flow-builder mockup */}
); } function AutomationBotsMockup({ active = 0 }: { active?: number }) { // Zone call-outs matching the left-hand numbered highlights (01-04), same // placeholder pattern as the Unified Inbox mockup — hovering a highlight // rings the matching part of this mockup instead of doing nothing. const zoneRing = (zone: number) => active === zone ? "ring-2 ring-inset ring-[#015941]" : "ring-2 ring-inset ring-transparent"; const triggerNode = { icon: Zap, label: "Incoming Message", sub: "Trigger · Any channel", bg: "bg-emerald-50 text-primary dark:bg-emerald-500/15 dark:text-emerald-300", }; const conditionNode = { icon: GitBranch, label: "Message Intent", sub: "Condition", }; const branches = [ { icon: Mail, label: "Automated Reply", sub: "Action", tag: "General inquiry", edge: "#015941", bg: "bg-emerald-50 text-primary dark:bg-emerald-500/15 dark:text-emerald-300", }, { icon: Bot, label: "Assign Conversation", sub: "Action", tag: "Needs a human", edge: "#0284c7", bg: "bg-sky-50 text-sky-600 dark:bg-sky-500/15 dark:text-sky-300", }, { icon: Clock, label: "Follow-Up", sub: "Action", tag: "No reply · 2h", edge: "#d97706", bg: "bg-amber-50 text-amber-600 dark:bg-amber-500/15 dark:text-amber-300", }, ]; const stats = [ { label: "Workflow Runs", value: "1,284", icon: Workflow }, { label: "Completed Actions", value: "3,902", icon: Check }, { label: "Active Flows", value: "26", icon: Zap }, { label: "Team Handoffs", value: "142", icon: Users }, ]; return (
{/* BG Gradient */} {/*
*/}
{/* Decorative dot-grid pattern behind the whole mockup */}
{/* Decorative mint blob behind the mockup */}
{/* Browser chrome */}
— Visual Flow Builder
{/* Dark sidebar */}
{[Inbox, MessageSquare, Users, Database, BarChart3, Blocks].map((Icon, i) => ( ))}
{/* Canvas */}
{/* Header / toolbar — title swaps with the selected highlight */}

{ [ "Customer Support Automation", "WhatsApp Support Bot", "Automation Rules", "Team Routing", ][active] }

{ [ "Active · Last run 2m ago", "AI-powered · 94% resolution rate", "4 active triggers", "Auto-assign by skill", ][active] }

Test 100% success
{/* Content area — the view actually swaps per selected highlight instead of just ringing a static canvas. */}
{/* 00 — Visual Flow Builder: the node diagram */}
{/* Connector edges, drawn behind the nodes */} {[ [148, 180], [202, 180], [258, 180], [330, 50], [330, 180], [330, 310], ].map(([cx, cy], i) => ( ))} {/* Trigger node */}

{triggerNode.label}

{triggerNode.sub}

{/* Condition diamond */}
{/* Branch action nodes */} {branches.map((b, i) => (

{b.label}

{b.sub}

))}
{/* Zoom controls, bottom-right of the canvas */}
100%
{/* 01 — Intelligent Chatbots: intents + live chat preview */}

Intents

{[ { label: "Order Status", Icon: ShoppingCart, active: true }, { label: "Returns & Refunds", Icon: LifeBuoy }, { label: "Product Info", Icon: MessageCircle }, { label: "Human Handoff", Icon: Users }, ].map((it) => (
{it.label}
))}
Hi, where is my order #4821?

It shipped this morning — tracking number 1Z9F8X2.

Source: Order Status API
Perfect, thank you!
{/* 02 — Smart Triggers & Actions: rules table */}
{[ { Icon: Zap, trigger: "New message received", action: "Send welcome reply", status: "Active", }, { Icon: Clock, trigger: "No reply in 2 hours", action: "Send follow-up", status: "Active", }, { Icon: AtSign, trigger: 'Customer mentions "refund"', action: "Assign to Billing team", status: "Active", }, { Icon: Star, trigger: "Chat rating below 3", action: "Notify manager", status: "Paused", }, ].map((r) => (

IF {r.trigger}

THEN {r.action}

{r.status}
))}
{/* 03 — Seamless Team Handoffs: routing + team load */}
Auto-assign by skill: Billing → Finance Team
{[ { name: "Alex Rivera", bg: "#015941", load: "3 / 5 chats", online: true }, { name: "Sarah Chen", bg: "#0284c7", load: "2 / 5 chats", online: true }, { name: "Marcus Lee", bg: "#d97706", load: "5 / 5 chats", online: false }, ].map((m) => (
{m.name .split(" ") .map((p) => p[0]) .join("")}

{m.name}

{m.load}

))}
{/* Floating chatbot preview widget — zone 1: Intelligent Chatbots */} {/* Floating workflow overview widget — zone 3: Seamless Team Handoffs */}
); } /* ============================================================ */ /* Marketing Campaigns spotlight — below Automation & Bots. */ /* ============================================================ */ function MarketingCampaignsSpotlight() { const highlights = [ { num: "01", title: "Campaign Management", desc: "Create, organize, and manage customer engagement campaigns from a centralized dashboard.", }, { num: "02", title: "Audience Organization", desc: "Keep your target audiences and customer segments organized for more relevant communication.", }, { num: "03", title: "Delivery Tracking", desc: "Stay informed with clear campaign statuses, message delivery updates, and progress visibility.", }, { num: "04", title: "Campaign Insights", desc: "Understand messaging performance and identify opportunities to improve customer engagement.", }, ]; // Hovering a highlight calls out the matching zone of the mockup; column // order now matches the Unified Omnichannel Inbox section exactly (narrow // list left, wide mockup right) — only the alive background sets this // section apart. const [active, setActive] = useState(0); return (
{/* Header row — same 2-track template as the body grid below (narrow track first, wide track second) so the divider lines up. */}
{/* Left — title */}
Marketing Campaigns

Reach the right audience. Make every message count.

{/* Centre — lede */}

Plan, manage, and track customer messaging campaigns from one connected workspace. Keep your outreach organized and gain clearer visibility into campaign activity.

{/* Right — text CTA */}
Marketing Campaigns
{/* Left — copy */}
    {highlights.map((h, i) => (
  • setActive(i)} className={`flex gap-4 p-8 border-b border-border transition-colors cursor-default ${ active === i ? "bg-muted/50" : "" }`} > {h.num}

    {h.title}

    {h.desc}

    • ))}
{/* Right — illustrated campaigns mockup */}
); } function MarketingCampaignsMockup({ active = 0 }: { active?: number }) { // Zone call-outs matching the right-hand numbered highlights (01-04), same // placeholder pattern as the other spotlights. const zoneRing = (zone: number) => active === zone ? "ring-2 ring-inset ring-[#015941]" : "ring-2 ring-inset ring-transparent"; const campaigns = [ { name: "New Product Launch", Icon: SiWhatsapp, iconBg: "bg-emerald-50 text-[#25D366] dark:bg-emerald-500/15", audience: "2,480", status: "Sent", statusCls: "bg-emerald-50 text-primary dark:bg-emerald-500/15 dark:text-emerald-300", sent: "Oct 10, 2026", }, { name: "Holiday Promotion", Icon: Mail, iconBg: "bg-sky-50 text-sky-600 dark:bg-sky-500/15", audience: "5,120", status: "Scheduled", statusCls: "bg-sky-50 text-sky-600 dark:bg-sky-500/15 dark:text-sky-300", sent: "Oct 14, 2026", }, { name: "Abandoned Cart", Icon: SiWhatsapp, iconBg: "bg-emerald-50 text-[#25D366] dark:bg-emerald-500/15", audience: "1,860", status: "Draft", statusCls: "bg-muted text-muted-foreground", sent: "—", }, { name: "Customer Updates", Icon: Mail, iconBg: "bg-sky-50 text-sky-600 dark:bg-sky-500/15", audience: "3,450", status: "Sent", statusCls: "bg-emerald-50 text-primary dark:bg-emerald-500/15 dark:text-emerald-300", sent: "Oct 5, 2026", }, { name: "Re-engagement", Icon: SiTelegram, iconBg: "bg-sky-50 text-[#2CA5E0] dark:bg-sky-500/15", audience: "4,210", status: "Scheduled", statusCls: "bg-sky-50 text-sky-600 dark:bg-sky-500/15 dark:text-sky-300", sent: "Oct 16, 2026", }, ]; const channels = [ { Icon: SiWhatsapp, pct: "42%", color: "#25D366" }, { Icon: Mail, pct: "28%", color: "#64748B" }, { Icon: SiMessenger, pct: "18%", color: "#0084FF" }, { Icon: SiInstagram, pct: "12%", color: "#E1306C" }, ]; const segments = [ { name: "VIP Customers", count: "1,240", desc: "Lifetime value above $500" }, { name: "Recent Buyers", count: "3,680", desc: "Purchased in the last 30 days" }, { name: "Cart Abandoners", count: "1,860", desc: "Left items in cart this week" }, { name: "Newsletter Subscribers", count: "5,120", desc: "Opted in to email updates" }, ]; const delivery = [ { name: "New Product Launch", sent: 2480, delivered: 2412, read: 1890 }, { name: "Holiday Promotion", sent: 5120, delivered: 5080, read: 3640 }, { name: "Customer Updates", sent: 3450, delivered: 3401, read: 2765 }, ]; return (
{/* BG Gradient */} {/*
*/}
{/* Soft mint halo, centered behind the whole mockup */}
{/* Small dot-grid clusters in opposite corners */}
{/* Browser chrome */}
— Marketing Campaigns
{/* Dark sidebar */}
{[Inbox, MessageSquare, Users, Workflow, Ticket, Database].map((Icon, i) => ( ))}
{/* Main content — the view swaps per selected highlight instead of just ringing a static Campaigns page. */}
{/* Header — title swaps with the selected highlight */}

{ [ "Campaigns", "Audience Segments", "Delivery Tracking", "Campaign Insights", ][active] }

{ [ "5 active campaigns", "4 segments organized", "Real-time delivery status", "Engagement & performance", ][active] }

Create Campaign
{/* 00 — Campaign Management: campaigns table */}
Campaign Audience Status Sent
{campaigns.map((c) => (

{c.name}

{c.audience} {c.status} {c.sent}
))}
{/* 01 — Audience Organization: segments list */}
{segments.map((s) => (

{s.name}

{s.desc}

{s.count}
))}
{/* 02 — Delivery Tracking: sent/delivered/read per campaign */}
{delivery.map((d) => (

{d.name}

{d.sent.toLocaleString()} sent {d.delivered.toLocaleString()} delivered {d.read.toLocaleString()} read
))}
{/* 03 — Campaign Insights: channel mix */}

Channel mix

{channels.map((c) => (
{c.pct}
))}
{/* Floating channel distribution widget — zone 3: Campaign Insights */} {/* Floating campaign performance widget — bottom-center, overlapping the mockup — zone 3: Campaign Insights */}
); } /* ============================================================ */ /* Platform Ecosystem spotlight — below Marketing Campaigns. */ /* ============================================================ */ function PlatformEcosystemSpotlight() { const brandName = useBrandName(); const highlights = [ { num: "01", title: "Unified Channel Connections", desc: "Connect WhatsApp, Messenger, Instagram, Telegram, and Email to manage customer conversations from one workspace.", }, { num: "02", title: "Powerful API Access", desc: `Extend ${brandName} with configurable APIs and supported integrations to connect your existing business systems.`, }, { num: "03", title: "Connected Workflows", desc: "Bring messaging, CRM, marketing, and automation together to create smoother customer journeys and more efficient operations.", }, { num: "04", title: "Scalable Workspace Management", desc: "Organize teams, manage workspaces, and maintain control across multiple business operations from one platform.", }, ]; // Hovering a highlight calls out the matching list row, mirroring the // Unified Omnichannel Inbox section's framed-box layout and interaction. const [active, setActive] = useState(0); return (
{/* Header row — same 2-track template as the body grid below (no extra "auto" track) so the column divider lines up exactly. */}
{/* Left — title */}
Platform Ecosystem

Connect. Integrate.
Grow without limits.

{/* Centre — lede */}

Bring your communication channels, CRM, automation, and business workflows together.{" "} gives your team one connected platform to manage customer engagement and streamline operations.

{/* Right — text CTA */}
Platform Ecosystem
{/* Left — copy */}
    {highlights.map((h, i) => (
  • setActive(i)} className={`flex gap-4 p-8 border-b border-border transition-colors cursor-default ${ active === i ? "bg-muted/50" : "" }`} > {h.num}

    {h.title}

    {h.desc}

    • ))}
{/* Right — illustrated integrations mockup */}
); } function PlatformEcosystemMockup({ active = 0 }: { active?: number }) { const brandName = useBrandName(); // Zone call-outs matching the left-hand numbered highlights (01-04), same // placeholder pattern as the Unified Inbox mockup. const zoneRing = (zone: number) => active === zone ? "ring-2 ring-inset ring-[#015941]" : "ring-2 ring-inset ring-transparent"; const channels = [ { Icon: SiWhatsapp, color: "#25D366" }, { Icon: SiMessenger, color: "#0084FF" }, { Icon: SiInstagram, color: "#E1306C" }, { Icon: SiTelegram, color: "#2CA5E0" }, { Icon: Mail, color: "#64748B" }, ]; // Only integrations this product actually ships are marked "Connected"; // everything else (optional AI providers, payment gateways) is "Available" // and requires the workspace owner to configure it — never claimed as // already connected by default. const integrations = [ { label: "WhatsApp", Icon: SiWhatsapp, tint: "bg-[#25D366]/10 text-[#25D366]", status: "Connected", }, { label: "Messenger", Icon: SiMessenger, tint: "bg-[#0084FF]/10 text-[#0084FF]", status: "Connected", }, { label: "Instagram", Icon: SiInstagram, tint: "bg-[#E1306C]/10 text-[#E1306C]", status: "Connected", }, { label: "Telegram", Icon: SiTelegram, tint: "bg-[#2CA5E0]/10 text-[#2CA5E0]", status: "Connected", }, { label: "Email", Icon: Mail, tint: "bg-slate-500/10 text-slate-500", status: "Connected" }, { label: "OpenAI", mono: "O", monoBg: "#10A37F", status: "Available" }, { label: "Gemini", mono: "G", monoBg: "#4285F4", status: "Available" }, { label: "Anthropic", mono: "A", monoBg: "#D97757", status: "Available" }, { label: "Groq", mono: "Gr", monoBg: "#0b1220", status: "Available" }, { label: "Stripe", mono: "S", monoBg: "#635BFF", status: "Available" }, { label: "Paddle", mono: "P", monoBg: "#1E3A2D", status: "Available" }, { label: "Webhooks", Icon: Plug, tint: "bg-primary/10 text-primary", status: "Connected" }, ]; const overview = [ { label: "Messaging Apps", value: 5, dot: "bg-emerald-500" }, { label: "AI Providers", value: 4, dot: "bg-sky-500" }, { label: "Payment Gateways", value: 2, dot: "bg-violet-500" }, { label: "Webhooks", value: 1, dot: "bg-amber-500" }, ]; return (
{/* BG Gradient */} {/*
*/}
{/* Channel bubbles with dashed connector lines down to the browser — zone 0: Unified Channel Connections */} {/* {[36, 134, 200, 266, 364].map((x, i) => ( ))} */} {/* Soft mint halo, centered behind the whole mockup */} {/*
*/} {/* Browser chrome */}
— Platform Ecosystem
{/* Dark sidebar */}
{[Inbox, Users, Megaphone, Workflow, BarChart3].map((Icon, i) => ( ))}
{/* Main content — the view swaps per selected highlight instead of just ringing a static Integrations page. */}
{/* Header — title swaps with the selected highlight */}

{ ["Channel Connections", "API & Webhooks", "Integrations", "Workspaces"][ active ] }

{ [ "5 channels connected", "2 active API keys · 1 webhook", "Connect your favorite tools and services", "3 workspaces · 12 team members", ][active] }

{/* 00 — Unified Channel Connections: per-channel status list */}
{[ { Icon: SiWhatsapp, color: "#25D366", label: "WhatsApp", id: "+1 415 555 0132", }, { Icon: SiMessenger, color: "#0084FF", label: "Messenger", id: `${brandName} Page`, }, { Icon: SiInstagram, color: "#E1306C", label: "Instagram", id: `@${brandName.toLowerCase().replace(/[^a-z0-9]+/g, "")}`, }, { Icon: SiTelegram, color: "#2CA5E0", label: "Telegram", id: `@${brandName.toLowerCase().replace(/[^a-z0-9]+/g, "")}_bot`, }, { Icon: Mail, color: "#64748B", label: "Email", id: `support@${brandName.toLowerCase().replace(/[^a-z0-9]+/g, "")}.app`, }, ].map((c) => (

{c.label}

{c.id}

Connected
))}
{/* 01 — Powerful API Access: keys + webhook endpoints */}

API Keys

Production Key

wacrm_live_••••••••3f2a

Active

Webhook Endpoints

conversation.created

https://yourapp.com/webhooks/wacrm

{/* 02 — Connected Workflows: integration cards */}
All Integrations Connected Available
{integrations.map((it) => (
{it.Icon ? ( ) : ( {it.mono} )}

{it.label}

{it.status}

))}
{/* 03 — Scalable Workspace Management: workspace list */}
{[ { name: "Acme Business", plan: "Pro", members: 5 }, { name: "Tech Solutions", plan: "Business", members: 4 }, { name: "Green Mart", plan: "Starter", members: 3 }, ].map((w) => (
{w.name[0]}

{w.name}

{w.plan} plan · {w.members} members

Active
))}
{/* Floating API & Webhooks widget — zone 1: Powerful API Access */} {/* Floating connected-integrations overview — bottom-center, overlapping the mockup — zone 3: Scalable Workspace Management */}
); } /* ============================================================ */ /* Platform overview — premium bento grid tying every spotlight */ /* section together into one "everything connected" close. */ /* ============================================================ */ function PlatformOverviewBento() { return (
Everything you need, connected

One powerful platform.
Everything working together.

From customer conversations to sales, marketing, and automation, brings your essential business tools into one connected workspace.

{/* 01 — Omnichannel Inbox (large) */}

Omnichannel Inbox

Bring every conversation into one shared inbox — no more switching tabs.

{/* Channel badges — two rows scrolling in opposite directions */}
{[ [ { name: "WhatsApp", Icon: SiWhatsapp, bg: "#25D366" }, { name: "Instagram", Icon: SiInstagram, bg: "#E1306C" }, { name: "Email", Icon: Mail, bg: "#64748B" }, ], [ { name: "Messenger", Icon: SiMessenger, bg: "#0084FF" }, { name: "Telegram", Icon: SiTelegram, bg: "#26A5E4" }, ], ].map((row, i) => (
{[...row, ...row, ...row, ...row].map((c, j) => ( {c.name} ))}
))}
{/* Mini product preview */}
{[ { name: "Priya Sharma", snippet: "Is the order still available?", Icon: SiWhatsapp, bg: "#25D366", }, { name: "Daniel Cruz", snippet: "Thanks for the quick reply!", Icon: SiMessenger, bg: "#0084FF", }, { name: "Amara Okafor", snippet: "Can I get a discount code?", Icon: SiInstagram, bg: "#E1306C", }, ].map((c, i) => (

{c.name}

{c.snippet}

))}
{/* 02 — CRM & Sales (large) */}

CRM & Sales

Keep every lead, contact, and deal organized with full relationship context.

{/* CRM entity badges — two rows scrolling in opposite directions */}
{[ [ { name: "Leads", Icon: UserPlus }, { name: "Deals", Icon: TrendingUp }, ], [ { name: "Contacts", Icon: Users }, { name: "Pipeline", Icon: GitBranch }, ], ].map((row, i) => (
{[...row, ...row, ...row, ...row].map((c, j) => ( {c.name} ))}
))}
{/* Mini product preview */}
{[ { name: "New Lead", deal: "Horizon Textiles", value: "$2,400", dot: "#25D366" }, { name: "Qualified", deal: "Hilltop Logistics", value: "$5,200", dot: "#38bdf8" }, { name: "Won", deal: "Echo Fitness", value: "$6,300", dot: "#015941" }, { name: "Qualified", deal: "Hilltop Logistics", value: "$5,200", dot: "#38bdf8" }, { name: "Won", deal: "Echo Fitness", value: "$6,300", dot: "#015941" }, { name: "New Lead", deal: "Horizon Textiles", value: "$2,400", dot: "#25D366" }, ].map((stage, index) => (

{stage.name}

{stage.deal}

{stage.value}

))}
{/* 03 — Marketing Campaigns (medium) */}

Marketing Campaigns

Manage targeted messaging campaigns, organize audiences, and track activity.

{/* 04 — Chatbots & Automation (medium) */}

Chatbots & Automation

Automate repetitive conversations and configure intelligent responses.

{/* 05 — Visual Flow Builder (medium) */}

Visual Flow Builder

Design connected automation journeys with triggers, conditions, and actions.

{[ { num: "06", icon: Users, title: "Team Collaboration", desc: "Assign conversations, manage ownership, and keep your team working together.", }, { num: "07", icon: BarChart3, title: "Insights & Analytics", desc: "Monitor conversations, team activity, and performance through clear dashboards.", }, { num: "08", icon: KeyRound, title: "Workspaces & API Access", desc: "Manage multiple workspaces and extend your platform with API connections.", }, ].map((f) => (

{f.title}

{f.desc}

))} {[ { num: "09", icon: Send, title: "Bulk Broadcasting", desc: "Send personalized WhatsApp and SMS campaigns to thousands of contacts with smart throttling.", }, { num: "10", icon: TrendingUp, title: "Lead Generation", desc: "Capture and qualify leads automatically, score them, and never let a hot lead slip away.", }, { num: "11", icon: ShoppingCart, title: "E-commerce Sync", desc: "Connect your store to sync orders, send cart reminders, and confirm deliveries over chat.", }, { num: "12", icon: CalendarClock, title: "Social Scheduling", desc: "Plan and publish posts across your social accounts from one content calendar.", }, { num: "13", icon: Ticket, title: "Helpdesk & Ticketing", desc: "Turn conversations into tickets, set priorities, and resolve customer issues with SLAs.", }, { num: "14", icon: Clock, title: "Appointment Booking", desc: "Let customers book, reschedule, and get reminders for appointments over chat.", }, ].map((f) => (

{f.title}

{f.desc}

))}

Less switching. Better collaboration. More connected customer experiences.

); } /* ============================================================ */ /* Multi-tenant & workspace management */ /* ============================================================ */ function WorkspaceManagementSpotlight() { const highlights = [ { num: "01", title: "Multi-Tenant Architecture", desc: "Manage multiple organizations and workspaces through a structured, scalable SaaS platform.", }, { num: "02", title: "Team & Role Management", desc: "Invite team members, assign roles, and manage access to keep collaboration organized.", }, { num: "03", title: "Workspace Configuration", desc: "Configure workspace settings, connected communication channels, and team preferences.", }, { num: "04", title: "Centralized Administration", desc: "Maintain visibility and control over workspace operations, team management, and platform configurations.", }, ]; // Hovering a highlight calls out the matching zone of the mockup; column // order now matches the Unified Omnichannel Inbox section exactly (narrow // list left, wide mockup right) — only the alive background sets this // section apart. const [active, setActive] = useState(0); return (
{/* Header row — same 2-track template as the body grid below (narrow track first, wide track second) so the divider lines up. */}
{/* Left — title */}
Multi-Tenant & Workspace Management

Multiple workspaces.
One powerful platform.

{/* Centre — lede */}

Organize your businesses, manage teams, and control workspace operations from one connected platform. Keep customer conversations, team access, and business settings organized as you grow.

{/* Right — text CTA */}
Workspace Management
{/* Left — copy */}
    {highlights.map((h, i) => (
  • setActive(i)} className={`flex gap-4 p-8 border-b border-border transition-colors cursor-default ${ active === i ? "bg-muted/50" : "" }`} > {h.num}

    {h.title}

    {h.desc}

    • ))}
{/* Right — illustrated workspace management mockup */}
); } function WorkspaceManagementMockup({ active = 0 }: { active?: number }) { const brandName = useBrandName(); const brandDomain = `${brandName.toLowerCase().replace(/[^a-z0-9]+/g, "") || "platform"}.com`; // Zone call-outs matching the right-hand numbered highlights (01-04), same // placeholder pattern as the other spotlights. const zoneRing = (zone: number) => active === zone ? "ring-2 ring-inset ring-[#015941]" : "ring-2 ring-inset ring-transparent"; const roles = [ { label: "Super Admin", tint: "bg-[#0b1220] text-white" }, { label: "Workspace Admin", tint: "bg-sky-500 text-white" }, { label: "Team Member", tint: "bg-amber-500 text-white" }, { label: "Support Agent", tint: "bg-rose-500 text-white" }, ]; const workspaces = [ { name: "Acme Business", domain: `acme.${brandDomain}`, plan: "Pro", members: 3 }, { name: "Tech Solutions", domain: `tech.${brandDomain}`, plan: "Business", members: 5 }, { name: "Green Mart", domain: `green.${brandDomain}`, plan: "Starter", members: 2 }, { name: "Smart Agency", domain: `agency.${brandDomain}`, plan: "Business", members: 4 }, ]; const stats = [ { label: "Total Workspaces", value: "5", Icon: Layers }, { label: "Team Members", value: "28", Icon: Users }, { label: "Connected Channels", value: "5", Icon: Globe2 }, ]; const team = [ { name: "John Smith", email: "john@acme.com", role: "Admin" }, { name: "Sarah Johnson", email: "sarah@acme.com", role: "Manager" }, { name: "Michael Chen", email: "michael@acme.com", role: "Agent" }, ]; const settingsCategories = [ { label: "General Settings", desc: "Workspace name, domain, business details", Icon: Layers }, { label: "Branding & Appearance", desc: "Logo, colors, and customization", Icon: Globe2 }, { label: "Connected Channels", desc: "Manage communication channels", Icon: Plug }, { label: "Billing & Plan", desc: "Subscription, invoices, and usage", Icon: BarChart3 }, ]; const activity = [ { text: "New workspace created: Smart Agency", time: "2h ago" }, { text: "John Smith promoted to Admin", time: "6h ago" }, { text: "Workspace plan upgraded: Tech Solutions", time: "1d ago" }, ]; return (
{/* BG Gradient */} {/*
*/}
{/* Role avatars with dashed connector lines down to the browser */} {/*
{roles.map((r) => ( {r.label .split(" ") .map((w) => w[0]) .join("")} {r.label} ))}
{[50, 150, 250, 350].map((x, i) => ( ))} */} {/* Soft mint halo, centered behind the whole mockup */}
{/* Floating Switch Workspace widget — zone 0: Multi-Tenant Architecture */} {/* Browser chrome */}
— Workspace Management
{/* Dark sidebar */}
{[Inbox, Users, Megaphone, Bot, BarChart3, Settings].map((Icon, i) => ( ))}
{/* Main content — the view swaps per selected highlight instead of just ringing a static Workspaces page. */}
{/* Header — title swaps with the selected highlight */}

{ ["Workspaces", "Team Members", "Workspace Settings", "Admin Overview"][ active ] }

{ [ "5 workspaces managed", "28 members across workspaces", "Configure branding & channels", "Platform-wide visibility", ][active] }

Create Workspace
{/* 00 — Multi-Tenant Architecture: workspace table */}
Workspace Plan Members Status
{workspaces.map((w) => (

{w.name}

{w.domain}

{w.plan} {w.members} Active
))}
{/* 01 — Team & Role Management: team list */}
{team.map((m) => (
{m.name[0]}

{m.name}

{m.email}

{m.role}
))}
{/* 02 — Workspace Configuration: settings categories */}
{settingsCategories.map((s) => (

{s.label}

{s.desc}

))}
{/* 03 — Centralized Administration: stats + activity log */}
{stats.map((s) => (

{s.value}

{s.label}

))}

Recent activity

{activity.map((a) => (
{a.text} {a.time}
))}
{/* Floating Team Members widget — bottom-left, overlapping the mockup — zone 1: Team & Role Management */} {/* Floating Workspace Settings widget — bottom-right, overlapping the mockup — zone 2: Workspace Configuration */}
); } /* ============================================================ */ /* Stepper — auto-rotating feature tabs with image + list + CTA */ /* ============================================================ */ const STEP_SLUGS = [ "step-smart-inbox", "step-flow-builder", "step-campaigns-webhooks", "step-automation-chatbots", "step-ecommerce-shopify", ] as const; const STEP_INDICATOR_POSITIONS = [ "left-0 min-[45rem]:left-[0%]", "left-[9rem] min-[45rem]:left-[20%]", "left-[18rem] min-[45rem]:left-[40%]", "left-[27rem] min-[45rem]:left-[60%]", "left-[36rem] min-[45rem]:left-[80%]", ] as const; function Stepper() { const [active, setActive] = useState(0); const [paused, setPaused] = useState(false); const sectionRef = useRef(null); const tabListRef = useRef(null); const steps = [ { n: "01", title: "Smart Inbox", desc: "One live queue for every channel — WhatsApp, Instagram, Messenger, Telegram, SMS, Email and Live Chat. Assign, tag, and resolve conversations together.", list: [ "Unified inbox with real-time presence", "Auto-assignment, mentions, and SLA timers", "Internal notes and collision detection", "Mobile notifications for urgent threads", ], cta: "Explore the inbox", href: "#features", image: stepperInboxImg, alt: "Smart Inbox shared team queue", }, { n: "02", title: "Flow Builder", desc: "Drag triggers, conditions, delays and AI steps into a visual journey with versioning, test runs, and one-click publishing.", list: [ "No-code canvas with 30+ node types", "Branching logic, A/B splits and loops", "Version history and rollback", "Trigger from webhooks, schedules or events", ], cta: "See flow builder", href: "#workflow", image: stepperFlowImg, alt: "visual flow builder canvas", }, { n: "03", title: "Campaigns & Webhooks", desc: "Broadcast approved templates to live segments, then push events to any external system or BI tool.", list: [ "Segment by tags, behavior, or CRM status", "WhatsApp template approval pipeline", "Real-time analytics and read receipts", "Webhooks to Zapier, Make, custom APIs", ], cta: "View campaigns", href: "#pricing", image: stepperCampaignImg, alt: "campaign analytics dashboard", }, { n: "04", title: "Automation Flows & Chatbots", desc: "Deploy AI agents grounded in your knowledge base that hand off cleanly to a human when confidence is low.", list: [ "Knowledge base with RAG and citations", "Multi-language intent detection", "Skills-based routing and human handoff", "Live train from closed conversations", ], cta: "Meet the AI", href: "#workflow", image: stepperBotImg, alt: "AI chatbot builder", }, { n: "05", title: "Ecommerce Integration", desc: "Connect your Shopify store and turn WhatsApp into a checkout channel. Sync products, carts, orders and abandoned-cart recovery.", list: [ "Native Shopify store sync and catalog import", "WhatsApp product cards and mini-cart checkout", "Abandoned-cart and order-status automations", "Unified customer profile across store and chat", ], cta: "Explore commerce", href: "#features", image: stepperEcommerceImg, alt: "ecommerce and Shopify WhatsApp integration", }, ]; useEffect(() => { if (paused) return; const id = setInterval(() => setActive((i) => (i + 1) % steps.length), 5000); return () => clearInterval(id); }, [paused, steps.length]); // Keep the selected tab visible when the compact tab list scrolls horizontally. useEffect(() => { const tabList = tabListRef.current; const tab = tabList?.querySelector(`[data-step-index="${active}"]`); if (!tabList || !tab) return; tabList.scrollTo({ behavior: "smooth", left: tab.offsetLeft - (tabList.clientWidth - tab.offsetWidth) / 2, }); }, [active]); // Deep links: #step-flow-builder etc. selects the tab and scrolls it into view. useEffect(() => { const applyHash = (scroll: boolean) => { const slug = window.location.hash.replace(/^#/, ""); const idx = STEP_SLUGS.indexOf(slug as (typeof STEP_SLUGS)[number]); if (idx < 0) return; setActive(idx); setPaused(true); if (scroll) { requestAnimationFrame(() => { sectionRef.current?.scrollIntoView({ behavior: "smooth", block: "start" }); }); } }; applyHash(true); const onHashChange = () => applyHash(true); window.addEventListener("hashchange", onHashChange); return () => window.removeEventListener("hashchange", onHashChange); }, []); const selectStep = (i: number) => { setActive(i); setPaused(true); if (typeof window !== "undefined") { window.history.replaceState(null, "", `#${STEP_SLUGS[i]}`); } }; return (
The workflow

From first message to fully automated revenue.

setPaused(true)} onMouseLeave={() => setPaused(false)} onFocus={() => setPaused(true)} onBlur={() => setPaused(false)} > {/* Tab list — Saaly-style segmented bar: equal-width cells, divided by a vertical border, active tab marked by bold text + thin underline instead of a filled pill. */}
{steps.map((s, i) => { const isActive = i === active; return ( ); })} {/* Active-tab indicator — jumps to the active tab's slot (left/width transition), then its fill animates left-to-right in sync with the real 5s auto-advance timer, pausing on hover/focus/select instead of snapping, and restarting from empty on each tab. */}
{/* Content panels */}
{steps.map((s, i) => (
{/* Text */}

{s.title}

{s.desc}

    {s.list.map((item) => (
  • {item}
    • ))}
{/* Text CTA */}
{/* Image */}
{s.alt}
))}
); } /* ============================================================ */ /* Roles — bento */ /* ============================================================ */ function Roles() { const roles = [ { num: "02", icon: Users, t: "Admin", d: "Workspace, billing, members, integrations.", scope: "Workspace operations", }, { num: "03", icon: BarChart3, t: "Manager", d: "Pipelines, campaigns, workflows, teams.", scope: "Performance & teams", }, { num: "04", icon: MessagesSquare, t: "Agent", d: "Inbox, tickets, contacts, deals in scope.", scope: "Conversations & support", }, { num: "05", icon: Headphones, t: "Provider", d: "Bookings, service delivery, client tasks.", scope: "Bookings & delivery", }, ]; return (
Multi-role System

One platform. Seven purpose-built experiences.

Give every teammate a focused workspace with the right tools, context, and level of access — from platform administration to customer-facing work.

{/* 01 — Super Admin, the primary platform control surface */}
01 / 07

Platform control plane

Super Admin

Tenant management, quotas, feature flags, audit logs, platform-wide announcements and white-label config.

{["Tenants", "Quotas", "Feature flags", "Audit logs", "White-label"].map((tag) => ( {tag} ))}
{roles.map((r) => (
{r.num} / 07

{r.t}

{r.d}

{r.scope}

))} {/* 06 — Client Portal */}

Client Portal

Conversations, invoices, quotes and files — presented in a workspace branded to your organization.

06 / 07
{["Branded portal", "Invoices & quotes", "File sharing"].map((tag) => ( {tag} ))}
{/* 07 — Developer */}

Developer

API keys, webhooks, event streams and custom integrations.

07 / 07
POST /v1/webhooks/conversation.created
); } /* ============================================================ */ /* Security */ /* ============================================================ */ function Security() { const brandName = useBrandName(); const items: Array<{ icon: LucideIcon; title: string; description: string; tag: string; }> = [ { icon: Layers, title: "Tenant-safe access", description: "Workspace roles and auth.uid() policies keep each organization's records isolated at the database boundary.", tag: "Scoped RLS", }, { icon: KeyRound, title: "Identity & session controls", description: "TOTP, trusted-device checks, revocable sessions, and login history keep access accountable.", tag: "TOTP + sessions", }, { icon: Database, title: "Privacy by design", description: "Consent records, portable exports, retention rules, and erasure workflows support privacy operations.", tag: "Export · Retain · Erase", }, { icon: ShieldCheck, title: "Signed event delivery", description: "HMAC-SHA256 signatures, rotating secrets, and delivery logs protect outbound webhook traffic.", tag: "HMAC-SHA256", }, { icon: Server, title: "Infrastructure you control", description: `Run ${brandName} on Docker, a VPS, or your own cloud and keep customer data inside your environment.`, tag: "Self-hosted", }, ]; const [activeItem, setActiveItem] = useState(0); const [paused, setPaused] = useState(false); useEffect(() => { if (paused || window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; const timer = window.setInterval( () => setActiveItem((current) => (current + 1) % items.length), 4200, ); return () => window.clearInterval(timer); }, [items.length, paused]); return (
{/*
*/}
Security by design

Enterprise controls baked into the schema, not bolted on.

Workspace-scoped RLS, dedicated role tables, and audited security functions make access explicit across every tenant—without recursive policies or privilege escalation.

setPaused(true)} onMouseLeave={() => setPaused(false)} onFocusCapture={() => setPaused(true)} onBlurCapture={(event) => { if (!event.currentTarget.contains(event.relatedTarget)) setPaused(false); }} >
{items.map((item, index) => { const Icon = item.icon; const isActive = index === activeItem; return (
); })}
Security architecture

Active control

{items[activeItem].tag}

{String(activeItem + 1).padStart(2, "0")} / {String(items.length).padStart(2, "0")}
{items.map((item, index) => { const Icon = item.icon; const isActive = index === activeItem; return ( ); })}
{["Database-enforced access", "Auditable events", "Owner-controlled data"].map( (label) => ( {label} ), )}
); } /* ============================================================ */ /* Integrations */ /* ============================================================ */ function Integrations() { const GroqLogo = ({ className = "" }: { className?: string }) => ( G ); const groups = [ { icon: MessagesSquare, number: "01", title: "Communication channels", description: "Bring every supported customer touchpoint into one shared workspace.", items: [ "WhatsApp Cloud API", "Instagram DM", "Messenger", "Telegram", "SMS", "Email", "Live Chat", ], }, { icon: Bot, number: "02", title: "AI providers", description: "Choose the intelligence layer that best fits each assistant and workflow.", items: ["Gemini", "OpenAI", "Anthropic", "Groq"], }, { icon: Workflow, number: "03", title: "Business systems", description: "Connect payments, scheduling, and event-driven business operations.", items: ["Stripe", "Paddle", "Google Calendar", "Webhooks", "REST API"], }, ]; const channelProviders = { "WhatsApp Cloud API": { Icon: SiWhatsapp, color: "#25D366" }, "Instagram DM": { Icon: SiInstagram, color: "#E1306C" }, Messenger: { Icon: SiMessenger, color: "#0084FF" }, Telegram: { Icon: SiTelegram, color: "#26A5E4" }, SMS: { Icon: MessageSquare, color: "#F97316" }, Email: { Icon: Mail, color: "#64748B" }, "Live Chat": { Icon: Headphones, color: "#0D9488" }, } as const; const brandProviders = { Gemini: { Icon: SiGooglegemini, color: "#4285F4" }, OpenAI: { Icon: BsOpenai, color: "#111827" }, Anthropic: { Icon: SiAnthropic, color: "#D97757" }, Groq: { Icon: GroqLogo, color: "#F55036" }, Stripe: { Icon: SiStripe, color: "#635BFF" }, Paddle: { Icon: SiPaddle, color: "#0B3B2E" }, "Google Calendar": { Icon: SiGooglecalendar, color: "#4285F4" }, } as const; return (
{/*
*/}
{/* Editorial copy */}
Connect your stack

Plug into everything your business already runs on.

Connect customer channels, AI providers, payments, and operational tools while keeping customer context inside one unified workspace.

Configurable from one workspace
{[ ["07", "Channels"], ["04", "AI providers"], ["API", "Extensible"], ].map(([value, label], index) => (
0 ? "border-l border-border pl-5" : "px-5"}`} >

{value}

{label}

))}
{/* Connection map */}
{/* Compact verified directory */}
{groups.map((group) => (
{group.title} {group.items.length} connections {group.number}
{group.items.map((item) => { const provider = group.number === "01" ? channelProviders[item as keyof typeof channelProviders] : undefined; const brand = group.number !== "01" ? brandProviders[item as keyof typeof brandProviders] : undefined; const ProviderIcon = provider?.Icon ?? brand?.Icon; const providerColor = provider?.color ?? brand?.color; return ( {ProviderIcon ? ( ) : ( )} {item} ); })}
))}

Need a custom connection?

Extend with REST APIs, signed webhooks, and configurable event flows.

Developer-ready
); } /* ============================================================ */ /* CTA */ /* ============================================================ */ function CTA() { const brandName = useBrandName(); const proof = [ { n: "01", title: "Use-case walkthrough", text: "A focused 20-minute session built around your team's workflow.", }, { n: "02", title: "Migration path", text: `A practical route from your current inbox or CRM into ${brandName}.`, }, { n: "03", title: "Channel onboarding", text: "Numbers, templates, verification, and workspace setup covered.", }, { n: "04", title: "Deployment review", text: "Choose managed infrastructure or review self-hosting with your engineers.", }, ]; return (
{/*
*/}
{/*
*/}
Book a demo

Ship your omnichannel CRM this week.

Tell us how your team works today and we'll map the inbox, CRM, automation, and deployment setup around your real channels and customer journey.

{proof.map((item, index) => (
1 ? "border-t border-white/12" : index === 1 ? "border-t border-white/12 sm:border-t-0" : ""}`} >
{item.n}

{item.title}

{item.text}

))}
Your details stay private

Request your walkthrough

Tailored to your team, channels, and deployment.

Reply within one business day
); } /* ============================================================ */ /* Pricing */ /* ============================================================ */ function Pricing() { const { supportEmail } = usePlatformBranding(); const { plans, interval, setInterval: setBillingInterval, savingsPct, hasYearly, maxTrialDays, } = usePublicPlans("month"); const { subscription } = useMyPlanSummary(); // Was a literal "All prices in USD", which contradicted the prices above it // once the platform currency changed. Taken from the plans on display. const platformCurrency = useTenantCurrency(); const displayCurrency = plans.find((p) => p.currency)?.currency?.toUpperCase() ?? platformCurrency; return (
{/*
*/}
Fair, flexible pricing

Simple pricing. No per-agent tax.

Every plan includes the full platform — inbox, automations, templates and CRM. You only choose how much volume and how many seats you need.

{maxTrialDays > 0 ? `${maxTrialDays}-day free trial` : "Start without friction"} Test the complete platform before committing.
Choose billing frequency {hasYearly && (
{(["month", "year"] as const).map((value) => ( ))}
)}
Flexible billing Upgrade, downgrade, or cancel anytime.
{plans.length === 0 ? (

Plans are being updated —{" "} see full pricing .

) : (
{plans.map((p, planIndex) => { const contactSales = isContactSalesPlan(p); const perMonth = monthlyEquivalent(p); const currentPlan = isCurrentPlan(p.code, subscription); const isLastMobileRow = planIndex === plans.length - 1; const isLastTabletRow = planIndex >= plans.length - (plans.length % 2 || 2); const isLastDesktopRow = planIndex >= plans.length - (plans.length % 4 || 4); const cta = p.cta_label ?? (contactSales ? "Contact sales" : p.price_cents === 0 ? "Start free" : "Start free trial"); return (
{/* {p.highlight && (
)} */}
PLAN {String(planIndex + 1).padStart(2, "0")} {p.badge && ( {p.badge} )}
{currentPlan && (
)}

{p.name}

{p.price_cents === 0 ? "Free" : formatPlanPrice(p.price_cents, p.currency)} {p.price_cents > 0 && ( {p.interval === "lifetime" ? "one-time" : `/ ${p.interval === "year" ? "year" : "month"}`} )}
{perMonth && (

{perMonth} / month, billed yearly

)} {(p.tagline || p.description) && (

{p.tagline ?? p.description}

)} {p.trial_days > 0 && !contactSales && (

{p.trial_days}-day free trial

)}

Included in this plan

    {planBullets(p).map((f) => (
  • {f}
    • ))}
{contactSales ? ( {cta} ) : currentPlan ? ( Manage your plan ) : ( {cta} )}
); })}
)}

All prices in {displayCurrency}. No hidden per-agent fees. Cancel anytime.

Compare every plan
); } /* ============================================================ */ /* FAQ */ /* ============================================================ */ // The FAQ is a standalone, searchable component (see components/marketing/faq-section). /* ============================================================ */ /* APP Marketing */ /* ============================================================ */ function MarketingSection() { const downloadStats = [ { value: "16+", label: "Connected channels" }, { value: "40+", label: "Platform modules" }, { value: "04+", label: "AI providers" }, ]; return (
Production-ready omnichannel SaaS

Launch your own omnichannel CRM today.

Download the complete platform and start with a unified inbox, CRM, AI automation, helpdesk, commerce, billing, and multi-tenant administration already connected.

{downloadStats.map(({ value, label }) => (
{value} {label}
))}
Download

Complete source code, guided setup, deployment assets, documentation, and buyer support included.

); } /* ============================================================ */ /* Footer */ /* ============================================================ */ function Footer() { const columns = [ { title: "Product", links: [ { label: "Features", href: "#features" }, { label: "Product tour", href: "#workflow" }, { label: "Solutions", href: "#industries" }, { label: "Pricing", href: "#pricing" }, ], }, { title: "Resources", links: [ ...(SHOW_RESOURCE_LINKS ? [ { label: "Documentation", href: docsUrl() }, { label: "Install guide", href: "/install" }, ] : []), { label: "About", href: "/about" }, { label: "Contact", href: "/contact" }, ], }, { title: "Legal", links: [ { label: "Privacy policy", href: "/legal/privacy-policy" }, { label: "Terms of service", href: "/legal/terms-of-service" }, { label: "Cookie policy", href: "/legal/cookie-policy" }, { label: "DPA", href: "/legal/dpa" }, ], }, ]; const channels = [ { Icon: SiWhatsapp, name: "WhatsApp" }, { Icon: SiMessenger, name: "Messenger" }, { Icon: SiInstagram, name: "Instagram" }, { Icon: SiTelegram, name: "Telegram" }, ]; return (
{/* Multi-layer gradient background: dot grid + brand-green and accent glows, masked to fade toward the edges. Clipped in its own layer so it doesn't cut off the corner marks below. */}

The self-hosted omnichannel CRM for sales, support and marketing teams.

{channels.map(({ Icon, name }) => ( ))}
{columns.map((c) => (

{c.title}

))}
© {new Date().getFullYear()} .{" "} All rights reserved. {/* Not affiliated with WhatsApp or Meta Platforms, Inc. */}
); } { /* Connection map */ } function ConnectionMap() { const networkNodes = [ { label: "WhatsApp", Icon: SiWhatsapp, color: "#25D366", x: 110, y: 90, path: "M 270 205 V 105 Q 270 90 255 90 H 110", delay: "0s", }, { label: "Instagram", Icon: SiInstagram, color: "#E1306C", x: 360, y: 70, path: "M 294 205 V 85 Q 294 70 309 70 H 360", delay: "-0.7s", }, { label: "Messenger", Icon: SiMessenger, color: "#0084FF", x: 160, y: 205, path: "M 250 205 H 160", delay: "-1.4s", }, { label: "Telegram", Icon: SiTelegram, color: "#26A5E4", x: 480, y: 205, path: "M 314 205 H 480", delay: "-2.1s", }, { label: "Email", Icon: Mail, color: "#64748B", x: 282, y: 360, path: "M 282 225 V 360", delay: "-2.8s", }, { label: "AI models", Icon: Bot, color: "#015941", x: 460, y: 340, path: "M 314 215 V 325 Q 314 340 329 340 H 460", delay: "-3.5s", }, ]; return (
{networkNodes.map((node) => ( ))}

Hub

{networkNodes.map((node) => (
{node.label}
))}
REST API Signed webhooks
); }