feat(docs): improve documentation home

docs/pages/Documentation.md

@@ -4,25 +4,25 @@
 <div class="row row-cols-1 row-cols-lg-3 align-items-stretch g-4 py-3 pt-4">
   <div class="col">
     <a href="?page=about/Changelog" class="link-underline-opacity-0 link-underline">
-      <div class="card card-cover h-100 overflow-hidden rounded-4 bg-dark bg-hover-dark">
-        <div class="d-flex flex-column h-100 p-4 text-shadow-1">
-          <h3 class="fw-bolder"><i class="bi bi-clipboard-fill" style="font-size:27px"></i> Changelog</h3>
+      <div class="card card-cover h-100 overflow-hidden rounded-4 bg-primary border-primary">
+        <div class="d-flex flex-column h-100 p-4 text-shadow-1 text">
+          <h3 class="fw-bolder"><i class="bi bi-puzzle-fill" style="font-size:27px"></i> Create</h3>
         </div>
       </div>
     </a>
   </div>
   <div class="col">
     <a href="?page=getting-started/Installation" class="link-underline-opacity-0 link-underline">
-      <div class="card card-cover h-100 overflow-hidden rounded-4 bg-dark">
+      <div class="card card-cover h-100 overflow-hidden rounded-4 bg-dark-subtle">
         <div class="d-flex flex-column h-100 p-4 text-shadow-1">
-          <h3 class="fw-bold"><i class="bi bi-cloud-arrow-down-fill" style="font-size:27px"></i> Installation</h3>
+          <h3 class="fw-bold"><i class="bi bi-cloud-arrow-down-fill" style="font-size:27px"></i> Install</h3>
         </div>
       </div>
     </a>
   </div>
   <div class="col">
     <a href="?page=getting-started/Frequently-asked-questions" class="link-underline-opacity-0 link-underline">
-      <div class="card card-cover h-auto overflow-hidden rounded-4 bg-dark">
+      <div class="card card-cover h-auto overflow-hidden rounded-4 bg-dark-subtle">
         <div class="d-flex flex-column h-100 p-4 text-shadow-1">
           <h3 class="fw-bold"><i class="bi bi-question-diamond-fill" style="font-size:27px"></i> FAQs</h3>
         </div>