feat: add featured card category

Author: esadek

template/home.html.j2

@@ -25,19 +25,28 @@
       <div class="featured-card-icon">
         {% include 'components/icons/arrow.svg' %}
       </div>
-      <span class="featured-card-title">Exploratory Data Analysis with PyArrow</span>
+      <div class="featured-card-content">
+        <span class="featured-card-title">Exploratory Data Analysis with PyArrow</span>
+        <span class="featured-card-category">Data Analysis</span>
+      </div>
     </a>
     <a href="/connect-to-ducklake-with-adbc-in-python" class="featured-card">
       <div class="featured-card-icon">
         {% include 'components/icons/ducklake.svg' %}
       </div>
-      <span class="featured-card-title">Connect to DuckLake with ADBC in Python</span>
+      <div class="featured-card-content">
+        <span class="featured-card-title">Connect to DuckLake with ADBC in Python</span>
+        <span class="featured-card-category">Database Connections</span>
+      </div>
     </a>
     <a href="/connect-to-clickhouse-with-adbc-in-python" class="featured-card">
       <div class="featured-card-icon">
         {% include 'components/icons/clickhouse.svg' %}
       </div>
-      <span class="featured-card-title">Connect to ClickHouse with ADBC in Python</span>
+      <div class="featured-card-content">
+        <span class="featured-card-title">Connect to ClickHouse with ADBC in Python</span>
+        <span class="featured-card-category">Database Connections</span>
+      </div>
     </a>
   </div>
   <div class="search-container">

template/static/style.css

@@ -403,6 +403,11 @@ table.cookbooks tbody tr:hover {
   fill: #fff;
 }
 
+.featured-card-content {
+  display: flex;
+  flex-direction: column;
+}
+
 .featured-card-title {
   margin-top: 0.75rem;
   font-size: 1rem;
@@ -411,9 +416,10 @@ table.cookbooks tbody tr:hover {
 }
 
 .featured-card-category {
-  margin-top: 0.25rem;
-  font-size: 0.8125rem;
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
   text-align: left;
+  color: #666;
 }
 
 @media (max-width: 600px) {