{{ define "main" }}
  <div class="mx-auto flex max-w-screen-xl">
    {{ partial "sidebar.html" (dict "context" . "disableSidebar" true) }}
    <div class="w-full break-words flex flex-col min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-start pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
      <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 md:pt-12">
        <a
          href="https://github.com/imfing/hextra"
          target="_blank"
          rel="noreferrer"
          class="inline-flex items-center rounded-full gap-2 px-3 py-1 text-xs text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-neutral-800 dark:border-neutral-800 border hover:border-gray-400 dark:hover:text-gray-50 dark:hover:border-gray-600"
        >
          <div class="w-2 h-2 rounded-full bg-primary-400"></div>
          <span>Free, open source</span>
          {{- partial "utils/icon" (dict "name" "arrow-circle-right" "attributes" "height=14") -}}
        </a>
        <h1
          class="text-4xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1] mt-6 bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-gray-100 dark:to-gray-400"
        >
          Build modern websites <br class="sm:block hidden" />
          with Markdown and Hugo
        </h1>
        <p class="mt-4 text-xl text-gray-600 dark:text-gray-400 sm:text-xl">
          Fast, batteries-included Hugo theme <br class="sm:block hidden" />
          for creating beautiful static websites.
        </p>
        <div class="mt-8">
          {{- $docsURL := "docs" | relURL -}}
          <a
            href="{{ $docsURL }}"
            class="font-medium cursor-pointer px-6 py-3 text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-4 focus:ring-primary-300 rounded-full text-center mr-2 mb-2 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
          >
            Get Started
          </a>
        </div>
      </section>
      <section class="flex max-w-[90rem] flex-col items-start gap-2 px-6 sm:px-4 pt-8 pb-8">
        <h2 class="mt-12 text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-b from-gray-800 to-gray-600 dark:from-gray-100 dark:to-gray-400">What's in Hextra?</h2>
        <div class="mt-6 grid sm:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-4 w-full">
          {{ template "hextra-feature-card" (dict
            "title" "Fast and Full-featured"
            "subtitle" "Simple and easy to use, yet powerful and feature-rich. "
            "class" "aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
            "image" "images/hextra-doc.webp"
            "imageClass" "top-[40%] left-[24px] w-[180%] sm:w-[110%] dark:opacity-80"
            "style" "background: radial-gradient(ellipse at 50% 80%,rgba(194,97,254,0.15),hsla(0,0%,100%,0));"
            )
          }}
          {{ template "hextra-feature-card" (dict
            "title" "Markdown is All You Need"
            "subtitle" "Compose with just Markdown. Enrich with Shortcode components."
            "class" "aspect-auto md:aspect-[1.1/1] max-lg:min-h-[340px]"
            "image" "images/hextra-markdown.webp"
            "imageClass" "top-[40%] left-[36px] w-[180%] sm:w-[110%] dark:opacity-80"
            "style" "background: radial-gradient(ellipse at 50% 80%,rgba(142,53,74,0.15),hsla(0,0%,100%,0));"
            )
          }}
          {{ template "hextra-feature-card" (dict
            "title" "Full Text Search"
            "subtitle" "Built-in full text search with FlexSearch, no extra setup required."
            "class" "aspect-auto md:aspect-[1.1/1] max-md:min-h-[340px]"
            "image" "images/hextra-search.webp"
            "imageClass" "top-[40%] left-[36px] w-[110%] sm:w-[110%] dark:opacity-80"
            "style" "background: radial-gradient(ellipse at 50% 80%,rgba(221,210,59,0.15),hsla(0,0%,100%,0));"
            )
          }}
          {{ template "hextra-feature-card" (dict
            "title" "Lightweight as a Feather"
            "subtitle" "No dependency or Node.js is needed to use Hextra. Powered by Hugo, one of *the fastest* static site generators, building your site in just seconds with a single binary."
            )
          }}
          {{ template "hextra-feature-card" (dict
            "title" "Reponsive with Dark Mode Included"
            "subtitle" "Looks great on different screen sizes. Built-in dark mode support, with auto-switching based on user's system preference."
            )
          }}
          {{ template "hextra-feature-card" (dict
            "title" "Build and Host for Free"
            "subtitle" "Build with GitHub Actions, and host for free on GitHub Pages. Alternatively it can be hosted on any static hosting service."
            )
          }}
          {{ template "hextra-feature-card" (dict
            "title" "Multi-Language Made Easy"
            "subtitle" "Create multi-language pages by just adding locales suffix to the Markdown file. Adding i18n support to your site is intuitive."
            )
          }}
          {{ template "hextra-feature-card" (dict
            "title" "And Much More..."
            "subtitle" "Syntax highlighting / Table of contents / SEO / RSS / LaTeX / Mermaid / Customizable / and more..."
            )
          }}
        </div>
      </section>
    </div>
  </div>
{{ end }}

{{- define "hextra-feature-card" -}}
  {{- $title := .title -}}
  {{- $subtitle := .subtitle -}}
  {{- $class := .class -}}
  {{- $image := .image -}}
  {{- $imageClass := .imageClass -}}
  {{- $style := .style -}}


  <div
    {{ with $style }}style="{{ . | safeCSS }}"{{ end }}
    class="{{ $class }} relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
  >
    <div class="relative w-full p-6">
      <h3 class="text-2xl font-medium leading-6 mb-2">{{ $title }}</h3>
      <p class="text-gray-500 text-sm leading-6">{{ $subtitle | markdownify }}</p>
    </div>
    {{- with $image -}}
      <img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
    {{- end -}}
  </div>
{{- end -}}