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

# Introduction

> Less enables everyone to find insights in every data source. Start solving.

export const HeroCard = ({filename, title, description, href}) => {
  return <a className="group cursor-pointer pb-8" href={href}>
      <img src={`https://less-docs.s3.eu-central-1.amazonaws.com/${filename}.png`} className="block dark:hidden pointer-events-none group-hover:scale-105 transition-all duration-100" />
      <img src={`https://less-docs.s3.eu-central-1.amazonaws.com/${filename}-dark.png`} className="hidden dark:block pointer-events-none group-hover:scale-105 transition-all duration-100" />
     
      <h3 className="mt-5 font-medium">
        {title}
      </h3>
      <span className="mt-1.5 opacity-70">{description}</span>
    </a>;
};

<div className="relative">
  <div className="relative z-10 px-4 py-16 lg:py-32 lg:pb-24 max-w-3xl mx-auto">
    <h1 className="block text-4xl font-medium text-center tracking-tight">
      Documentation
    </h1>

    <div className="max-w-xl mx-auto px-4 mt-4 text-lg text-center opacity-70">
      Less enables everyone to find insights in every data source. <br />Start solving.
    </div>

    <div className="px-6 lg:px-0 mt-12 lg:mt-24 grid sm:grid-cols-2 gap-x-6 gap-y-4">
      <HeroCard filename="quickstart" title="Quickstart" description="Learn how to use Less in 11 minutes and 27 seconds" href="/quickstart" />

      <HeroCard filename="canvas" title="Canvas" description="Go from data to insights - zero code, full transparency" href="/canvas/quickstart" />

      <HeroCard filename="tools" title="Tools" description="Discover all the ways you can transform data in Less" href="/tools/basics/input" />

      <HeroCard filename="academy" title="Academy" description="Become an Analytics Engineer" href="/academy/introduction" />
    </div>
  </div>
</div>