feat: Better looking homepage

pages/.vitepress/theme/custom.scss

@@ -25,6 +25,48 @@ $color-accent: #d16014; //D62839
     }
   }
 
+  .lang {
+    display: none;
+  }
+
+  #features ul {
+    margin: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
+    min-width: 100%;
+    padding: 0;
+    gap: 10px;
+
+    li {
+      list-style: none;
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 20px;
+      text-align: center;
+      background-color: var(--color-background-second);
+      border-radius: 8px;
+      transition: transform 0.3s ease 0s, background-color 0.3s ease 0s;
+
+      .emoji {
+        font-size: 30px;
+        background-color: var(--color-background-mute);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-bottom: 20px;
+        border-radius: 6px;
+        width: 48px;
+        height: 48px;
+        font-size: 24px;
+        transition: background-color 0.25s;
+        cursor: default;
+      }
+    }
+  }
+
   #aeolus,
   #quote {
     text-align: center;
@@ -49,4 +91,8 @@ $color-accent: #d16014; //D62839
       width: 100%;
     }
   }
+
+  #journey {
+    padding: 0;
+  }
 }

pages/index.md

@@ -6,22 +6,18 @@ pageClass: home
 
 A sleek, contemporary, and purposefully designed VitePress theme & template. It provides a straightforward solution for creating a quick web page, offering essential features for comfortable writing while maintaining a sense of simplicity. {.center #desc}
 
-## Features
-
-- Lightweight and minimalistic, using VitePress.
-- Elegantly styled with a primary color theme for a visually pleasing experience.
-- Mobile-friendly design with support for dark mode.
-- Optimized for social media sharing with meta cards.
-- Utilizes premium fonts: Inter for text and Source Code Pro for code snippets.
-- Local development made easy with NPM/PNPM integration.
-- Every asset is local, nothing is pulled from the internet.
-
-
-::: details Intrested in the journey behind it?
-Check out the blog I made about the journey in developing this project here at https://gabs.eu.org/blog/posts/behind-aplós
-:::
-
-
+<section id="features">
+<br>
+
+- <span class="emoji">🚀</span> Lightweight and minimalistic, using VitePress.
+- <span class="emoji">🎨</span> Elegantly styled with a primary color theme for a visually pleasing experience.
+- <span class="emoji">📱</span> Mobile-friendly design with support for dark mode.
+- <span class="emoji">🖋️</span> Utilizes premium fonts: Inter for text and Geist Mono for code snippets.
+- <span class="emoji">💻</span> Local development made easy with NPM/PNPM integration.
+- <span class="emoji">📦</span> Every asset is local, nothing is pulled from the internet.
+</section>
+
+<br>
 <aside>
 
 ## Name
@@ -39,6 +35,7 @@ npm install aplos
 
 Once you've installed the package, you will need to follow the [Guide](/guide/#package) to set up the theme.
 
+
 ## Credits & Thanks to
 
 Aplós whouldn't be possible without the following projects:
@@ -49,6 +46,11 @@ Aplós whouldn't be possible without the following projects:
 - [VitePress](https://vitepress.dev), which is used to power Aplós.
 - Everyone that supported the project.
 
+
+::: details Intrested in the journey behind it?
+Check out the blog I made about the journey in developing this project here at https://gabs.eu.org/blog/posts/behind-aplós
+:::
+
 <script setup lang="ts">
     const playSound = () => {
       const audio = new Audio('https://s3-eu-west-1.amazonaws.com/com.idmgroup.lab.sounds.prod/el/a/d/c/adcf1a902482d8ad5ae10ea7307330e0.mp3');