Initial commit

src/components/Header.tsx

@@ -0,0 +1,61 @@
+import { Link } from 'react-router-dom'
+import { Container } from './Container'
+import { Button } from './Button'
+
+export function Header() {
+  return (
+    <header>
+      <nav>
+        <Container className="relative z-50 flex justify-between py-8">
+          <div className="relative z-10 flex items-center gap-16">
+            <Link to="/" aria-label="Home">
+              <img src="/src/images/logomark.svg" alt="Mycelium" className="h-10 w-auto" />
+            </Link>
+            <div className="hidden lg:flex lg:gap-10">
+              <Link
+                to="/"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Home
+              </Link>
+              <Link
+                to="/cloud"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Cloud
+              </Link>
+              <Link
+                to="/network"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Network
+              </Link>
+              <Link
+                to="/agents"
+                className="text-base/7 tracking-tight text-gray-700 hover:text-cyan-500 transition-colors"
+              >
+                Agents
+              </Link>
+            </div>
+          </div>
+          <div className="flex items-center gap-6">
+            <div className="flex items-center gap-6 max-lg:hidden">
+              <Button
+                to="https://threefold.info/mycelium_network/docs/"
+                variant="outline"
+                as="a"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Docs
+              </Button>
+              <Button to="/download" variant="solid" color="cyan">
+                Get Mycelium
+              </Button>
+            </div>
+          </div>
+        </Container>
+      </nav>
+    </header>
+  )
+}