From 37b3cd721df83daf0f51d7b9d89ca3f8da23aee2 Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Tue, 24 Feb 2026 11:23:17 -0700
Subject: [PATCH] Add clickable links and chart showcase to landing page

- Each use-case card now links to its how-to guide
- Chart showcase below cards: tide chart + conditions dashboard
  side by side, with caption linking to visualization guide
- CSS for showcase grid layout and card link styling
---
 docs/src/content/docs/index.mdx | 25 +++++++++++++++++++++++++
 docs/src/styles/custom.css      | 30 ++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+)

diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index 617c706..6abb935 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -101,39 +101,64 @@ No API keys. No data wrangling. Just ask.
 
     Finds nearby stations, pulls tide turning points, checks wind and
     barometric pressure, and identifies the best incoming-tide window.
+
+    [See how it works →](/how-to/fishing-trip/)
   </Card>
   <Card title="Check before you launch" icon="warning">
     *"Is it safe to take the boat out from Seattle today?"*
 
     Checks wind, gusts, visibility, water temperature, and pressure trend.
     Comes back with GO, CAUTION, or NO-GO — and tells you why.
+
+    [See the safety prompt →](/reference/prompts/)
   </Card>
   <Card title="Snorkeling at low tide" icon="sun">
     *"When's the next good low tide for snorkeling at La Jolla?"*
 
     Finds extreme low tides that expose reefs, checks water temperature and
     wind to confirm the trip is worth the drive.
+
+    [See how it works →](/how-to/beach-activities/)
   </Card>
   <Card title="Tide pooling with kids" icon="magnifier">
     *"Find the lowest tide this week near Monterey for tide pooling"*
 
     Scans a full week of predictions for the deepest lows. Negative values
     mean the water drops below the usual low-water mark — more pools exposed.
+
+    [See how it works →](/how-to/beach-activities/)
   </Card>
   <Card title="Deploy crab pots" icon="setting">
     *"Should I deploy pots near Anacortes right now?"*
 
     Checks tidal phase, runs a deployment briefing against wind and pressure
     thresholds, and recommends a soak window with a recovery time.
+
+    [See how it works →](/how-to/smartpot/)
   </Card>
   <Card title="Beachcombing after a storm" icon="heart">
     *"When's the next low tide at Cannon Beach? I want to look for agates."*
 
     Confirms a recent storm passed through by checking pressure drops,
     then finds the first post-storm low-tide window.
+
+    [See how it works →](/how-to/beach-activities/)
   </Card>
 </CardGrid>
 
+Ask for a chart and the data renders right in your conversation:
+
+<div class="showcase-grid">
+
+![48-hour tide chart for Seattle — predicted water levels with high/low markers and observed overlay](../../assets/tide-chart-seattle.png)
+
+![Conditions dashboard for Seattle — tides, wind, temperature, and barometric pressure in one view](../../assets/conditions-dashboard-seattle.png)
+
+</div>
+
+These are real outputs from the `visualize_tides` and `visualize_conditions` tools —
+[learn more about charts →](/how-to/visualization/)
+
 </div>
 
 <div class="splash-section">
diff --git a/docs/src/styles/custom.css b/docs/src/styles/custom.css
index 0f809f7..cfc2384 100644
--- a/docs/src/styles/custom.css
+++ b/docs/src/styles/custom.css
@@ -187,6 +187,36 @@ nav.sidebar .top-level > li > a {
   margin-bottom: 0.5rem;
 }
 
+/* Showcase image grid — two charts side by side */
+.showcase-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 1rem;
+  margin: 1.5rem 0 0.5rem;
+}
+
+.showcase-grid img {
+  border: 1px solid var(--sl-color-hairline-light);
+  border-radius: 0.5rem;
+  width: 100%;
+  height: auto;
+}
+
+/* Card "see how" links — make them stand out */
+[data-page-template="splash"] .sl-markdown-content .card a[href] {
+  display: inline-block;
+  margin-top: 0.5rem;
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: var(--sl-color-accent);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+[data-page-template="splash"] .sl-markdown-content .card a[href]:hover {
+  color: var(--sl-color-accent-high);
+}
+
 /* Install section: center the install block */
 [data-page-template="splash"] .sl-markdown-content .splash-section:last-child {
   text-align: center;