initial commit

2026-05-03 10:00:01 +02:00
parent ac2d1f25e5
commit 41d017b70f
20 changed files with 4019 additions and 276 deletions
@@ -0,0 +1,87 @@
+---
+interface Props {
+  images: string[];
+}
+
+const { images } = Astro.props;
+---
+
+{images && images.length > 0 ? (
+  <div class="photo-gallery">
+    {images.map((image) => (
+      <div class="gallery-item">
+        <img src={image} alt="Theater photo" loading="lazy" />
+      </div>
+    ))}
+  </div>
+) : (
+  <div class="placeholder">
+    <p class="placeholder-de" data-lang="de">Fotos werden bald hinzugefügt. Besuchen Sie uns später wieder!</p>
+    <p class="placeholder-en" data-lang="en">Photos will be added soon. Check back later!</p>
+  </div>
+)}
+
+<style>
+  .photo-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--spacing-md);
+    margin-top: var(--spacing-lg);
+  }
+
+  .gallery-item {
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    aspect-ratio: 4 / 3;
+  }
+
+  .gallery-item:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
+  }
+
+  .gallery-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  .gallery-item:hover img {
+    transform: scale(1.05);
+  }
+
+  .placeholder {
+    text-align: center;
+    padding: var(--spacing-xl);
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    font-style: italic;
+  }
+
+  .placeholder p {
+    margin: 0;
+    font-size: 1.1rem;
+  }
+
+  /* Language-specific placeholders */
+  :global([data-language="de"]) .placeholder-en,
+  :global([data-language="en"]) .placeholder-de {
+    display: none;
+  }
+
+  :global([data-language="de"]) .placeholder-de,
+  :global([data-language="en"]) .placeholder-en {
+    display: block;
+  }
+
+  @media (max-width: 768px) {
+    .photo-gallery {
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: var(--spacing-sm);
+    }
+  }
+</style>