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

# Welcome to the fabric Knowledge Base

> fabric’s API-first platform gives developers the control and flexibility to easily build from scratch or integrate with the existing stack, to compose the perfect commerce experiences.

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

<div className="bodyContainer bg-background-light dark:bg-background-dark">
  <div className="relative w-full flex items-center justify-center" style={{ height: '24rem', overflow: 'hidden' }}>
    <div id="background-div" class="absolute inset-0 bg-background-light dark:bg-background-dark -z-10" style={{height: "24rem", backgroundSize: "cover", backgroundPosition: "center"}} />

    <div style={{ position: 'absolute', textAlign: 'center', padding: '0 1rem', maxWidth: '100%', left: '50%', transform: 'translateX(-50%)' }}>
      <h1
        className="text-gray-800 dark:text-white mt-4 "
        style={{
        marginTop: '4rem',
        fontSize: '42px',
        fontWeight: 500,
        margin: '0',
        whiteSpace: 'nowrap',
        textAlign: 'center'
    }}
      >
        Welcome to the fabric NEON Knowledge Base
      </h1>

      <p className="mt-4 text-gray-800 dark:text-white subtitle">Explore how to use NEON to monitor product visibility and enrich product data for AI search.</p>

      <div className="flex items-center justify-center">
        <div className="flex items-center justify-center" style={{ width: '80%' }}>
          <button
            type="button"
            id="home-search-entry"
            onClick={openSearch}
            className="
hidden w-full lg:flex items-center text-sm leading-6
rounded-full py-2 pl-3 pr-3 shadow-sm
text-white
bg-primary
ring-1 ring-white/20
hover:ring-white/30
focus:outline-primary
"
            style={{
      backgroundColor: '#ff2ec1',
      backgroundImage:'linear-gradient(rgba(0,0,0,0.22), rgba(0,0,0,0.22))',
      marginTop: '2rem',
      maxWidth: '100rem',
      width: '90%',
      margin: '1.25rem auto 0'
    }}
            onClick={openSearch}
          >
            <svg
              className="h-4 w-4 ml-1.5 flex-none bg-primary-light hover:bg-gray-600 dark:bg-white/50 dark:bg-gray-400 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',
      }}
            />

            <p className="text-white dark:text-white">How do I enrich my products?</p>
          </button>
        </div>
      </div>

      <p className="mt-14 text-lg text-gray-800 dark:text-white text-center">
        Looking for documentation on fabric’s legacy products?
        See the{" "}

        <a href="v3/home" className="underline decoration-[#ff2ec1] decoration-2 underline-offset-4 hover:opacity-80">
          v3
        </a>

        {" "}

        or{" "}

        <a href="v2/home" className="underline decoration-[#ff2ec1] decoration-2 underline-offset-4 hover:opacity-80">
          v2
        </a>

        {" "}

        docs.
      </p>
    </div>
  </div>

  <div className="FullSolid bg-background-light dark:bg-background-dark">
    <div className="bodyContainer solid bg-background-light dark:bg-background-dark">
      <div className="pink-boxes dark:bg-background-dark">
        <div className="three-col dark:bg-background-dark">
          <CardGroup cols={3}>
            <div style={{borderRadius: "16px"}}>
              <Card title="Overview" href="/product-agent/overview">
                Learn how Product Agent can enrich your product data to fabric NEON's golden standard.
              </Card>
            </div>

            <div style={{borderRadius: "16px"}}>
              <Card title="Monitor" href="/product-agent/monitor/overview">
                Measure your catalog’s visibility across AI search and agentic commerce prompts.
              </Card>
            </div>

            <div style={{borderRadius: "16px"}}>
              <Card className="bar" title="Activate" href="/product-agent/activate/overview">
                Enrich product data for AI search and publish it across your sales channels.
              </Card>
            </div>
          </CardGroup>
        </div>
      </div>

      <div className="spacer" />

      <div className="resource-boxes">
        <CardGroup cols={3}>
          <Card title="Schedule a Demo" href="https://fabric.inc/demo-request" />

          <Card title="Blog" href="https://fabric.inc/blog" />

          <Card title="Release Notes" href="/product-agent/release-notes" />
        </CardGroup>
      </div>

      <div className="spacer" />

      ***

      <div className="spacer" />
    </div>
  </div>
</div>