Update images, enhance Drinks section, and adjust styles:

- **Image updates**: Replaced placeholder images with new gallery images (`Gallery1.png` to `Gallery8.png`) and added whiskey images (`Whiskey1.png` to `Whiskey3.png`).
- **Drinks section**: Added description, updated drink types, and included new images for Whiskey options and Monthly Special.
- **Circular design refinements**: Enlarged circle dimensions, ensured image fit with `object-fit: cover`, and added responsive adjustments.
- **Style improvements**: Introduced overflow handling, z-index management, and tailored sizes for Whiskey circles.

src/components/Drinks.astro

@@ -12,24 +12,27 @@ const { id } = Astro.props;
 
     <div class="mate-vodka">
         <div class="circle" title="Mate Vodka">
+            <img src="/images/MonthlyHit.png" alt="Monats Hit" class="circle-image" />
             <span class="circle-label">Mate Vodka</span>
         </div>
         <div>Mate Vodka</div>
     </div>
 
-    <div class="circle-row">
+    <p class="note">Ob ein frisch gezapftes Pint, ein edler Tropfen Whiskey oder ein gemütliches Glas Wein – hier kannst du in entspannter
-        <div class="circle" title="Bier">
+        Atmosphäre das Leben genießen. Natürlich dürfen auch Cocktails nicht fehlen. Vieles kreieren wir auch selber - Sláinte!</p>
-            <span class="circle-label">Bier</span>
-        </div>
-        <div class="circle" title="Wein">
-            <span class="circle-label">Wein</span>
-        </div>
-        <div class="circle" title="Cocktails">
-            <span class="circle-label">Cocktails</span>
-        </div>
-    </div>
 
-    <p class="note">
+    <div class="circle-row">
-        Wir bieten eine Auswahl an erlesenen Getränken für jeden Geschmack. Besuche uns und entdecke unsere saisonalen Spezialitäten und Klassiker.
+        <div class="circle whiskey-circle" title="Whiskey 1">
-    </p>
+            <img src="/images/Whiskey1.png" alt="Whiskey 1" class="circle-image" />
+            <span class="circle-label"></span>
+        </div>
+        <div class="circle whiskey-circle" title="Whiskey 2">
+            <img src="/images/Whiskey2.png" alt="Whiskey 2" class="circle-image" />
+            <span class="circle-label"></span>
+        </div>
+        <div class="circle whiskey-circle" title="Whiskey 3">
+            <img src="/images/Whiskey3.png" alt="Whiskey 3" class="circle-image" />
+            <span class="circle-label"></span>
+        </div>
+    </div>
 </section>

src/pages/index.astro

@@ -74,16 +74,14 @@ const events = [
 ];
 
 const images = [
-	{ src: "/images/Logo.png", alt: "Erstes Bild" },
+	{ src: "/images/Gallery1.png", alt: "Erstes Bild" },
-	{ src: "/images/Logo.png", alt: "Zweites Bild" },
+	{ src: "/images/Gallery2.png", alt: "Zweites Bild" },
-	{ src: "/images/Logo.png", alt: "Drittes Bild" },
+	{ src: "/images/Gallery3.png", alt: "Drittes Bild" },
-	{ src: "/images/Logo.png", alt: "Viertes Bild" },
+	{ src: "/images/Gallery4.png", alt: "Viertes Bild" },
-	{ src: "/images/Logo.png", alt: "Fünftes Bild" },
+	{ src: "/images/Gallery5.png", alt: "Fünftes Bild" },
-	{ src: "/images/Logo.png", alt: "Sechstes Bild" },
+	{ src: "/images/Gallery6.png", alt: "Sechstes Bild" },
-	{ src: "/images/Logo.png", alt: "Siebtes Bild" },
+	{ src: "/images/Gallery7.png", alt: "Siebtes Bild" },
-	{ src: "/images/Logo.png", alt: "Achtes Bild" },
+	{ src: "/images/Gallery8.png", alt: "Achtes Bild" },
-	{ src: "/images/Logo.png", alt: "Neuntes Bild" },
-	{ src: "/images/Logo.png", alt: "Zehntes Bild" },
 ];
 ---
 

src/styles/components/Drinks.css

@@ -68,7 +68,6 @@
   align-items: center;
   margin-bottom: 1.5rem;
   padding: 1rem;
-  background-color: rgba(0, 0, 0, 0.2);
   border-radius: var(--border-radius);
   width: 80%;
   max-width: 300px;
@@ -81,8 +80,8 @@
 }
 
 .circle {
-  height: 9em;
+  height: 12em;
-  width: 9em;
+  width: 12em;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;
@@ -94,6 +93,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .circle:hover {
@@ -109,12 +109,30 @@
   text-align: center;
   transition: opacity var(--transition-standard);
   position: absolute;
+  z-index: 2;
 }
 
 .circle:hover .circle-label {
   opacity: 1;
 }
 
+.circle-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+  z-index: 1;
+}
+
+.whiskey-circle {
+  height: 20em;
+  width: 20em;
+}
+
 .circle-row {
   display: flex;
   justify-content: center;
@@ -154,6 +172,11 @@
     width: 5em;
   }
   
+  .whiskey-circle {
+    height: 7em;
+    width: 7em;
+  }
+
   .circle-label {
     font-size: 0.7rem;
   }
@@ -189,6 +212,11 @@
     margin: 1rem 0;
   }
   
+  .whiskey-circle {
+    height: 6em;
+    width: 6em;
+  }
+
   .mate-vodka {
     padding: 0.8rem;
   }