From 551b445affe9830db56ee94175f4dba9583d6215 Mon Sep 17 00:00:00 2001
From: Tobias Brunner <tobias.brunner@vshn.ch>
Date: Tue, 6 May 2025 16:35:12 +0200
Subject: [PATCH] infographic in about

---
 hub/services/templates/pages/about.html | 86 ++++++++++++++++---------
 1 file changed, 56 insertions(+), 30 deletions(-)

diff --git a/hub/services/templates/pages/about.html b/hub/services/templates/pages/about.html
index 1fe3467..ccb58b4 100644
--- a/hub/services/templates/pages/about.html
+++ b/hub/services/templates/pages/about.html
@@ -52,39 +52,65 @@
                         <a href="https://products.vshn.ch/servala/enterprise.html" target="_blank"><strong>Enterprise Private Clouds</strong></a> gain seamless access to trusted services and applications while maintaining full control over security and compliance - all within an open and agnostic ecosystem.
                     </p>
                 </div>
-                <article class="pt-5">
-                    <h3 class="fs-24 fw-semibold">Software Vendors</h3>
-                    <ul class="list-disc pl-8 text-gray-500 fs-19">
-                        <li>Transform software into SaaS offerings.</li>
-                        <li>Reach new markets and ecosystems through our existing partner network.</li>
-                        <li>Streamline operations and monetization.</li>
-                    </ul>
-                    <div class="page-action">
-                        <a class="btn btn-primary mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-17 w-100 w-md-auto" href="https://products.vshn.ch/servala/isv.html" target="_blank" role="button">Learn More</a>
+                <div class="d-lg-flex mt-5">
+                    <div class="w-lg-40 mb-4 mb-lg-0">
+                        <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal">
+                            <img class="img-fluid" src="{% static 'img/servala-infographic.png' %}" alt="Servala Infographic">
+                            <div class="text-center mt-2 small text-muted"><i class="bi bi-zoom-in"></i> Click to enlarge</div>
+                        </a>
                     </div>
-                </article>
-                <article class="pt-5">
-                    <h3 class="fs-24 fw-semibold">Cloud Providers</h3>
-                    <ul class="list-disc pl-8 text-gray-500 fs-19">
-                        <li>Offer value-added services and applications to customers.</li>
-                        <li>Enhance operational efficiency and market reach.</li>
-                        <li>Keep pace with fast-changing industry demands.</li>
-                    </ul>
-                    <div class="page-action">
-                        <a class="btn btn-primary mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-17 w-100 w-md-auto" href="https://products.vshn.ch/servala/csp.html" target="_blank" role="button">Learn More</a>
+
+                    <!-- Modal for enlarged image -->
+                    <div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
+                        <div class="modal-dialog modal-xl modal-dialog-centered">
+                            <div class="modal-content">
+                                <div class="modal-header">
+                                    <h5 class="modal-title" id="imageModalLabel">Servala Infographic</h5>
+                                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                                </div>
+                                <div class="modal-body text-center">
+                                    <img class="img-fluid" src="{% static 'img/servala-infographic.png' %}" alt="Servala Infographic">
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                </article>
-                <article class="pt-5">
-                    <h3 class="fs-24 fw-semibold">Enterprise Private Clouds</h3>
-                    <ul class="list-disc pl-8 text-gray-500 fs-19">
-                        <li>Access scalable, secure, and cost-efficient services.</li>
-                        <li>Enable self-service installation of trusted applications without managing infrastructure.</li>
-                        <li>Ensure compliance, boost developer productivity, and simplify operations.</li>
-                    </ul>
-                    <div class="page-action">
-                        <a class="btn btn-primary mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-17 w-100 w-md-auto" href="https://products.vshn.ch/servala/enterprise.html" target="_blank" role="button">Learn More</a>
+
+                    <div class="flex-1 pl-lg-4">
+                        <article>
+                            <h3 class="fs-24 fw-semibold">Software Vendors</h3>
+                            <ul class="list-disc pl-8 text-gray-500 fs-19">
+                                <li>Transform software into SaaS offerings.</li>
+                                <li>Reach new markets and ecosystems through our existing partner network.</li>
+                                <li>Streamline operations and monetization.</li>
+                            </ul>
+                            <div class="page-action">
+                                <a class="btn btn-primary mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-17 w-100 w-md-auto" href="https://products.vshn.ch/servala/isv.html" target="_blank" role="button">Learn More</a>
+                            </div>
+                        </article>
+                        <article class="pt-5">
+                            <h3 class="fs-24 fw-semibold">Cloud Providers</h3>
+                            <ul class="list-disc pl-8 text-gray-500 fs-19">
+                                <li>Offer value-added services and applications to customers.</li>
+                                <li>Enhance operational efficiency and market reach.</li>
+                                <li>Keep pace with fast-changing industry demands.</li>
+                            </ul>
+                            <div class="page-action">
+                                <a class="btn btn-primary mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-17 w-100 w-md-auto" href="https://products.vshn.ch/servala/csp.html" target="_blank" role="button">Learn More</a>
+                            </div>
+                        </article>
+                        <article class="pt-5">
+                            <h3 class="fs-24 fw-semibold">Enterprise Private Clouds</h3>
+                            <ul class="list-disc pl-8 text-gray-500 fs-19">
+                                <li>Access scalable, secure, and cost-efficient services.</li>
+                                <li>Enable self-service installation of trusted applications without managing infrastructure.</li>
+                                <li>Ensure compliance, boost developer productivity, and simplify operations.</li>
+                            </ul>
+                            <div class="page-action">
+                                <a class="btn btn-primary mr-md-17 mb-17 mb-md-0px mb-lg-17 mb-xl-17 w-100 w-md-auto" href="https://products.vshn.ch/servala/enterprise.html" target="_blank" role="button">Learn More</a>
+                            </div>
+                        </article>
                     </div>
-                </article>
+                </div>
             </div>
 
             <div>