Fixed typo, added images from last bootcamp + image carousel

src/components/landing/Explanation.astro

@@ -1,5 +1,6 @@
 ---
 import { getLangFromUrl, useTranslations, useTranslatedPath } from "@i18n/utils";
+import ImageCarousel from "./ImageCarousel.astro";
 
 const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
@@ -43,7 +44,7 @@ const translatePath = useTranslatedPath(lang);
 
           <div class="p-6">
             <ul class="space-y-3">
-              <p>Workshos, classes, bootcamps, etc., offered by community members</p>
+              <p>Workshops, classes, bootcamps, etc., offered by community members</p>
               <li class="flex items-start">
                 <span class="text-campfire-500 mr-2 text-xl">•</span>
                 <span>How to build an exchange from scratch</span>
@@ -92,6 +93,9 @@ const translatePath = useTranslatedPath(lang);
         </div>
       </div>
     </div>
+
+    <!-- Add the image carousel -->
+    <ImageCarousel />
   </div>
 </section>
 

src/components/landing/ImageCarousel.astro

@@ -0,0 +1,113 @@
+<div class="w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-12">
+  <div class="relative overflow-hidden rounded-xl shadow-lg">
+    <!-- Carousel container -->
+    <div class="relative h-[400px] sm:h-[500px] lg:h-[600px]">
+      <!-- Images -->
+      <div class="carousel-container absolute inset-0 flex transition-transform duration-500 ease-in-out">
+        <img src="/images/camp2024-1.jpg" alt="Arbor Summer Camp 2024" class="w-full h-full object-cover" />
+        <img src="/images/camp2024-2.jpg" alt="Arbor Summer Camp 2024" class="w-full h-full object-cover" />
+        <img src="/images/camp2024-3.jpg" alt="Arbor Summer Camp 2024" class="w-full h-full object-cover" />
+        <img src="/images/camp2024-4.jpg" alt="Arbor Summer Camp 2024" class="w-full h-full object-cover" />
+      </div>
+
+      <!-- Navigation buttons -->
+      <button class="carousel-prev absolute left-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white text-gray-800 p-2 rounded-full shadow-lg transition-colors duration-200 z-10">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </button>
+      <button class="carousel-next absolute right-4 top-1/2 -translate-y-1/2 bg-white/80 hover:bg-white text-gray-800 p-2 rounded-full shadow-lg transition-colors duration-200 z-10">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+      </button>
+
+      <!-- Dots indicator -->
+      <div class="absolute bottom-4 left-1/2 -translate-x-1/2 flex space-x-2 z-10">
+        <button class="carousel-dot w-3 h-3 rounded-full bg-white/80 hover:bg-white transition-colors duration-200" data-index="0"></button>
+        <button class="carousel-dot w-3 h-3 rounded-full bg-white/80 hover:bg-white transition-colors duration-200" data-index="1"></button>
+        <button class="carousel-dot w-3 h-3 rounded-full bg-white/80 hover:bg-white transition-colors duration-200" data-index="2"></button>
+        <button class="carousel-dot w-3 h-3 rounded-full bg-white/80 hover:bg-white transition-colors duration-200" data-index="3"></button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style>
+  .carousel-container {
+    display: flex;
+    width: 400%; /* 4 images * 100% */
+  }
+
+  .carousel-container img {
+    width: 25%; /* 100% / 4 images */
+    flex-shrink: 0;
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const container = document.querySelector('.carousel-container') as HTMLElement;
+    const images = container?.querySelectorAll('img');
+    const dots = document.querySelectorAll('.carousel-dot');
+    const prevBtn = document.querySelector('.carousel-prev');
+    const nextBtn = document.querySelector('.carousel-next');
+
+    if (!container || !images || !dots || !prevBtn || !nextBtn) return;
+
+    let currentIndex = 0;
+    const totalImages = images.length;
+
+    function updateCarousel() {
+      if (container) {
+        container.style.transform = `translateX(-${currentIndex * 25}%)`;
+      }
+
+      // Update dots
+      dots.forEach((dot, index) => {
+        dot.classList.toggle('bg-white', index === currentIndex);
+        dot.classList.toggle('bg-white/80', index !== currentIndex);
+      });
+    }
+
+    // Event listeners for dots
+    dots.forEach((dot, index) => {
+      dot.addEventListener('click', () => {
+        currentIndex = index;
+        updateCarousel();
+      });
+    });
+
+    // Event listeners for navigation buttons
+    prevBtn.addEventListener('click', () => {
+      currentIndex = (currentIndex - 1 + totalImages) % totalImages;
+      updateCarousel();
+    });
+
+    nextBtn.addEventListener('click', () => {
+      currentIndex = (currentIndex + 1) % totalImages;
+      updateCarousel();
+    });
+
+    // Auto-advance every 5 seconds
+    let autoAdvanceInterval = setInterval(() => {
+      currentIndex = (currentIndex + 1) % totalImages;
+      updateCarousel();
+    }, 5000);
+
+    // Pause auto-advance on hover
+    container.addEventListener('mouseenter', () => {
+      clearInterval(autoAdvanceInterval);
+    });
+
+    container.addEventListener('mouseleave', () => {
+      autoAdvanceInterval = setInterval(() => {
+        currentIndex = (currentIndex + 1) % totalImages;
+        updateCarousel();
+      }, 5000);
+    });
+
+    // Initialize carousel
+    updateCarousel();
+  });
+</script>