Add Mindmap to Projects, with a Try Mindmap button

src/data/mindmap.ts

@@ -0,0 +1,7 @@
+// Mindmap's "Try Mindmap" buttons (home page and the Projects card) read this.
+// `enabled: true` links both to the live app; set it to false to show them as
+// disabled, non-link buttons instead.
+export const mindmap = {
+  url: 'https://mindmap.thoughtful-ai.com/',
+  enabled: true,
+} as const;

src/pages/index.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
 
 import { Image } from 'astro:assets';
 import wordDemo from './projects/ai-writers-2024-25/word_demo.png';
+import { mindmap } from '../data/mindmap';
 
 ---
 
@@ -24,28 +25,48 @@ import wordDemo from './projects/ai-writers-2024-25/word_demo.png';
             <p class="mx-auto mt-8 mb-12 w-full px-8 text-lg text-gray-700 lg:w-full lg:px-0">
               We build AI tools to support sustained goal-directed cognitive effort despite unclear goals and complex situations.
             </p>
-            <div class="flex flex-col items-center gap-4 lg:flex-row lg:justify-start">
+            <div class="flex flex-col items-center gap-4 lg:flex-row lg:flex-wrap lg:justify-start">
               <a
                 href="https://app.thoughtful-ai.com/"
-                class="w-full lg:w-auto inline-block px-6 py-3 text-base font-medium text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 text-center transition"
+                class="w-full lg:w-auto inline-block whitespace-nowrap px-6 py-3 text-base font-medium text-white bg-blue-500 rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 text-center transition"
                 role="button"
                 tabindex={0}
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 Try Our App
               </a>
+              {mindmap.enabled ? (
+                <a
+                  href={mindmap.url}
+                  class="w-full lg:w-auto inline-block whitespace-nowrap px-6 py-3 text-base font-medium text-blue-500 border border-blue-500 rounded-lg shadow-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 text-center transition"
+                  role="button"
+                  tabindex={0}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Try Mindmap
+                </a>
+              ) : (
+                <span
+                  class="w-full lg:w-auto inline-block whitespace-nowrap px-6 py-3 text-base font-medium text-gray-400 border border-gray-300 bg-gray-50 rounded-lg text-center cursor-not-allowed select-none"
+                  role="button"
+                  aria-disabled="true"
+                >
+                  Try Mindmap
+                </span>
+              )}
               <a
                 href="/projects"
-                class="w-full lg:w-auto inline-block px-6 py-3 text-base font-medium text-blue-500 border border-blue-500 rounded-lg shadow-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 text-center transition"
+                class="w-full lg:w-auto inline-block whitespace-nowrap px-6 py-3 text-base font-medium text-blue-500 border border-blue-500 rounded-lg shadow-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 text-center transition"
                 role="button"
                 tabindex={0}
               >
                 Explore Projects
               </a>
               <a
                 href="/publications"
-                class="w-full lg:w-auto inline-block px-6 py-3 text-base font-medium text-blue-500 border border-blue-500 rounded-lg shadow-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 text-center transition"
+                class="w-full lg:w-auto inline-block whitespace-nowrap px-6 py-3 text-base font-medium text-blue-500 border border-blue-500 rounded-lg shadow-md hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75 text-center transition"
                 role="button"
                 tabindex={0}
               >

src/pages/projects.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import { mindmap } from '../data/mindmap';
 ---
 
 <Layout title="Projects" metaDescription="Current and past projects from the Thoughtful AI Tools Lab at Calvin University">
@@ -9,6 +10,40 @@ import Layout from '../layouts/Layout.astro';
         <h1 class="text-5xl font-bold text-center mb-12 text-blue-gray-900">Projects</h1>
 
         <div class="grid gap-8 lg:grid-cols-1 xl:grid-cols-1">
+          <!-- Mindmap -->
+          <div class="bg-white rounded-lg shadow-lg p-6 border border-gray-200">
+            <h3 class="text-xl font-semibold mb-2 text-blue-gray-900">
+              Mindmap: A Reflective Mind Map for Writers
+            </h3>
+            <p class="text-gray-600 mb-3">
+              Team: Nhyira Mante, Mary Chen | Advisor: Kenneth C. Arnold
+            </p>
+            <p class="text-gray-600 mb-3">
+              Status: Live prototype, 2026
+            </p>
+            <div class="flex flex-wrap gap-2 mb-3">
+              <span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">HCI</span>
+              <span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-sm">NLP</span>
+              <span class="px-2 py-1 bg-orange-100 text-orange-800 rounded-full text-sm">Writing Tools</span>
+            </div>
+            <p class="text-gray-700 mb-4">
+              Mindmap puts the writer in the middle of working with AI. Writers work through their ideas as cards
+              on a map; the AI coach asks questions and mirrors their own words back, but nothing reaches the map until
+              the writer adds it.
+            </p>
+            <div class="flex gap-3">
+              {mindmap.enabled ? (
+                <a href={mindmap.url} target="_blank" rel="noopener noreferrer" class="inline-flex items-center px-3 py-1 bg-green-600 text-white text-sm rounded hover:bg-green-700 transition-colors">
+                  🚀 Try Mindmap
+                </a>
+              ) : (
+                <span role="button" aria-disabled="true" class="inline-flex items-center px-3 py-1 bg-gray-200 text-gray-500 text-sm rounded cursor-not-allowed select-none">
+                  🚀 Try Mindmap
+                </span>
+              )}
+            </div>
+          </div>
+
           <!-- Robust and Improved Thoughtful AI 2025-2026 Senior Project -->
           <div class="bg-white rounded-lg shadow-lg p-6 border border-gray-200">
             <h3 class="text-xl font-semibold mb-2 text-blue-gray-900">