🚧 Feat : Implement Hightlight

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>

src/main.ts

@@ -14,8 +14,6 @@ const router = createRouter({
   ]
 })
 
-console.log(router.getRoutes())
-
 createApp(App)
   .use(router)
   .mount('#app')

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>