From ab7483b5c2bd5aee1b8b609597c22b7b7b55606d Mon Sep 17 00:00:00 2001
From: Corentin Thomasset <corentin.thomasset74@gmail.com>
Date: Wed, 17 Aug 2022 15:09:43 +0200
Subject: [PATCH] feat: added colored share card

---
 src/components/ColoredCard.vue | 61 ++++++++++++++++++++++++++++++++++
 src/pages/Home.page.vue        | 23 +++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/components/ColoredCard.vue

diff --git a/src/components/ColoredCard.vue b/src/components/ColoredCard.vue
new file mode 100644
index 00000000..15208081
--- /dev/null
+++ b/src/components/ColoredCard.vue
@@ -0,0 +1,61 @@
+<template>
+  <n-card class="colored-card">
+    <n-space justify="space-between" align="center">
+      <n-icon class="icon" size="40" :component="icon" />
+    </n-space>
+    <n-h3 class="title">
+      <n-ellipsis>{{ title }}</n-ellipsis>
+    </n-h3>
+
+    <div class="description">
+      <n-ellipsis :line-clamp="2" :tooltip="false">
+        <slot />
+      </n-ellipsis>
+    </div>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { toRefs, type Component } from 'vue';
+
+const props = defineProps<{ icon: Component; title: string }>();
+const { icon, title } = toRefs(props);
+</script>
+
+<style lang="less" scoped>
+.colored-card {
+  background: rgb(37, 99, 108);
+  background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
+  color: #fff;
+
+  &:hover {
+    border-color: var(--n-color-target);
+  }
+
+  .icon {
+    opacity: 0.7;
+  }
+
+  .title {
+    color: #fff;
+
+    margin: 5px 0;
+  }
+
+  .description {
+    opacity: 0.8;
+
+    margin: 5px 0;
+
+    ::v-deep(a) {
+      color: inherit;
+      text-decoration: underline;
+      font-weight: bold;
+
+      &:hover {
+        color: rgb(20, 20, 20);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index 9f2b5018..88086ee4 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { toolsWithCategory } from '@/tools';
+import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
+import ColoredCard from '../components/ColoredCard.vue';
 import ToolCard from '../components/ToolCard.vue';
 
 useHead({ title: 'IT Tools - Handy online tools for developers' });
@@ -9,6 +11,27 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
 <template>
   <div class="home-page">
     <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+      <n-gi>
+        <colored-card title="You like it-tools?" :icon="Heart">
+          Give us a star on
+          <a
+            href="https://github.com/CorentinTh/it-tools"
+            rel="noopener"
+            target="_blank"
+            aria-label="IT-Tools' github repository"
+            >github</a
+          >
+          or follow us on
+          <a
+            href="https://twitter.com/ittoolsdottech"
+            rel="noopener"
+            target="_blank"
+            aria-label="IT-Tools' twitter account"
+            >twitter</a
+          >! Thank you
+          <n-icon :component="Heart" />
+        </colored-card>
+      </n-gi>
       <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
         <tool-card :tool="tool" />
       </n-gi>