# docs
Source: https://speakeasy.com/docs


import { Button } from "@/components/ui/button";
import { CardGrid } from "@/mdx/components";
import { cards, intro } from "@/lib/data/docs/overview";
import { TechCards } from "@/components/card/variants/docs/tech-cards"; 
import { DocsHeaderIndex } from "@/components/nextra/docs/docs-header-index";

<div className="docs-index bsmnt-container-md flex flex-col mt-10 gap-14">
  <DocsHeaderIndex title={intro?.title} description={intro?.description} />
  <section>
    <CardGrid cards={cards?.start} heading="Start building" columns={4} />
  </section>
  <section>
    <h2 className="bsmnt-text-heading-md">Idiomatic SDKs</h2>
     <div className="flex gap-3 my-5">
        <Button variant="rainbow" href="/docs/sdks/create-client-sdks">
          Get started
        </Button>
        <Button
          variant="primary-inverted"
          href="https://www.youtube.com/playlist?list=PLgqpUjW050CtKio5nVfYlK0A5ShBslE15"
        >
          Watch demo
        </Button>
      </div>
    <TechCards  items={cards.idiomaticSdks} />
  </section>
  <section>
    <CardGrid
      cards={cards?.resourcesSimpleCards}
      heading="Resources"
      columns={4}
    />
  </section>
</div>