Implement Contact, Header, start Footer

src/components/Header.astro

@@ -1,13 +1,71 @@
 ---
-
+import ArrowUpRight from "./icons/ArrowUpRight.astro";
+import MenuIcon from "./icons/MenuIcon.astro";
 ---
 
 <header>
-  <!-- Logo -->
+  {/* Logo */}
+  <div class="logo"></div>
 
-  <!-- Contact Us -->
+  {/* Contact Link */}
+  <a class="contact">
+    <span>Contact us</span>
+    <ArrowUpRight class="icon" />
+  </a>
 
-  <!-- Menu Button -->
+  {/* Menu Button */}
+  <button>
+    <MenuIcon class="menu-icon" />
+  </button>
 </header>
 
-<style></style>
+<style>
+  header {
+    display: grid;
+    grid-template-columns: var(--base-grid);
+    align-items: center;
+    padding: 2.5rem;
+    position: fixed;
+    top: 0;
+    inset-inline: 0;
+  }
+
+  .logo {
+    width: 200px;
+    height: 50px;
+    background-color: salmon;
+
+    grid-column: 1 / 3;
+  }
+
+  .contact {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    grid-column: -2 / -4;
+    justify-self: end;
+    font-size: 1.5rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: var(--tracking-tight);
+  }
+
+  .icon {
+    display: inline-block;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  button {
+    grid-column: -1 / -2;
+    background-color: transparent;
+    border: none;
+
+  }
+
+  .menu-icon {
+    display: inline-block;
+    width: 3.125rem:
+    height: 3.125rem:
+  }
+</style>