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

# Vanta Developer Hub

> Build on Vanta — the developer hub for the Manage Vanta, Build Integrations, and Auditor APIs, the Vanta MCP server, SDKs, webhooks, and integration partner program.

export const QuickstartCard = ({href, icon, title, description, ctaLabel = 'Start quickstart', external = false}) => {
  const externalProps = external ? {
    target: '_blank',
    rel: 'noopener noreferrer'
  } : {};
  return <a href={href} {...externalProps} className="vanta-quickstart-card group flex gap-4 no-underline text-inherit rounded-xl p-5 transition-all duration-200 hover:-translate-y-0.5">
      <div className="vanta-quickstart-card__icon flex-shrink-0 inline-flex items-center justify-center" style={{
    width: '44px',
    height: '44px',
    borderRadius: '11px'
  }}>
        <Icon icon={icon} iconType="regular" size={22} color="#5E05C4" />
      </div>
      <div className="min-w-0">
        <div className="vanta-quickstart-card__title" style={{
    fontSize: '1.05rem',
    fontWeight: 600,
    marginBottom: '0.25rem'
  }}>
          {title}
        </div>
        <div className="vanta-quickstart-card__description" style={{
    fontSize: '0.875rem',
    lineHeight: 1.5
  }}>
          {description}
        </div>
        <div className="vanta-quickstart-card__cta" style={{
    fontSize: '0.8rem',
    fontWeight: 600,
    marginTop: '0.6rem'
  }}>
          {ctaLabel}{' '}
          <span className="inline-block transition-transform duration-200 group-hover:translate-x-1">→</span>
        </div>
      </div>
    </a>;
};

export const IconCard = ({href, icon, title, description, accentColor, iconBgColor, iconColor, external = false, interactive = true}) => {
  const externalProps = external ? {
    target: '_blank',
    rel: 'noopener noreferrer'
  } : {};
  const iconBg = iconBgColor ?? 'color-mix(in srgb, var(--accent) 12%, transparent)';
  const resolvedIconColor = iconColor ?? accentColor;
  const inner = <>
      <div className={`vanta-icon-card__icon-bg flex-shrink-0 inline-flex items-center justify-center${interactive ? ' transition-transform duration-200 group-hover:scale-110' : ''}`} style={{
    width: '44px',
    height: '44px',
    borderRadius: '10px',
    background: iconBg
  }}>
        <Icon icon={icon} iconType="regular" size={22} color={resolvedIconColor} />
      </div>
      <div>
        <div className={`vanta-icon-card__title text-gray-900 dark:text-white${interactive ? ' transition-colors' : ''}`} style={{
    fontWeight: 600,
    fontSize: '1rem',
    marginBottom: '0.25rem'
  }}>
          {title}
        </div>
        <div className="text-gray-700 dark:text-gray-300" style={{
    fontSize: '0.875rem',
    lineHeight: 1.5
  }}>
          {description}
        </div>
      </div>
    </>;
  if (!interactive) {
    return <div className="vanta-icon-card vanta-icon-card--static flex gap-4 rounded-xl bg-transparent p-5" style={{
      '--accent': accentColor
    }}>
        {inner}
      </div>;
  }
  return <a href={href} {...externalProps} className="vanta-icon-card group flex gap-4 no-underline text-inherit rounded-xl bg-transparent p-5 transition-all duration-200" style={{
    '--accent': accentColor
  }}>
      {inner}
    </a>;
};

