Add visuals section

assets/css/gambit.css

@@ -1110,3 +1110,49 @@ td {
   margin: 0;
   font-size: 0.9rem;
 }
+
+/* Visuals Gallery */
+.visuals-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  margin: 2rem auto;
+  max-width: 80%;
+}
+
+.visuals-item {
+  display: flex;
+  flex-direction: column;
+  border-radius: 4px;
+  overflow: hidden;
+  border: 1.5px solid var(--color-border-light);
+  background: var(--color-white);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.visuals-item:hover {
+  border-color: var(--color-primary);
+  box-shadow: 0 2px 8px var(--shadow-hover);
+}
+
+.visuals-item img {
+  width: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: contain;
+  background: #f8f8f8;
+}
+
+.visuals-caption {
+  padding: 0.5rem 0.6rem;
+  font-size: 0.8rem;
+  color: var(--color-text-medium);
+  text-align: center;
+  border-top: 1.5px solid var(--color-border-light);
+}
+
+@media (max-width: 768px) {
+  .visuals-grid {
+    grid-template-columns: repeat(2, 1fr);
+    max-width: 100%;
+  }
+}

config.yaml

@@ -28,6 +28,17 @@ params:
     description:
       - "Gambit is a set of software tools for doing computation on finite, noncooperative games in extensive or strategy form and a set of file formats for storing and communicating games to external tools."
       - "The Gambit Project was founded in the mid-1980s at the California Institute of Technology and to this day is actively developed by a community of contributors, with core development led by [The Alan Turing Institute](https://www.turing.ac.uk) as part of its project: [Automated analysis of strategic interactions](https://www.turing.ac.uk/research/research-projects/automated-analysis-strategic-interactions)."
+    visuals:
+      title: "Visualisations"
+      slides:
+        - image: visuals/kuhn-4-card.svg
+          caption: "Extensive form representation of a 4-card Kuhn poker game, illustrating information sets and strategy nodes."
+        - image: visuals/test_image.jpg
+          caption: "Placeholder image."
+        - image: visuals/test_image.jpg
+          caption: "Placeholder image 2."
+        - image: visuals/test_image.jpg
+          caption: "Placeholder image 3."
     software_title: "Open source & free to use"
     software:
       - name: PyGambit

layouts/partials/hero.html

@@ -54,6 +54,24 @@
                     </div>
                 </div>
 
+                <!-- Visuals Section -->
+                {{- $visuals := index $hero "visuals" }}
+                {{ if $visuals }}
+                <!--- {{ with $visuals.title }}
+                <div class="hero-title">{{ . }}</div>
+                {{ end }} -->
+                <div class="visuals-grid">
+                  {{- range $visuals.slides }}
+                  <div class="visuals-item">
+                    <img src="{{ printf "/images/%s" .image | relURL }}" alt="{{ .caption }}">
+                    {{ with .caption }}
+                    <div class="visuals-caption">{{ . }}</div>
+                    {{ end }}
+                  </div>
+                  {{- end }}
+                </div>
+                {{ end }}
+
                 <!-- Software section -->
                 {{- $softwareTitle := index $hero "software_title" }}
                 {{ if $softwareTitle }}