feat: update project assets and components with new images and improve image handling

Reviewed-on: #3

package-lock.json

@@ -1,10 +1,11 @@
 {
-  "name": "Gallus_Pub",
+  "name": "Gallus Pub Site",
   "version": "0.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
+      "name": "Gallus Pub Site",
       "version": "0.0.1",
       "dependencies": {
         "astro": "^5.12.0"
@@ -3988,6 +3989,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.45.1.tgz",
       "integrity": "sha512-4iya7Jb76fVpQyLoiVpzUrsjQ12r3dM7fIVz+4NwoYvZOShknRmiv+iu9CClZml5ZLGb0XMcYLutK6w9tgxHDw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -4625,6 +4627,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
       "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -4839,6 +4842,7 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "Gallus Pub Site",
   "type": "module",
   "version": "0.0.1",
   "scripts": {

src/components/Drinks.astro

@@ -1,35 +1,49 @@
 ---
+import { Image } from "astro:assets";
 import "../styles/components/Drinks.css"
+import MonthlyHit from "../assets/images/MonthlyHit.png";
+import Whiskey1 from "../assets/images/whiskey/Whiskey1.png";
+import Whiskey2 from "../assets/images/whiskey/Whiskey2.png";
+import Whiskey3 from "../assets/images/whiskey/Whiskey3.png";
 
 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>
+            <Image src={MonthlyHit} alt="Monats Hit" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
     </div>
 
+    <p class="note">
+        Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot.
+    </p>
+
     <div class="circle-row">
-        <div class="circle" title="Bier">
+        <div class="circle whiskey-circle" title="Whiskey 1">
-            <span class="circle-label">Bier</span>
+            <Image src={Whiskey1} alt="Whiskey 1" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
-        <div class="circle" title="Wein">
+        <div class="circle whiskey-circle" title="Whiskey 2">
-            <span class="circle-label">Wein</span>
+            <Image src={Whiskey2} alt="Whiskey 2" class="circle-image" />
+            <span class="circle-label"></span>
         </div>
-        <div class="circle" title="Cocktails">
+        <div class="circle whiskey-circle" title="Whiskey 3">
-            <span class="circle-label">Cocktails</span>
+            <Image src={Whiskey3} alt="Whiskey 3" class="circle-image" />
+            <span class="circle-label"></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.
-    </p>
 </section>

src/components/EventsGrid.astro

@@ -2,9 +2,10 @@
 // src/components/EventsGrid.astro
 
 import HoverCard from "./HoverCard.astro";
+import type { ImageMetadata } from "astro";
 
 interface Event {
-	image: string;
+	image: ImageMetadata;
 	title: string;
 	date: string;
 	description: string;

src/components/Header.astro

@@ -1,5 +1,7 @@
 ---
 // src/components/Header.astro
+import { Image } from "astro:assets";
+import Logo from "../assets/images/Logo.png";
 const { url } = Astro;
 import "../styles/components/Header.css";
 ---
@@ -9,7 +11,7 @@ import "../styles/components/Header.css";
 	<div class="desktop-layout">
 		<div class="logo-container">
 			<a href="/">
-				<img src="/images/Logo.png" alt="Logo" class="logo" />
+				<Image src={Logo} alt="Logo" class="logo" />
 			</a>
 		</div>
 
@@ -31,7 +33,7 @@ import "../styles/components/Header.css";
 		<!-- Centered Logo -->
 		<div class="mobile-logo-container">
 			<a href="/">
-				<img src="/images/Logo.png" alt="Logo" class="logo" />
+				<Image src={Logo} alt="Logo" class="logo" />
 			</a>
 		</div>
 
@@ -65,16 +67,16 @@ import "../styles/components/Header.css";
 		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
 		
 		// Toggle menu when burger icon is clicked
-		burgerIcon.addEventListener('click', () => {
+		burgerIcon?.addEventListener('click', () => {
 			burgerIcon.classList.toggle('active');
-			mobileMenu.classList.toggle('active');
+			mobileMenu?.classList.toggle('active');
 		});
 		
 		// Close menu when a navigation link is clicked
 		mobileMenuLinks.forEach(link => {
 			link.addEventListener('click', () => {
-				burgerIcon.classList.remove('active');
+				burgerIcon?.classList.remove('active');
-				mobileMenu.classList.remove('active');
+				mobileMenu?.classList.remove('active');
 			});
 		});
 	});

src/components/Hero.astro

@@ -15,7 +15,7 @@ const { id } = Astro.props;
 
 			<p>Im Herzen von St.Gallen</p>
 
-			<a href="#" class="button">Aktuelles ↓</a>
+			<a href="#welcome" class="button">Aktuelles ↓</a>
 		</div>
 
 	</div>

src/components/HoverCard.astro

@@ -1,12 +1,18 @@
 ---
-// src/components/HoverCard.astro
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
 import "../styles/components/HoverCard.css";
-const {title, description, image = "", date} = Astro.props;
+const {title, description, image, date} = Astro.props as {
+	title: string;
+	description: string;
+	image: ImageMetadata;
+	date: string;
+};
 ---
 
 <article class="hover-card">
 	<div class="image-container">
-		<img class="card-image" src={image} alt={title} />
+		<Image class="card-image" src={image} alt={title} />
 	</div>
 
 	<div class="hover-text">
@@ -21,12 +27,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 as Node)) {
+					card.classList.remove('active');
+				}
+			});
 		});
 	});
