{{#> layout-default title="About" currentPageUrl="about.html" }}
<main class="min-h-screen">
  <!-- Hero Section -->
  <section class="bg-linear-to-br from-white to-gray-200 py-20">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto text-center">
        <h1 class="text-5xl md:text-6xl font-bold text-black mb-6">
          About Tailwina
        </h1>
        <p class="text-xl text-gray-700">
          A clean, modern template to kickstart your next web project
        </p>
      </div>
    </div>
  </section>

  <!-- Content Section -->
  <section class="py-20">
    <div class="container mx-auto px-4">
      <div class="max-w-3xl mx-auto prose prose-lg">
        <h2 class="text-3xl font-bold text-black mb-6">
          What is this template?
        </h2>
        <p class="text-gray-700 mb-6">
          This is a generic HTML starter template designed to help you build
          modern websites quickly. It combines the power of Tailwind CSS for
          styling, Vite for fast development, and Handlebars for templating.
        </p>

        <h2 class="text-3xl font-bold text-black mb-6 mt-12">
          Key Technologies
        </h2>
        <ul class="list-disc list-inside text-gray-700 space-y-2 mb-6">
          <li>
            <strong>Tailwind CSS v4:</strong> Utility-first CSS framework for
            rapid UI development
          </li>
          <li>
            <strong>Vite:</strong> Next-generation frontend build tool with
            instant server start
          </li>
          <li>
            <strong>Handlebars:</strong> Minimal templating engine with support
            for partials and helpers
          </li>
          <li>
            <strong>TypeScript/JavaScript:</strong> Modern JavaScript support
            with ES modules
          </li>
        </ul>

        <h2 class="text-3xl font-bold text-black mb-6 mt-12">
          Getting Started
        </h2>
        <p class="text-gray-700 mb-4">To get started with this template:</p>
        <ol class="list-decimal list-inside text-gray-700 space-y-2 mb-6">
          <li>Clone or download this repository</li>
          <li>
            Install dependencies with
            <code class="bg-gray-100 px-2 py-1 rounded">pnpm install</code> or
            <code class="bg-gray-100 px-2 py-1 rounded">yarn install</code>
          </li>
          <li>
            Run the development server with
            <code class="bg-gray-100 px-2 py-1 rounded">pnpm dev</code>
          </li>
          <li>Start building your website!</li>
        </ol>

        <h2 class="text-3xl font-bold text-black mb-6 mt-12">Customization</h2>
        <p class="text-gray-700 mb-6">
          This template is designed to be easily customizable. You can modify
          the Tailwind configuration, add your own components, and extend the
          functionality as needed. The structure is clean and well-organized to
          make it easy to understand and modify.
        </p>

        <div class="mt-12 pt-8 border-t border-gray-200">
          <a
            href="/index.html"
            class="text-black hover:text-gray-700 font-semibold"
          >
            ← Back to Home
          </a>
        </div>
      </div>
    </div>
  </section>
</main>
{{/layout-default}}