export const SiteFooter = () => {
  const columns = [{
    header: 'Documentation',
    items: [{
      label: 'Get started',
      href: '/docs/quickstart/manage-vanta'
    }, {
      label: 'API Reference',
      href: '/reference/overview'
    }, {
      label: 'Changelog',
      href: '/docs/changelog'
    }]
  }, {
    header: 'Tools',
    items: [{
      label: 'Postman',
      href: '/docs/postman-setup'
    }, {
      label: 'MCP Server',
      href: '/docs/vanta-mcp'
    }, {
      label: 'SDKs',
      href: '/docs/sdks'
    }, {
      label: 'Webhooks',
      href: '/docs/webhooks'
    }]
  }, {
    header: 'Resources',
    items: [{
      label: 'API status',
      href: 'https://status.vanta.com',
      external: true
    }, {
      label: 'Help center',
      href: 'https://help.vanta.com',
      external: true
    }, {
      label: 'Contact support',
      href: 'https://support.vanta.com',
      external: true
    }]
  }, {
    header: 'Company',
    items: [{
      label: 'Vanta',
      href: 'https://www.vanta.com',
      external: true
    }, {
      label: 'Trust Center',
      href: 'https://trust.vanta.com',
      external: true
    }, {
      label: 'Pricing',
      href: 'https://www.vanta.com/pricing',
      external: true
    }, {
      label: 'Contact us',
      href: 'https://www.vanta.com/contact',
      external: true
    }]
  }];
  const currentYear = new Date().getFullYear();
  const headerStyle = {
    fontSize: '0.75rem',
    fontWeight: 600,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    color: 'var(--mintlify-text-muted, #6b7280)',
    marginBottom: '1rem'
  };
  const linkStyle = {
    fontSize: '0.875rem'
  };
  const externalLinkProps = external => external ? {
    target: '_blank',
    rel: 'noopener noreferrer'
  } : {};
  const SocialLink = ({href, label, children}) => <a href={href} aria-label={label} target="_blank" rel="noopener noreferrer" className="site-footer-link">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        {children}
      </svg>
    </a>;
  return <footer style={{
    borderTop: '1px solid var(--vanta-border)',
    paddingTop: '3rem',
    paddingBottom: '2rem',
    marginTop: '4rem'
  }}>
      <div style={{
    maxWidth: '70rem',
    margin: '0 auto',
    paddingLeft: '1.25rem',
    paddingRight: '1.25rem'
  }}>
        <nav aria-label="Footer">
          <div style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
    gap: '2rem',
    marginBottom: '3rem'
  }}>
            {columns.map(col => <div key={col.header}>
                <div style={headerStyle}>{col.header}</div>
                <ul style={{
    listStyle: 'none',
    padding: 0,
    margin: 0,
    display: 'flex',
    flexDirection: 'column',
    gap: '0.625rem'
  }}>
                  {col.items.map(item => <li key={item.href}>
                      <a href={item.href} className="site-footer-link" style={linkStyle} {...externalLinkProps(item.external)}>
                        {item.label}
                      </a>
                    </li>)}
                </ul>
              </div>)}
          </div>
        </nav>

        <div style={{
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    alignItems: 'center',
    gap: '1rem',
    paddingTop: '1.5rem',
    borderTop: '1px solid var(--vanta-border-subtle)',
    fontSize: '0.875rem',
    color: 'var(--mintlify-text-muted, #6b7280)'
  }}>
          <div>© {currentYear} Vanta Inc. All rights reserved.</div>
          <div style={{
    display: 'flex',
    gap: '1rem'
  }}>
            <SocialLink href="https://x.com/TrustVanta" label="Vanta on X">
              <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
            </SocialLink>
            <SocialLink href="https://www.linkedin.com/company/vanta-security" label="Vanta on LinkedIn">
              <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.063 2.063 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
            </SocialLink>
            <SocialLink href="https://github.com/VantaInc" label="Vanta on GitHub">
              <path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.6.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z" />
            </SocialLink>
          </div>
        </div>
      </div>
    </footer>;
};

export function openSearch() {
  document.getElementById('search-bar-entry')?.click();
}

export const referenceCards = [{
  href: '/docs/quickstart/manage-vanta',
  icon: 'book-open',
  title: 'Docs',
  description: 'The official hub for guides, concepts, and integration walkthroughs.',
  accentColor: '#3B8F54'
}, {
  href: '/reference/overview',
  icon: 'code',
  title: 'API Reference',
  description: 'Base URLs, authentication, rate limits, and every endpoint.',
  accentColor: '#92ACFF'
}, {
  href: '/docs/changelog',
  icon: 'rectangle-history',
  title: 'Changelog',
  description: 'New endpoints, breaking changes, and release notes.',
  accentColor: '#BA9DFF'
}];

export const toolCards = [{
  href: '/docs/vanta-mcp',
  icon: 'robot',
  title: 'Vanta MCP',
  description: 'Connect AI agents to Vanta to query and act on compliance data.'
}, {
  href: '/docs/ai-skills',
  icon: 'wand-magic-sparkles',
  title: 'AI Skills',
  description: 'Add skills that give Cursor, Claude Code, and other AI agents Vanta-specific context.'
}, {
  href: '/docs/sdks',
  icon: 'cube',
  title: 'SDKs',
  description: 'Official client libraries for the Vanta API.'
}, {
  href: '/docs/webhooks',
  icon: 'bell',
  title: 'Webhooks',
  description: 'Subscribe to events for real-time updates.'
}];

