hero section mvp

dfinity · Feb 11, 2025 · 0fec8d7 · 0fec8d7
1 parent e78ead3
commit 0fec8d7
Show file tree

Hide file tree

Showing 15 changed files with 299 additions and 247 deletions.
diff --git a/apps/marketing/public/favicon.png b/apps/marketing/public/favicon.png
diff --git a/apps/marketing/public/fonts/RulesMedium.ttf b/apps/marketing/public/fonts/RulesMedium.ttf
diff --git a/apps/marketing/public/fonts/RulesRegular.ttf b/apps/marketing/public/fonts/RulesRegular.ttf
diff --git a/apps/marketing/public/logo.svg b/apps/marketing/public/logo.svg
diff --git a/apps/marketing/public/orb-blue-hero.webp b/apps/marketing/public/orb-blue-hero.webp
diff --git a/apps/marketing/public/powered-by-icp.svg b/apps/marketing/public/powered-by-icp.svg
diff --git a/apps/marketing/public/share.jpg b/apps/marketing/public/share.jpg
diff --git a/apps/marketing/src/assets/astro.svg b/apps/marketing/src/assets/astro.svg
diff --git a/apps/marketing/src/assets/background.svg b/apps/marketing/src/assets/background.svg
diff --git a/apps/marketing/src/components/Header.astro b/apps/marketing/src/components/Header.astro
@@ -0,0 +1,67 @@
+<div class="fixed top-0 left-0 right-0 bg-gradient-to-b from-black to-transparent z-10">
+  <header
+    class="container-page text-white h-20 lg:h-32 flex flex-row items-center justify-between z-20"
+  >
+    <img src="/logo.svg" alt="Orbit Logo" class="h-5 lg:h-7 z-10" />
+
+    <div class="hidden lg:inline-flex flex-row items-center gap-x-7">
+      <a href="" class="text-h7 hover:text-white/70 transition-all duration-300">Features</a>
+      <a href="" class="text-h7 hover:text-white/70 transition-all duration-300">Products</a>
+      <a href="" class="text-h7 hover:text-white/70 transition-all duration-300">Clients</a>
+      <a href="" class="text-h7 hover:text-white/70 transition-all duration-300">FAQ</a>
+
+      <a
+        class="btn btn-outline lg:w-72"
+        href="https://orbit.global"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Launch Orbit</a
+      >
+    </div>
+
+    <label class="lg:hidden cursor-pointer peer group z-10">
+      <input type="checkbox" class="hidden" />
+      <svg
+        width="40"
+        height="40"
+        viewBox="0 0 40 40"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          class="group-has-checked:rotate-45 origin-[25.2px] transition-all duration-300"
+          d="M6 25H34"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="square"
+          stroke-linejoin="round"></path>
+        <path
+          class="group-has-checked:-rotate-45 origin-[25.5px] transition-all duration-300"
+          d="M6 14H34"
+          stroke="white"
+          stroke-width="2"
+          stroke-linecap="square"
+          stroke-linejoin="round"></path>
+      </svg>
+    </label>
+
+    <nav
+      class="fixed inset-0 px-6 bg-black flex-col items-start pt-36 gap-y-5 flex opacity-0 pointer-events-none peer-has-checked:opacity-100 peer-has-checked:pointer-events-auto transition-all duration-300"
+    >
+      <a href="" class="text-h3 hover:text-white/70 transition-all duration-300">Features</a>
+      <a href="" class="text-h3 hover:text-white/70 transition-all duration-300">Pricing</a>
+      <a href="" class="text-h3 hover:text-white/70 transition-all duration-300">Clients</a>
+      <a href="" class="text-h3 hover:text-white/70 transition-all duration-300">FAQ</a>
+
+      <a
+        class="btn btn-outline block mt-20 w-full"
+        href="https://orbit.global"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Launch Orbit</a
+      >
+    </nav>
+  </header>
+</div>