diff options
| -rw-r--r-- | src/components/ColoredCard.vue | 61 | ||||
| -rw-r--r-- | src/pages/Home.page.vue | 23 |
2 files changed, 84 insertions, 0 deletions
diff --git a/src/components/ColoredCard.vue b/src/components/ColoredCard.vue new file mode 100644 index 0000000..1520808 --- /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 9f2b501..88086ee 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> |