Initial commit

frontend/src/components/Hero.tsx

@@ -0,0 +1,40 @@
+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>
+  )
+}