🚧 Implement into home page

src/components/Hightlight.vue

@@ -1,5 +1,5 @@
 <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 class="flex flex-col sm:flex-row space-y-10 sm:space-y-0 sm:space-x-5">
     <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">

src/templates/modules/default/Home.vue

@@ -22,11 +22,20 @@
       </div>
     </div>
   </div>
-  <div class="bg-text-white dark:bg-gray-900 py-10">
-    <Hightlight />
+  <div class="bg-white dark:bg-gray-900 py-20">
+    <div class="max-w-8xl mx-auto">
+      <Hightlight />
+    </div>
+  </div>
+  <div class="bg-white dark:bg-gray-900 py-10">
+    <div class="max-w-6xl mx-auto">
+      <CollapseDemo />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import Hightlight from '../../../components/Hightlight.vue'
+import CollapseDemo from '../../../components/CollapseDemo.vue'
+
 </script>

src/types/index.ts

@@ -2,4 +2,12 @@ export type NavbarLink = {
   label: string
   path: string
   local: boolean
+}
+
+type CollapseItem = {
+  label: string
+  description: string
+}
+export type Collapse = {
+  items: CollapseItem[]
 }