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

# Welcome to Flabs

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

<div className="relative w-full flex items-center justify-center" style={{ height: "24rem", overflow: "hidden" }}>
  <div
    id="background-div"
    className="absolute inset-0"
    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-black dark:text-white"
      style={{
    marginTop: "4rem",
    fontWeight: 300,
    margin: "0",
    textAlign: "center",
    fontWeight: "500",
    letterSpacing: "-0.03em",
    fontSize: "40px",
    lineHeight: "normal",
  }}
    >
      Welcome to Flabs Developer Documentation
    </h1>

    <div className="flex items-center justify-center">
      <div className="flex items-center justify-center" style={{ width: "100%" }}>
        <button
          type="button"
          className="w-full lg:flex items-center text-sm leading-6 rounded-full py-2 pl-3 pr-3 shadow-sm text-gray-400 dark:text-white/50 bg-background-light dark:bg-background-dark dark:brightness-[1.1] dark:ring-1 dark:hover:brightness-[1.25] ring-1 ring-gray-400/20 hover:ring-gray-600/25 dark:ring-gray-600/30 dark:hover:ring-gray-500/30 focus:outline-primary"
          id="home-search-entry"
          style={{
        marginTop: "2rem",
        maxWidth: "200rem",
        width: "100%",
        margin: "2rem auto 0",
        borderRadius: "0.5rem",
      }}
          onClick={openSearch}
        >
          Search our guides, API refs and more...
        </button>
      </div>
    </div>
  </div>
</div>

<div
  style={{
marginTop: "0rem",
marginBottom: "8rem",
maxWidth: "70rem",
marginLeft: "auto",
marginRight: "auto",
paddingLeft: "1.25rem",
paddingRight: "1.25rem",
}}
>
  <h2
    className="text-gray-900 dark:text-gray-200 text-center"
    style={{
  marginTop: "2rem",
  marginBottom: "1rem",
  fontWeight: "500",
  fontSize: "1.5rem",
}}
  >
    Get started with our docs and guides
  </h2>

  <CardGroup cols={3}>
    <Card href="/introduction" horizontal={false}>
      <div className="flex flex-col">
        <div className="mb-4">
          <svg
            className="h-6 w-6 text-gray-900 dark:text-white"
            style={{
          maskImage:
            'url("https://mintlify.b-cdn.net/v6.5.1/solid/play.svg")',
          maskRepeat: "no-repeat",
          maskPosition: "center center",
          backgroundColor: "currentColor",
        }}
          />
        </div>

        <div>
          <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: "1rem" }}>
            Guide
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: "#60646c" }}>
            Learn everything about Flabs platform. Build your first integration.
          </p>
        </div>
      </div>
    </Card>

    <Card href="/auth/introduction" horizontal={false}>
      <div className="flex flex-col">
        <div className="mb-4">
          <svg
            className="h-6 w-6 text-gray-900 dark:text-white"
            style={{
          maskImage:
            'url("https://mintlify.b-cdn.net/v6.5.1/solid/code-simple.svg")',
          maskRepeat: "no-repeat",
          maskPosition: "center center",
          backgroundColor: "currentColor",
        }}
          />
        </div>

        <div>
          <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: "1rem" }}>
            API References
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: "#60646c" }}>
            Automate actions with REST APIs and OpenAPI specs.
          </p>
        </div>
      </div>
    </Card>

    <Card href="https://github.com/flabs-in" horizontal={false}>
      <div className="flex flex-col">
        <div className="mb-4">
          <svg
            className="h-6 w-6 text-gray-900 dark:text-white"
            style={{
          maskImage:
            'url("https://mintlify.b-cdn.net/v6.5.1/brands/github.svg")',
          maskRepeat: "no-repeat",
          maskPosition: "center center",
          backgroundColor: "currentColor",
        }}
          />
        </div>

        <div>
          <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: "1rem" }}>
            GitHub
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: "#60646c" }}>
            Explore our repositories and contributions.
          </p>
        </div>
      </div>
    </Card>
  </CardGroup>

  <CardGroup cols={3}>
    <Card href="/billing/introduction" horizontal={false}>
      <div className="flex flex-col">
        <div className="mb-4">
          <svg
            className="h-6 w-6 text-gray-900 dark:text-white"
            style={{
          maskImage:
            'url("https://mintlify.b-cdn.net/v6.5.1/solid/credit-card.svg")',
          maskRepeat: "no-repeat",
          maskPosition: "center center",
          backgroundColor: "currentColor",
        }}
          />
        </div>

        <div>
          <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: "1rem" }}>
            Billing
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: "#60646c" }}>
            Manage invoices and billing workflows.
          </p>
        </div>
      </div>
    </Card>

    <Card href="/webhooks/introduction" horizontal={false}>
      <div className="flex flex-col">
        <div className="mb-4">
          <svg
            className="h-6 w-6 text-gray-900 dark:text-white"
            style={{
          maskImage:
            'url("https://mintlify.b-cdn.net/v6.5.1/solid/bell.svg")',
          maskRepeat: "no-repeat",
          maskPosition: "center center",
          backgroundColor: "currentColor",
        }}
          />
        </div>

        <div>
          <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: "1rem" }}>
            Webhooks
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: "#60646c" }}>
            React to events with secure webhook notifications.
          </p>
        </div>
      </div>
    </Card>

    <Card href="/patient/introduction" horizontal={false}>
      <div className="flex flex-col">
        <div className="mb-4">
          <svg
            className="h-6 w-6 text-gray-900 dark:text-white"
            style={{
          maskImage:
            'url("https://mintlify.b-cdn.net/v6.5.1/solid/user.svg")',
          maskRepeat: "no-repeat",
          maskPosition: "center center",
          backgroundColor: "currentColor",
        }}
          />
        </div>

        <div>
          <h3 className="font-medium mb-1 text-gray-900 dark:text-white" style={{ fontSize: "1rem" }}>
            Patient
          </h3>

          <p className="text-sm text-gray-600 dark:text-gray-300" style={{ color: "#60646c" }}>
            Authenticate and fetch patient records securely.
          </p>
        </div>
      </div>
    </Card>
  </CardGroup>
</div>