Add "Gambit in a nutshell" section

assets/css/gambit.css

@@ -230,6 +230,119 @@
    }
 }
 
+/* What is Gambit?  section */
+.what-icons {
+   margin: 40px 0;
+   text-align: center;
+}
+
+.what-icons h3 {
+   color: #cc0000;
+   margin-bottom: 20px;
+   font-family: 'Times New Roman', Times, serif;
+}
+
+.what-grid {
+   display: grid;
+   grid-template-columns: repeat(5, 1fr);
+   gap: 40px;
+   max-width: 75%;
+   margin: 0 auto;
+   justify-items: center;
+   padding-bottom: 30px;
+}
+
+.what-item {
+   display: flex;
+   flex-direction: column;
+   align-items: left;
+   text-align: left;
+   max-width: 450px;
+   width: 100%;
+}
+
+.what-item a {
+   text-decoration: none;
+   color: inherit;
+}
+
+/* Column separators between what-grid columns */
+.what-item:not(:first-child) {
+   border-left: 1.5px solid rgba(0,0,0,0.06);
+   padding-left: 1.5rem; /* give some breathing room from the divider */
+}
+
+.what-icon {
+   margin-bottom: 15px;
+   object-fit: contain;
+   width: 90px;
+   height: 90px;
+}
+
+.what-icon-fallback {
+   width: 90px;
+   height: 90px;
+   margin-bottom: 15px;
+   background-color: #cc0000;
+   border-radius: 50%;
+   display: flex;
+   align-items: center;
+   justify-content: center;
+   color: white;
+   font-weight: bold;
+   font-size: 1.8em;
+}
+
+.what-name {
+   font-weight: bold;
+   color: #cc0000;
+   margin-bottom: 8px;
+   font-size: 1.3em;
+}
+
+.what-description {
+   font-size: 1em;
+   color: #666;
+}
+
+/* Responsive adjustments for what grid */
+@media (max-width: 768px) {
+   .what-grid {
+      grid-template-columns: 1fr !important;
+      gap: 40px;
+      max-width: 400px;
+   }
+
+   .what-item {
+      max-width: 350px;
+   }
+
+   .what-icon {
+      width: 75px;
+      height: 75px;
+   }
+
+   .what-icon-fallback {
+      width: 75px;
+      height: 75px;
+      font-size: 1.5em;
+   }
+
+   .what-name {
+      font-size: 1.5em;
+   }
+
+   .what-description {
+      font-size: 1.2em;
+   }
+
+   /* Remove column separators on small screens */
+   .what-item:not(:first-child) {
+      border-left: none;
+      padding-left: 0;
+   }
+}
+
 /* Testimonials section */
 .testimonials-section {
    margin: 60px 0;

config.yaml

@@ -49,16 +49,18 @@ params:
       # - name: LLM tools
       #   description: "🏗️ WIP: Construct extensive games using our language model framework."
       #   icon: llm.png
-    # solvers_title: "State of the art methods"
-    # solvers:
-    #   - name: Nash Equilibrium Solvers
-    #     description: "Enumerate pure and mixed-strategy Nash equilibria, including Lemke-Howson, polytope methods."
-    #   - name: Extensive Form Solvers
-    #     description: "Leverage compact sequence-form representations for computing Nash or subgame-perfect equilibria in extensive games"
-    #   - name: Correlated & Refined Equilibrium Solvers
-    #     description: "LP-based computation of correlated equilibria and specialized tools for refinements like trembling-hand perfect or sequential equilibria."
-    #   - name: Numerical & Bounded-Rationality Solvers
-    #     description: "For quantal-response equilibria, including logit-response fixed-point computations."
+    whatgambit_title: "Gambit in a nutshell"
+    whatgambit:
+      - name: Non-cooperative finite games
+        description: "Construct games in extensive or strategic form."
+      - name: Equilibrium computation
+        description: "Find pure and mixed-strategy Nash equilibria."
+      - name: Econometric estimation
+        description: "Fit quantal response and other structural models."
+      - name: Interoperable with other tools
+        description: "Read and write games in standard file formats."
+      - name: Open source & extensible
+        description: "Analyse your game models your way."
     # testimonials:
     #   - name: "Professor X"
     #     role: "Professor of Game Theory, University of Cambridge"

layouts/partials/hero.html

@@ -84,27 +84,22 @@
                 </div>
                 {{ end }}
 
-                <!-- Solver section -->
-                {{- $solversTitle := index $hero "solvers_title" }}
-                {{ if $solversTitle }}
-                <div class="hero-title">{{ $solversTitle }}</div>
+                <!-- What is Gambit? section -->
+                {{- $whatgambitTitle := index $hero "whatgambit_title" }}
+                {{ if $whatgambitTitle }}
+                <div class="hero-title">{{ $whatgambitTitle }}</div>
                 {{ end }}
-                {{- $solvers := index $hero "solvers" }}
-                {{ if $solvers }}
-                <div class="software-icons">
-                    <div class="software-grid">
-                        {{- range $solvers }}
-                        <div class="software-item">
+                {{- $whatgambit := index $hero "whatgambit" }}
+                {{ if $whatgambit }}
+                <div class="what-icons">
+                    <div class="what-grid">
+                        {{- range $whatgambit }}
+                        <div class="what-item">
                             {{ if .link }}
                             <a href="{{ .link }}" aria-label="{{ .name }}">
                             {{ end }}
-                                {{ if .icon }}
-                                <img src="/images/{{ .icon }}" alt="{{ .name }} icon" class="software-icon">
-                                {{ else }}
-                                <div class="software-icon-fallback">{{ substr .name 0 1 }}</div>
-                                {{ end }}
-                                <div class="software-name">{{ .name }}</div>
-                                <div class="software-description">{{ .description }}</div>
+                                <div class="what-name">{{ .name }}</div>
+                                <div class="what-description">{{ .description }}</div>
                             {{ if .link }}
                             </a>
                             {{ end }}