Remove redundant event timing and reservation details from index.astro

- Swapped event titles, dates, and images for better accuracy.
- Replaced `kevin_mcflannigan.png` with `Event4.png`.
- Updated `Menu.pdf`.

src/components/Drinks.astro

@@ -6,30 +6,39 @@ const { id } = Astro.props;
 <section id={id} class="Drinks">
     <h2 class="title">Drinks</h2>
 
-    <a href="/pdf/Menu.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
+    <p class="note">
+        Ob ein frisch gezapftes Pint, ein edler Tropfen Whiskey oder ein gemütliches Glas Wein – hier kannst du in entspannter
+        Atmosphäre das Leben genießen. Natürlich dürfen auch Cocktails nicht fehlen. Vieles kreieren wir auch selber - Sláinte!
+    </p>
+
+    <a href="/pdf/Getraenke_Gallus_2025.pdf" class="card-link" target="_blank" rel="noopener noreferrer">Getränkekarte</a>
 
     <h3 class="monats-hit">Monats Hit</h3>
 
     <div class="mate-vodka">
         <div class="circle" title="Mate Vodka">
-            <span class="circle-label">Mate Vodka</span>
+            <img src="/images/MonthlyHit.png" alt="Monats Hit" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
     </div>
 
-    <div class="circle-row">
-        <div class="circle" title="Bier">
-            <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">
-        Wir bieten eine Auswahl an erlesenen Getränken für jeden Geschmack. Besuche uns und entdecke unsere saisonalen Spezialitäten und Klassiker.
+        Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot.
     </p>
+
+    <div class="circle-row">
+        <div class="circle whiskey-circle" title="Whiskey 1">
+            <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/components/HoverCard.astro

@@ -1,5 +1,4 @@
 ---
-// src/components/HoverCard.astro
 import "../styles/components/HoverCard.css";
 const {title, description, image = "", date} = Astro.props;
 ---
@@ -21,12 +20,29 @@ const {title, description, image = "", date} = Astro.props;
 		const hoverCards = document.querySelectorAll('.hover-card');
 		
 		hoverCards.forEach(card => {
-			card.addEventListener('click', () => {
+			card.addEventListener('click', (e) => {
 				// Only toggle on mobile devices
 				if (window.innerWidth <= 768) {
+					e.preventDefault();
+					
+					// Close all other active cards first
+					hoverCards.forEach(otherCard => {
+						if (otherCard !== card) {
+							otherCard.classList.remove('active');
+						}
+					});
+					
+					// Toggle current card
 					card.classList.toggle('active');
 				}
 			});
+
+			// Close card when clicking outside (mobile only)
+			document.addEventListener('click', (e) => {
+				if (window.innerWidth <= 768 && !card.contains(e.target)) {
+					card.classList.remove('active');
+				}
+			});
 		});
 	});
 </script>

src/pages/index.astro

@@ -1,5 +1,4 @@
 ---
-// src/pages/index.astro
 import Layout from "../components/Layout.astro";
 import Hero from "../components/Hero.astro";
 import Welcome from "../components/Welcome.astro";
