add app

web/src/components/Layout/Header.astro

@@ -0,0 +1,48 @@
+---
+import Logo from "components/Logo.astro";
+---
+
+<header id="main-header">
+  <div class="inner-container">
+    <Logo />
+    <button id="get-started-button" class="button">Get Started</button>
+  </div>
+</header>
+<script>
+  import { animate } from "motion";
+  import { ease } from "@unom/style";
+
+  const getStartedButton = document.getElementById("get-started-button");
+  const header = document.getElementById("main-header");
+
+  if (header) {
+    animate(header, { opacity: [0, 1], y: ["-101%", 0] }, ease.quart(0.6).out);
+  }
+
+  if (getStartedButton) {
+    animate(
+      getStartedButton,
+      { scale: [0, 1] },
+      { ...ease.quart(0.6).out, delay: 0 }
+    );
+  }
+</script>
+<style lang="postcss">
+  header {
+    position: fixed;
+    width: 100%;
+    top: 2rem;
+    z-index: 99;
+
+    & .inner-container {
+      display: flex;
+      justify-content: space-between;
+      flex-direction: row;
+      border-radius: 100px;
+      margin: auto;
+      max-width: var(--content-max-width);
+      padding: var(--padding-main);
+      background-color: var(--color-neutral-accent);
+    }
+  }
+</style>