export const useCaseCards = [{
  href: '/docs/guides/vulnerabilities-with-approaching-slas',
  icon: 'shield-halved',
  title: 'Block PRs when vulnerability SLAs slip',
  description: 'Query vulnerabilities approaching SLA from CI and fail the build.'
}, {
  href: '/docs/quickstart/remediate-with-mcp',
  icon: 'code-pull-request',
  title: 'Automatically remediate failing tests',
  description: 'When a compliance test fails, inspect the failing resource and open a PR with a targeted fix.'
}, {
  icon: 'chart-line',
  title: 'Build custom dashboards and reports',
  description: 'Pull data from the Vanta API to generate custom dashboards, notifications, and reports tailored to your organization.'
}, {
  icon: 'handshake',
  title: 'Provision trust center access when a deal closes',
  description: "When Salesforce marks a deal won, auto-create the customer's trust center account and assign them to the right subscriber group."
}, {
  href: '/docs/guides/list-users-with-overdue-security-tasks',
  icon: 'calendar-days',
  title: 'Schedule calendar nudges for overdue training',
  description: "When an employee's security training is overdue, drop a calendar invite on their schedule."
}, {
  href: '/docs/quickstart/build-private-integration',
  icon: 'server',
  title: 'Monitor your on-prem infrastructure',
  description: 'Push database configs and server hardening state as custom resources so on-prem assets are audited alongside your cloud stack.'
}];

export const secondaryQuickstarts = [{
  href: '/docs/quickstart/build-private-integration',
  icon: 'plug',
  title: 'Build a private integration',
  description: 'Learn how to push user accounts and custom resources into Vanta and turn them into pass/fail evidence with a Custom Test.'
}, {
  href: '/docs/quickstart/conduct-audit',
  icon: 'clipboard-check',
  title: 'Conduct an Audit',
  description: 'Learn how to authenticate as a Vanta Audit Partner and pull information requests from your active audits — in 10 minutes.'
}];

<div className="relative w-full flex items-center justify-start" style={{ height: '20rem', overflow: 'hidden' }}>
  <div
    className="absolute inset-0 dark:hidden"
    style={{
  height: '20rem',
  backgroundImage: "url('https://mintcdn.com/vanta/xHETxSdwDEX75gRE/images/doc-site-banner-light.svg?fit=max&auto=format&n=xHETxSdwDEX75gRE&q=85&s=452f62d85401eddc443e99df6778bb78')",
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
}}
  />

  <div
    className="absolute inset-0 hidden dark:block"
    style={{
  height: '20rem',
  backgroundImage: "url('https://mintcdn.com/vanta/xHETxSdwDEX75gRE/images/doc-site-banner-light.svg?fit=max&auto=format&n=xHETxSdwDEX75gRE&q=85&s=452f62d85401eddc443e99df6778bb78')",
  backgroundSize: 'cover',
  backgroundPosition: 'center',
  backgroundRepeat: 'no-repeat',
}}
  />

  <div className="vanta-hero-content" style={{ position: 'absolute', textAlign: 'left', left: 0, right: 0 }}>
    <h1 className="text-white" style={{ color: '#260048', fontFamily: 'Reckless, Georgia, serif', fontSize: '3.5rem', fontWeight: 500, lineHeight: 1.1, margin: 0, borderBottom: 'none' }}>
      Vanta Developer Hub
    </h1>

    <p className="text-gray-300 dark:text-gray-200 vanta-hero-subtitle" style={{ color: '#260048', fontWeight: 400, maxWidth: '43rem', margin: 0, marginTop: '0.5rem' }}>
      How can I help you automate compliance, build integrations, or get work done with AI?
    </p>

    <div className="flex items-center justify-start" style={{ margin: 0 }}>
      <button
        type="button"
        className="hidden lg:flex items-center text-sm leading-6 py-1 pl-4 pr-4 text-gray-500 rounded-full"
        id="home-search-entry"
        style={{
      marginTop: '1.25rem',
      width: '500px',
      background: '#FFF',
      boxShadow: '0px 1px 4px 0px rgba(8, 9, 10, 0.25), 0px 0px 0px 4px rgba(255, 255, 255, 0.20)',
      cursor: 'pointer',
      textAlign: 'left',
    }}
        onClick={openSearch}
      >
        <span
          aria-hidden="true"
          className="h-4 w-4 ml-1.5 flex-none bg-primary hover:bg-gray-600 dark:bg-primary-dark dark:hover:bg-white/70"
          style={{
        display: 'inline-block',
        marginRight: '0.5rem',
        maskImage: 'url("https://mintlify.b-cdn.net/v6.5.1/solid/magnifying-glass.svg")',
        maskRepeat: 'no-repeat',
        maskPosition: 'center center',
      }}
        />

        Search or ask...
      </button>
    </div>
  </div>
