Find a trusted freelancer for your next project
The platform that connects client teams with independent freelancers.
20K+
Active members
2000+
Vetted freelancers
700+
Projects delivered
<LandingHero.Root>
<LandingHero.Content>
<LandingHero.Title>
Find the right{" "}
<LandingHero.Highlight tone="brand">freelancer</LandingHero.Highlight>
</LandingHero.Title>
<LandingHero.Lead>The platform that connects…</LandingHero.Lead>
<LandingHero.Actions>
<Button size="lg">I'm hiring</Button>
</LandingHero.Actions>
</LandingHero.Content>
<LandingHero.Media>
<HeroIllustration />
</LandingHero.Media>
</LandingHero.Root>Drop LandingHero.Media and pass layout="centered" for a hero with no
illustration.
Join the movement
Client or freelancer, there is a place for you.
API
LandingHero.Root
| Prop | Type | Default | |
|---|---|---|---|
background | "brand" | "default" | "gradient" | "gradient-brand" | "gradient-primary" | "muted" | — | Surface behind the section. The three gradients read as brand moments —
one per page is usually one enough. brand also flips the foreground to
primary-foreground. |
layout | "centered" | "split" | — | split sets the copy beside the media; centered stacks and centres
the copy with no media column. |
spacing | "lg" | "md" | "none" | "sm" | "xl" | "lg" | Vertical padding, which grows at md and up. none when the section
supplies its own rhythm. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus the DOM props of the element it renders. Source: landing/components/landing-hero/root.tsx.
LandingHero.Actions
Plus every <div> prop. Source: landing/components/landing-hero/actions.tsx.
LandingHero.Content
Plus every <div> prop. Source: landing/components/landing-hero/content.tsx.
LandingHero.Highlight
| Prop | Type | Default | |
|---|---|---|---|
tone | "brand" | "destructive" | "highlight" | "muted" | "primary" | "primary" | Which brand role colours this section: the tint, the solid fill and any connector line move together. Tokens, so a rebrand reaches them. |
Plus every <span> prop. Source: landing/components/landing-hero/highlight.tsx.
LandingHero.Lead
| Prop | Type | Default | |
|---|---|---|---|
align | "center" | "left" | "right" | — | Text alignment. |
size | "base" | "lg" | "sm" | "xl" | "xs" | — | Type scale, independent of variant so a muted note can still be
large. |
variant | "body" | "lead" | "muted" | — | Role of the copy. lead is a standfirst under a heading, muted is
secondary detail, body is everything else. |
weight | "bold" | "medium" | "normal" | "semibold" | — | Font weight. Prefer a heading over bold body copy when the text is actually a heading. |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus the DOM props of the element it renders. Source: landing/components/landing-hero/lead.tsx.
LandingHero.Media
Plus every <div> prop. Source: landing/components/landing-hero/media.tsx.
LandingHero.Title
| Prop | Type | Default | |
|---|---|---|---|
align | "center" | "left" | "right" | — | Text alignment. center suits a section intro; anything longer than a
line or two reads better left-aligned. |
level | HeadingLevel | — | Sets both the rendered tag and the size scale (override the tag with render). |
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus the DOM props of the element it renders. Source: landing/components/landing-hero/title.tsx.