Getting Started
Templates
Components
Blocks
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:
import { HeroCursorCards } from "@/components/ui/hero-cursor-cards"
export default function Example() {
return (
<HeroCursorCards
title="Ship Products Faster with Intelligent Workflows"
subtitle="One platform for your entire team to plan, build, and iterate."
primaryCtaText="Get Started Free"
primaryCtaHref="/signup"
showFollowingCursor={true}
/>
)
}| 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")
}