🚧 Work in progress

src/components/CodeDemo.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="flex space-x-5">
-    <div class="w-1/2">
+  <div class="px-5 sm:px-0 flex flex-col sm:flex-row space-y-5 sm:space-y-0 sm:space-x-5">
+    <div class="sm:w-1/2">
       <Collapse
         :items="collapseHighlighting"
         @handleChange="handleChange" />
     </div>
-    <div class="flex w-1/2 bg-[#263238] rounded-lg overflow-hidden">
+    <div class="flex sm:w-1/2 bg-[#263238] rounded-lg overflow-hidden">
       <transition
         enter-active-class="transition ease-out duration-300"
         enter-from-class="transform opacity-0"

src/templates/modules/default/Home.vue

@@ -22,12 +22,18 @@
       </div>
     </div>
   </div>
-  <div class="bg-white dark:bg-gray-900 py-20">
+  <div class="bg-white dark:bg-gray-900 py-10 sm:pt-14 sm:pb-32">
     <div class="max-w-8xl mx-auto">
       <Hightlight />
     </div>
   </div>
-  <div class="bg-white dark:bg-gray-900 py-10">
+  <div class="bg-white dark:bg-gray-900 py-10 space-y-20">
+    <div class="px-5 sm:px-0 text-center md:max-w-3xl md:mx-auto md:px-12">
+      <h2 class="text-gray-800 dark:text-gray-200 text-3xl sm:text-4xl font-title font-semibold md:text-6xl">All discord.js features in one place</h2>
+      <p class="text-lg mt-8 text-gray-500 md:text-xl">
+        AdonisJS is not a minimalist framework. To give your projects a head start, we pack many baseline features within the core of the framework.
+      </p>
+    </div>
     <div class="max-w-6xl mx-auto">
       <CollapseDemo />
     </div>
@@ -36,6 +42,6 @@
 
 <script setup lang="ts">
 import Hightlight from '../../../components/Hightlight.vue'
-import CollapseDemo from '../../../components/CollapseDemo.vue'
+import CollapseDemo from '../../../components/CodeDemo.vue'
 
 </script>