Add new images and general cleanup

main/templates/main/index.html

@@ -16,15 +16,16 @@
                         <div class="text-center text-md-start pe-sm-3 col-5">
                             <h2 class="h1 text-white pb-2 pb-md-3 mb-lg-4 col-4">Track and manage your professional development</h2>
                             <a class="btn btn-icon btn-xl btn-warning rounded-circle"
-                               href="https://www.youtube.com/watch?v=NpQFhwqBgg4"
-                               data-bs-toggle="video"
+                               href="#"
+                               data-bs-toggle="modal"
+                               data-bs-target="#videoModal"
                                aria-label="Play video">
                                 <i class="fa-solid fa-play fs-lg"></i>
                             </a>
                         </div>
                         <div class="col">
-                            <img src="{% static 'assets/img/auth/cover.webp' %}"
-                                 alt="Skills wheel visualisation"
+                            <img src="{% static 'assets/img/landing/workshop-breakout.webp' %}"
+                                 alt="Workshop photo"
                                  class="img-fluid w-100 h-100"
                                  style="object-fit: cover;
                                         border-radius: 1rem">
@@ -65,4 +66,35 @@ <h3 class="h2 mb-lg-4">A competencies framework for Digital Research Technical P
             </div>
         </div>
     </section>
+    <!-- Bootstrap modal -->
+    <div class="modal fade" id="videoModal" tabindex="-1" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-lg">
+            <div class="modal-content bg-dark" style="border-radius: 0;">
+                <div class="modal-body p-0">
+                    <div class="ratio ratio-16x9">
+                        <iframe id="videoFrame"
+                                src=""
+                                title="YouTube video"
+                                allow="autoplay; encrypted-media"
+                                allowfullscreen></iframe>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+    const videoModal = document.getElementById('videoModal');
+    const iframe = document.getElementById('videoFrame');
+    const videoUrl = "https://www.youtube.com/embed/NpQFhwqBgg4?autoplay=1";
+
+    // Load video when modal opens
+    videoModal.addEventListener('shown.bs.modal', function () {
+        iframe.src = videoUrl;
+    });
+
+    // Stop video when modal closes
+    videoModal.addEventListener('hidden.bs.modal', function () {
+        iframe.src = "";
+    });
+    </script>
 {% endblock content %}

main/templates/main/pages/about.html

@@ -46,7 +46,7 @@ <h1 class="display-2 pb-2 pb-sm-3">Building a stronger future for digital resear
         <div class="rounded-5 overflow-hidden">
             <div class="jarallax ratio ratio-16x9" data-jarallax data-speed="0.6">
                 <div class="jarallax-img"
-                     style="background-image: url({% static 'assets/img/blog/single/image.jpg' %})"></div>
+                     style="background-image: url({% static 'assets/img/landing/workshop-stickies.webp' %})"></div>
             </div>
         </div>
         <div class="row pt-5 mt-n2 mt-sm-0 mt-md-2 mt-lg-4 mt-xl-5">
@@ -131,7 +131,7 @@ <h3 class="h4">Organisational impact</h3>
             <div class="col-md-6 col-xl-5 pb-3 pb-md-0 mb-4 mb-md-0">
                 <div class="ratio ratio-1x1 d-flex align-items-center position-relative rounded-circle overflow-hidden bg-size-cover mx-auto"
                      style="max-width: 530px;
-                            background-image: url({% static 'assets/img/about/agency/steps-image.jpg' %})">
+                            background-image: url({% static 'assets/img/landing/workshop-breakout.webp' %})">
                     <div class="bg-black position-absolute top-0 start-0 w-100 h-100 opacity-50"></div>
                     <div class="position-relative z-2 p-4" data-bs-theme="dark">
                         <div class="text-center mx-auto" style="max-width: 275px;">