</div>

<div
  className="vanta-home"
  style={{
marginTop: '4rem',
paddingBottom: '6rem',
maxWidth: '70rem',
marginLeft: 'auto',
marginRight: 'auto',
paddingLeft: '1.25rem',
paddingRight: '1.25rem',
}}
>
  <div style={{ marginBottom: '0.75rem' }}>
    <div className="vanta-eyebrow text-gray-900 dark:text-gray-100" style={{ fontSize: '0.75rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--vanta-purple)' }}>Quickstarts</div>
    <h2 className="text-gray-900 dark:text-white" style={{ fontFamily: 'Reckless, Georgia, serif', fontSize: '2rem', fontWeight: 500, margin: '0.25rem 0 0.5rem', borderBottom: 'none' }}>Start building in minutes</h2>
  </div>

  <div className="grid gap-5 md:grid-cols-3" style={{ marginTop: '1.5rem' }}>
    <a href="/docs/quickstart/manage-vanta" className="group relative overflow-hidden block no-underline text-inherit rounded-xl p-8 transition-all duration-200 hover:shadow-[0_25px_50px_-15px_rgba(94,5,196,0.55)] hover:-translate-y-0.5 md:col-span-2 md:row-span-2" style={{ background: 'var(--vanta-purple)' }}>
      <div className="relative flex flex-col h-full">
        <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', marginBottom: '0.75rem' }}>
          <div className="inline-flex items-center justify-center flex-shrink-0" style={{ width: '48px', height: '48px' }}>
            <Icon icon="bolt" iconType="regular" size={24} color="#ffffff" />
          </div>

          <div style={{ fontFamily: 'Reckless, Georgia, serif', fontSize: '2rem', fontWeight: 500, color: '#ffffff', lineHeight: 1.1 }}>Automate your security & compliance program using APIs</div>
        </div>

        <div style={{ fontSize: '1rem', lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', maxWidth: '32rem', marginLeft: '4rem' }}>Start using the Vanta API in 10 minutes — programmatically manage documents and evidence in your compliance program.</div>

        <div style={{ fontSize: '0.9rem', fontWeight: 600, color: '#ffffff', marginTop: 'auto', paddingTop: '1.5rem', marginLeft: '4rem' }}>
          Start quickstart <span className="inline-block transition-transform duration-200 group-hover:translate-x-1">→</span>
        </div>
      </div>
    </a>

    <a href="/docs/quickstart/remediate-with-mcp" className="group relative overflow-hidden block no-underline text-inherit rounded-xl p-8 transition-all duration-200 hover:shadow-[0_25px_50px_-15px_rgba(94,5,196,0.55)] hover:-translate-y-0.5 md:col-start-3 md:row-start-1 md:row-span-3" style={{ background: 'linear-gradient(170deg, #260048 0%, #260048 70%, #350066 100%)' }}>
      <div className="relative flex flex-col h-full">
        <div style={{ display: 'flex', alignItems: 'center', gap: '0.8rem', marginBottom: '0.75rem' }}>
          <div className="inline-flex items-center justify-center flex-shrink-0" style={{ width: '24px', height: '24px' }}>
            <Icon icon="robot" iconType="regular" size={24} color="#ffffff" />
          </div>

          <div style={{ fontFamily: 'Reckless, Georgia, serif', fontSize: '1.8rem', fontWeight: 500, color: '#ffffff', lineHeight: 1.15 }}>Connect AI agents to the API</div>
        </div>

        <div style={{ fontSize: '1rem', lineHeight: 1.55, color: 'rgba(255,255,255,0.85)', maxWidth: '32rem', marginLeft: '2.3rem' }}>Learn how to use the Vanta MCP to find failing tests, remediate them, and act on your compliance data directly from Claude, ChatGPT or your custom AI agent. No code required.</div>

        <div style={{ fontSize: '0.9rem', fontWeight: 600, color: '#ffffff', marginTop: 'auto', paddingTop: '1.5rem', marginLeft: '2.3rem' }}>
          Start quickstart <span className="inline-block transition-transform duration-200 group-hover:translate-x-1">→</span>
        </div>
      </div>
    </a>

    {secondaryQuickstarts.map((card) => (
          <QuickstartCard key={card.href} {...card} />
        ))}
  </div>

  <div style={{ marginTop: '4rem', marginBottom: '0.75rem' }}>
    <div className="vanta-eyebrow" style={{ fontSize: '0.75rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--vanta-purple)' }}>Use cases</div>
    <h2 className="text-gray-900 dark:text-white" style={{ fontFamily: 'Reckless, Georgia, serif', fontSize: '2rem', fontWeight: 500, margin: '0.25rem 0 0', borderBottom: 'none' }}>See what others build on Vanta</h2>
  </div>

  <div className="vanta-use-case-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '1rem', marginTop: '1.25rem' }}>
    {useCaseCards.map((card, idx) => (
          <IconCard key={card.title} accentColor="#BA9DFF" iconBgColor="#EAE2FF" iconColor="#040516" interactive={false} {...card} />
        ))}
  </div>

  <div style={{ marginTop: '4rem', marginBottom: '0.75rem' }}>
    <div className="vanta-eyebrow" style={{ fontSize: '0.75rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--vanta-purple)' }}>Reference</div>
    <h2 className="text-gray-900 dark:text-white" style={{ fontFamily: 'Reckless, Georgia, serif', fontSize: '2rem', fontWeight: 500, margin: '0.25rem 0 0', borderBottom: 'none' }}>Explore the Developer Hub</h2>
  </div>

  <div className="vanta-reference-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: '1rem', marginTop: '1.25rem' }}>
    {referenceCards.map((card) => (
          <IconCard key={card.href} iconBgColor="color-mix(in srgb, #B1B2C9 12%, transparent)" iconColor="#111827" {...card} />
        ))}
  </div>

  <div style={{ marginTop: '4rem', marginBottom: '0.75rem' }}>
    <div className="vanta-eyebrow" style={{ fontSize: '0.75rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--vanta-purple)' }}>Partners</div>
    <h2 className="text-gray-900 dark:text-white" style={{ fontFamily: 'Reckless, Georgia, serif', fontSize: '2rem', fontWeight: 500, margin: '0.25rem 0 0', borderBottom: 'none' }}>Reach 16,000+ Vanta customers</h2>
  </div>

  <a
    href="/docs/guides/become-partner"
    className="vanta-partner-card group relative block no-underline text-inherit rounded-xl transition-all duration-200"
    style={{
marginTop: '1.25rem',
padding: '1.75rem 2rem',
}}
  >
    <div className="relative flex flex-col md:flex-row md:items-center" style={{ gap: '1.5rem' }}>
      <div
        className="vanta-partner-card__icon flex-shrink-0 inline-flex items-center justify-center transition-transform duration-200 group-hover:scale-105"
        style={{
    width: '48px',
    height: '48px',
    borderRadius: '12px',
  }}
      >
        <Icon icon="store" iconType="regular" size={22} color="#5C5E6B" />
      </div>

      <div style={{ flex: 1, minWidth: 0 }}>
        <div className="vanta-partner-card__title" style={{ fontFamily: 'Reckless, Georgia, serif', fontSize: '1.35rem', fontWeight: 500, lineHeight: 1.2, marginBottom: '0.35rem' }}>
          List your integration in the Vanta Integration Marketplace
        </div>

        <div className="vanta-partner-card__description" style={{ fontSize: '0.95rem', lineHeight: 1.55, maxWidth: '46rem' }}>
          Become an integration partner and list your integration in the Vanta Integration Marketplace to security-conscious teams already automating compliance with Vanta.
        </div>
      </div>

      <div className="vanta-partner-card__cta flex-shrink-0" style={{ fontSize: '0.875rem', fontWeight: 600, whiteSpace: 'nowrap' }}>
        Become a partner <span className="inline-block transition-transform duration-200 group-hover:translate-x-1">→</span>
      </div>
    </div>
  </a>

  <div style={{ marginTop: '4rem', marginBottom: '0.75rem' }}>
    <div className="vanta-eyebrow" style={{ fontSize: '0.75rem', fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--vanta-purple)' }}>Tools & SDKs</div>
    <h2 className="text-gray-900 dark:text-white" style={{ fontFamily: 'Reckless, Georgia, serif', fontSize: '2rem', fontWeight: 500, margin: '0.25rem 0 0', borderBottom: 'none' }}>Save time building using these tools</h2>
  </div>

  <div className="vanta-tools-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1rem', marginTop: '1.25rem' }}>
    {toolCards.map((card) => (
          <IconCard key={card.href} accentColor="#B1B2C9" iconColor="#111827" {...card} />
        ))}
  </div>
</div>

<SiteFooter />