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",