diff --git a/assets/css/gambit.css b/assets/css/gambit.css
index 7a8c638..e5a87d4 100644
--- a/assets/css/gambit.css
+++ b/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%;
+ }
+}
diff --git a/config.yaml b/config.yaml
index cbe2fab..27b3493 100644
--- a/config.yaml
+++ b/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
diff --git a/layouts/partials/hero.html b/layouts/partials/hero.html
index 7967da0..bfbc8e1 100644
--- a/layouts/partials/hero.html
+++ b/layouts/partials/hero.html
@@ -54,6 +54,24 @@
+
+ {{- $visuals := index $hero "visuals" }}
+ {{ if $visuals }}
+
+
+ {{- range $visuals.slides }}
+
+

+ {{ with .caption }}
+
{{ . }}
+ {{ end }}
+
+ {{- end }}
+
+ {{ end }}
+
{{- $softwareTitle := index $hero "software_title" }}
{{ if $softwareTitle }}
diff --git a/static/images/visuals/kuhn-4-card.svg b/static/images/visuals/kuhn-4-card.svg
new file mode 100644
index 0000000..0b48c80
--- /dev/null
+++ b/static/images/visuals/kuhn-4-card.svg
@@ -0,0 +1,1764 @@
+
+
diff --git a/static/images/visuals/test_image.jpg b/static/images/visuals/test_image.jpg
new file mode 100644
index 0000000..89265d6
Binary files /dev/null and b/static/images/visuals/test_image.jpg differ