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

# Introduction

> Meet the next generation of documentation. AI-native, beautiful out-of-the-box, and built for developers.

export const HeroCard = ({
  filename,
  title,
  description,
  href,
  lightModeImage,
  darkModeImage,
}) => {
  return (
    <a className="group cursor-pointer pb-8" href={href}>
      <img
        src={lightModeImage}
        className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
      />
      <img
        src={darkModeImage}
        className="block dark:block hidden pointer-events-none group-hover:scale-105 transition-all duration-100"
      />
      <h3 className="mt-5 text-gray-900 dark:text-zinc-50 font-medium">
        {title}
      </h3>
      <span className="mt-1.5">{description}</span>
    </a>
  );
};

<div className="relative">
  <div className="absolute  left-0 right-0">
    <img src="https://mintcdn.com/tac-92ab2768/ptPkl7REL-06PTYm/images/introduction/bg.png?fit=max&auto=format&n=ptPkl7REL-06PTYm&q=85&s=9ebd6e006d630385cd7a3b0b6c74706b" className="mt-[-10em] block dark:hidden pointer-events-none w-full cover-image" width="3013" height="777" data-path="images/introduction/bg.png" />

    <img src="https://mintcdn.com/tac-92ab2768/ptPkl7REL-06PTYm/images/introduction/bg-dark.png?fit=max&auto=format&n=ptPkl7REL-06PTYm&q=85&s=eb3af095c7426e58c028f7f9e71637d3" className="mt-[-10em] block dark:block hidden pointer-events-none w-full cover-image" width="3013" height="774" data-path="images/introduction/bg-dark.png" />
  </div>

  <div className="relative z-10 px-4 py-16 lg:py-40 lg:pb-24 max-w-5xl mx-auto">
    <h1 className="text-5xl font-semibold text-center text-gray-900 dark:text-zinc-50 tracking-tight">
      TAC Documentation
    </h1>

    <p className="max-w-3xl mx-auto px-4 mt-4 text-md text-center text-gray-500 dark:text-zinc-500">
      Build hybrid dApps that connect EVM smart contracts to TON's 1 billion users. Deploy your Solidity code and let TON wallet users interact directly - no bridges, no complexity.
    </p>

    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-3 gap-x-6 gap-y-4">
      <HeroCard filename="quick" lightModeImage="https://i.ibb.co/gM5hWq6P/quick.png.png" darkModeImage="https://i.ibb.co/whv2D8qF/quick-dark.png" title="Quickstart" description="Spin up a hybrid dApp locally and send your first testnet cross-chain transaction in under 5 minutes!" href="/quickstart/overview" />

      <HeroCard filename="frontend" lightModeImage="https://i.ibb.co/YTbFGpgv/frontend.png" darkModeImage="https://i.ibb.co/ns0Jd1j6/frontend-dark.png" title="Frontend SDK" description="Guide to connect TON wallets to your EVM smart contracts and seamlessly interact with them" href="/sdk/overview" />

      <HeroCard filename="contract" lightModeImage="https://i.ibb.co/4RmSqwnp/contract.png" darkModeImage="https://i.ibb.co/270yT4Sj/contract-dark.png" title="Smart Contracts" description="Deploy your Solidity contracts using familiar tools like Hardhat" href="/ecosystem#development-tools" />

      <HeroCard filename="example" lightModeImage="https://i.ibb.co/DgHBQ5rY/example.png" darkModeImage="https://i.ibb.co/DD9rV6Zy/example-dark.png" title="Apps" description="Browse hybrid dApps: starter templates and live production solutions" href="/apps/overview" />

      <HeroCard filename="api" lightModeImage="https://i.ibb.co/C3HLqrtg/api.png" darkModeImage="https://i.ibb.co/4wYw2QWV/api-dark.png" title="API" description="Public API schemas for developers" href="/api/overview" />

      <HeroCard filename="quick" lightModeImage="https://i.ibb.co/YTbFGpgv/frontend.png" darkModeImage="https://i.ibb.co/ns0Jd1j6/frontend-dark.png" title="Network Info" description="TAC Mainnet and Testnet details" href="/ecosystem/network-info" />
    </div>
  </div>
</div>