feat(showcase): implement home page with hero, stats, code snippet, a… - #160
Merged
Conversation
…nd navigation cards Wire 'home' into the panel system as the default landing page. Add logo click handler in sc-nav to navigate back to home. Full home page with wordmark hero, intro blurb, CSS theming snippet (using sc-code-block), 4-stat summary row, and 10 navigation cards dispatching sc-navigate events.
|
added 10 commits
March 20, 2026 14:57
When no stored mode preference exists in localStorage, the app now respects the user's OS prefers-color-scheme setting instead of always defaulting to dark mode.
…tions section Add a subtle radial gradient + dot pattern to the hero background using the active schema's --line-solid-background as accent (dark-mode-first with :host([light]) overrides). Add a "Built with tokens" section between the stats row and the Explore card grid, showcasing 5 native HTML compositions styled purely with --line-* semantic tokens: content card, info banner, image card, pricing card, and login form. Responsive 3/2/1 column grid layout.
Restructure the home page into a clear visual hierarchy:
- Hero section (full width) with wordmark, tagline, and intro
- "Built with tokens" header above a two-column showcase section
- Left column: sticky CSS usage code snippet
- Right column: composition showcase wall (content card, login form,
info banner, image card, pricing card) in a 2-column grid with
varied spans for visual interest
- Stats row (full width)
- Explore card grid (full width)
Responsive: stacks to single column below 768px. All styling uses
semantic tokens, dark mode first with :host([light]) overrides.
No inline styles — all grid placement via CSS classes.
…n home page - Increase hero gradient intensity (22%/14% dark, 16%/10% light) and extend ellipse sizes for a fuller, more premium background - Add text-shadow glow behind the wordmark using the active schema color - Bump dot pattern opacity from 0.3/0.4 to 0.4/0.5 for subtle visibility gain - Use --line-solid-background directly for section titles (accent color) - Apply color-mix(in oklch) blends for tagline, section subtitles, composition card titles, login heading, image title, and nav card titles — creating a rich visual hierarchy that adapts automatically on schema switch - Remove redundant :host([light]) color overrides for elements that now use color-mix with semantic tokens (tokens already adapt to light/dark mode)
…ierarchy - Hero gradient: single centered radial-gradient instead of 3 split ellipses that created visible seams - Titles (.comp-card-title, .comp-login-heading, .comp-image-title, .card-title): restored to --line-high-contrast (white/black) - Descriptions (.tagline, .section-subtitle): restored to --line-low-contrast for proper readability - Section labels and category badges keep accent color
- Gradient + dot pattern now cover the entire page (not just hero), with multiple radial-gradient layers and a fading dot grid - All titles use color-mix(15% accent, high-contrast) for subtle tint - All descriptions use color-mix(10% accent, low-contrast) for tint - Section labels keep pure accent color - Removed stale :host([light]) color overrides — color-mix with semantic tokens adapts automatically to light/dark mode - When schema changes, every tinted color updates automatically
- Hero section left-aligned instead of centered - Top padding reduced from 7.5rem to 1.5rem to align wordmark closer to the nav bar - Intro blurb left-aligned with margin adjusted
- Hero section now has its own background (5% accent tinted) with a subtle border, making it visually distinct from the rest - Reduced hero top padding to zero gap with content area - Dot grid pattern: smaller dots (0.5px), fades in from top (avoids artifact at page edge), fades out at 65%
Changed pseudo-elements from position: absolute to position: fixed so the gradient and dot grid cover the entire viewport instead of being clipped to the component boundaries.
When navigating to home via logo click, the pill indicator stayed on the previous page because 'home' wasn't in NAV_ITEMS. Adding Home as the first nav item fixes the pill position and provides a visible Home link in the navigation bar.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…nd navigation cards
Wire 'home' into the panel system as the default landing page. Add logo click handler in sc-nav to navigate back to home. Full home page with wordmark hero, intro blurb, CSS theming snippet (using sc-code-block), 4-stat summary row, and 10 navigation cards dispatching sc-navigate events.