-</script>
+</script>

src/components/ImageCarousel.astro

@@ -1,13 +1,15 @@
 ---
 // src/components/ImageCarousel.astro
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
 import "../styles/components/ImageCarousel.css";
 
-interface Image {
+interface ImageData {
-  src: string;
+  src: ImageMetadata;
   alt: string;
 }
 
-const { images = [], id } = Astro.props as { images: Image[], id?: string };
+const { images = [], id } = Astro.props as { images: ImageData[], id?: string };
 ---
 
 <section id={id} class="image-carousel-container">
@@ -21,7 +23,7 @@ const { images = [], id } = Astro.props as { images: Image[], id?: string };
       <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" />
+            <Image src={image.src} alt={image.alt} class="carousel-image" />
           </div>
         ))}
       </div>

src/components/Welcome.astro

@@ -1,6 +1,8 @@
 ---
 // src/components/Welcome.astro
+import { Image } from "astro:assets";
 import "../styles/components/Welcome.css"
+import WelcomeImg from "../assets/images/Welcome.png";
 
 const { id } = Astro.props;
 ---
@@ -52,7 +54,7 @@ const { id } = Astro.props;
 
 
 	<div class="welcome-image">
-		<img src="/images/Welcome.png" alt="Welcome background image" />
+		<Image src={WelcomeImg} alt="Welcome background image" />
 	</div>
 
 </section>

src/pages/index.astro

@@ -1,17 +1,33 @@
 ---
-// src/pages/index.astro
 import Layout from "../components/Layout.astro";
 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";
