chore: add feature cards to home page

layouts/hextra-home.html

@@ -21,7 +21,7 @@
         </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 building beautiful static websites.
+          for creating beautiful static websites.
         </p>
         <div class="mt-8">
           {{- $docsURL := "docs" | relURL -}}
@@ -33,6 +33,86 @@
           </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 }}" />
+    {{- end -}}
+  </div>
+{{- end -}}