Add layout elements (#2)

* define global styles and favicon * add header * add hero * add footer
subvisual · Mar 1, 2023 · e238b4c · e238b4c
1 parent 0e7789b
commit e238b4c
Show file tree

Hide file tree

Showing 13 changed files with 284 additions and 169 deletions.
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/fonts/Poppins-Regular.ttf b/public/fonts/Poppins-Regular.ttf
diff --git a/public/fonts/StudioFeixenSans-Regular.otf b/public/fonts/StudioFeixenSans-Regular.otf
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  export let href: string;
+  export let header = false;
+</script>
+
+<a
+  {...$$restProps}
+  {href}
+  class:header
+>
+  <slot />
+</a>
+
+<style lang="postcss">
+  a {
+    @apply flex items-center whitespace-nowrap rounded-2xl bg-yellow py-3 px-6 tracking-tight text-black outline-black;
+  }
+
+  a:hover {
+    @apply brightness-105;
+  }
+
+  a.header {
+    @apply bg-transparent border border-yellow text-yellow py-2 px-5 sm:bg-yellow sm:text-black sm:border-none sm:py-3 sm:px-6;
+  }
+</style>
diff --git a/src/components/Card.astro b/src/components/Card.astro
diff --git a/src/components/DoraLogo.svelte b/src/components/DoraLogo.svelte
@@ -0,0 +1,55 @@
+<svg
+  width="63"
+  height="75"
+  viewBox="0 0 63 75"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M46.4119 48.5715L34.2924 59.8387L22.8308 48.5572C11.2121 36.2454 -6.55617 22.2623 6.71443 1.25427C9.91768 20.0139 15.7522 20.8897 47.2127 14.5983C72.8387 11.1667 56.8224 38.1549 46.4119 48.5715Z"
+    fill="#0F1314"
+    stroke="#FED766"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M22.845 48.6028L20.3281 36.9083H49.615L46.4117 48.6028L34.2851 59.8387L22.845 48.6028Z"
+    stroke="#FED766"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M21.1289 28.3281L20.3281 36.9083H32.7407L21.1289 28.3281Z"
+    fill="#0F1314"
+    stroke="#FED766"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M48.8142 28.3281L49.615 36.9083H37.2024L48.8142 28.3281Z"
+    fill="#0F1314"
+    stroke="#FED766"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M28.9085 73.7457L23.074 48.8061L34.2853 59.8387L46.2975 48.6917L40.5774 73.7457L34.2853 68.0256L28.9085 73.7457Z"
+    fill="#0F1314"
+    stroke="#FED766"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M34.2923 59.7815L20.3281 36.9083H49.615L34.2923 59.7815Z"
+    fill="#0F1314"
+    stroke="#FED766"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+</svg>
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
@@ -0,0 +1,38 @@
+<footer
+  class="flex justify-around items-baseline py-8 sm:py-16 px-8 lg:px-0 mt-8 flex-wrap gap-16 text-base sm:text-lg font-studio"
+>
+  <div class="flex gap-5 flex-wrap-reverse justify-around">
+    <div class="flex gap-5 text-lg">
+      <a
+        class="socials"
+        href="https://twitter.com/wearefiniam"
+      >
+        TW
+      </a>
+      <a
+        class="socials"
+        href="https://www.linkedin.com/company/finiam/"
+      >
+        IN
+      </a>
+      <a
+        class="socials"
+        href="https://github.com/finiam"
+      >
+        GH
+      </a>
+    </div>
+  </div>
+  <a
+    class="opacity-50 hover:opacity-100 transition-all whitespace-nowrap"
+    href="https://finiam.com"
+  >
+    Powered by Finiam
+  </a>
+</footer>
+
+<style lang="postcss">
+  .socials {
+    @apply w-16 h-16 sm:w-20 sm:h-20 flex justify-center items-center border rounded-full hover:bg-white hover:text-black transition-colors;
+  }
+</style>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import DoraLogo from "./DoraLogo.svelte";
+</script>
+
+<header
+  class="flex justify-between items-center gap-8 px-8 sm:px-16 xl:px-24 py-4 sm:py-12 lg:border-b border-yellow"
+>
+  <a
+    class="shrink-0 block w-12 sm:w-auto"
+    href="/"
+  >
+    <DoraLogo />
+  </a>
+  <nav class="hidden gap-2 lg:flex">
+    <a href="/">Solutions</a>
+    <a href="/">Features</a>
+    <a href="/">Mechanism</a>
+    <a href="/">Future</a>
+    <a href="/">Contact</a>
+  </nav>
+  <Button
+    header
+    href="/">Go to playground</Button
+  >
+</header>
+
+<style>
+  nav a {
+    padding: 0.5rem;
+    background: linear-gradient(to right, #fed766 50%, currentColor 0) 100% / 200% 100%;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    transition: 0.3s;
+  }
+
+  nav a:hover {
+    background-position: 0 100%;
+  }
+</style>
diff --git a/src/components/Hero.svelte b/src/components/Hero.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+</script>
+
+<div class="pt-20 lg:pt-40 pb-20">
+  <div class="w-min mx-auto flex flex-col gap-6 text-center">
+    <div class="flex flex-col gap-12">
+      <h1 class="text-white sm:px-6 title">
+        <span class="text-yellow selection:text-white">Dora</span>, the <span>TipsetExplorer</span>
+      </h1>
+      <p class="leading-relaxed sm:leading-loose">
+        The Graph-like Event indexer, for the FEVM, where you specify Handlers. Handlers can be by
+        Smart Contract or default Handlers for a specific Event.
+      </p>
+    </div>
+    <div class="flex flex-col gap-12">
+      <p class="text-lg md:text-xl">🛸 Filecoin & IPFS — 🥇 FVM Spaceships category</p>
+      <div class="flex flex-wrap gap-8 justify-center">
+        <Button href="/">See on GitHub</Button>
+        <Button href="/">See on ETHGlobal</Button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="postcss">
+  @media screen and (max-width: 768px) {
+    h1.title {
+      font-size: 12vw;
+    }
+  }
+</style>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -25,21 +25,7 @@ const { title } = Astro.props;
     />
     <title>{title}</title>
   </head>
-  <body>
+  <body class="bg-black text-white font-poppins antialiased selection:bg-[rgba(254,216,102,0.7)]">
     <slot />
   </body>
 </html>
-<style is:global>
-  :root {
-    --accent: 124, 58, 237;
-    --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
-  }
-  html {
-    font-family: system-ui, sans-serif;
-    background-color: #f6f6f6;
-  }
-  code {
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
-      Bitstream Vera Sans Mono, Courier New, monospace;
-  }
-</style>