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

# PEX Help Center

> Search the PEX Help Center or ask our AI assistant. Guides for cardholders, administrators, and developers.

export const SearchBar = ({placeholder = "Search or ask...", shortcut = "⌘K", maxWidth = "", className = ""}) => {
  const styles = {
    layout: "flex items-center justify-between",
    width: "w-full",
    spacing: "py-3 pl-5 pr-3",
    shape: "rounded-full",
    background: "bg-white dark:bg-transparent",
    text: "text-sm text-gray-400 dark:text-gray-500",
    border: "border border-gray-300 dark:border-gray-600 ring-8 ring-gray-200/60 dark:ring-white/15",
    hover: "hover:border-gray-400 dark:hover:border-gray-500 hover:ring-gray-200/50 dark:hover:ring-white/15",
    cursor: "cursor-pointer",
    transition: "transition-all duration-200"
  };
  const iconStyles = {
    size: "h-4 w-4 flex-none",
    spacing: "mr-2",
    color: "bg-primary hover:bg-gray-600 dark:bg-primary-light dark:hover:bg-white/70"
  };
  const badgeStyles = {
    text: "text-xs font-medium",
    color: "text-gray-400 dark:text-gray-500",
    background: "bg-gray-100 dark:bg-gray-800",
    spacing: "px-2 py-1",
    shape: "rounded-md"
  };
  const buttonClasses = [styles.layout, styles.width, styles.spacing, styles.shape, styles.background, styles.text, styles.border, styles.hover, styles.cursor, styles.transition, className].join(" ");
  return <button type="button" id="home-search-entry" onClick={() => document.getElementById('search-bar-entry')?.click()} className={buttonClasses} style={maxWidth ? {
    maxWidth
  } : undefined}>
        {}
        <div className="flex items-center">
          <svg className={`${iconStyles.size} ${iconStyles.spacing} ${iconStyles.color}`} style={{
    maskImage: 'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
    maskRepeat: 'no-repeat',
    maskPosition: 'center center'
  }} />
          {placeholder}
        </div>
  
        {}
        {shortcut && <span className={`hidden sm:inline-flex ${badgeStyles.text} ${badgeStyles.color} ${badgeStyles.background} ${badgeStyles.spacing} ${badgeStyles.shape}`}>
            {shortcut}
          </span>}
      </button>;
};

<div className="hero-bg w-full">
  <div className="max-w-5xl mx-auto px-6 pt-24 pb-20 flex flex-col items-center text-center gap-5">
    <h1 className="hero-title text-5xl md:text-6xl font-bold tracking-tight">
      How can we help?
    </h1>

    <p className="text-lg text-gray-600 dark:text-gray-400 max-w-lg leading-relaxed">
      Search our knowledge base or ask our AI assistant.
    </p>

    <div className="w-full max-w-md mt-2">
      <SearchBar placeholder="Search the PEX Knowledge Base..." />
    </div>
  </div>
</div>

