chore: add feature cards to home page

assets/css/compiled/main.css

@@ -2020,6 +2020,14 @@ video {
   bottom: 0px;
 }
 
+.left-\[24px\] {
+  left: 24px;
+}
+
+.left-\[36px\] {
+  left: 36px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -2036,6 +2044,10 @@ video {
   top: 2rem;
 }
 
+.top-\[40\%\] {
+  top: 40%;
+}
+
 .top-full {
   top: 100%;
 }
@@ -2222,6 +2234,10 @@ video {
   display: none;
 }
 
+.aspect-auto {
+  aspect-ratio: auto;
+}
+
 .h-0 {
   height: 0px;
 }
@@ -2294,6 +2310,14 @@ video {
   width: 16rem;
 }
 
+.w-\[110\%\] {
+  width: 110%;
+}
+
+.w-\[180\%\] {
+  width: 180%;
+}
+
 .w-full {
   width: 100%;
 }
@@ -2339,6 +2363,10 @@ video {
   max-width: min(calc(100vw - 2rem),calc(100% + 20rem));
 }
 
+.max-w-none {
+  max-width: none;
+}
+
 .max-w-screen-xl {
   max-width: 1280px;
 }
@@ -2389,6 +2417,10 @@ video {
           appearance: none;
 }
 
+.grid-cols-1 {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+
 .flex-col {
   flex-direction: column;
 }
@@ -2473,6 +2505,10 @@ video {
   border-radius: 0.25rem;
 }
 
+.rounded-3xl {
+  border-radius: 1.5rem;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
@@ -2608,10 +2644,20 @@ video {
   background-color: rgb(254 252 232 / var(--tw-bg-opacity));
 }
 
+.bg-gradient-to-b {
+  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
+}
+
 .bg-gradient-to-r {
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.from-gray-800 {
+  --tw-gradient-from: #1f2937 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(31 41 55 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-gray-900 {
   --tw-gradient-from: #111827 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(17 24 39 / 0) var(--tw-gradient-to-position);
@@ -2651,6 +2697,10 @@ video {
   padding: 1rem;
 }
 
+.p-6 {
+  padding: 1.5rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -2844,6 +2894,10 @@ video {
   line-height: 1.25rem;
 }
 
+.leading-6 {
+  line-height: 1.5rem;
+}
+
 .leading-7 {
   line-height: 1.75rem;
 }
@@ -3125,11 +3179,21 @@ body {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
+.before\:pointer-events-none::before {
+  content: var(--tw-content);
+  pointer-events: none;
+}
+
 .before\:absolute::before {
   content: var(--tw-content);
   position: absolute;
 }
 
+.before\:inset-0::before {
+  content: var(--tw-content);
+  inset: 0px;
+}
+
 .before\:inset-y-1::before {
   content: var(--tw-content);
   top: 0.25rem;
@@ -3715,6 +3779,10 @@ body {
   color: rgb(254 240 138 / var(--tw-text-opacity));
 }
 
+:is(html[class~="dark"] .dark\:opacity-80) {
+  opacity: 0.8;
+}
+
 :is(html[class~="dark"] .dark\:shadow-\[0_-12px_16px_\#111\]) {
   --tw-shadow: 0 -12px 16px #111;
   --tw-shadow-colored: 0 -12px 16px var(--tw-shadow-color);
@@ -3763,6 +3831,11 @@ body {
   border-color: rgb(115 115 115 / var(--tw-border-opacity));
 }
 
+:is(html[class~="dark"] .dark\:hover\:border-neutral-600:hover) {
+  --tw-border-opacity: 1;
+  border-color: rgb(82 82 82 / var(--tw-border-opacity));
+}
+
 :is(html[class~="dark"] .dark\:hover\:border-neutral-700:hover) {
   --tw-border-opacity: 1;
   border-color: rgb(64 64 64 / var(--tw-border-opacity));
@@ -3917,10 +3990,19 @@ body {
   }
 }
 
+@media not all and (min-width: 1024px) {
+  .max-lg\:min-h-\[340px\] {
+    min-height: 340px;
+  }
+}
+
 @media not all and (min-width: 768px) {
   .max-md\:hidden {
     display: none;
   }
+  .max-md\:min-h-\[340px\] {
+    min-height: 340px;
+  }
   .max-md\:\[transform\:translate3d\(0\2c -100\%\2c 0\)\] {
     transform: translate3d(0,-100%,0);
   }
@@ -3933,6 +4015,12 @@ body {
   .sm\:flex {
     display: flex;
   }
+  .sm\:w-\[110\%\] {
+    width: 110%;
+  }
+  .sm\:grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
   .sm\:items-start {
     align-items: flex-start;
   }
@@ -3958,6 +4046,9 @@ body {
   .md\:hidden {
     display: none;
   }
+  .md\:aspect-\[1\.1\/1\] {
+    aspect-ratio: 1.1/1;
+  }
   .md\:h-\[calc\(100vh-var\(--navbar-height\)-var\(--menu-height\)\)\] {
     height: calc(100vh - var(--navbar-height) - var(--menu-height));
   }
@@ -4001,6 +4092,9 @@ body {
 }
 
 @media (min-width: 1024px) {
+  .lg\:grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
   .lg\:leading-\[1\.1\] {
     line-height: 1.1;
   }

exampleSite/hugo_stats.json

@@ -74,16 +74,21 @@
       "active:shadow-sm",
       "align-text-bottom",
       "appearance-none",
+      "aspect-auto",
       "before:absolute",
+      "before:bg-glass-gradient",
       "before:bg-gray-200",
       "before:content-[\"\"]",
       "before:content-['#']",
+      "before:inset-0",
       "before:inset-y-1",
       "before:opacity-25",
+      "before:pointer-events-none",
       "before:w-px",
       "bg-black/[.05]",
       "bg-blue-100",
       "bg-clip-text",
+      "bg-gradient-to-b",
       "bg-gradient-to-r",
       "bg-gray-100",
       "bg-orange-50",
@@ -178,6 +183,7 @@
       "dark:hover:bg-primary-700",
       "dark:hover:border-gray-600",
       "dark:hover:border-neutral-500",
+      "dark:hover:border-neutral-600",
       "dark:hover:border-neutral-700",
       "dark:hover:border-neutral-800",
       "dark:hover:shadow-none",
@@ -187,6 +193,7 @@
       "dark:hover:text-gray-50",
       "dark:hover:text-neutral-50",
       "dark:hover:text-white",
+      "dark:opacity-80",
       "dark:placeholder:text-gray-400",
       "dark:ring-white/20",
       "dark:shadow-[0_-12px_16px_#111]",
@@ -231,11 +238,13 @@
       "footnote-backref",
       "footnote-ref",
       "footnotes",
+      "from-gray-800",
       "from-gray-900",
       "gap-1",
       "gap-2",
       "gap-4",
       "grid",
+      "grid-cols-1",
       "group",
       "group-[.copied]/copybtn:block",
       "group-[.copied]/copybtn:hidden",
@@ -298,8 +307,12 @@
       "language-options",
       "language-switcher",
       "leading-5",
+      "leading-6",
       "leading-7",
       "leading-tight",
+      "left-[24px]",
+      "left-[36px]",
+      "lg:grid-cols-3",
       "lg:leading-[1.1]",
       "line-clamp-3",
       "list-none",
@@ -328,12 +341,15 @@
       "max-h-64",
       "max-h-[calc(100vh-var(--navbar-height)-env(safe-area-inset-bottom))]",
       "max-h-[min(calc(50vh-11rem-env(safe-area-inset-bottom)),400px)]",
+      "max-lg:min-h-[340px]",
       "max-md:[transform:translate3d(0,-100%,0)]",
       "max-md:hidden",
+      "max-md:min-h-[340px]",
       "max-w-6xl",
       "max-w-[50%]",
       "max-w-[90rem]",
       "max-w-[min(calc(100vw-2rem),calc(100%+20rem))]",
+      "max-w-none",
       "max-w-screen-xl",
       "max-xl:hidden",
       "mb-10",
@@ -342,6 +358,7 @@
       "mb-2",
       "mb-4",
       "mb-8",
+      "md:aspect-[1.1/1]",
       "md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
       "md:hidden",
       "md:inline-block",
@@ -400,6 +417,7 @@
       "p-1.5",
       "p-2",
       "p-4",
+      "p-6",
       "pb-6",
       "pb-8",
       "pb-[env(safe-area-inset-bottom)]",
@@ -435,6 +453,7 @@
       "ring-1",
       "ring-black/5",
       "rounded",
+      "rounded-3xl",
       "rounded-full",
       "rounded-lg",
       "rounded-md",
@@ -478,9 +497,11 @@
       "sidebar-container",
       "sm:block",
       "sm:flex",
+      "sm:grid-cols-2",
       "sm:items-start",
       "sm:px-4",
       "sm:text-xl",
+      "sm:w-[110%]",
       "sr-only",
       "steps",
       "sticky",
@@ -519,6 +540,7 @@
       "top-0",
       "top-16",
       "top-8",
+      "top-[40%]",
       "top-full",
       "tracking-tight",
       "tracking-tighter",
@@ -533,6 +555,8 @@
       "w-3.5",
       "w-4",
       "w-64",
+      "w-[110%]",
+      "w-[180%]",
       "w-full",
       "w-max",
       "w-screen",

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 -}}