From a4d683491deca49b4044074b3c6ceef61cea0025 Mon Sep 17 00:00:00 2001 From: Enrico Piovesan Date: Wed, 8 Jul 2026 22:04:46 -0600 Subject: [PATCH] fix: nav navigation gaps, orphaned Compare section, broken card styles - Mobile nav menu only exposed 6 of 13+ destinations available in the desktop dropdowns -- Roadmap, All Questions, Examples, and Quickstart were unreachable on mobile. Added them. - The entire Compare section (4 pages) had zero links from primary nav or footer, only reachable via buried cross-links inside a few other pages. Added to the Developers dropdown, mobile menu, and footer. - Found and fixed a real styling bug: new section landing pages (blog, compare, solutions, use-cases, docs, docs/guides) used class "usecase-card", but that class's styles lived only in home.css (homepage-only), so those cards rendered completely unstyled. Moved the component to components.css (global) so it works everywhere it's referenced, and added box-shadow + hover-lift for visual depth -- the whole site previously had zero box-shadow usage anywhere, which reads as flat/cheap. Applied the same treatment to .card, .stat-card, and .use-case-card, plus normalized a few hardcoded 10px border-radius values to the shared --radius token. Verified: 0 broken internal links across all 88 pages (unchanged from before), computed styles confirm .usecase-card now has real background/ padding/shadow on the previously-broken pages. Co-Authored-By: Claude Sonnet 5 --- public/assets/css/components.css | 60 ++++++++++++++++++++++++++++---- public/assets/css/home.css | 39 --------------------- src/components/Footer.astro | 1 + src/components/Nav.astro | 12 +++++++ 4 files changed, 67 insertions(+), 45 deletions(-) diff --git a/public/assets/css/components.css b/public/assets/css/components.css index 8f21c63..846ca78 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -163,9 +163,10 @@ border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; - transition: border-color 0.2s, background 0.2s; + transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } -.card:hover { border-color: var(--border-hover); } +.card:hover { border-color: var(--border-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24); } .card-accent-hover:hover { border-color: rgba(232,81,10,0.25); background: rgba(232,81,10,0.03); @@ -633,11 +634,12 @@ .use-case-card { background: var(--bg-card); border: 1px solid var(--border); - border-radius: 10px; + border-radius: var(--radius); padding: 1.5rem; - transition: border-color 0.2s; + transition: border-color 0.2s, box-shadow 0.2s; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } -.use-case-card:hover { border-color: var(--accent); } +.use-case-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24); } .use-case-num { font-family: var(--font-mono); font-size: 0.7rem; @@ -669,9 +671,10 @@ .stat-card { background: var(--bg-card); border: 1px solid var(--border); - border-radius: 10px; + border-radius: var(--radius); padding: 1.5rem; text-align: center; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); } .stat-value { font-family: var(--font-display); @@ -686,3 +689,48 @@ color: var(--fg-muted); line-height: 1.4; } + +/* ─── Use-case link card (homepage + section landing pages) ─────────────── */ +.usecase-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--gap-md); +} +@media (max-width: 700px) { + .usecase-grid { grid-template-columns: 1fr; } +} +.usecase-card { + background: var(--bg-card); + border: 1px solid var(--border); + border-radius: var(--radius-lg); + padding: 2rem; + transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); +} +.usecase-card:hover { + border-color: var(--border-hover); + transform: translateY(-2px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28); +} +.usecase-card h3 { + font-family: var(--font-display); + font-size: 1rem; + font-weight: 600; + color: var(--fg); + margin-bottom: 0.5rem; + letter-spacing: -0.015em; +} +.usecase-card p { + font-size: 0.85rem; + color: var(--fg-muted); + line-height: 1.65; + margin-bottom: 1.25rem; +} +.usecase-card a { + font-size: 0.82rem; + color: var(--accent); + display: inline-flex; + align-items: center; + gap: 0.25rem; +} +.usecase-card a:hover { text-decoration: underline; } diff --git a/public/assets/css/home.css b/public/assets/css/home.css index 70e8e31..5a9181e 100644 --- a/public/assets/css/home.css +++ b/public/assets/css/home.css @@ -284,45 +284,6 @@ body { padding-top: 0; } margin-top: 1rem; } - /* ── Use cases ── */ - .usecase-grid { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: var(--gap-md); - } - @media (max-width: 700px) { - .usecase-grid { grid-template-columns: 1fr; } - } - .usecase-card { - background: var(--bg-card); - border: 1px solid var(--border); - border-radius: var(--radius-lg); - padding: 2rem; - transition: border-color 0.2s; - } - .usecase-card:hover { border-color: var(--border-hover); } - .usecase-card h3 { - font-family: var(--font-display); - font-size: 1rem; - font-weight: 600; - color: var(--fg); - margin-bottom: 0.5rem; - letter-spacing: -0.015em; - } - .usecase-card p { - font-size: 0.85rem; - color: var(--fg-muted); - line-height: 1.65; - margin-bottom: 1.25rem; - } - .usecase-card a { - font-size: 0.82rem; - color: var(--accent); - display: inline-flex; - align-items: center; - gap: 0.25rem; - } - .usecase-card a:hover { text-decoration: underline; } /* ── CTA gradient section ── */ .cta-gradient { diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 4aa2536..2584d46 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -19,6 +19,7 @@ diff --git a/src/components/Nav.astro b/src/components/Nav.astro index 022a878..092862a 100644 --- a/src/components/Nav.astro +++ b/src/components/Nav.astro @@ -158,6 +158,13 @@ const { currentPath = '' } = Astro.props; Real-world patterns + + ⬡ + + Compare + vs function calling, microservices, serverless + + @@ -185,8 +192,13 @@ const { currentPath = '' } = Astro.props;