> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HoopAI Help Center

> Everything you need to get started.

export const HelpCenterHome = () => {
  const quickLinks = [{
    icon: "rocket",
    title: "Getting started",
    desc: "Set up your account and learn the basics.",
    href: "/getting-started/overview"
  }, {
    icon: "graduation",
    title: "Academy",
    desc: "Watch tutorials and get certified.",
    href: "/academy/overview"
  }, {
    icon: "code",
    title: "Developer docs",
    desc: "API reference, webhooks, and integrations.",
    href: "/developer/introduction"
  }, {
    icon: "credit-card",
    title: "Account and billing",
    desc: "Subscriptions, invoices, and payment help.",
    href: "/resources/billing-and-support"
  }, {
    icon: "wrench",
    title: "Troubleshooting",
    desc: "Fix issues with email, SMS, pages, and more.",
    href: "/troubleshooting/page-wont-load"
  }, {
    icon: "chart",
    title: "Changelog",
    desc: "Latest updates and new features.",
    href: "/changelog/2026"
  }];
  const modules = [{
    icon: "address-book",
    title: "CRM",
    links: [{
      label: "Contacts overview",
      href: "/contacts/overview"
    }, {
      label: "Importing contacts",
      href: "/contacts/importing-contacts"
    }, {
      label: "Smart lists",
      href: "/contacts/smart-lists"
    }]
  }, {
    icon: "comments",
    title: "Conversations",
    links: [{
      label: "Inbox overview",
      href: "/conversations/overview"
    }, {
      label: "Two-way SMS",
      href: "/conversations/two-way-sms"
    }, {
      label: "WhatsApp",
      href: "/conversations/whatsapp-overview"
    }]
  }, {
    icon: "bullhorn",
    title: "Marketing",
    links: [{
      label: "Email campaigns",
      href: "/marketing/email-campaigns"
    }, {
      label: "Social planner",
      href: "/marketing/social-planner"
    }, {
      label: "Reputation management",
      href: "/reputation/overview"
    }]
  }, {
    icon: "bolt",
    title: "Automation and AI",
    links: [{
      label: "Workflows overview",
      href: "/automation/workflows"
    }, {
      label: "Workflow builder",
      href: "/automation/workflow-builder"
    }, {
      label: "AI agents",
      href: "/ai-agents/overview"
    }]
  }, {
    icon: "globe",
    title: "Sites and funnels",
    links: [{
      label: "Sites overview",
      href: "/sites/overview"
    }, {
      label: "Funnels overview",
      href: "/funnels/overview"
    }, {
      label: "Site builder",
      href: "/sites/funnel-website-builder"
    }]
  }, {
    icon: "calendar",
    title: "Calendars",
    links: [{
      label: "Calendars overview",
      href: "/calendars/overview"
    }, {
      label: "Booking pages",
      href: "/calendars/booking-pages"
    }, {
      label: "Calendar settings",
      href: "/calendars/calendar-settings"
    }]
  }, {
    icon: "bar-chart",
    title: "Dashboard",
    links: [{
      label: "Dashboard overview",
      href: "/dashboard/overview"
    }, {
      label: "Reporting overview",
      href: "/reporting/overview"
    }, {
      label: "Attribution",
      href: "/reporting/attribution-reporting"
    }]
  }, {
    icon: "credit-card",
    title: "Payments",
    links: [{
      label: "Payments overview",
      href: "/payments/overview"
    }, {
      label: "Subscriptions",
      href: "/payments/subscriptions"
    }, {
      label: "Refunds",
      href: "/payments/refunds"
    }]
  }, {
    icon: "gear",
    title: "Settings",
    links: [{
      label: "Settings overview",
      href: "/settings/overview"
    }, {
      label: "Phone system",
      href: "/settings/phone-system"
    }, {
      label: "Integrations",
      href: "/settings/integrations"
    }]
  }, {
    icon: "phone",
    title: "Mobile app",
    links: [{
      label: "Mobile app overview",
      href: "/mobile-app/overview"
    }, {
      label: "iOS and Android",
      href: "/mobile-app/ios-android"
    }, {
      label: "Notifications",
      href: "/mobile-app/notifications"
    }]
  }, {
    icon: "bullhorn",
    title: "Reputation",
    links: [{
      label: "Reputation overview",
      href: "/reputation/overview"
    }, {
      label: "Reviews",
      href: "/reputation/reviews"
    }, {
      label: "Google review integration",
      href: "/reputation/google-review-integration"
    }]
  }, {
    icon: "users",
    title: "Communities",
    links: [{
      label: "Communities overview",
      href: "/memberships-and-communities/overview"
    }, {
      label: "Memberships",
      href: "/memberships-and-communities/memberships"
    }, {
      label: "Courses",
      href: "/memberships-and-communities/courses"
    }]
  }];
  const iconPaths = {
    rocket: <>
        <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09Z" />
        <path d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2Z" />
        <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
        <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
      </>,
    graduation: <>
        <path d="M22 10v6M2 10l10-5 10 5-10 5Z" />
        <path d="M6 12v5c0 1.1 2.7 3 6 3s6-1.9 6-3v-5" />
      </>,
    code: <>
        <polyline points="16 18 22 12 16 6" />
        <polyline points="8 6 2 12 8 18" />
      </>,
    wrench: <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76Z" />,
    "address-book": <>
        <path d="M6 4h11a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6Z" />
        <path d="M8 4v16" />
        <path d="M4 8h2" />
        <path d="M4 12h2" />
        <path d="M4 16h2" />
        <circle cx="13.5" cy="10" r="2" />
        <path d="M10.5 16c.7-1.7 2-2.5 3-2.5s2.3.8 3 2.5" />
      </>,
    comments: <>
        <path d="M7 17.5 3.5 20V6.5A2.5 2.5 0 0 1 6 4h10a2.5 2.5 0 0 1 2.5 2.5v7A2.5 2.5 0 0 1 16 16H8Z" />
        <path d="M8 8h8" />
        <path d="M8 11.5h5.5" />
      </>,
    bullhorn: <>
        <path d="M4 12v-2a2 2 0 0 1 2-2h2l7-3v14l-7-3H6a2 2 0 0 1-2-2Z" />
        <path d="M8 16v3a2 2 0 0 0 2 2h1" />
        <path d="M19 9a4 4 0 0 1 0 6" />
      </>,
    bolt: <path d="M13 2 5 13h5l-1 9 8-11h-5l1-9Z" />,
    globe: <>
        <circle cx="12" cy="12" r="9" />
        <path d="M3 12h18" />
        <path d="M12 3a14.5 14.5 0 0 1 0 18" />
        <path d="M12 3a14.5 14.5 0 0 0 0 18" />
      </>,
    "credit-card": <>
        <rect x="3" y="5" width="18" height="14" rx="2.5" />
        <path d="M3 10h18" />
        <path d="M7 15h3" />
      </>,
    calendar: <>
        <rect x="3" y="5" width="18" height="16" rx="2.5" />
        <path d="M16 3v4" />
        <path d="M8 3v4" />
        <path d="M3 10h18" />
        <path d="M8 14h3" />
      </>,
    gear: <>
        <circle cx="12" cy="12" r="3" />
        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
      </>,
    chart: <>
        <path d="M3 3v18h18" />
        <path d="M7 16l4-6 4 3 5-7" />
      </>,
    "bar-chart": <>
        <rect x="3" y="12" width="4" height="9" rx="1" />
        <rect x="10" y="7" width="4" height="14" rx="1" />
        <rect x="17" y="3" width="4" height="18" rx="1" />
      </>,
    phone: <>
        <rect x="5" y="2" width="14" height="20" rx="3" />
        <path d="M12 18h.01" />
      </>,
    users: <>
        <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
        <circle cx="9" cy="7" r="4" />
        <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
        <path d="M16 3.13a4 4 0 0 1 0 7.75" />
      </>,
    search: <>
        <circle cx="11" cy="11" r="6.5" />
        <path d="m16 16 4.5 4.5" />
      </>,
    sparkle: <>
        <path d="M12 2.25L14.55 9.45L21.75 12L14.55 14.55L12 21.75L9.45 14.55L2.25 12L9.45 9.45L12 2.25Z" />
        <path d="M4.5 1.5L5.1 3.9L7.5 4.5L5.1 5.1L4.5 7.5L3.9 5.1L1.5 4.5L3.9 3.9L4.5 1.5Z" strokeWidth="1.2" />
      </>,
    check: <path d="M5 12l5 5L20 7" />
  };
  const svgProps = {
    width: "20",
    height: "20",
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: "currentColor",
    strokeWidth: "1.5",
    strokeLinecap: "round",
    strokeLinejoin: "round",
    "aria-hidden": "true"
  };
  const openSearch = () => {
    const btn = document.getElementById("search-bar-entry") || document.getElementById("search-bar-entry-mobile");
    if (btn) btn.click();
  };
  const openChat = () => {
    const el = document.getElementById("mintlify-chat-button") || document.getElementById("assistant-entry") || document.getElementById("assistant-entry-mobile");
    if (el) el.click();
  };
  return <div className="not-prose hc-home">
      <div className="hc-container">
        <header className="hc-header">
          <h1 className="hc-title">How can we help?</h1>
          <div className="hc-actions">
            <button type="button" onClick={openSearch} className="hc-search">
              <svg {...svgProps}>{iconPaths.search}</svg>
              <span className="hc-search-text">Search articles...</span>
              <kbd className="hc-kbd">Ctrl K</kbd>
            </button>
            <button type="button" onClick={openChat} className="hc-search hc-ask-ai">
              <svg {...svgProps}>{iconPaths.sparkle}</svg>
              <span>Ask AI</span>
            </button>
          </div>
        </header>

        <section className="hc-quick">
          <div className="hc-quick-grid">
            {quickLinks.map(q => <a key={q.href} href={q.href} className="hc-quick-card">
                <span className="hc-quick-icon">
                  <svg {...svgProps}>{iconPaths[q.icon]}</svg>
                </span>
                <span className="hc-quick-title">{q.title}</span>
                <span className="hc-quick-desc">{q.desc}</span>
              </a>)}
          </div>
        </section>

        <section className="hc-modules">
          <h2 className="hc-section-title">Browse by module</h2>
          <div className="hc-grid">
            {modules.map(m => <div className="hc-mod" key={m.title}>
                <span className="hc-icon">
                  <svg {...svgProps}>{iconPaths[m.icon]}</svg>
                </span>
                <h3 className="hc-mod-title">{m.title}</h3>
                <ul className="hc-links">
                  {m.links.map(link => <li key={link.href}>
                      <a href={link.href}>{link.label}</a>
                    </li>)}
                </ul>
              </div>)}
          </div>
        </section>

        <section className="hc-cta">
          <div className="hc-cta-grid">
            <a href="/status" className="hc-cta-card hc-cta-status">
              <span className="hc-cta-icon hc-cta-icon-green">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <circle cx="12" cy="12" r="9" />
                  <path d="M7 12l3 3 7-7" />
                </svg>
              </span>
              <div className="hc-cta-body">
                <span className="hc-cta-title">System Status</span>
                <span className="hc-cta-desc">All systems operational. View uptime and service health.</span>
              </div>
              <svg className="hc-cta-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 4l4 4-4 4" /></svg>
            </a>
            <a href="mailto:support@hoopai.com" className="hc-cta-card hc-cta-contact">
              <span className="hc-cta-icon hc-cta-icon-blue">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="5" width="18" height="14" rx="2.5" />
                  <path d="M3 7l9 6 9-6" />
                </svg>
              </span>
              <div className="hc-cta-body">
                <span className="hc-cta-title">Contact Support</span>
                <span className="hc-cta-desc">Get help from our team via email.</span>
              </div>
              <svg className="hc-cta-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M6 4l4 4-4 4" /></svg>
            </a>
          </div>
        </section>

        <section className="hc-support">
          <h2 className="hc-section-title">Contact support</h2>
          <p className="hc-support-desc">
            {"Your support options depend on your plan. "}
            <a href="mailto:support@hoopai.com">Email us</a>
            {" for urgent issues."}
          </p>
          <div className="hc-table-wrap">
            <table className="hc-table">
              <thead>
                <tr>
                  <th></th>
                  <th>Core</th>
                  <th>Pro</th>
                  <th>Enterprise</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>Help center</td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                </tr>
                <tr>
                  <td>AI chat</td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                </tr>
                <tr>
                  <td>Email support</td>
                  <td></td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                </tr>
                <tr>
                  <td>Priority phone</td>
                  <td></td>
                  <td></td>
                  <td><svg {...svgProps} width="18" height="18" className="hc-check">{iconPaths.check}</svg></td>
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        <footer className="hc-footer">
          <p className="hc-footer-contact">
            {"Need more help? "}
            <a href="mailto:support@hoopai.com">Contact support</a>
            {" · "}
            <a href="/legal/terms-of-service">Terms of service</a>
          </p>
        </footer>
      </div>
    </div>;
};

<HelpCenterHome />