chore: adds top cta buttons

formkit · Feb 1, 2024 · 2cadf14 · 2cadf14
1 parent 9ac9571
commit 2cadf14
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 19 deletions.
diff --git a/docs/app.vue b/docs/app.vue
@@ -11,13 +11,24 @@
 
 <style>
 .gradient {
-  background: radial-gradient(50% 50% at 50% 50%, #088fce, #eeefef);
-  filter: blur(180px);
-  height: 23vh;
-  opacity: 0.8;
-  position: absolute;
-  top: 6vh;
+  animation: unblur 2s forwards;
+  animation-delay: 1s;
+  background: radial-gradient(50% 50% at 50% 50%, #43bff8, #eeefef);
+  filter: blur(100px);
+  height: 30vh;
+  opacity: 0;
+  position: fixed;
+  top: 5vh;
   width: 100%;
   z-index: -1;
 }
+
+@keyframes unblur {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 0.3;
+  }
+}
 </style>
diff --git a/docs/components/ClockCharacter.vue b/docs/components/ClockCharacter.vue
@@ -40,16 +40,9 @@ onMounted(() => {
         :class="`transition-all fill-sky-500${finished ? '' : ' opacity-20'}`"
       />
     </svg>
-    <!-- <svg class="aspect-[0.71] absolute inset-0 blur-sm z-10">
-      <use
-        v-if="currentChar"
-        :href="'/font-sprite.svg#char-' + currentChar"
-        :class="`transition-all fill-sky-200${finished ? '' : ' opacity-20'}`"
-      />
-    </svg> -->
-    <!-- <svg class="aspect-[0.71] absolute inset-0 z-0">
-      <use href="/font-sprite.svg#char-8" class="fill-lcd" />
-      <use href="/font-sprite.svg#char-i" class="fill-lcd" />
-    </svg> -->
+    <svg class="aspect-[0.71] absolute inset-0 z-0">
+      <use href="/font-sprite.svg#char-8" class="fill-sky-500 opacity-5" />
+      <use href="/font-sprite.svg#char-i" class="fill-sky-500 opacity-5" />
+    </svg>
   </div>
 </template>
diff --git a/docs/components/IconCopy.vue b/docs/components/IconCopy.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 20">
+    <path
+      fill="currentColor"
+      d="M14.73,5.1c-.13-.3-.31-.57-.54-.79l-2.76-2.7c-.45-.44-1.05-.69-1.69-.69h-3.9c-.65,0-1.25,.25-1.71,.71-.45,.45-.71,1.07-.71,1.71v1.75h-.92c-.65,0-1.25,.25-1.71,.71S.08,6.85,.08,7.5v9.17c0,.65,.25,1.25,.71,1.71,.46,.46,1.06,.71,1.71,.71h6.67c.64,0,1.26-.26,1.71-.71,.46-.46,.71-1.06,.71-1.71v-.92h.92c.65,0,1.25-.25,1.71-.71,.46-.46,.71-1.06,.71-1.71V6.04c0-.33-.06-.64-.19-.94Zm-4.64,11.57c0,.25-.1,.48-.27,.65s-.41,.27-.65,.27H2.5c-.24,0-.47-.1-.65-.27s-.27-.4-.27-.65V7.5c0-.24,.1-.47,.27-.65s.4-.27,.65-.27h.92v6.75c0,.65,.25,1.25,.71,1.71,.46,.46,1.06,.71,1.71,.71h4.25v.92Zm3.33-3.33c0,.25-.1,.48-.27,.65s-.4,.27-.65,.27H5.83c-.24,0-.47-.1-.65-.27s-.27-.4-.27-.65V3.33c0-.24,.1-.48,.27-.65,.17-.17,.4-.27,.65-.27h3.9c.24,0,.47,.09,.64,.26l2.76,2.7c.09,.08,.16,.19,.2,.3,.05,.11,.07,.23,.07,.35v7.3Z"
+    />
+  </svg>
+</template>
diff --git a/docs/components/TheHeader.vue b/docs/components/TheHeader.vue
@@ -12,7 +12,7 @@ onMounted(() => {
   <ContainerSection>
     <header class="flex flex-col mb-[12%]">
       <div
-        class="super-header w-full mt-4 mb-[12%] flex justify-between items-center"
+        class="super-header w-full mt-4 mb-[12%] sm:mb-10 md:mb-14 lg:mb-20 flex justify-between items-center"
       >
         <NuxtLink
           to="https://formkit.com"
@@ -39,11 +39,40 @@ onMounted(() => {
         :delay="600"
       />
       <h1
-        class="tagline text-center leading-tight lg:leading-tight text-[6vw] lg:text-6xl font-bold max-w-2xl m-auto opacity-0 translate-y-4 transition-all duration-600 data-[show]:opacity-100 data-[show]:translate-y-0 text-slate-700"
+        class="tagline text-center leading-tight lg:leading-tight text-[6vw] lg:text-6xl font-bold max-w-2xl m-auto opacity-0 translate-y-4 transition-all duration-600 data-[show]:opacity-100 data-[show]:translate-y-0 text-slate-700 mb-10 md:mb-14 lg:mb-20"
         :data-show="showTagline"
       >
         The easiest way to work with dates in&nbsp;JavaScript.
       </h1>
+      <div
+        class="flex flex-col justify-center items-center gap-4 sm:flex-row sm:gap-8"
+      >
+        <a
+          class="bg-black py-3 px-6 text-white rounded-lg flex items-center text-sm"
+          href="#introduction"
+        >
+          Get started
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            class="w-5 h-5 ml-2"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 3a.75.75 0 0 1 .75.75v10.638l3.96-4.158a.75.75 0 1 1 1.08 1.04l-5.25 5.5a.75.75 0 0 1-1.08 0l-5.25-5.5a.75.75 0 1 1 1.08-1.04l3.96 4.158V3.75A.75.75 0 0 1 10 3Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </a>
+        <a
+          href="#copy-code"
+          class="group font-mono text-sm text-fuchsia-700 shadow-lg py-3 px-6 bg-white rounded-lg flex items-center gap-4"
+        >
+          npm i @formkit/tempo
+          <IconCopy class="w-3 text-gray-400 group-hover:text-fuchsia-700" />
+        </a>
+      </div>
     </header>
   </ContainerSection>
 </template>