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 landing-page hero composed of three layered pieces: a centered headline block (pill + two-line title with a gradient accent + subtext + two CTAs), a decorative cross-grid backdrop that frames the headline with four "+" intersection markers at the corners, and a half-cut cobe globe peeking from the bottom edge with three floating job cards positioned over it.
Key Features:
overflow-hidden band so only the upper hemisphere shows — the equator sits at the band's bottom edge, giving the "Earth rising" effect| Prop | Type | Default | Description |
|---|---|---|---|
pillBadge | string | "25% OFF" | Black-on-white badge inside the pill at the top |
pillText | string | Default tagline | Text shown to the right of the pill badge |
markers | GlobeMarker[] | 6 cities | [lat, lng] dots rendered on the globe |
jobs | JobCard[] | 3 sample cards | Floating cards positioned over the globe (see types below) |
interface GlobeMarker {
id: string
location: [number, number] // [latitude, longitude]
}
interface JobCard {
id: string
title: string
company: string
iconBg: string // tailwind bg-* class for the icon circle
iconColor: string // tailwind text-* class for the icon glyph
iconLabel: string // short text shown inside the icon circle
tags: string[]
position: string // tailwind positioning classes for absolute placement
}| Element | Purpose |
|---|---|
GridBackdrop | Two vertical + two horizontal hairlines with edge fades, plus four CrossMarks at the central cell's corners |
Globe | Cobe canvas with drag-to-rotate, auto-spin when idle, light-mode colors |
GlobeStage | Clipping band that hides the bottom of the globe + the layer that hosts the floating JobChips |
JobChip | One floating card with brand-color icon, title, company and tag pills |
linear-gradient(... var(--border) ... transparent) so the lines fade out at the edges. Replace with solid bg-border if you want hard lines.bg-foreground/text-background) which works in both themes; the badge-within-the-pill uses bg-foreground too, so it visually melts into the pill — drop the inner badge or change its bg- if you want it distinct.aspect-square on the globe wrapper means the globe always renders at 1:1; the visible portion is controlled by the parent band's height.