{{#layout}}
  <section>
    <div class="container flex flex-col gap-8 mx-auto px-6 py-16 text-center">
      <h1 class="text-4xl md:text-6xl font-bold leading-tight">
        Full Stack TypeScript Scaffolding Framework
      </h1>
      <p class="text-3xl">
        Build
        <span class="font-bold">Next.js</span>
        Apps Faster With:
      </p>
      <div class="flex flex-col gap-2 m-auto items-center">
        <p class="flex items-center gap-2 text-xl">
          Ruby on Rails Inspired Scaffolding Automations
        </p>
        <p class="flex items-center gap-2 text-xl">
          shadcn/ui Inspired Customizable Components
        </p>
        <p class="flex items-center gap-2 text-xl">

          Django Inspired Admin Dashboard
        </p>
      </div>
      <div>
        <a
          href="/docs"
          class="bg-black text-white dark:bg-white dark:text-black rounded py-2 px-3 text-sm"
        >
          Get Started
        </a>
      </div>
    </div>
  </section>

  <section class="container mx-auto px-6 py-8">
    <h2 class="text-3xl md:text-4xl font-bold text-center">
      Technologies
    </h2>
    <div class="mt-12 flex flex-wrap">
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">TypeScript</h3>
        <p class="mt-2 text-muted-foreground">
          JavaScript with syntax for types.
        </p>
      </div>
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">Next.js</h3>
        <p class="mt-2 text-muted-foreground">React Framework.</p>
      </div>
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">shadcn/ui</h3>
        <p class="mt-2 text-muted-foreground">
          Customizable UI Components.
        </p>
      </div>
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">Drizzle ORM</h3>
        <p class="mt-2 text-muted-foreground">
          Object Relational Mapper.
        </p>
      </div>
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">SQL</h3>
        <p class="mt-2 text-muted-foreground">
          PostgreSQL, MySQL, or SQLite.
        </p>
      </div>
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">TailwindCSS</h3>
        <p class="mt-2 text-muted-foreground">
          Utility-first CSS Framework.
        </p>
      </div>
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">Auth.js</h3>
        <p class="mt-2 text-muted-foreground">Authentication.</p>
      </div>
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">Stripe</h3>
        <p class="mt-2 text-muted-foreground">Payment Processing.</p>
      </div>
      <div class="w-full md:w-1/3 px-4 py-6">
        <h3 class="text-2xl font-bold">Zod</h3>
        <p class="mt-2 text-muted-foreground">Data Validations.</p>
      </div>
    </div>
  </section>
{{/layout}}