Add content (#3)

* add solution section * add features * add playground * add mechanism and contact sections * hide some features on mobile version * add fvm section * link anchor tags to sections * fix width * navbar fixes * copy fixes * add playground link * copy fixes * limit section width * underline link
subvisual · Mar 6, 2023 · a6abfa4 · a6abfa4
1 parent 40d6f75
commit a6abfa4
Show file tree

Hide file tree

Showing 15 changed files with 1,939 additions and 18 deletions.
diff --git a/public/fonts/Poppins-SemiBold.ttf b/public/fonts/Poppins-SemiBold.ttf
diff --git a/src/components/BlocksHalf.svelte b/src/components/BlocksHalf.svelte
diff --git a/src/components/BlocksMain.svelte b/src/components/BlocksMain.svelte
diff --git a/src/components/Button.svelte b/src/components/Button.svelte
@@ -4,7 +4,7 @@
 </script>
 
 <a
-  {...$$restProps}
+  {...$$props}
   {href}
   class:header
 >
@@ -21,6 +21,6 @@
   }
 
   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;
+    @apply py-2 px-5 sm:py-3 sm:px-6;
   }
 </style>
diff --git a/src/components/DoraFVM.svelte b/src/components/DoraFVM.svelte
@@ -0,0 +1,74 @@
+<svg
+  width="656"
+  height="186"
+  viewBox="0 0 656 186"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M165.704 148.629L130.986 91.8331H203.799L165.704 148.629Z"
+    stroke="white"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M195.835 120.794L165.704 148.771L137.208 120.758C108.322 90.1871 64.1467 55.4664 97.1399 3.30231C105.104 49.8834 119.609 52.058 197.826 36.4363C261.537 27.9154 221.718 94.9285 195.835 120.794Z"
+    stroke="white"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M132.977 70.5281L130.986 91.8331H161.846L132.977 70.5281Z"
+    stroke="white"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M201.808 70.5281L203.799 91.8331H172.939L201.808 70.5281Z"
+    stroke="white"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M137.244 120.871L130.986 91.8331H203.799L195.835 120.871L165.686 148.771L137.244 120.871Z"
+    stroke="white"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M152.318 183.302L137.812 121.376L165.686 148.771L195.551 121.092L181.329 183.302L165.686 169.099L152.318 183.302Z"
+    stroke="white"
+    stroke-width="5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  />
+  <path
+    d="M277.983 91.181C276.811 92.3526 276.811 94.2521 277.983 95.4236L297.075 114.516C298.246 115.687 300.146 115.687 301.317 114.516C302.489 113.344 302.489 111.444 301.317 110.273L284.347 93.3023L301.317 76.3317C302.489 75.1602 302.489 73.2607 301.317 72.0891C300.146 70.9175 298.246 70.9175 297.075 72.0891L277.983 91.181ZM395.479 95.4236C396.651 94.2521 396.651 92.3526 395.479 91.181L376.388 72.0891C375.216 70.9175 373.317 70.9175 372.145 72.0891C370.973 73.2607 370.973 75.1602 372.145 76.3317L389.116 93.3023L372.145 110.273C370.973 111.444 370.973 113.344 372.145 114.516C373.317 115.687 375.216 115.687 376.388 114.516L395.479 95.4236ZM280.104 96.3023H393.358V90.3023H280.104V96.3023Z"
+    fill="#FED766"
+  />
+  <mask
+    id="mask0_20_68"
+    style="mask-type:luminance"
+    maskUnits="userSpaceOnUse"
+    x="441"
+    y="3"
+    width="130"
+    height="181"
+  >
+    <path
+      d="M441.358 3.30231H570.581V183.302H441.358V3.30231Z"
+      fill="white"
+    />
+  </mask>
+  <g mask="url(#mask0_20_68)">
+    <path
+      d="M569.059 139.172L544.495 126.081C544.356 126.054 544.214 126.054 544.075 126.081L523.973 115.342L543.34 104.997H543.813L568.324 91.9046C568.809 91.6824 569.212 91.3309 569.483 90.8945C569.754 90.4582 569.881 89.9563 569.846 89.4529V63.5146C569.839 63.0184 569.695 62.5321 569.428 62.1028C569.162 61.6734 568.782 61.3153 568.324 61.063L555.885 54.5417L568.272 47.9222L568.954 47.4809C569.488 46.9292 569.786 46.2142 569.794 45.4707V19.5321C569.786 19.0358 569.643 18.5498 569.376 18.1204C569.109 17.691 568.729 17.3328 568.272 17.0804L543.708 4.136C543.247 3.90843 542.733 3.78944 542.212 3.78944C541.69 3.78944 541.177 3.90843 540.716 4.136L442.88 55.8166C442.426 56.0556 442.049 56.4053 441.791 56.8284C441.532 57.2514 441.4 57.7318 441.411 58.2191V84.2554C441.411 84.7465 441.553 85.2283 441.821 85.6509C442.088 86.0735 442.473 86.4212 442.933 86.658L455.32 93.2285L442.88 99.946C442.426 100.185 442.049 100.535 441.791 100.958C441.532 101.381 441.4 101.861 441.411 102.349V128.385C441.411 128.876 441.553 129.358 441.821 129.781C442.088 130.203 442.473 130.551 442.933 130.788L467.497 143.732L468.179 144.125H468.651L517.15 169.966C517.288 169.939 517.431 169.939 517.569 169.966L541.503 182.664C541.881 182.837 542.291 182.937 542.711 182.958H543.183C543.622 182.919 544.049 182.803 544.442 182.615L568.954 169.67C569.415 169.434 569.799 169.086 570.066 168.663C570.334 168.242 570.476 167.76 570.476 167.268V141.232C570.431 140.808 570.278 140.401 570.032 140.043C569.786 139.685 569.452 139.387 569.059 139.172ZM541.293 130.935H541.713L561.291 141.379L542.815 151.185L519.774 138.927H519.301L499.356 128.287L517.727 118.481L541.293 130.935ZM447.919 107.399L465.765 116.764V136.377L447.919 126.865V107.399ZM541.293 55.4732H540.873L492.376 81.2646H491.903L472.011 91.8554V72.2423L494.895 60.0823L507.544 53.3648L519.301 47.1376L520.194 46.6965L543.655 34.1932L562.971 23.9452L563.548 23.6019V43.215L541.293 55.4732ZM470.541 47.5299L542.396 9.33346L560.871 19.1401L558.509 20.4149L541.293 29.4368H541.031L518.514 41.4009L516.677 42.3815L505.707 48.2165L492.585 55.2281H492.271L469.229 67.5354L450.754 57.7289L470.541 47.5299ZM447.447 62.9754L466.027 72.782V92.395L447.447 82.5885V62.9754ZM461.461 96.3668L467.549 99.5537C467.863 99.6927 468.201 99.7759 468.547 99.7988H469.019C469.438 99.7769 469.849 99.6769 470.226 99.5046L494.16 86.7562H494.633L543.13 60.9158H543.603L549.639 57.6797L560.609 63.4166L541.188 73.7623H540.769L526.807 81.1664L516.31 86.7072L492.376 99.5046H491.903L468.862 111.763L463.245 108.821L450.386 102.054L461.461 96.3668ZM519.721 165.013L472.011 139.565V116.862L494.475 104.898H494.895L543.393 79.058H543.865L563.915 68.3689V87.9821L541.293 99.5046H540.873L492.113 125.59C491.659 125.829 491.282 126.179 491.023 126.602C490.765 127.025 490.633 127.506 490.643 127.993C490.64 128.485 490.774 128.97 491.032 129.4C491.289 129.83 491.662 130.19 492.113 130.444H492.638L517.202 143.487H517.622L519.879 144.664L540.086 155.451V175.064L520.299 165.111L519.721 165.013ZM564.65 166.042L546.122 175.848V156.236L564.65 146.429V166.042Z"
+      fill="#F4F7F5"
+    />
+  </g>
+</svg>
diff --git a/src/components/FeatureCard.svelte b/src/components/FeatureCard.svelte
@@ -0,0 +1,5 @@
+<div
+  class="w-full h-full flex justify-center items-center py-5 px-6 rounded-xl font-bold text-sm leading-6 bg-yellow text-black"
+>
+  <slot />
+</div>
diff --git a/src/components/FeaturesGrid.svelte b/src/components/FeaturesGrid.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  /* eslint-disable svelte/no-at-html-tags */
+  import FeatureCard from "./FeatureCard.svelte";
+  import features from "../data/features";
+
+  let showAll = false;
+
+  function toggleShow() {
+    showAll = !showAll;
+  }
+</script>
+
+<div class="w-11/12 sm:w-4/5 md:w-full mx-auto">
+  <div class="hidden md:grid md:grid-cols-2 gap-x-16 gap-y-10">
+    {#each features as feature}
+      <FeatureCard>{feature}</FeatureCard>
+    {/each}
+  </div>
+  <div class="flex flex-col gap-8 md:hidden">
+    {#each features as feature, idx}
+      {#if idx < 3 || showAll}
+        <FeatureCard>{feature}</FeatureCard>
+      {/if}
+    {/each}
+    <button
+      class="w-fit mx-auto p-2"
+      on:click={toggleShow}
+      type="button">{@html showAll ? "&minus; Show less" : "&plus; Show more"}</button
+    >
+  </div>
+</div>
diff --git a/src/components/Header.svelte b/src/components/Header.svelte
@@ -13,15 +13,15 @@
     <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>
+    <a href="#solutions">Solutions</a>
+    <a href="#features">Features</a>
+    <a href="#playground">Playground</a>
+    <a href="#mechanism">Mechanism</a>
+    <a href="#contact">Contact</a>
   </nav>
   <Button
     header
-    href="/">Go to playground</Button
+    href="https://dora-the-tipset-explorer.fly.dev/">Go to playground</Button
   >
 </header>
 

diff --git a/src/components/Hero.svelte b/src/components/Hero.svelte
@@ -2,7 +2,7 @@
   import Button from "./Button.svelte";
 </script>
 
-<div class="pt-20 lg:pt-40 pb-20">
+<div class="pt-20 lg:pt-40 pb-6 sm: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">
@@ -14,7 +14,17 @@
       </p>
     </div>
     <div class="flex flex-col gap-12">
-      <p class="text-lg md:text-xl">🛸 Filecoin & IPFS — 🥇 FVM Spaceships category</p>
+      <p class="text-lg md:text-xl">
+        Winner at
+        <a
+          class="underline decoration-[0.4px]"
+          href="https://ethglobal.com/events/spacewarp/prizes"
+          target="_blank"
+          rel="noreferrer noopener">FVM Space Warp</a
+        >
+        <br />
+        🛸 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>