Hero Section

Heroes 1

About

A page-top hero layout with a statement heading, supporting lede, one primary action and a secondary link, optionally paired with a media figure or an autoplaying background film.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Section to your project and fits it to your theme.

Code

How Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import Hero from "@/components/ui/hero";

export default function HeroWithMediaDemo() {
  return (
    <div style={{ padding: "64px 24px" }}>
      <Hero
        lede="A single workspace that keeps your team's documents, tasks and conversations in one place."
        action={
          <button
            type="button"
            className="rr-btn rr-btn--primary rr-btn--lg rr-btn--pill"
          >
            Get started
          </button>
        }
        secondary="View the docs"
        secondaryHref="#docs"
        media={
          <div
            aria-hidden="true"
            style={{
              width: "100%",
              aspectRatio: "4 / 3",
              borderRadius: 12,
              background: "linear-gradient(130deg, #2b52ff 0%, #6ff4f0 100%)",
            }}
          />
        }
      >
        <h1
          style={{
            margin: 0,
            fontWeight: 800,
            fontSize: 48,
            lineHeight: "52px",
            letterSpacing: "-0.03em",
            color: "var(--ink-primary)",
          }}
        >
          Built for the way your team already works.
        </h1>
      </Hero>
    </div>
  );
}