Skip to content

feat: docs visual upgrade#11

Merged
siracusa5 merged 2 commits intomainfrom
feat/docs-visual-upgrade
Mar 13, 2026
Merged

feat: docs visual upgrade#11
siracusa5 merged 2 commits intomainfrom
feat/docs-visual-upgrade

Conversation

@siracusa5
Copy link
Collaborator

Summary

Visual overhaul of the Fumadocs site — typography, color depth, homepage redesign, docs layout polish, and MDX component registration. Transforms the docs from stock template to polished product page while staying on Fumadocs.

Changes

  • Typography: Inter (body) + Space Grotesk (display headings) via next/font/google, with CSS variable --font-display and tighter letter-spacing
  • Color palette: Blue-tinted dark theme (hsl(230, 15%, 4%)), bumped purple saturation, semi-transparent borders, warmer light theme
  • Homepage: Ambient purple glow orb, gradient-bordered command box, glassmorphism secondary CTA, SVG Lucide icons replacing Unicode, multi-column footer with gradient top border
  • Docs layout: Wider content area (1400px), gradient nav border, purple active sidebar indicator, styled code blocks/blockquotes/tables, display font on doc headings
  • MDX components: Registered Tabs, Tab, Callout, Steps, Step, Accordion, Accordions
  • Content: Quick-start uses <Steps> walkthrough, Installation uses <Tabs> for marketplace vs. script, <Callout> tips on both pages
  • Polish: Fade-in page animation, .glass / .glow-purple / .gradient-border utility classes

Test Plan

  • pnpm build passes (33 pages, 0 errors)
  • CI checks pass
  • Visual review on dev server — homepage, docs pages, both themes, mobile viewport

Notes

  • Content files renamed .md.mdx to support JSX component syntax
  • new Date().getFullYear() in footer renders at build time (static export) — correct for this use case
  • No new dependencies added — fonts via next/font/google, icons are inline SVG

🤖 Generated with Claude Code

siracusa5 and others added 2 commits March 12, 2026 20:50
Add Inter + Space Grotesk font system, deepen dark theme with blue-tinted
backgrounds, redesign homepage with ambient glow effects, gradient borders,
SVG icons, glassmorphism, and multi-column footer. Polish docs layout with
sidebar active indicators, styled code blocks, and display font headings.
Register Tabs, Callout, Steps, and Accordion MDX components. Update
quick-start and installation pages to showcase new components.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Scope .glass background to dark/light variants (was dark-only)
- Add position: relative to nav for ::after pseudo-element safety
- Add prefers-reduced-motion guard on fade-in animation
- Add aria-hidden to decorative SVG icons
- Consolidate duplicate :root blocks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@siracusa5 siracusa5 merged commit 676cbc9 into main Mar 13, 2026
2 checks passed
@siracusa5 siracusa5 deleted the feat/docs-visual-upgrade branch March 13, 2026 02:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant