From 9140cdccbc648fd16a945b7b203278370c4ab670 Mon Sep 17 00:00:00 2001
From: Wing-Kam Wong <wingkwong.code@gmail.com>
Date: Sat, 13 Aug 2022 19:25:08 +0800
Subject: [PATCH] feat(gui-v2): add social card

---
 .../components/general/SocialCard.vue         | 73 +++++++++++++++++++
 packages/nc-gui-v2/pages/index/index.vue      |  9 ++-
 2 files changed, 80 insertions(+), 2 deletions(-)
 create mode 100644 packages/nc-gui-v2/components/general/SocialCard.vue

diff --git a/packages/nc-gui-v2/components/general/SocialCard.vue b/packages/nc-gui-v2/components/general/SocialCard.vue
new file mode 100644
index 0000000000..4b2e51ad51
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/SocialCard.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { enumColor as colors } from '#imports'
+
+const { lang: currentLang } = useGlobal()
+
+const isRtlLang = $computed(() => ['fa'].includes(currentLang.value))
+</script>
+
+<template>
+  <a-list class="w-[300px] pa-3 elevation-4 rounded-xl mr-10" dense>
+    <a-list-item class="cursor-pointer">
+      <nuxt-link class="text-primary" to="https://github.com/nocodb/nocodb" target="_blank">
+        <div class="flex items-center text-sm">
+          <mdi-github class="mx-3 text-lg" />
+          <div v-if="isRtlLang">
+            <!-- us on Github -->
+            {{ $t('labels.community.starUs2') }}
+            <!-- Star -->
+            {{ $t('labels.community.starUs1') }}
+            <mdi-star-outline />
+          </div>
+          <div v-else class="flex items-center">
+            <!-- Star -->
+            {{ $t('labels.community.starUs1') }}
+            <mdi-star-outline class="mx-1" />
+            <!-- us on Github -->
+            {{ $t('labels.community.starUs2') }}
+          </div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+    <a-list-item>
+      <nuxt-link class="text-primary" to="https://calendly.com/nocodb-meeting" target="_blank">
+        <div class="flex items-center text-sm">
+          <mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
+          <!-- Book a Free DEMO -->
+          <div>
+            {{ $t('labels.community.bookDemo') }}
+          </div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+    <a-list-item>
+      <nuxt-link class="text-primary" to="https://discord.gg/5RgZmkW" target="_blank">
+        <div class="flex items-center text-sm">
+          <mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
+          <!-- Get your questions answered -->
+          <div>
+            {{ $t('labels.community.getAnswered') }}
+          </div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+    <a-list-item>
+      <nuxt-link class="text-primary" to="https://twitter.com/NocoDB" target="_blank">
+        <div class="flex items-center text-sm">
+          <mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
+          <!-- Follow NocoDB -->
+          <div>
+            {{ $t('labels.community.followNocodb') }}
+          </div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+    <a-list-item v-t="['e:hiring']">
+      <nuxt-link class="text-primary" target="_blank" to="http://careers.nocodb.com">
+        <div class="flex items-center text-sm">
+          <div class="ml-3">🚀 <span class="ml-2">We are Hiring!!!</span></div>
+        </div>
+      </nuxt-link>
+    </a-list-item>
+  </a-list>
+</template>
diff --git a/packages/nc-gui-v2/pages/index/index.vue b/packages/nc-gui-v2/pages/index/index.vue
index 5a1d4c36e4..a95a9fbafa 100644
--- a/packages/nc-gui-v2/pages/index/index.vue
+++ b/packages/nc-gui-v2/pages/index/index.vue
@@ -156,8 +156,13 @@ onMounted(() => {
           </a-table>
         </a-card>
       </a-col>
-      <a-col :span="8" class="col-sm-12 col-lg-3 d-sm-none d-md-flex justify-center justify-lg-end align-start">
-        <GeneralSponsors />
+      <a-col :span="8" class="">
+        <div class="justify-end flex">
+          <GeneralSponsors />
+        </div>
+        <div class="justify-end flex">
+          <GeneralSocialCard />
+        </div>
       </a-col>
     </a-row>
   </NuxtLayout>