feat: add join cloud button

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/dashboard/TreeView.vue

@@ -253,7 +253,9 @@ const onSearchCloseIconClick = () => {
           >
             <MdiPlus />
 
-            <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
+            <span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">
+              {{ $t('tooltip.addTable') }}
+            </span>
 
             <a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
               <MdiDotsVertical class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu" />
@@ -433,15 +435,16 @@ const onSearchCloseIconClick = () => {
 
       <GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
 
-      <GithubButton
+      <general-flipping-card class="ml-2 py-1 min-h-[36px]" :triggers="['click', { duration: 60000 }]">
-        class="ml-2 py-1"
+        <template #front>
-        href="https://github.com/nocodb/nocodb"
+          <GithubButton href="https://github.com/nocodb/nocodb" data-icon="octicon-star" data-show-count="true" data-size="large">
-        data-icon="octicon-star"
+            Star
-        data-show-count="true"
+          </GithubButton>
-        data-size="large"
+        </template>
-      >
+        <template #back>
-        Star
+          <LazyGeneralSponsorsButton ghost type="primary" />
-      </GithubButton>
+        </template>
+      </general-flipping-card>
     </div>
   </div>
 </template>

packages/nc-gui/components/general/JoinCloudCard.vue

@@ -0,0 +1,31 @@
+<template>
+  <a-card>
+    <template #cover>
+      <img class="max-h-[180px] !rounded-t-lg" alt="cover" src="~/assets/img/noco-banner.png" />
+    </template>
+
+    <a-card-meta>
+      <template #title>
+        <span v-if="!nav" class="text-xl pb-4"> Join NocoDB Cloud! </span>
+      </template>
+    </a-card-meta>
+
+    <div v-if="!nav" class="py-5 text-sm">
+      Register for an early preview of our FREE cloud offering. We aim to equip every business with our cloud solution which is
+      fair priced rather than <em>per</em> user <em>per</em> month.
+    </div>
+
+    <div class="flex justify-center">
+      <a-button
+        v-e="['c:navbar:join-cloud', { home: true }]"
+        class="flex items-center space-x-1 cursor-pointer pl-3 py-1.5 !text-current !no-underline !hover:(text-primary bg-primary bg-opacity-5) flex-shrink"
+        href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url"
+        target="_blank"
+      >
+        <span class="mr-1">🚀</span>
+
+        Join Now
+      </a-button>
+    </div>
+  </a-card>
+</template>

packages/nc-gui/components/general/SponsorsButton.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+defineProps<{ type?: string; ghost?: boolean }>()
+</script>
+
+<template>
+  <div class="flex items-center">
+    <nuxt-link href="https://github.com/sponsors/nocodb" target="_blank" class="!h-[28px] leading-normal">
+      <a-button :ghost="ghost" :type="type" class="!shadow rounded !h-[28px]" size="small">
+        <div class="flex items-center text-xs font-weight-bold">
+          <mdi-cards-heart class="text-red-500 mr-2" />
+          {{ $t('activity.sponsorUs') }}
+        </div>
+      </a-button>
+    </nuxt-link>
+  </div>
+</template>

packages/nc-gui/layouts/base.vue

@@ -68,6 +68,8 @@ hooks.hook('page:finish', () => {
 
         <LazyGeneralReleaseInfo />
 
+        <LazyGeneralSponsorsButton class="mr-4" />
+
         <a-tooltip placement="bottom" :mouse-enter-delay="1">
           <template #title> Switch language</template>
 

packages/nc-gui/pages/index/index.vue

@@ -13,7 +13,7 @@ useSidebar('nc-left-sidebar', { hasSidebar: false })
     >
       <div class="hidden xl:(flex)">
         <div>
-          <LazyGeneralSponsors />
+          <LazyGeneralJoinCloudCard />
         </div>
       </div>