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

<template>
  <v-card
    max-width="300"
    min-height=""
    class=" pb-3"
    href="https://github.com/sponsors/nocodb"
    target="_blank"
  >
    <v-img src="ants-leaf-cutter.jpeg" :height="nav ? 80 : ''" class=" mt-0">
      <template #placeholder>
        <v-skeleton-loader
          width="700"
          type="image"
        />
      </template>
    </v-img>
    <!-- You can help us! -->
    <v-card-title v-if="!nav" class="pb-2" :class="{'body-2 justify-center mt-n2' : nav}">
      {{ $t('msg.info.sponsor.header') }}
    </v-card-title>
    <v-card-text v-if="!nav" class="pb-0">
      <p class="caption text-left body-1 textColor--text text--lighten-1">
        <template>
          <!-- 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. -->
          {{ $t('msg.info.sponsor.message') }}
        </template>
      </p>
    </v-card-text>
    <v-card-actions class="justify-center">
      <v-btn color="primary" :class="{'mt-n2' : !nav, 'mt-2 mb-n1':nav }" small outlined>
        <v-icon small color="red" class="mr-2">
          mdi-cards-heart
        </v-icon>
        {{ $t('activity.sponsorUs') }}
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
export default {
  name: 'SponsorMini',
  props: {
    nav: Boolean
  }
}
</script>

<style scoped>

</style>