From 1dda0e3bb9ada21bd37f1e975c8f4038fca72fed Mon Sep 17 00:00:00 2001
From: Vijay Janapa Reddi <vj@eecs.harvard.edu>
Date: Sun, 16 Nov 2025 23:45:39 -0500
Subject: [PATCH] Enhance intro page carousel with mobile responsiveness and
 sidebar textbook link

- Remove carousel text labels, rely on larger terminal frame titles (20px bold)
- Fix navigation arrow positioning: moved to top: 405px with z-index: 100
- Reduce carousel height from 500px to 450px for better spacing
- Add clickable sidebar link to mlsysbook.ai via JavaScript
- Fix quickstart button link to use .html extension
- Add mobile responsive CSS for logo, headings, and carousel
- Update Terminalizer configs with larger frame title font
- Add textbook link with hover effects in intro page
---
 site/_config.yml |  1 +
 site/intro.md    | 24 +++++++++---------------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/site/_config.yml b/site/_config.yml
index 3f27ca92..fa8ef91a 100644
--- a/site/_config.yml
+++ b/site/_config.yml
@@ -55,6 +55,7 @@ html:
     - _static/wip-banner.js
     - _static/ml-timeline.js
     - _static/hero-carousel.js
+    - _static/sidebar-link.js
   
   # Favicon configuration
   favicon: "_static/favicon.svg"
diff --git a/site/intro.md b/site/intro.md
index 1468128c..4301fadd 100644
--- a/site/intro.md
+++ b/site/intro.md
@@ -1,10 +1,16 @@
 <!-- Updated main heading: Changed from "TinyTorch: Tensors to Systems" to "Build Your Own ML Framework"
      for clearer value proposition and action-oriented messaging -->
-<h1 style="text-align: center; font-size: 3rem; margin: 0rem 0 1rem 0; font-weight: 700;">
+<h1 style="text-align: center; font-size: 3rem; margin: 0rem 0 0.5rem 0; font-weight: 700;">
 Build Your Own ML Framework
 </h1>
 
-<h2 style="background: linear-gradient(135deg, #E74C3C 0%, #E67E22 50%, #F39C12 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; font-size: 2.5rem; margin: 2rem 0 1rem 0; font-weight: 700;">
+<p style="text-align: center; margin: 0 0 1.5rem 0;">
+<a href="https://mlsysbook.ai" target="_blank" class="textbook-link" style="color: #64748b; font-size: 0.95rem; text-decoration: none; border-bottom: 1px solid #cbd5e1; transition: all 0.2s ease;">
+Hands-on labs for the <span style="font-weight: 600; color: #475569;">Machine Learning Systems</span> textbook
+</a>
+</p>
+
+<h2 style="background: linear-gradient(135deg, #E74C3C 0%, #E67E22 50%, #F39C12 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-align: center; font-size: 2.5rem; margin: 1.5rem 0 1rem 0; font-weight: 700;">
 Don't just import it. Build it.
 </h2>
 
@@ -23,9 +29,6 @@ Build a complete machine learning (ML) framework from tensors to systems—under
         <img src="_static/demos/01-clone-setup.gif" alt="Clone & Setup workflow" loading="lazy" />
         <div class="preview-fallback">💻</div>
       </div>
-      <div class="carousel-text">
-        <h4>Clone & Setup</h4>
-      </div>
     </div>
 
     <div class="carousel-item">
@@ -33,9 +36,6 @@ Build a complete machine learning (ML) framework from tensors to systems—under
         <img src="_static/demos/02-build-jupyter.gif" alt="Build in Jupyter workflow" loading="lazy" />
         <div class="preview-fallback">📓</div>
       </div>
-      <div class="carousel-text">
-        <h4>Build in Jupyter</h4>
-      </div>
     </div>
 
     <div class="carousel-item">
@@ -43,9 +43,6 @@ Build a complete machine learning (ML) framework from tensors to systems—under
         <img src="_static/demos/03-export-tito.gif" alt="Export with TITO workflow" loading="lazy" />
         <div class="preview-fallback">🛠️</div>
       </div>
-      <div class="carousel-text">
-        <h4>Export with TITO</h4>
-      </div>
     </div>
 
     <div class="carousel-item">
@@ -53,9 +50,6 @@ Build a complete machine learning (ML) framework from tensors to systems—under
         <img src="_static/demos/04-validate-history.gif" alt="Validate with History workflow" loading="lazy" />
         <div class="preview-fallback">🏆</div>
       </div>
-      <div class="carousel-text">
-        <h4>Validate with History</h4>
-      </div>
     </div>
   </div>
 
@@ -67,7 +61,7 @@ Build a complete machine learning (ML) framework from tensors to systems—under
 ```
 
 <div style="text-align: center; margin: 2rem 0;">
-  <a href="quickstart-guide" style="display: inline-block; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; padding: 0.875rem 2rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 1rem; margin: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.15);">
+  <a href="quickstart-guide.html" style="display: inline-block; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); color: white; padding: 0.875rem 2rem; border-radius: 0.5rem; text-decoration: none; font-weight: 600; font-size: 1rem; margin: 0.5rem; box-shadow: 0 4px 6px rgba(0,0,0,0.15);">
     Start Building in 15 Minutes →
   </a>
 </div>