feat: migrate all copy to clipboard actions to v-clipboard

components/landing/CTA.vue

@@ -1,34 +1,38 @@
 <template>
-  <div class="bg-primaryLight rounded flex p-4">
-    <div class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
-      <div
-        v-for="(cta, index) in ctas"
-        :key="`cta-${index}`"
-        class="flex-col p-8 inline-flex"
-      >
-        <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
-        <div class="flex-grow">
-          <h2
-            class="
-              font-semibold
-              mt-4
-              text-lg text-secondaryDark
-              mb-2
-              transition
-            "
-          >
-            {{ cta.title }}
-          </h2>
-          <p>
-            {{ cta.description }}
-          </p>
-          <p class="mt-2">
-            <SmartLink :to="cta.link.target" class="link" blank>
-              {{ cta.link.title }}
-              <i class="material-icons">chevron_right</i>
-            </SmartLink>
-          </p>
-        </div>
+  <div
+    class="
+      bg-primaryLight
+      rounded
+      flex
+      grid
+      p-4
+      gap-4
+      grid-cols-1
+      md:grid-cols-2
+      lg:grid-cols-3
+    "
+  >
+    <div
+      v-for="(cta, index) in ctas"
+      :key="`cta-${index}`"
+      class="flex-col p-8 inline-flex"
+    >
+      <i class="text-accent text-3xl material-icons">{{ cta.icon }}</i>
+      <div class="flex-grow">
+        <h2
+          class="font-semibold mt-4 text-lg text-secondaryDark mb-2 transition"
+        >
+          {{ cta.title }}
+        </h2>
+        <p>
+          {{ cta.description }}
+        </p>
+        <p class="mt-2">
+          <SmartLink :to="cta.link.target" class="link" blank>
+            {{ cta.link.title }}
+            <i class="material-icons">chevron_right</i>
+          </SmartLink>
+        </p>
       </div>
     </div>
   </div>

components/landing/Hero.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="flex flex-col p-6 relative md:flex-row">
-    <div class="my-16 max-w-2xl z-10 relative">
+  <div class="flex flex-col p-6 relative">
+    <div class="flex flex-col mt-16 items-center justify-center">
       <h2
         class="
-          font-semibold
-          text-accent
+          font-extrabold
+          text-accent text-center
           leading-none
           tracking-tighter
           text-4xl
@@ -14,20 +14,32 @@
       >
         Open Source
       </h2>
-      <h3 class="my-4 text-secondaryDark text-3xl md:text-4xl lg:text-5xl">
+      <h3
+        class="
+          font-extrabold
+          my-4
+          text-center text-secondaryDark
+          leading-none
+          tracking-tighter
+          text-3xl
+          md:text-4xl
+          lg:text-5xl
+        "
+      >
         API Development Ecosystem
       </h3>
-      <p class="my-4 text-lg">
+      <p class="my-4 text-lg text-center max-w-2xl">
         Thousands of developers and companies build, ship, and maintain their
         APIs on Hoppscotch — the transparent and most flexible API development
         ecosystem in the world.
       </p>
-      <div class="flex space-x-4 my-8 items-center">
+      <div class="flex space-x-4 my-8 justify-center items-center">
         <ButtonPrimary
           label="Get Started"
           icon="arrow_forward"
           rounded
           reverse
+          large
           @click.native="showLogin = true"
         />
         <ButtonSecondary
@@ -41,9 +53,9 @@
           :shortcut="['30k Stars']"
         />
       </div>
-      <LandingStats />
+      <!-- <LandingStats /> -->
     </div>
-    <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2"></div>
+    <div class="flex flex-col items-center justify-center"></div>
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
   </div>
 </template>