Components
Marketing hero and feature compositions
A distinct storytelling layer around the product interface.
On this page
Purpose and composition
HomeHero, FeaturesGrid, FeatureBlock, and FeatureBlocksSection compose the marketing narrative using native copy, pastel framing, and product screenshots.
Anatomy
- Heavy Inter headline and highlighted word
- Primary registration CTA
- Responsive feature grid
- Alternating screenshot/text sections
- Product image with meaningful alt text
Configuration and variants
| Input or variant | Contract |
|---|---|
| FeaturesGrid items | title, icon, and optional href; only linked items become links. |
| FeatureBlock | heading and description React nodes, screenshot metadata, index, and optional reverse. |
| Alternating panels | Index selects pastel framing; source layout controls ordering. |
| Feature detail | The /features/[slug] route has its own image and previous/next navigation composition. |
States and feedback
The screenshot reveal follows image loading. Broken or unready images must not be captured. Marketing remains light-only even when its imagery shows the dark app.
Interaction and responsive behavior
The grid grows from one to two to three columns. Feature blocks become two columns at the medium breakpoint, with readable text and a separately framed screenshot.
Accessibility and known limits
Maintain meaningful headings, image alternatives, and link names. The muted text pairing and missing global reduced-motion override are documented findings.
Source references
| File | Responsibility |
|---|---|
| marketing/src/components/HomeHero.tsx | Hero |
| marketing/src/components/FeaturesGrid.tsx | Feature directory |
| marketing/src/components/FeatureBlock.tsx | Alternating feature composition |
| marketing/src/app/(site)/features/[slug]/page.tsx | Feature detail |
Interface examples
Native TeachKit interfaces with fictional course, account, and learner records. Service responses and media are isolated demonstrations; no customer data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-22 · Revision 903bbf05ca9d · Documentation v2.0.0