raw html for navigation

Author: RemDelaporteMathurin

docs/source/_static/style.css

@@ -300,4 +300,59 @@ html[data-theme="dark"] .festim-ribbon-track img:hover {
     100% {
         transform: translateX(-50%);
     }
+}
+
+/* =============================================================
+   NAVIGATION CARDS
+   ============================================================= */
+.festim-nav-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
+    max-width: 900px;
+    margin: 0 auto 2rem;
+    padding: 0 1rem;
+}
+
+.festim-nav-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    padding: 2rem 1rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--pst-color-border);
+    background-color: var(--pst-color-surface);
+    text-decoration: none;
+    color: var(--pst-color-text-base);
+    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.festim-nav-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
+    border-color: var(--festim-primary);
+    text-decoration: none;
+    color: var(--pst-color-text-base);
+}
+
+.festim-nav-card:visited {
+    color: var(--pst-color-text-base);
+}
+
+.festim-nav-card i {
+    font-size: 2rem;
+    color: var(--festim-primary);
+}
+
+.festim-nav-card span {
+    font-size: 1.05rem;
+    font-weight: 600;
+}
+
+@media (max-width: 600px) {
+    .festim-nav-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
 }

docs/source/images/icons/book-2-svgrepo-com.svg

@@ -105,48 +105,39 @@
         ============================================================ -->
    <h2 class="festim-section-heading">Explore the documentation</h2>
 
-.. grid:: 3
-   :gutter: 2
-
-   .. grid-item::
-
-      .. card:: Installation
-         :img-top: images/icons/running-2-svgrepo-com.svg
-         :link: installation
-         :link-type: doc
-
-   .. grid-item::
-
-      .. card:: User guide
-         :img-top: images/icons/book-2-svgrepo-com.svg
-         :link: userguide/index
-         :link-type: doc
-
-   .. grid-item::
-
-      .. card:: Tutorials
-         :img-top: images/icons/clapperboard-play-svgrepo-com.svg
-         :link: https://festim-workshop.readthedocs.io/
-
-   .. grid-item::
-
-      .. card:: Developer guide
-         :img-top: images/icons/code-square-svgrepo-com.svg
-         :link: devguide/index
-         :link-type: doc
-
-   .. grid-item::
-
-      .. card:: V&V
-         :img-top: images/icons/check-square-svgrepo-com.svg
-         :link: https://festim-vv-report.readthedocs.io/en/latest/
+.. raw:: html
 
-   .. grid-item::
+   <!-- ============================================================
+        SECTION 3 - EXPLORE THE DOCUMENTATION
+        ============================================================ -->
+   <h2 class="festim-section-heading">Explore the documentation</h2>
 
-      .. card:: Fellowship
-         :img-top: images/icons/graph-up-svgrepo-com.svg
-         :link: fellowship
-         :link-type: doc
+   <div class="festim-nav-grid">
+     <a class="festim-nav-card" href="installation.html">
+       <i class="fa-solid fa-download"></i>
+       <span>Installation</span>
+     </a>
+     <a class="festim-nav-card" href="userguide/index.html">
+       <i class="fa-solid fa-book"></i>
+       <span>User guide</span>
+     </a>
+     <a class="festim-nav-card" href="https://festim-workshop.readthedocs.io/" target="_blank">
+       <i class="fa-solid fa-graduation-cap"></i>
+       <span>Tutorials</span>
+     </a>
+     <a class="festim-nav-card" href="devguide/index.html">
+       <i class="fa-solid fa-code"></i>
+       <span>Developer guide</span>
+     </a>
+     <a class="festim-nav-card" href="https://festim-vv-report.readthedocs.io/en/latest/" target="_blank">
+       <i class="fa-solid fa-clipboard-check"></i>
+       <span>V&amp;V</span>
+     </a>
+     <a class="festim-nav-card" href="fellowship.html">
+       <i class="fa-solid fa-chart-line"></i>
+       <span>Fellowship</span>
+     </a>
+   </div>
 
 
 .. raw:: html