feat: adds install docs

docs/app.vue

@@ -6,6 +6,7 @@
     <TheNavigation />
     <main class="mt-20">
       <ContentIntroduction />
+      <ContentInstallation />
     </main>
   </ContainerSection>
 </template>

docs/assets/css/main.css

@@ -18,7 +18,7 @@ body {
 }
 
 .page-section p {
-  @apply text-lg mb-4 text-slate-800;
+  @apply text-lg mb-8 text-slate-800;
 }
 
 .page-section p code {

docs/components/CopyCode.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+const code = ref()
+const success = useTimedRef(3000)
+function copyCode() {
+  navigator.clipboard.writeText(code.value.textContent.trim())
+  success.value = true
+}
+</script>
+
+<template>
+  <div>
+    <div
+      ref="code"
+      class="group cursor-pointer relative font-mono text-sm text-fuchsia-700 data-[success]:text-green-600 py-3 px-6 bg-white rounded-lg flex items-center"
+      :data-success="success || null"
+      @click.prevent="copyCode"
+    >
+      <span v-if="!success" class="flex flex-grow items-center justify-between">
+        <slot />
+        <IconCopy class="w-3 text-slate-400 group-hover:text-fuchsia-700" />
+      </span>
+      <span v-else class="flex items-center gap-2">
+        Install command copied!
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-4 h-4"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m4.5 12.75 6 6 9-13.5"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</template>
+
+<style></style>

docs/components/HeadingSection.vue

@@ -4,7 +4,6 @@ defineProps<{
 }>()
 const heading = ref<HTMLElement>()
 const isInView = useElementVisibility(heading)
-watchEffect(() => console.log(isInView.value))
 </script>
 
 <template>

docs/components/content/Installation.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { defineProps } from "vue"
+</script>
+
+<template>
+  <PageSection id="install">
+    <HeadingSection title="Install" />
+    <p>
+      Pshhh, come on — you already know how to do this. All you’re looking for
+      is the package name (it’s <code>@formkit/tempo</code>), but to make it
+      even easier just click your package manager of choice to copy the
+      install&nbsp;command.
+    </p>
+    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-8">
+      <CopyCode>
+        <div class="flex items-center">
+          <img src="~/assets/pnpm.svg" aria-hidden class="w-4 mr-3" />pnpm add
+          @formkit/tempo
+        </div>
+      </CopyCode>
+      <CopyCode>
+        <div class="flex items-center">
+          <img src="~/assets/npm.svg" aria-hidden class="w-4 mr-3" />npm install
+          @formkit/tempo
+        </div>
+      </CopyCode>
+      <CopyCode>
+        <div class="flex items-center">
+          <img src="~/assets/yarn.svg" aria-hidden class="w-4 mr-3" />yarn add
+          @formkit/tempo
+        </div>
+      </CopyCode>
+      <CopyCode>
+        <div class="flex items-center">
+          <img src="~/assets/bun.svg" aria-hidden class="w-4 mr-3" />bun install
+          @formkit/tempo
+        </div>
+      </CopyCode>
+    </div>
+    <p>
+      Since tempo is just a collection of functions, you use them by importing
+      them from the <code>@formkit/tempo</code> project — great for tree
+      shaking.
+    </p>
+  </PageSection>
+</template>