Add ImageCarousel component with responsive design and functionality.

- Introduced a new `ImageCarousel` component to display image galleries with navigation and indicators.
- Included scoped CSS for custom styles and responsiveness.
- Integrated `ImageCarousel` into the homepage with sample image data.

src/components/ImageCarousel.astro

@@ -0,0 +1,114 @@
+---
+// src/components/ImageCarousel.astro
+import "../../styles/components/ImageCarousel.css";
+
+interface Image {
+  src: string;
+  alt: string;
+}
+
+const { images = [] } = Astro.props as { images: Image[] };
+---
+
+<section class="image-carousel-container">
+  <h2 class="section-title">Galerie</h2>
+  <div class="image-carousel">
+    <button class="nav-button prev-button" aria-label="Previous image">
+      <span class="arrow">&#10094;</span>
+    </button>
+    
+    <div class="carousel-images">
+      <div class="carousel-track">
+        {images.map((image, index) => (
+          <div class="carousel-slide" data-index={index}>
+            <img src={image.src} alt={image.alt} class="carousel-image" />
+          </div>
+        ))}
+      </div>
+    </div>
+    
+    <button class="nav-button next-button" aria-label="Next image">
+      <span class="arrow">&#10095;</span>
+    </button>
+  </div>
+  
+  <div class="carousel-indicators">
+    {images.map((_, index) => (
+      <button 
+        class="indicator-dot" 
+        data-index={index} 
+        aria-label={`Go to slide ${index + 1}`}
+      ></button>
+    ))}
+  </div>
+</section>
+
+<script>
+  // Initialize carousel functionality
+  function initCarousel() {
+    const carousel = document.querySelector('.image-carousel');
+    const track = document.querySelector('.carousel-track');
+    const slides = document.querySelectorAll('.carousel-slide');
+    const prevButton = document.querySelector('.prev-button');
+    const nextButton = document.querySelector('.next-button');
+    const indicators = document.querySelectorAll('.indicator-dot');
+    
+    if (!carousel || !track || !slides.length || !prevButton || !nextButton) return;
+    
+    let currentIndex = 0;
+    const slideCount = slides.length;
+    
+    // Set initial active state
+    updateCarousel();
+    
+    // Add event listeners
+    prevButton.addEventListener('click', () => {
+      currentIndex = (currentIndex - 1 + slideCount) % slideCount;
+      updateCarousel();
+    });
+    
+    nextButton.addEventListener('click', () => {
+      currentIndex = (currentIndex + 1) % slideCount;
+      updateCarousel();
+    });
+    
+    // Add click events to indicators
+    indicators.forEach((dot, index) => {
+      dot.addEventListener('click', () => {
+        currentIndex = index;
+        updateCarousel();
+      });
+    });
+    
+    // Function to update carousel display
+    function updateCarousel() {
+      // Update active class on slides
+      slides.forEach((slide, index) => {
+        const position = index - currentIndex;
+        
+        // Remove all position classes
+        slide.classList.remove('prev', 'current', 'next');
+        
+        // Add appropriate position class
+        if (position === -1 || (position === slideCount - 1 && currentIndex === 0)) {
+          slide.classList.add('prev');
+        } else if (position === 0) {
+          slide.classList.add('current');
+        } else if (position === 1 || (position === -(slideCount - 1) && currentIndex === slideCount - 1)) {
+          slide.classList.add('next');
+        }
+      });
+      
+      // Update indicators
+      indicators.forEach((dot, index) => {
+        dot.classList.toggle('active', index === currentIndex);
+      });
+    }
+  }
+  
+  // Run initialization when DOM is loaded
+  document.addEventListener('DOMContentLoaded', initCarousel);
+  
+  // Re-initialize on astro:page-load for Astro View Transitions
+  document.addEventListener('astro:page-load', initCarousel);
+</script>

src/pages/index.astro

@@ -5,6 +5,7 @@ import Hero from "../components/Hero.astro";
 import Welcome from "../components/Welcome.astro";
 import EventsGrid from '../components/EventsGrid.astro';
 import Drinks from "../components/Drinks.astro";
+import ImageCarousel from "../components/ImageCarousel.astro";
 
 const events = [
   {image: '/images/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
@@ -12,6 +13,20 @@ const events = [
   {image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
   {image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
 ];
+
+const images = [
+	{ src: '/images/Logo.png', alt: 'Erstes Bild' },
+	{ src: '/images/Logo.png', alt: 'Zweites Bild' },
+	{ src: '/images/Logo.png', alt: 'Drittes Bild' },
+	{ src: '/images/Logo.png', alt: 'Viertes Bild' },
+	{ src: '/images/Logo.png', alt: 'Fünftes Bild' },
+	{ src: '/images/Logo.png', alt: 'Sechstes Bild' },
+	{ src: '/images/Logo.png', alt: 'Siebtes Bild' },
+	{ src: '/images/Logo.png', alt: 'Achtes Bild' },
+	{ src: '/images/Logo.png', alt: 'Neuntes Bild' },
+	{ src: '/images/Logo.png', alt: 'Zehntes Bild' }
+];
+
 ---
 
 <Layout>
@@ -19,5 +34,6 @@ const events = [
 	<Hero />
 	<Welcome />
 	<EventsGrid events={events} />
+	<ImageCarousel images={images} />
 	<Drinks />
 </Layout>