From 835e72f2b99bf68edf5f76ab7c1d7fcb16310a0e Mon Sep 17 00:00:00 2001
From: Freeze455 <baptiste.parmantier.pro@gmail.com>
Date: Tue, 17 Aug 2021 01:58:04 +0200
Subject: [PATCH] :construction: Feat : Implement Hightlight

---
 src/components/Hightlight.vue          | 26 ++++++++++++++++++++++++++
 src/main.ts                            |  2 --
 src/templates/modules/default/Home.vue |  8 +++++---
 3 files changed, 31 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Hightlight.vue

diff --git a/src/components/Hightlight.vue b/src/components/Hightlight.vue
new file mode 100644
index 0000000..18c2e73
--- /dev/null
+++ b/src/components/Hightlight.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="flex flex-col sm:flex-row space-y-10 sm:space-y-0 sm:space-x-5 max-w-8xl mx-auto">
+    <div v-for="(item, key) in items" class="w-full sm:w-1/5 flex flex-col" :key="key">
+      <div class="flex justify-center items-center space-y-5 sm:space-y-0 sm:space-x-5">
+        <div class="flex justify-center items-center w-[25vw] h-[25vw] sm:h-16 sm:w-16 bg-gray-100 dark:bg-gray-600 rounded-lg">
+          <component :is="item.icon" class="w-16 h-16 sm:w-10 sm:w-10 text-gray-600 dark:text-white" aria-hidden="true" />
+        </div>
+      </div>
+      <p class="text-center text-gray-500 mt-1 text-xl md:text-lg">
+        {{ item.label }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang='ts'>
+import { CodeIcon, LightningBoltIcon, BeakerIcon, FolderOpenIcon, SparklesIcon } from '@heroicons/vue/outline'
+
+const items = [
+  { label: 'Developer experience', icon: CodeIcon },
+  { label: 'Fast and powered', icon: LightningBoltIcon },
+  { label: 'Testing framework', icon: BeakerIcon },
+  { label: 'Flexible architecture', icon: FolderOpenIcon },
+  { label: 'CLI', icon: SparklesIcon },
+]
+</script>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 959c112..43e4ab8 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,8 +14,6 @@ const router = createRouter({
   ]
 })
 
-console.log(router.getRoutes())
-
 createApp(App)
   .use(router)
   .mount('#app')
diff --git a/src/templates/modules/default/Home.vue b/src/templates/modules/default/Home.vue
index 2df1aeb..f230515 100644
--- a/src/templates/modules/default/Home.vue
+++ b/src/templates/modules/default/Home.vue
@@ -3,7 +3,6 @@
     <div class="mx-auto max-w-4xl h-full flex flex-col justify-center items-center px-6">
       <h1 class="font-semibold text-gray-800 dark:text-gray-200 text-5xl font-title tracking-tight md:text-7xl">A fully featured typescript framework <em>for</em> <span class="text-blue-900 dark:text-blue-800">Discord.js</span></h1>
       <p class="text-lg mt-8 text-gray-500 dark:text-gray-300 md:pr-18 md:text-xl">
-        AdonisJS includes everything you need to build a fully functional web application or API server. Don't waste hours downloading and assembling hundreds of packages - use Factory and get productive now.
         Discord Factory includes everything you need to create your discord bots. Don't reinvent the wheel, leverage it
       </p>
       <p class="text-lg mt-8 text-gray-500 dark:text-gray-300 md:pr-18 md:text-xl w-full">
@@ -23,8 +22,11 @@
       </div>
     </div>
   </div>
+  <div class="bg-text-white dark:bg-gray-900 py-10">
+    <Hightlight />
+  </div>
 </template>
 
-<script setup lang='ts'>
-
+<script setup lang="ts">
+import Hightlight from '../../../components/Hightlight.vue'
 </script>
\ No newline at end of file