A split hero: headline, an email sign-up that validates, and a framed screenshot of the product, built from our components and tilted a degree or two.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/hero-02.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Hero02 } from '@/components/hero-02/hero-02'
export default function Page() {
return (
<main>
<Hero02 />
</main>
)
}Files
What the command adds to your project, and where.
components/hero-02/hero-02.tsxThe section. Import it into any page and render it; it fills the width of its parent.
It also installs the components it is built from, unless you already have them: Badge, Button, Input, Switch.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Hero
- Hero 01A landing-page opening: navigation with a phone menu, a headline that rises in word by word, an app window built from our components, and a slow row of customer names.
- Hero 03A developer-tool hero: a big headline, an install command with a copy button, and a code window beside a terminal, with tabs for TypeScript, Python and Go.
- Hero 04A centred editorial hero: an announcement pill, an oversized headline, two calls to action and a row of three headline numbers.
- Hero 05A hero with a full-width map drawn in SVG (grid, contours, a dashed route) and the headline in a solid panel that rises out of the page.
- Hero 06A hero whose picture is a stack of three offset component cards (a release, a working checklist and a comment), with a left-aligned headline under a breadcrumb-style eyebrow.
- Hero 07A text-only manifesto hero: a huge multi-line statement with one phrase underlined in the brand colour, a short paragraph and a single button.
- Hero 08A hero with a working rent splitter in it: enter the rent and each person's income, switch between by-income and even splits, and see whole-dollar shares that always add up.
- Hero 09A mobile-app hero: a phone built from CSS holding a small working task list made from our components, plain text download buttons and one short quote under a ratings line.