<div className="max-w-5xl mx-auto px-6 pt-16 pb-8">
  {/* ---------- GUIDE GATEWAYS ---------- */}

  <CardGroup cols={3}>
    <Card title="Cardholder Guide" icon="credit-card" iconType="solid" href="/cardholder-guide/overview">
      Get started with your PEX card — activation, transactions, mobile wallets, and account management.
    </Card>

    <Card title="Administrator Guide" icon="user-gear" iconType="solid" href="/administrator-guide/administrator-guide">
      Manage cards, funding, reports, integrations, and advanced features for your organization.
    </Card>

    <Card title="Developer Guide" icon="code" iconType="solid" href="/developer-guide/pex-api-basics">
      Explore PEX API basics, obtain your API key, and integrate PEX into your workflows.
    </Card>
  </CardGroup>

  {/* ---------- CARDHOLDER TOPICS ---------- */}

  <div className="section-heading mt-20 mb-6">
    <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Cardholder topics</h2>
    <p className="text-gray-500 dark:text-gray-400 mt-1 text-base">Everything you need to manage your PEX card</p>
  </div>

  <CardGroup cols={3}>
    <Card title="Quick start" icon="rocket" iconType="solid" href="/cardholder-guide/quick-start-for-cardholders" horizontal />

    <Card title="Managing My PEX Card and Account" icon="circle-user" iconType="solid" href="/cardholder-guide/managing-my-pex-card-and-account" horizontal />

    <Card title="Transactions" icon="receipt" iconType="solid" href="/cardholder-guide/transactions" horizontal />

    <Card title="Mobile wallets" icon="wallet" iconType="solid" href="/cardholder-guide/mobile-wallets" horizontal />

    <Card title="Apps & integrations" icon="puzzle-piece" iconType="solid" href="/cardholder-guide/cardholder-apps-and-other-integrations" horizontal />

    <Card title="Contact support" icon="headset" iconType="solid" href="/cardholder-guide/contact-customer-support" horizontal />
  </CardGroup>

  {/* ---------- ADMINISTRATOR TOPICS ---------- */}

  <div className="section-heading mt-20 mb-6">
    <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Administrator topics</h2>
    <p className="text-gray-500 dark:text-gray-400 mt-1 text-base">Tools and resources for managing your PEX program</p>
  </div>

  <CardGroup cols={3}>
    <Card title="Quick Start for Administrators" href="/administrator-guide/quick-start-for-administrators" icon="rocket" horizontal />

    <Card title="Administrator Site" href="/administrator-guide/administrator-site" icon="desktop" horizontal />

    <Card title="Managing Cards" href="/administrator-guide/managing-cards" icon="credit-card" horizontal />

    <Card title="Card Transactions" href="/administrator-guide/card-transactions" icon="money-bill-transfer" horizontal />

    <Card title="Reports and Statements" href="/administrator-guide/reports-and-statements" icon="chart-bar" horizontal />

    <Card title="Account Funding" href="/administrator-guide/account-funding" icon="building-columns" horizontal />

    <Card title="Receipt Capture" href="/administrator-guide/receipt-capture" icon="camera" horizontal />

    <Card title="Apps & Other Integrations" href="/administrator-guide/apps-and-other-integrations" icon="puzzle-piece" horizontal />

    <Card title="Tags" href="/administrator-guide/tags" icon="tags" horizontal />

    <Card title="Funding Requests" href="/administrator-guide/funding-requests" icon="hand-holding-dollar" horizontal />

    <Card title="Advanced Features" href="/administrator-guide/advanced-features" icon="sliders" horizontal />

    <Card title="Other" href="/administrator-guide/other" icon="ellipsis" horizontal />
  </CardGroup>

  {/* ---------- DEVELOPER TOPICS ---------- */}

  <div className="section-heading mt-20 mb-6">
    <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Developer topics</h2>
    <p className="text-gray-500 dark:text-gray-400 mt-1 text-base">Build with the PEX API</p>
  </div>

  <CardGroup cols={3}>
    <Card title="PEX API basics" icon="book-open" iconType="solid" href="/developer-guide/pex-api-basics" horizontal />
  </CardGroup>
</div>

<div className="featured-band w-full mt-8">
  <div className="max-w-5xl mx-auto px-6 py-16">
    <div className="section-heading mb-6">
      <h2 className="text-2xl font-semibold text-gray-900 dark:text-white">Featured articles</h2>
      <p className="text-gray-500 dark:text-gray-400 mt-1 text-base">Commonly asked questions and helpful resources</p>
    </div>

    <CardGroup cols={2}>
      <Card title="Are PEX accounts FDIC insured?" icon="shield-halved" iconType="solid" href="/administrator-guide/are-pex-accounts-fdic-insured" horizontal />

      <Card title="Checking the status of PEX services" icon="signal" iconType="solid" href="/administrator-guide/checking-the-status-of-pex-services" horizontal />

      <Card title="How does PEX ensure security of online accounts?" icon="lock" iconType="solid" href="/administrator-guide/how-does-pex-ensure-security-of-online-accounts" horizontal />

      <Card title="Lea este sitio en español" icon="globe" iconType="solid" href="/cardholder-guide/lea-este-sitio-en-espaol-con-herramientas-de-traduccin-en-el-navegador" horizontal />

      <Card title="Tips for keeping your PEX account safe" icon="user-shield" iconType="solid" href="/administrator-guide/tips-for-keeping-your-pex-account-safe" horizontal />

      <Card title="Troubleshooting cardholder login" icon="right-to-bracket" iconType="solid" href="/cardholder-guide/troubleshooting-cardholder-user-login" horizontal />
    </CardGroup>
  </div>
</div>

<div className="max-w-5xl mx-auto px-6 py-16">
  <div className="footer-cta rounded-2xl px-8 py-10 flex flex-col items-center text-center gap-4">
    <h3 className="text-xl font-semibold text-gray-900 dark:text-white">Need help?</h3>

    <p className="text-gray-500 dark:text-gray-400 text-base max-w-md">
      Our support team is ready to assist you. Reach out for help with your account, cards, or technical questions.
    </p>

    <div className="flex flex-wrap gap-3 mt-1 justify-center">
      <a href="https://www.pexcard.com/contact-us/?utm_source=support" className="cta-btn-primary inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-colors no-underline">
        Contact support
      </a>

      <a href="https://www.pexcard.com/faq/?utm_source=support" className="cta-btn-secondary inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-sm font-medium transition-colors no-underline">
        Browse FAQs
      </a>
    </div>
  </div>
</div>