Getting Started
Templates
Blocks
Components
For solo developers, indie hackers, and freelancers shipping their own products. Pay once, keep everything forever.
Instant download · No subscription · Lifetime access
For small teams, agencies, and freelancers shipping multiple client products. Lifetime access for everyone on your team.
Instant CLI token for 5 seats · Onboarding included · Invoice on request
A dynamic hero section featuring animated cursor pointers, interactive following cursor, and a visually striking diamond-layout card showcase. Designed for SaaS platforms and collaboration tools to demonstrate real-time team features.
Key Features:
| Prop | Type | Default | Description |
|---|---|---|---|
badgeText | string | "Now available for Enterprise" | Badge announcement text |
badgeLink | string | "#" | Badge link URL |
badgeLinkText | string | "Learn more" | Badge link display text |
title | string | "Ship Products Faster with Intelligent Workflows" | Hero heading text |
titleMobile | string | Same as title without "Ship " | Mobile-specific title |
subtitle | string | Default description | Hero subtitle text |
primaryCtaText | string | "Get Started Free" | Primary CTA button text |
primaryCtaHref | string | "#" | Primary CTA button link |
secondaryCtaText | string | "Request a Demo" | Secondary CTA button text |
secondaryCtaHref | string | "#" | Secondary CTA button link |
cursors | HeroCursorCardsCursor[] | 3 default cursors | Floating cursor configurations |
logos | HeroCursorCardsLogo[] | 8 default logos | Logo cloud images |
logoCloudTitle | string | "Powering workflows at industry leaders" | Logo cloud section title |
logoCloudLinkText | string | "See customer stories" | Logo cloud link text |
logoCloudLinkHref | string | "#" | Logo cloud link URL |
showFollowingCursor | boolean | true | Enable/disable following cursor |
className | string | undefined | Additional CSS classes |
Each cursor in the cursors array accepts:
interface HeroCursorCardsCursor {
name: string // Label shown on cursor badge
color: string // Hex color for cursor and badge
position: "top-center" | "left" | "right"
floatDelay?: number // Animation delay in seconds
}Each logo in the logos array accepts:
interface HeroCursorCardsLogo {
src: string // Image URL
alt: string // Alt text
className?: string // Height/size classes (e.g., "h-6")
}