Component Gallery
Common Components
Reusable components for shared page patterns
Blog Card
Card component for displaying blog post previews
- •Clickable card with hover effects
- •Emoji thumbnail area
- •Category badge
View details
Page Hero
Hero section for page headers with optional label and accent text
- •Two color schemes (light teal / dark black)
- •Optional label with uppercase styling
- •Title with optional accent color
View details
Step List
Ordered list component for displaying sequential steps
- •Circular step numbers with teal background
- •Bold step titles
- •Description text
View details
Empty State
A friendly placeholder shown when a list or page has no content — with icon, title, description, and optional CTA.
- •Three sizes with proportional spacing
- •Optional icon, description, and action
- •Server Component (no client state needed)
View details