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

export const IntroCard = ({icon, title, href}) => {
  return <a href={href} style={{
    display: 'inline-flex',
    alignItems: 'center',
    justifyContent: 'center',
    gap: '6px',
    padding: '10px 16px',
    borderRadius: '30px',
    backgroundColor: 'transparent',
    textDecoration: 'none',
    height: '44px',
    width: 'fit-content',
    border: '1px solid gray'
  }} className="intro-card  hover:!border-primary dark:hover:!border-primary-light transition-colors">
        <Icon icon={icon} className="w-[18px] h-[18px]" />
      <span style={{
    fontSize: '16px',
    fontWeight: 500,
    lineHeight: 1
  }} className="text-[#525153] dark:text-gray-200">
        {title}
      </span>
    </a>;
};

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

<div className="relative w-full flex items-center justify-center" style={{ height: '32rem', overflow: 'hidden' }}>
  <style>
    {`
          #background-div {
            height: 28rem;
            background: #fff !important;
            background-size: cover;
            background-position: center;
          }
          @media (prefers-color-scheme: dark) {
            #background-div {
              background: radial-gradient(390.08% 106% at 56.7% -15.4%, #000 0%, #19112b 100%) !important;
            }
          }
          .hover-tilt img {
            transition: transform 0.3s ease !important;
          }
          .hover-tilt:hover img {
            transform: rotate(2deg) !important;
          }
          /* More specific selectors in case the Card component has its own styles */
          div.hover-tilt:hover > * img {
            transform: rotate(2deg) !important;
          }
          div.hover-tilt:hover img[src*="/images/docs/"] {
            transform: rotate(2deg) !important;
          }
          /* Force equal card heights - more aggressive targeting */
          .card-group {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 1rem !important;
            align-items: stretch !important;
          }
          .card-group .hover-tilt {
            display: flex !important;
            height: 100% !important;
          }
          .card-group .hover-tilt > div[class*="card"] {
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
          }
          .card-group a[href] {
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
          }
          /* Target any div that contains card content */
          .card-group [class*="card"],
          .card-group [data-card],
          .card-group > div > div {
            height: 100% !important;
            display: flex !important;
            flex-direction: column !important;
          }
        `}
  </style>

  <div id="background-div" className="absolute inset-0" />

  <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '100%', left: '50%', transform: 'translateX(-50%)' }}>
    <h1
      className="text-[#525153] dark:text-gray-200"
      style={{
      marginTop: '4rem',
      fontSize: '4rem',
      fontWeight: 500,
      margin: '0',
      whiteSpace: 'nowrap',
      textAlign: 'center'
  }}
    >
      Start building on Farcaster
    </h1>

    <div className="flex items-center justify-center">
      <div className="flex items-center justify-center" style={{ width: '100%' }}>
        <button
          type="button"
          className="hidden border border-gray-500 w-full bg-white dark:bg-black lg:flex items-center text-sm leading-6 rounded-full py-2 pl-3 pr-3 shadow-sm text-gray-500"
          id="home-search-entry"
          style={{
    marginTop: '2rem',
    maxWidth: '100rem',
    width: '90%',
    margin: '2rem auto 0'
  }}
          onClick={openSearch}
        >
          <svg
            className="h-4 w-4 ml-1.5 flex-none bg-primary hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-white/70"
            style={{
    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 style={{ maxWidth: '650px', margin: '0 auto', marginTop: '2rem' }}>
      <div className="flex flex-wrap items-center justify-center gap-3 mt-3 dark:text-gray-400">
        <IntroCard icon="book" title="Tutorials" href="/docs/getting-started-with-neynar" />

        <IntroCard icon="code" title="API Reference" href="/reference/quickstart" />
      </div>
    </div>
  </div>
</div>

<div
  style={{marginTop: '2rem', marginBottom: '8rem', maxWidth: '70rem', marginLeft: 'auto',
marginRight: 'auto', paddingLeft: '1.25rem',
paddingRight: '1.25rem' }}
>
  <CardGroup cols={3} className="card-group">
    <div className="hover-tilt" style={{display: 'flex', minHeight: '300px'}} onMouseEnter={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(2deg)'); }} onMouseLeave={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(0deg)'); }}>
      <Card href="/docs/supercharge-your-sign-in-with-ethereum-onboarding-with-farcaster" style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
        <div style={{  boxShadow: '0 8px 32px rgba(0,0,0,0.18)', borderRadius: '18px' }}>
          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/social-data-light.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=a65c7db28b11d5fe5a529462a3655d6d" alt="AI Agents" className="block dark:hidden w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/social-data-light.png" />

          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/social-data-dark.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=54215b4cf05accedefdebbe901a1e826" alt="AI Agents" className="hidden dark:block w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/social-data-dark.png" />
        </div>

        <h3 className="mt-3 text-lg" style={{fontWeight: 500}}>Integrate Social Data</h3>
        Seamlessly connect Farcaster social graphs and user profiles to enrich your app with identity and relationships
      </Card>
    </div>

    <div className="hover-tilt" style={{display: 'flex', minHeight: '300px'}} onMouseEnter={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(2deg)'); }} onMouseLeave={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(0deg)'); }}>
      <Card href="/docs/create-farcaster-miniapp-in-60s" style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
        <div style={{  boxShadow: '0 8px 32px rgba(0,0,0,0.18)', borderRadius: '18px' }}>
          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/mini-apps-light.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=6bdd241e0a51f1799a3295cc36d2df80" alt="AI Agents" className="block dark:hidden w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/mini-apps-light.png" />

          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/mini-apps-dark.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=a88aabeb3c14fc4dbf6c3a817a7f5376" alt="AI Agents" className="hidden dark:block w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/mini-apps-dark.png" />
        </div>

        <h3 className="mt-3 text-lg" style={{fontWeight: 500}}>Build Mini Apps</h3>
        Validate and host Farcaster frames with real-time analytics and push notifications
      </Card>
    </div>

    <div className="hover-tilt" style={{display: 'flex', minHeight: '300px'}} onMouseEnter={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(2deg)'); }} onMouseLeave={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(0deg)'); }}>
      <Card href="/docs/create-farcaster-bot-ui" style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
        <div style={{  boxShadow: '0 8px 32px rgba(0,0,0,0.18)', borderRadius: '18px' }}>
          <img src="https://mintcdn.com/neynar/npoclDlBhT4AQynA/images/docs/ai-agent-light.png?fit=max&auto=format&n=npoclDlBhT4AQynA&q=85&s=5a4d400fc1bd93b09c609561d6af4fb2" alt="AI Agents" className="block dark:hidden w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/ai-agent-light.png" />

          <img src="https://mintcdn.com/neynar/npoclDlBhT4AQynA/images/docs/ai-agents-dark.png?fit=max&auto=format&n=npoclDlBhT4AQynA&q=85&s=f2f589d0b8c11967e5c32c4244394ae9" alt="AI Agents" className="hidden dark:block w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/ai-agents-dark.png" />
        </div>

        <h3 className="mt-3 text-lg" style={{fontWeight: 500}}>Create AI Agents</h3>
        Deploy agents with contextual awareness and automated real time interactions
      </Card>
    </div>

    <div className="hover-tilt" style={{display: 'flex', minHeight: '300px'}} onMouseEnter={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(2deg)'); }} onMouseLeave={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(0deg)'); }}>
      <Card href="/docs/how-to-let-users-connect-farcaster-accounts-with-write-access-for-free-using-sign-in-with-neynar-siwn" style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
        <div style={{  boxShadow: '0 8px 32px rgba(0,0,0,0.18)', borderRadius: '18px' }}>
          <img src="https://mintcdn.com/neynar/npoclDlBhT4AQynA/images/docs/build-clients-light.png?fit=max&auto=format&n=npoclDlBhT4AQynA&q=85&s=0eaaf270858755e65b53c38db6c39db9" alt="AI Agents" className="block dark:hidden w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/build-clients-light.png" />

          <img src="https://mintcdn.com/neynar/npoclDlBhT4AQynA/images/docs/build-clients-dark.png?fit=max&auto=format&n=npoclDlBhT4AQynA&q=85&s=8af8b5adc3b2020a5f62a15c9ad79d8c" alt="AI Agents" className="hidden dark:block w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/build-clients-dark.png" />
        </div>

        <h3 className="mt-3 text-lg" style={{fontWeight: 500}}>Build Clients</h3>
        Build clients with seamless onboarding, rich user profiles, graphs and feeds backed by reliable and scalable infrastructure
      </Card>
    </div>

    <div className="hover-tilt" style={{display: 'flex', minHeight: '300px'}} onMouseEnter={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(2deg)'); }} onMouseLeave={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(0deg)'); }}>
      <Card href="/docs/fetch-relevant-holders-for-coin" style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
        <div style={{  boxShadow: '0 8px 32px rgba(0,0,0,0.18)', borderRadius: '18px' }}>
          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/onchain-data-light.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=781282d7b37bc802be87a2746d9bce5b" alt="AI Agents" className="block dark:hidden w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/onchain-data-light.png" />

          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/onchain-data-dark.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=be8194d8c503c0d1d4262087903914f0" alt="AI Agents" className="hidden dark:block w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/onchain-data-dark.png" />
        </div>

        <h3 className="mt-3 text-lg" style={{fontWeight: 500}}>Map Onchain Data</h3>
        Access real-time Farcaster data streams, indexed databases, and analytics tools for powerful data-driven applications
      </Card>
    </div>

    <div className="hover-tilt" style={{display: 'flex', minHeight: '300px'}} onMouseEnter={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(2deg)'); }} onMouseLeave={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(0deg)'); }}>
      <Card href="/docs/how-to-query-neynar-sql-playground-for-farcaster-data" style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
        <div style={{  boxShadow: '0 8px 32px rgba(0,0,0,0.18)', borderRadius: '18px' }}>
          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/data-analysis-light.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=a196cabae80be87df91de6268dbfc669" alt="AI Agents" className="block dark:hidden w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/data-analysis-light.png" />

          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/data-analysis-dark.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=4d5d1abc1f2cd61ea1e6b00b9e556618" alt="AI Agents" className="hidden dark:block w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/data-analysis-dark.png" />
        </div>

        <h3 className="mt-3 text-lg" style={{fontWeight: 500}}>Analyze & Ingest Data</h3>
        Access real-time Farcaster data streams, indexed databases, and analytics tools for powerful data-driven applications
      </Card>
    </div>

    <div className="hover-tilt" style={{display: 'flex', minHeight: '300px'}} onMouseEnter={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(2deg)'); }} onMouseLeave={(e) => { const imgs = e.currentTarget.querySelectorAll('img'); imgs.forEach(img => img.style.transform = 'rotate(0deg)'); }}>
      <Card href="docs/explore-event-propagation-on-farcaster" style={{display: 'flex', flexDirection: 'column', height: '100%'}}>
        <div style={{  boxShadow: '0 8px 32px rgba(0,0,0,0.18)', borderRadius: '18px' }}>
          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/sync-conversations-light.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=cbca76b1e93c894a3528457b68067613" alt="AI Agents" className="block dark:hidden w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/sync-conversations-light.png" />

          <img src="https://mintcdn.com/neynar/mzSn97IS6C5P6NG9/images/docs/sync-conversations-dark.png?fit=max&auto=format&n=mzSn97IS6C5P6NG9&q=85&s=c0aece45bc8659f4c2befcba52b20c28" alt="AI Agents" className="hidden dark:block w-full h-auto" loading="lazy" decoding="async" style={{ transition: 'transform 0.3s ease' }} width="721" height="359" data-path="images/docs/sync-conversations-dark.png" />
        </div>

        <h3 className="mt-3 text-lg" style={{fontWeight: 500}}>Search & Debug</h3>
        Search, monitor, and debug Farcaster data with logs from multiple hubs and APIs from across the network
      </Card>
    </div>
  </CardGroup>
</div>
