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,5 +1,10 @@
 ---
+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;
 ---
@@ -17,7 +22,7 @@ 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" />
+            <Image src={MonthlyHit} alt="Monats Hit" class="circle-image" />
             <span class="circle-label"></span>
         </div>
         <div>Mate Vodka</div>
@@ -29,15 +34,15 @@ const { id } = Astro.props;
 
     <div class="circle-row">
         <div class="circle whiskey-circle" title="Whiskey 1">
-            <img src="/images/Whiskey1.png" alt="Whiskey 1" class="circle-image" />
+            <Image src={Whiskey1} 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" />
+            <Image src={Whiskey2} 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" />
+            <Image src={Whiskey3} alt="Whiskey 3" class="circle-image" />
             <span class="circle-label"></span>
         </div>
     </div>

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,11 +1,18 @@
 ---
+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">
@@ -39,7 +46,7 @@ const {title, description, image = "", date} = Astro.props;
 
 			// Close card when clicking outside (mobile only)
 			document.addEventListener('click', (e) => {
-				if (window.innerWidth <= 768 && !card.contains(e.target)) {
+				if (window.innerWidth <= 768 && !card.contains(e.target as Node)) {
 					card.classList.remove('active');
 				}
 			});

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

@@ -5,12 +5,29 @@ 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: `
@@ -20,7 +37,7 @@ const events = [
 		`,
 	},
 	{
-		image: "/images/pub_quiz.jpg",
+		image: eventPubQuiz,
 		title: "Pub Quiz",
 		date: "Jeden Freitag",
 		description: `
@@ -30,52 +47,51 @@ const events = [
 			*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
 		`,
 	},
-    {
+		{
-        image: "/images/Event3.png",
+		image: eventSchlager,
-        title: "Karaoke tes",
+		title: "Schlager Hüttenzauber Karaoke",
-        date: "Mittwoch - Samstag",
+		date: "27. November - 19:00 Uhr",
-        description: `
+		description: `
+			Ab 19:00 Uhr Eintritt ist Frei! Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
 		`,
-    },
+	},
-    {
+			{
-        image: "/images/Event2.png",
+		image: eventAdvent,
-        title: "Karaoke test",
+		title: "Adventskalender",
-        date: "Mittwoch - Samstag",
+		date: "03. Dezember - 20. Dezember 2025",
-        description: `
+		description: `
+			Jeden Tag neue Überraschungen! Check unsere Social Media Stories!
 		`,
-    },
+	},
-    {
+	{
-        image: "/images/Event1.png",
+		image: eventFerien,
-        title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
+		title: "Weihnachtsferien",
-        date: "Do, 04. September 2025",
+		date: "21. Dezember 2025 - 01. Januar 2026",
-        description: `
+		description: `
-			<b>ab 19 Uhr geht’s los, bis max. 21.30 Uhr</b> <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
-            Kosten? CHF 10 pro Spielgast
-			Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
 		`,
-    },
+	},
-    {
+	{
-        image: "/images/Event4.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: `
+		description: `
-			<b>ab 20:00 Uhr</b> <br>
+			
-			Eintritt ist Frei / Hutkollekte <br>
-			Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
 		`,
-    },
+	},
+
 ];
 
 const images = [
-	{ src: "/images/Gallery7.png", alt: "Siebtes Bild" },
+	{ src: Gallery7, alt: "Siebtes Bild" },
-	{ src: "/images/Gallery8.png", alt: "Achtes Bild" },
+	{ src: Gallery8, alt: "Achtes Bild" },
-	{ src: "/images/Gallery9.png", alt: "Neuntes Bild" },
+	{ src: Gallery9, alt: "Neuntes Bild" },
-	{ src: "/images/Gallery6.png", alt: "Sechstes Bild" },
+	{ src: Gallery6, alt: "Sechstes Bild" },
-	{ src: "/images/Gallery1.png", alt: "Erstes Bild" },
+	{ src: Gallery1, alt: "Erstes Bild" },
-	{ src: "/images/Gallery2.png", alt: "Zweites Bild" },
+	{ src: Gallery2, alt: "Zweites Bild" },
-	{ src: "/images/Gallery3.png", alt: "Drittes Bild" },
+	{ src: Gallery3, alt: "Drittes Bild" },
-	{ src: "/images/Gallery4.png", alt: "Viertes Bild" },
+	{ src: Gallery4, alt: "Viertes Bild" },
-	{ src: "/images/Gallery5.png", alt: "Fünftes Bild" },
+	{ src: Gallery5, alt: "Fünftes Bild" },
 ];
 ---