saturation/uiFeature Section
A family of 3 feature section variants (Split, Stacked, Cards) that share a common data interface. Mix and match across pages for visual variety.
The new way
The financial operating system you've been waiting for.
Net changes, not manual chores
Spend 20% less time on the stuff you hate with smart, automated workflows.
Total control, from anywhere
Run your productions from anywhere with one platform for everything.
AI-powered for profitability
Boost margins with AI-driven insights that power smarter decisions.
Features
- 3 layout variants — FeatureSplit, FeatureStacked, FeatureCards — same data, different presentation
- Split variant — Text left/right + media. Best for deep-dives with product screenshots.
- Stacked variant — Centered header, feature row, full-width media. Hero-like mid-page impact.
- Cards variant — Header + card grid. Equal visual weight for multiple features.
- Spring arrow CTA — Motion-powered arrow animation on hover
- Scroll animations — AnimateOnScroll for entrance reveals
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| categoryTag | string | - | Label with colored dot accent |
| heading | string | - | Section heading |
| description | string | - | Section description (Stacked & Cards) |
| features | FeaturePoint[] | - | Array of { icon?, title, description, imageUrl?, videoUrl? } |
| ctaText | string | - | CTA button label |
| ctaHref | string | - | CTA button link |
| accentColor | string | "bg-primary" | Tailwind bg class for the dot |
Components Used
button