-import Contact from "../components/Contact.astro";
+
-import About from "../components/About.astro";
+// Import event images
+import eventKaraoke from "../assets/images/events/event_karaoke.jpg";
+import eventPubQuiz from "../assets/images/events/event_pub-quiz.jpg";
+import eventSchlager from "../assets/images/events/event_schlager-karaoke.jpeg";
+import eventAdvent from "../assets/images/events/event_advents-kalender.jpeg";
+import eventFerien from "../assets/images/events/event_ferien.jpeg";
+import eventNeujahr from "../assets/images/events/event_neujahrs-apero.jpeg";
+
+// Import gallery images
+import Gallery1 from "../assets/images/gallery/Gallery1.png";
+import Gallery2 from "../assets/images/gallery/Gallery2.png";
+import Gallery3 from "../assets/images/gallery/Gallery3.png";
+import Gallery4 from "../assets/images/gallery/Gallery4.png";
+import Gallery5 from "../assets/images/gallery/Gallery5.png";
+import Gallery6 from "../assets/images/gallery/Gallery6.png";
+import Gallery7 from "../assets/images/gallery/Gallery7.png";
+import Gallery8 from "../assets/images/gallery/Gallery8.png";
+import Gallery9 from "../assets/images/gallery/Gallery9.png";
 
 const events = [
-	{
+		{
-		image: "/images/karaoke.jpg",
+		image: eventKaraoke,
 		title: "Karaoke",
 		date: "Mittwoch - Samstag",
 		description: `
@@ -21,7 +37,7 @@ const events = [
 		`,
 	},
 	{
-		image: "/images/pub_quiz.jpg",
+		image: eventPubQuiz,
 		title: "Pub Quiz",
 		date: "Jeden Freitag",
 		description: `
@@ -31,59 +47,51 @@ const events = [
 			*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
 		`,
 	},
-	{
+		{
-		image: "/images/Event1.png",
+		image: eventSchlager,
-		title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
+		title: "Schlager Hüttenzauber Karaoke",
-		date: "Do, 04. September 2025",
+		date: "27. November - 19:00 Uhr",
 		description: `
-			<b>20:00 Uhr</b> <br>
+			Ab 19:00 Uhr Eintritt ist Frei! Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
-			<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",
+		image: eventAdvent,
-		title: "Karaoke",
+		title: "Adventskalender",
-		date: "Mittwoch - Samstag",
+		date: "03. Dezember - 20. Dezember 2025",
 		description: `
-			Bei uns gibt es Karaoke Mi-Sa!! <br>
+			Jeden Tag neue Überraschungen! Check unsere Social Media Stories!
-			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",
+		image: eventFerien,
-		title: "Karaoke",
+		title: "Weihnachtsferien",
-		date: "Mittwoch - Samstag",
+		date: "21. Dezember 2025 - 01. Januar 2026",
 		description: `
-			Bei uns gibt es Karaoke Mi-Sa!! <br>
+			Wir sind ab 02.01.2026 wieder wie gewohnt für euch da! 🍀. <br> Für Anfragen WA <a href="tel:+41772322770">077 232 27 70</a> Antwort innerhalb 48h
-			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: eventNeujahr,
-		title: "Kevin McFlannigan <br> Live Music im Gallus Pub!",
+		title: "Neujahrs-Apero",
-		date: "Sa, 27. September 2025",
+		date: "02. Januar 2026 - 18:00-20:00 Uhr",
 		description: `
-			<b>ab 20:00 Uhr</b> <br>
+			
-			Singer & Songwriter Kevin McFlannigan <br>
-			Eintritt ist Frei / Hutkollekte <br>
 		`,
 	},
+
 ];
 
 const images = [
-	{ src: "/images/Logo.png", alt: "Erstes Bild" },
+	{ src: Gallery7, alt: "Siebtes Bild" },
-	{ src: "/images/Logo.png", alt: "Zweites Bild" },
+	{ src: Gallery8, alt: "Achtes Bild" },
-	{ src: "/images/Logo.png", alt: "Drittes Bild" },
+	{ src: Gallery9, alt: "Neuntes Bild" },
-	{ src: "/images/Logo.png", alt: "Viertes Bild" },
+	{ src: Gallery6, alt: "Sechstes Bild" },
-	{ src: "/images/Logo.png", alt: "Fünftes Bild" },
+	{ src: Gallery1, alt: "Erstes Bild" },
-	{ src: "/images/Logo.png", alt: "Sechstes Bild" },
+	{ src: Gallery2, alt: "Zweites Bild" },
-	{ src: "/images/Logo.png", alt: "Siebtes Bild" },
+	{ src: Gallery3, alt: "Drittes Bild" },
-	{ src: "/images/Logo.png", alt: "Achtes Bild" },
+	{ src: Gallery4, alt: "Viertes Bild" },
-	{ src: "/images/Logo.png", alt: "Neuntes Bild" },
+	{ src: Gallery5, alt: "Fünftes Bild" },
-	{ src: "/images/Logo.png", alt: "Zehntes 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;
+  height: 35vh;
-  width: 9em;
+  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,8 +12,19 @@
 	flex-direction: column;
 }
 
-.hover-card:hover {
+/* Hover effects only for devices that support hover */
-	transform: translateY(-5px);
+@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 {
@@ -93,15 +104,7 @@
 	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
 }
 
-.hover-card:hover .hover-text {
+/* Active state for mobile tap functionality */
-	opacity: 1;
-}
-
-.hover-card:hover .card-image {
-	opacity: 0.1;
-}
-
-/* Active state for mobile click 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;
 	}
 }