docs(websitedoc): added new website

packages/docs/src/components/header/header.css

@@ -0,0 +1,34 @@
+header {
+  position: sticky;
+  top: 0;
+  z-index: 11;
+  display: grid;
+  grid-template-columns: minmax(130px, auto) 1fr;
+  gap: 30px;
+  height: 80px;
+  width: 100%;
+  padding: 10px;
+  background-color: white;
+  overflow: hidden;
+}
+
+header a.logo {
+  display: block;
+}
+
+header a {
+  text-decoration: none;
+}
+
+header nav {
+  text-align: right;
+}
+
+header nav a {
+  display: inline-block;
+  padding: 5px 15px;
+}
+
+header nav a:hover {
+  text-decoration: underline;
+}

packages/docs/src/components/header/header.tsx

@@ -0,0 +1,26 @@
+import { component$, useStyles$ } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
+import { QwikLogo } from '../icons/qwik';
+import styles from './header.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  const { pathname } = useLocation();
+
+  return (
+    <header>
+      <a class="logo" href="/">
+        <QwikLogo />
+      </a>
+      <nav>
+        <a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
+          Docs
+        </a>
+        <a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
+          About Us
+        </a>
+      </nav>
+    </header>
+  );
+});