Hero Blocks
Large impact sections for landing pages, homepages, and marketing content. Multiple layout variants with CTAs, images, and stats.
Centered Hero
Default homepage hero with centered copy and CTAs. Maximum impact and readability.
Fast. Accessible. Beautiful.
Build Modern Web Applications
A production-ready component library built with Astro, TypeScript, and modern web standards.
Centered Hero with Background
Hero with background image and overlay for visual impact.
Smart Debt Strategies for Growth
Transform Your Financial Future
Learn proven strategies from industry experts to leverage debt effectively and build lasting wealth.
Hero with Image Left
50/50 grid layout with image on left, copy on right. Great for services pages.
Expert Guidance for Your Business
Professional Services
Our team of experienced professionals provides tailored solutions to help your business grow and succeed in today's competitive marketplace.
Hero with Image Right
Copy on left, image on right. Classic layout for about pages and product features.
Innovation Meets Excellence
About Our Company
Since 2010, we've been helping businesses transform their digital presence through cutting-edge technology and thoughtful design.
Full-Width Background Hero
Full-width background image with dark overlay. Perfect for landing pages.
Design That Makes an Impact
Elevate Your Brand
Create memorable experiences that resonate with your audience and drive meaningful results.
Hero with Stats Strip
Hero section combined with stats strip for credibility and social proof.
The Platform Teams Love
Trusted by Industry Leaders
Join thousands of developers and businesses building exceptional experiences with our component library.
Production-ready UI components
Fully typed codebase
Meets accessibility standards
Tested across platforms
Component Props
HeroCentered
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Main headline text |
subtitle | string | No | Subheading above title |
description | string | No | Body text below title |
primaryCTA | CTA | No | Primary call-to-action button |
secondaryCTA | CTA | No | Secondary call-to-action button |
backgroundImage | string | No | Background image URL |
overlay | boolean | No | Add dark overlay to background |
HeroImageLeft / HeroImageRight
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Main headline text |
image | string | Yes | Image URL (600×450 recommended) |
imageAlt | string | Yes | Image alt text for accessibility |
subtitle | string | No | Subheading above title |
description | string | No | Body text below title |
primaryCTA | CTA | No | Primary call-to-action button |
secondaryCTA | CTA | No | Secondary call-to-action button |
HeroBackgroundImage
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Main headline text |
backgroundImage | string | Yes | Background image URL |
overlayOpacity | number | No | Overlay opacity (0.0-1.0, default 0.5) |
textAlign | string | No | "left", "center", or "right" (default "center") |
minHeight | string | No | Minimum height (default "70vh") |
HeroWithStats
| Prop | Type | Required | Description |
|---|---|---|---|
title | string | Yes | Main headline text |
stats | Stat[] | Yes | Array of stat objects (value, label, description) |
subtitle | string | No | Subheading above title |
description | string | No | Body text below title |
primaryCTA | CTA | No | Primary call-to-action button |
secondaryCTA | CTA | No | Secondary call-to-action button |
Note: CTA type is { text: string; href: string }. Stat type is
{ value: string; label: string; description?: string }.