nocodb/packages/nc-gui/components/SponsorOverlay.vue

<template>
  <v-overlay opacity=".98">
    <v-card
      light
      width="450"
      min-height="500"
      class=""
      href="https://github.com/sponsors/nocodb"
      target="_blank"
    >
      <v-img src="ants-leaf-cutter.jpeg" class="mt-0" height="300">
        <template #placeholder>
          <v-skeleton-loader
            height="300"
            width="700"
            type="image"
          />
        </template>
      </v-img>

      <v-card-title class="pb-2">
        You can help us
      </v-card-title>

      <v-card-text class="pb-0">
        <p class="text-left body-1 ">
          We are a tiny team working full time to make NocoDB open source. We believe a tool like NocoDB should be
          available freely to every problem solver on internet.
          <br>
          <br>
          Sincerely,
          Team NocoDB
        </p>
      </v-card-text>

      <v-card-actions class="justify-center pb-6 mt-n1">
        <v-btn large @click.stop.prevent="$emit('close')">
          Use Freely
        </v-btn>
        <v-btn color="primary" large>
          <v-icon small color="red" class="mr-2">
            mdi-cards-heart
          </v-icon>
          Sponsor Us
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-overlay>
</template>

<script>
export default {
  name: 'SponsorOverlay'
}
</script>

<style scoped>

</style>