41 lines
1.3 KiB
TypeScript
41 lines
1.3 KiB
TypeScript
import { ButtonLink } from './Button'
|
|
import { Icon } from './Icon'
|
|
|
|
export function Hero() {
|
|
return (
|
|
<section className="hero-section">
|
|
<div className="hero-copy">
|
|
<span className="eyebrow accent">Component library</span>
|
|
<h1>Build with clarity.</h1>
|
|
<p>A considered set of accessible, composable components for building calm, capable interfaces.</p>
|
|
<div className="hero-actions">
|
|
<ButtonLink variant="primary" href="/components/buttons">
|
|
Explore components <Icon name="arrow" size={16} />
|
|
</ButtonLink>
|
|
<ButtonLink variant="ghost" href="/docs/markdown">
|
|
Read the principles
|
|
</ButtonLink>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="hero-orbit" aria-hidden="true">
|
|
<div className="orbit orbit-one" />
|
|
<div className="orbit orbit-two" />
|
|
<div className="orbit-core">
|
|
<div className="brand-mark large">
|
|
<span />
|
|
</div>
|
|
<span>
|
|
system
|
|
<br />
|
|
<b>ready</b>
|
|
</span>
|
|
</div>
|
|
<span className="orbit-label label-one">TOKENS <b>48</b></span>
|
|
<span className="orbit-label label-two">A11Y <b>AAA</b></span>
|
|
<span className="orbit-label label-three">RUNTIME <b>FAST</b></span>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|