# Hero Section v13

> Minimal centered hero for a freelancer finance app: secondary badge, two-line headline, muted description, and a single rounded-full button CTA.

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/hero-section-v13).

- Page, with a live preview: https://shadcn.exchange/r/uiception/hero-section-v13
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/hero-section-v13-light-bb120857f2adb258.png
- Registry item: https://uiception.com/r/hero-section-v13.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/hero-section-v13.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `badge`, `button`

## Files

### `registry/new-york/blocks/hero-section-v13/page.tsx`

```tsx
import HeroSectionV13 from "./components/hero-section-v13"

export default function Page() {
  return <HeroSectionV13 />
}
```

### `registry/new-york/blocks/hero-section-v13/components/hero-section-v13.tsx`

```tsx
import Link from "next/link"

import { Badge } from "@/components/ui/badge"
import { Button } from "@/components/ui/button"

import { badge, cta, description, headline } from "../lib/config"

export default function HeroSectionV13() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <div className="flex flex-col items-center gap-6 text-center">
          <Badge variant="secondary" className="text-sm">
            {badge}
          </Badge>

          <h1 className="text-3xl font-medium tracking-tighter sm:text-4xl lg:text-5xl lg:leading-[1.15]">
            {headline[0]}
            <br />
            {headline[1]}
          </h1>

          <p className="max-w-lg text-base leading-relaxed text-muted-foreground">
            {description}
          </p>

          <Button asChild size="lg" className="rounded-full">
            <Link href={cta.href}>{cta.label}</Link>
          </Button>
        </div>
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/hero-section-v13/lib/config.ts`

```ts
export const badge = "Built For Freelancers"

export const headline = [
  "Your Money, In Order",
  "Long Before Tax Season",
] as const

export const description =
  "When A Client Pays, A Share Goes Straight To Your Quarterly Estimate And The Rest Shows Up As Money You Can Spend This Month."

export const cta = {
  label: "Start Budgeting Free",
  href: "#",
} as const
```