@@ -31,59 +30,52 @@ const events = [
 			*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
 		`,
 	},
-	{
-		image: "/images/Event1.png",
-		title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
-		date: "Do, 04. September 2025",
-		description: `
-			<b>20:00 Uhr</b> <br>
-			<a href="Metzgergasse 13, 9000 St. Gallen">Metzgergasse 13, 9000 St. Gallen</a> <br>
-			Erlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>
-			Jetzt reservieren: <a href="tel:+41772322770">077 232 27 70</a>`,
-	},
     {
         image: "/images/Event3.png",
-		title: "Karaoke",
+        title: "Karaoke tes",
         date: "Mittwoch - Samstag",
         description: `
-			Bei uns gibt es Karaoke Mi-Sa!! <br>
-			Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
-			Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
 		`,
     },
     {
         image: "/images/Event2.png",
-		title: "Karaoke",
+        title: "Karaoke test",
         date: "Mittwoch - Samstag",
         description: `
-			Bei uns gibt es Karaoke Mi-Sa!! <br>
-			Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
-			Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
 		`,
     },
     {
-		image: "/images/kevin_mcflannigan.png",
+        image: "/images/Event1.png",
+        title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
+        date: "Do, 04. September 2025",
+        description: `
+			<b>ab 19 Uhr geht’s los, bis max. 21.30 Uhr</b> <br>
+            Kosten? CHF 10 pro Spielgast
+			Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
+		`,
+    },
+    {
+        image: "/images/Event4.png",
         title: "Kevin McFlannigan <br> Live Music im Gallus Pub!",
         date: "Sa, 27. September 2025",
         description: `
 			<b>ab 20:00 Uhr</b> <br>
-			Singer & Songwriter Kevin McFlannigan <br>
 			Eintritt ist Frei / Hutkollekte <br>
+			Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
 		`,
     },
 ];
 
 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" },
+	{ src: "/images/Gallery7.png", alt: "Siebtes Bild" },
+	{ src: "/images/Gallery8.png", alt: "Achtes Bild" },
+	{ src: "/images/Gallery9.png", alt: "Neuntes Bild" },
+	{ src: "/images/Gallery6.png", alt: "Sechstes Bild" },
+	{ src: "/images/Gallery1.png", alt: "Erstes Bild" },
+	{ src: "/images/Gallery2.png", alt: "Zweites Bild" },
+	{ src: "/images/Gallery3.png", alt: "Drittes Bild" },
+	{ src: "/images/Gallery4.png", alt: "Viertes Bild" },
+	{ src: "/images/Gallery5.png", alt: "Fünftes Bild" },
 ];
 ---
 

src/styles/components/Drinks.css

@@ -15,7 +15,7 @@
 
 .title {
   font-size: var(--font-size-large);
-  margin-bottom: 1.5rem;
+  margin-bottom: 0.5rem;
   font-weight: bold;
   color: var(--color-text);
   text-transform: uppercase;
@@ -25,6 +25,7 @@
 .card-link {
   border: 2px solid var(--color-accent-beige);
   padding: 0.75rem 1.5rem;
+  margin-top: 2.5rem;
   margin-bottom: 2.5rem;
   color: var(--color-text);
   background-color: var(--color-background);
@@ -68,7 +69,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 +81,8 @@
 }
 
 .circle {
-  height: 9em;
-  width: 9em;
+  height: 35vh;
+  width: 35vh;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;
@@ -94,6 +94,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .circle:hover {
@@ -109,12 +110,25 @@
   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;
+}
+
 .circle-row {
   display: flex;
   justify-content: center;
@@ -149,10 +163,6 @@
     width: 90%;
   }
 
-  .circle {
-    height: 5em;
-    width: 5em;
-  }
 
   .circle-label {
     font-size: 0.7rem;

src/styles/components/HoverCard.css

@@ -12,10 +12,21 @@
 	flex-direction: column;
 }
 
+/* Hover effects only for devices that support hover */
+@media (hover: hover) and (pointer: fine) {
 	.hover-card:hover {
 		transform: translateY(-5px);
 	}
 
+	.hover-card:hover .hover-text {
+		opacity: 1;
+	}
+
+	.hover-card:hover .card-image {
+		opacity: 0.1;
+	}
+}
+
 .card-title {
 	padding: 15px 15px 5px 15px;
 	margin: 0;
@@ -93,15 +104,7 @@
 	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
 }
 
-.hover-card:hover .hover-text {
-	opacity: 1;
-}
-
-.hover-card:hover .card-image {
-	opacity: 0.1;
-}
-
-/* Active state for mobile click functionality */
+/* Active state for mobile tap functionality */
 .hover-card.active .hover-text {
 	opacity: 1;
 }
@@ -122,5 +125,31 @@
 		/* Maintain square aspect ratio */
 		aspect-ratio: 1 / 1;
 		height: auto;
+		/* Add cursor pointer to indicate it's clickable */
+		cursor: pointer;
+	}
+
+	/* Add visual feedback for tap */
+	.hover-card:active {
+		transform: scale(0.98);
+	}
+
+	.hover-card::after {
+		position: absolute;
+		bottom: 10px;
+		right: 10px;
+		background-color: rgba(0, 0, 0, 0.7);
+		color: var(--color-accent-beige);
+		font-size: 0.7rem;
+		padding: 4px 8px;
+		border-radius: 12px;
+		opacity: 0.8;
+		pointer-events: none;
+		z-index: 10;
+	}
+
+	/* Hide the hint when card is active */
+	.hover-card.active::after {
+		display: none;
 	}
 }