Add Qualitative category and optimize homepage layout

- Add new "Qualitative" category for MaxQDA and Qualtrics workshops
- Update workshops.yml to categorize MaxQDA and Qualtrics as qualitative
- Create qualitative.html page for the new category
- Add qualitative category card with icon (📝) to homepage
- Reorder categories: Python, R, AI, Qualitative, Other
- Reduce homepage banner size:
  - Decrease padding from py-5 to py-3
  - Reduce logo height from 180px to 120px
  - Tighten spacing between elements
  - Reduce banner bottom margin
- Update catalog page with Qualitative category button
- Fix "Other" category description (Git to Github)

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: tomvannuenen

_data/workshops.yml

@@ -134,7 +134,7 @@ workshops:
   datahub_url: https://datahub.berkeley.edu/hub/user-redirect/git-pull?repo=https%3A%2F%2Fgithub.com%2Fdlab-berkeley%2FPython-Deep-Learning&urlpath=tree%2FPython-Deep-Learning%2F
   binder_url: https://mybinder.org/v2/gh/dlab-berkeley/Python-Deep-Learning/main
 - title: MaxQDA Fundamentals
-  category: other
+  category: qualitative
   level: introductory
   github_url: https://github.com/dlab-berkeley/MAXQDA-Fundamentals
   description: This two-hour introductory workshop will teach you MaxQDA from scratch
@@ -192,7 +192,7 @@ workshops:
   prerequisites: []
   duration: 120 minutes
 - title: Qualtrics Fundamentals
-  category: other
+  category: qualitative
   level: intermediate
   github_url: https://github.com/dlab-berkeley/Qualtrics-Fundamentals
   description: Qualtrics is a powerful online tool available to Berkeley community

catalog.html

@@ -35,6 +35,7 @@ <h3>Workshop Categories</h3>
         <a href="python.html" class="btn btn-outline-dark">Python</a>
         <a href="R.html" class="btn btn-outline-dark">R</a>
         <a href="ai.html" class="btn btn-outline-dark">AI</a>
+        <a href="qualitative.html" class="btn btn-outline-dark">Qualitative</a>
         <a href="other.html" class="btn btn-outline-dark">Other</a>
       </div>
     </div>

index.html

@@ -4,9 +4,9 @@
 ---
 
 <div class="homepage-hero">
-  <div class="container text-center py-5">
-    <img src="static/images/logo-2023.png" alt="D-Lab Berkeley" class="mb-4 d-block mx-auto" style="height: 180px; width: auto;">
-    <h2>Workshop Catalog</h2>
+  <div class="container text-center py-3">
+    <img src="static/images/logo-2023.png" alt="D-Lab Berkeley" class="mb-2 d-block mx-auto" style="height: 120px; width: auto;">
+    <h2 class="mb-0">Workshop Catalog</h2>
   </div>
 </div>
 
@@ -34,6 +34,7 @@ <h4 class="alert-heading">
     {% assign r_count = 0 %}
     {% assign ai_count = 0 %}
     {% assign other_count = 0 %}
+    {% assign qualitative_count = 0 %}
 
     {% for workshop in site.data.workshops.workshops %}
       {% if workshop.category == 'python' %}
@@ -79,6 +80,17 @@ <h4 class="alert-heading">
           {% endif %}
         {% endfor %}
       {% endif %}
+      
+      {% if workshop.category == 'qualitative' %}
+        {% assign qualitative_count = qualitative_count | plus: 1 %}
+      {% elsif workshop.category contains 'qualitative' and workshop.category.size > 1 %}
+        {% for cat in workshop.category %}
+          {% if cat == 'qualitative' %}
+            {% assign qualitative_count = qualitative_count | plus: 1 %}
+            {% break %}
+          {% endif %}
+        {% endfor %}
+      {% endif %}
     {% endfor %}
 
     <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
@@ -117,13 +129,25 @@ <h5 class="card-title text-dark">AI</h5>
       </div>
     </div>
 
+    <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
+      <div class="card h-100 text-center border-0 shadow-sm category-card">
+        <div class="card-body d-flex flex-column">
+          <div class="category-icon qualitative-icon"></div>
+          <h5 class="card-title text-dark">Qualitative</h5>
+          <p class="card-text">{{ qualitative_count }} total workshops</p>
+          <p class="small text-muted flex-grow-1">MaxQDA, Qualtrics, and qualitative research tools</p>
+          <a href="qualitative.html" class="btn btn-dark mt-auto">Explore Qualitative</a>
+        </div>
+      </div>
+    </div>
+    
     <div class="col-lg-3 col-md-6 col-sm-6 mb-3">
       <div class="card h-100 text-center border-0 shadow-sm category-card">
         <div class="card-body d-flex flex-column">
           <div class="category-icon other-icon"></div>
           <h5 class="card-title text-dark">Other</h5>
           <p class="card-text">{{ other_count }} total workshops</p>
-          <p class="small text-muted flex-grow-1">Git, SQL, Excel, and specialized tools</p>
+          <p class="small text-muted flex-grow-1">Github, Excel, and specialized tools</p>
           <a href="other.html" class="btn btn-dark mt-auto">Explore Other</a>
         </div>
       </div>

qualitative.html

@@ -0,0 +1,36 @@
+---
+layout: default
+title: Qualitative Workshops
+permalink: /qualitative
+---
+
+<div class="container mt-5 pt-5">
+  <div class="row mb-3">
+    <div class="col-12">
+      <a href="index.html" class="btn btn-secondary">
+        <i class="fas fa-arrow-left"></i> Back to Home
+      </a>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-12">
+      <h1 class="mb-4">Qualitative Workshops</h1>
+      <p class="lead">Learn to use powerful qualitative research tools for data collection and analysis.</p>
+      
+      <div class="mb-4">
+        <span class="badge badge-success">Introductory</span>
+        <span class="badge badge-warning">Intermediate</span>
+        <span class="badge badge-danger">Advanced</span>
+      </div>
+    </div>
+  </div>
+  
+  {% include workshop-list-sorted.html category='qualitative' %}
+  
+  <div class="row mt-4">
+    <div class="col-12">
+      <h2>Qualitative Research Tools</h2>
+      <p>These workshops cover essential tools for qualitative research, including data collection with Qualtrics and qualitative data analysis with MaxQDA.</p>
+    </div>
+  </div>
+</div>

static/stylesheets/custom-home.css

@@ -48,6 +48,12 @@
   display: block;
 }
 
+/* Qualitative icon */
+.qualitative-icon::before {
+  content: "\1F4DD";
+  display: block;
+}
+
 /* Alternative: Use Berkeley colors */
 .berkeley-blue {
   color: #003262;
@@ -60,7 +66,7 @@
 /* Homepage hero section */
 .homepage-hero {
   background-color: #f8f9fa;
-  margin-bottom: 2rem;
+  margin-bottom: 1rem;
   margin-top: 80px; /* Push banner below fixed navbar */
   overflow: hidden;
 }