improved why FESTIM

Author: RemDelaporteMathurin

docs/source/_static/style.css

@@ -205,7 +205,6 @@ h3 {
     object-fit: contain;
     margin: 1rem auto;
     display: block;
-    border-radius: 0.75rem;
 }
 
 .festim-carousel-caption {
@@ -359,40 +358,67 @@ html[data-theme="dark"] .festim-ribbon-track img:hover {
     }
 }
 
-
 /* =============================================================
-   FIX - REMOVE UNWANTED BACKGROUNDS (RTD dark mode)
+   WHY FESTIM - FEATURE CARDS
    ============================================================= */
+.festim-features {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1.5rem;
+    max-width: 1100px;
+    margin: 0 auto 2rem;
+    padding: 0 1rem;
+}
 
-/* Carousel image area */
-html[data-theme="dark"] .festim-hero-carousel .carousel,
-html[data-theme="dark"] .festim-hero-carousel .carousel-item,
-html[data-theme="dark"] .festim-hero-carousel .carousel-item img {
-    background-color: transparent;
+.festim-feature-card {
+    flex: 1 1 180px;
+    max-width: 200px;
+    text-align: center;
+    padding: 1.5rem 1rem;
+    border-radius: 0.75rem;
+    border: 1px solid transparent;
+    transition: border-color 0.3s ease, transform 0.2s ease;
 }
 
-/* Navigation cards - remove the lighter band */
-html[data-theme="dark"] .festim-nav-card {
-    background-color: transparent;
-    border-color: var(--pst-color-border);
+.festim-feature-card:hover {
+    border-color: var(--festim-primary);
+    transform: translateY(-4px);
 }
 
-html[data-theme="dark"] .festim-nav-card span {
-    background-color: transparent;
+.festim-feature-icon {
+    width: 56px;
+    height: 56px;
+    margin: 0 auto 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: color-mix(in srgb, var(--festim-primary) 15%, transparent);
 }
 
-/* sphinx-design cards (Why FESTIM section) */
-html[data-theme="dark"] .sd-card {
-    background-color: transparent;
-    border-color: var(--pst-color-border);
+.festim-feature-icon i {
+    font-size: 1.4rem;
+    color: var(--festim-primary);
 }
 
-html[data-theme="dark"] .sd-card-body {
-    background-color: transparent;
+.festim-feature-card h3 {
+    font-size: 1rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+    color: var(--pst-color-text-base);
 }
 
-html[data-theme="dark"] .sd-card-header,
-html[data-theme="dark"] .sd-card-footer {
-    background-color: transparent;
-    border-color: var(--pst-color-border);
+.festim-feature-card p {
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: var(--pst-color-text-muted);
+    margin: 0;
+}
+
+@media (max-width: 600px) {
+    .festim-feature-card {
+        max-width: 100%;
+        flex: 1 1 100%;
+    }
 }

docs/source/conf.py

@@ -14,10 +14,8 @@
 # https://www.sphinx-doc.org/en/master/usage/configuration.html#project-information
 
 project = "FESTIM"
-copyright = "2022-2023, FESTIM contributors"
+copyright = "2022-2026, FESTIM contributors"
 author = "FESTIM-dev"
-release = "1.0.0"
-version = "1.0"
 
 
 # -- General configuration ---------------------------------------------------

docs/source/index.rst

@@ -39,7 +39,6 @@
 
            <div class="carousel-item">
              <img src="_static/gallery/permeation.png" alt="Permeation">
-
              <p class="festim-carousel-caption">Permeation through a multi-layer membrane</p>
            </div>
 
@@ -85,34 +84,41 @@
         ============================================================ -->
    <h2 class="festim-section-heading">Why FESTIM?</h2>
 
-.. grid:: 5
-   :gutter: 3
-
-   .. grid-item-card:: Multi-dimensional
-      :text-align: center
-
-      Run simulations in 1D, 2D, or 3D to match your problem geometry.
-
-   .. grid-item-card:: Multi-material
-      :text-align: center
+   <div class="festim-features">
 
-      Model complex assemblies with multiple materials and hydrogen isotopes.
-
-   .. grid-item-card:: Flexible BCs
-      :text-align: center
-
-      Choose from a wide range of boundary conditions adaptable to many use cases.
-
-   .. grid-item-card:: Python API
-      :text-align: center
+     <div class="festim-feature-card">
+       <div class="festim-feature-icon">
+         <i class="fa-solid fa-cubes"></i>
+       </div>
+       <h3>Multi-dimensional</h3>
+       <p>Run simulations in 1D, 2D, or 3D to match your problem geometry.</p>
+     </div>
 
-      Get started quickly with a clean, minimal Python interface.
+     <div class="festim-feature-card">
+       <div class="festim-feature-icon">
+         <i class="fa-solid fa-layer-group"></i>
+       </div>
+       <h3>Multi-material</h3>
+       <p>Model complex assemblies with multiple materials and hydrogen isotopes.</p>
+     </div>
 
-   .. grid-item-card:: Built on FEniCS
-      :text-align: center
+     <div class="festim-feature-card">
+       <div class="festim-feature-icon">
+         <i class="fa-brands fa-python"></i>
+       </div>
+       <h3>Python API</h3>
+       <p>Get started quickly with a clean, minimal Python interface.</p>
+     </div>
 
-      Leverages the mature FEniCS finite element framework for robust, scalable simulations.
+     <div class="festim-feature-card">
+       <div class="festim-feature-icon">
+         <i class="fa-solid fa-gears"></i>
+       </div>
+       <h3>Built on FEniCS</h3>
+       <p>Leverages a mature finite element framework for robust, scalable simulations.</p>
+     </div>
 
+   </div>
 
 .. raw:: html