About
High-contrast dark-navy hero with diagonal clip-path bottom, amber accent bar and stat callout. Strong geometric feel for city-centre development landing pages.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero — Bold Urban to your project and fits it to your theme.
Code
How Hero — Bold Urban is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import HeroUrban from "@/components/ui/hero-urban"
export default function HeroUrbanDemo() {
return (
<HeroUrban
badge="Kauno centras · 2026"
headline="Gyvenkite miesto širdyje"
subheadline="135 modernūs butai verslo ir kultūros centre. Nuo 45 iki 120 m²."
stat={{ value: "135", label: "Butų iš viso" }}
primaryCta={{ label: "Žiūrėti laisvus butus", href: "#" }}
secondaryCta={{ label: "Virtualus turas", href: "#" }}
/>
)
}
More in Heroes
View all
SaaS Template
2.4K
Responsive Hero Banner
2K
Hero
1.2K
Centered Hero with Image Fan
932
Editorial Collage Hero
431
Glass Fold
213
HeroSectionWithGradient
336
Minimalist Hero Fashion
285
