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.
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>
);
}
