hoppscotch/packages/hoppscotch-app/components/landing/CTA.vue

<template>
  <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="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 }}
            <SmartIcon name="chevron-right" class="svg-icons" />
          </SmartLink>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "@nuxtjs/composition-api"

export default defineComponent({
  data() {
    return {
      ctas: [
        {
          icon: "layers",
          title: "Feature",
          description:
            "Get up and running with Kooli in as little as 10 minutes.",
          link: {
            title: "Feature",
            target: "https://docs.hoppscotch.io/api",
          },
        },
        {
          icon: "local_library",
          title: "Feature",
          description:
            "Explore and start integrating Kooli's products and tools.",
          link: {
            title: "Feature",
            target: "https://docs.hoppscotch.io/guides",
          },
        },
        {
          icon: "local_library",
          title: "Feature",
          description:
            "Explore and start integrating Kooli's products and tools.",
          link: {
            title: "Feature",
            target: "https://docs.hoppscotch.io/guides",
          },
        },
      ],
    }
  },
})
</script>