Add funding carousel to home page and reorganize logos

Author: SasiAlavala

_pages/home.md

@@ -26,3 +26,62 @@ permalink: /
     <img src="/assets/img/logos/hiro_lab.jpg" alt="HiRo Lab">
   </div>
 </div>
+
+<div class="funding-section">
+  <h2>Funding & Support</h2>
+  <div class="funding-carousel">
+    <button class="carousel-btn prev-btn" aria-label="Previous">&lt;</button>
+    <div class="carousel-container">
+      <div class="carousel-track">
+        <div class="funding-logo">
+          <img src="/assets/img/logos/iisc.jpg" alt="IISc">
+        </div>
+        <div class="funding-logo">
+          <img src="/assets/img/logos/artpark.png" alt="ARTPARK">
+        </div>
+        <div class="funding-logo">
+          <img src="/assets/img/logos/drdo.png" alt="DRDO">
+        </div>
+        <div class="funding-logo">
+          <img src="/assets/img/logos/dst.jpg" alt="DST">
+        </div>
+        <div class="funding-logo">
+          <img src="/assets/img/logos/govtofkarnataka.png" alt="Government of Karnataka">
+        </div>
+      </div>
+    </div>
+    <button class="carousel-btn next-btn" aria-label="Next">&gt;</button>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const track = document.querySelector('.carousel-track');
+    const prevBtn = document.querySelector('.prev-btn');
+    const nextBtn = document.querySelector('.next-btn');
+    const logos = document.querySelectorAll('.funding-logo');
+    let currentIndex = 0;
+
+    function updateCarousel() {
+      track.style.transform = `translateX(-${currentIndex * 100}%)`;
+      prevBtn.disabled = currentIndex === 0;
+      nextBtn.disabled = currentIndex === logos.length - 1;
+    }
+
+    prevBtn.addEventListener('click', () => {
+      if (currentIndex > 0) {
+        currentIndex--;
+        updateCarousel();
+      }
+    });
+
+    nextBtn.addEventListener('click', () => {
+      if (currentIndex < logos.length - 1) {
+        currentIndex++;
+        updateCarousel();
+      }
+    });
+
+    updateCarousel();
+  });
+</script>

assets/css/main.css

@@ -147,6 +147,83 @@ body {
   border-radius: 8px;
 }
 
+/* Funding Section */
+.funding-section {
+  margin-top: 5rem;
+  padding: 3rem 2rem;
+  background: var(--bg-light);
+  border-radius: 8px;
+}
+
+.funding-section h2 {
+  text-align: center;
+  font-size: 2rem;
+  color: var(--primary-color);
+  margin-bottom: 2rem;
+}
+
+.funding-carousel {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.carousel-container {
+  overflow: hidden;
+  width: 100%;
+  max-width: 700px;
+}
+
+.carousel-track {
+  display: flex;
+  transition: transform 0.5s ease;
+}
+
+.funding-logo {
+  flex: 0 0 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+}
+
+.funding-logo img {
+  max-width: 250px;
+  max-height: 150px;
+  width: auto;
+  height: auto;
+  object-fit: contain;
+}
+
+.carousel-btn {
+  background: var(--primary-color);
+  color: white;
+  border: none;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  font-size: 1.2rem;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.3s;
+}
+
+.carousel-btn:hover {
+  background: #333;
+}
+
+.carousel-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+}
+
 /* Lab/People Page */
 .lab-section,
 .people-section {