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/Contact.astro

@@ -1,6 +1,6 @@
 ---
 import Layout from "../components/Layout.astro";
-import "../../styles/components/ContactForm.css";
+import "../styles/components/ContactForm.css";
 ---
 
 <Layout>

src/components/Drinks.astro

@@ -1,35 +1,49 @@
 ---
-import "../../styles/components/Drinks.css"
+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>
 
-    <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">
+            <Image src={Whiskey1} alt="Whiskey 1" class="circle-image" />
+            <span class="circle-label"></span>
+        </div>
+        <div class="circle whiskey-circle" title="Whiskey 2">
+            <Image src={Whiskey2} alt="Whiskey 2" class="circle-image" />
+            <span class="circle-label"></span>
+        </div>
+        <div class="circle whiskey-circle" title="Whiskey 3">
+            <Image src={Whiskey3} alt="Whiskey 3" class="circle-image" />
+            <span class="circle-label"></span>
+        </div>
+    </div>
 </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;
@@ -13,7 +14,7 @@ const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
 	events?: Event[];
 	id?: string;
 };
-import "../../styles/components/EventsGrid.css";
+import "../styles/components/EventsGrid.css";
 ---
 
 <h2 class="section-title">Events</h2>

src/components/Footer.astro

@@ -1,14 +1,12 @@
 ---
 // src/components/Footer.astro
-import "/styles/components/Footer.css"
+import "../styles/components/Footer.css"
 const currentYear = new Date().getFullYear();
 ---
 
-<footer class="footer">
+<footer class="footer" id="footer">
 	<div class="footer-content">
-		<div class="copyright">
-			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
-		</div>
+
 
 		<div class="footer-sections">
 			<div class="footer-section">
@@ -24,8 +22,8 @@ const currentYear = new Date().getFullYear();
 				<p>Gallus Pub</p>
 				<p>Metzgergasse 13</p>
 				<p>9000 St. Gallen</p>
-				<p>Reservierungen via Whatsapp</p>
 				<p><a href="tel:0772322770">077 232 27 70</a></p>
+				<p><a href="mailto:info@gallus-pub.ch">info@gallus-pub.ch</a></p>
 			</div>
 
 			<div class="footer-section">
@@ -33,12 +31,12 @@ const currentYear = new Date().getFullYear();
 				<p>Du planst einen Event?</p>
 				<p>Der "St.Gallerruum" im 2.OG</p>
 				<p>kann gemietet werden.</p>
-				<br/>
-				<p>Gerne öffnen wir auf Anfrage</p>
-				<p>auch ausserhalb unserer</p>
-				<p>Betriebszeiten.</p>
+				<p>Reservierungen via Whatsapp</p>
 			</div>
 		</div>
+		<div class="copyright">
+			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
+		</div>
 	</div>
 </footer>
 

src/components/Header.astro

@@ -1,28 +1,83 @@
 ---
 // src/components/Header.astro
+import { Image } from "astro:assets";
+import Logo from "../assets/images/Logo.png";
 const { url } = Astro;
-import "../../styles/components/Header.css";
+import "../styles/components/Header.css";
 ---
 
 <header class="header">
+	<!-- Desktop Layout -->
+	<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>
 
-	<!-- Hauptnavigation: immer Home, About, Contact -->
 		<nav class="nav-main">
-		<div>
+			<div class="desktop-menu">
 				<a href="/#hero">Home</a>
 				<a href="/#events">Events</a>
 				<a href="/#gallery">Galerie</a>
 				<a href="/#drinks">Drinks</a>
-			<a href="/#openings">Openings</a>
+				<a href="/#footer">Contact</a>
 				<!--<a href="/#about">About</a>
 				<a href="/#contact">Contact</a>-->
 			</div>
 		</nav>
+	</div>
+
+	<!-- Mobile Layout -->
+	<div class="mobile-layout">
+		<!-- Centered Logo -->
+		<div class="mobile-logo-container">
+			<a href="/">
+				<Image src={Logo} alt="Logo" class="logo" />
+			</a>
+		</div>
+
+		<!-- Burger Menu Below Logo -->
+		<div class="burger-menu">
+			<div class="burger-icon">
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+		</div>
+
+		<!-- Mobile Navigation Menu (Dropdown) -->
+		<div class="mobile-menu">
+			<a href="/#hero">Home</a>
+			<a href="/#events">Events</a>
+			<a href="/#gallery">Galerie</a>
+			<a href="/#drinks">Drinks</a>
+			<a href="/#footer">Contact</a>
+		</div>
+	</div>
 </header>
 
 <div class="header-spacer"></div>
+
+<script>
+	// Toggle mobile menu when burger icon is clicked
+	document.addEventListener('DOMContentLoaded', () => {
+		const burgerIcon = document.querySelector('.burger-icon');
+		const mobileMenu = document.querySelector('.mobile-menu');
+		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
+		
+		// Toggle menu when burger icon is clicked
+		burgerIcon?.addEventListener('click', () => {
+			burgerIcon.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');
+				mobileMenu?.classList.remove('active');
+			});
+		});
+	});
+</script>

src/components/Hero.astro

@@ -1,6 +1,6 @@
 ---
 // src/components/Hero.astro
-import "../../styles/components/Hero.css"
+import "../styles/components/Hero.css"
 
 const { id } = Astro.props;
 ---
@@ -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,18 +1,55 @@
 ---
-// src/components/HoverCard.astro
-import "../../styles/components/HoverCard.css";
-const { title, description, image = "", date } = Astro.props;
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+import "../styles/components/HoverCard.css";
+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>
 
-	<h3 class="card-title" set:html={title} />
-	<h4 class="card_date">{date}</h4>
-
 	<div class="hover-text">
+		<div>
 			<p set:html={description} />
 		</div>
+	</div>
 </article>
+
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const hoverCards = document.querySelectorAll('.hover-card');
+		
+		hoverCards.forEach(card => {
+			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>

src/components/ImageCarousel.astro

@@ -1,13 +1,15 @@
 ---
 // src/components/ImageCarousel.astro
-import "../../styles/components/ImageCarousel.css";
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+import "../styles/components/ImageCarousel.css";
 
-interface Image {
-  src: string;
+interface ImageData {
+  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/Layout.astro

@@ -2,9 +2,9 @@
 // src/components/Layout.astro
 import Header from "./Header.astro";
 import Footer from "./Footer.astro";
-import "../../styles/components/Layout.css"
-import "../../styles/variables.css"
-import "../../styles/index.css"
+import "../styles/components/Layout.css"
+import "../styles/variables.css"
+import "../styles/index.css"
 ---
 
 <!doctype html>

src/components/Welcome.astro

@@ -1,6 +1,8 @@
 ---
 // src/components/Welcome.astro
-import "../../styles/components/Welcome.css"
+import { Image } from "astro:assets";
+import "../styles/components/Welcome.css"
+import WelcomeImg from "../assets/images/Welcome.png";
 
 const { id } = Astro.props;
 ---
@@ -9,7 +11,8 @@ const { id } = Astro.props;
 
 	<div class="welcome-text">
 
-		<h2>Herzlich willkommen im Gallus Pub!</h2>
+		<h2>Herzlich willkommen im</h2>
+		<h2>Gallus Pub!</h2>
 
 		<p>
 			Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung
@@ -51,7 +54,7 @@ const { id } = Astro.props;
 
 
 	<div class="welcome-image">
-		<img src="/images/Welcome.png" alt="Welcome backgrount 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: `
@@ -32,38 +48,50 @@ const events = [
 		`,
 	},
 		{
-		image: "/images/crepes_sucette.jpg",
-		title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
-		date: "Do, 04. September 2025",
+		image: eventSchlager,
+		title: "Schlager Hüttenzauber Karaoke",
+		date: "27. November - 19:00 Uhr",
 		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/kevin_mcflannigan.jpeg",
-		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>
+			Ab 19:00 Uhr Eintritt ist Frei! Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
 		`,
 	},
+			{
+		image: eventAdvent,
+		title: "Adventskalender",
+		date: "03. Dezember - 20. Dezember 2025",
+		description: `
+			Jeden Tag neue Überraschungen! Check unsere Social Media Stories!
+		`,
+	},
+	{
+		image: eventFerien,
+		title: "Weihnachtsferien",
+		date: "21. Dezember 2025 - 01. Januar 2026",
+		description: `
+			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
+		`,
+	},
+	{
+		image: eventNeujahr,
+		title: "Neujahrs-Apero",
+		date: "02. Januar 2026 - 18:00-20:00 Uhr",
+		description: `
+			
+		`,
+	},
+
 ];
 
 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: Gallery7, alt: "Siebtes Bild" },
+	{ src: Gallery8, alt: "Achtes Bild" },
+	{ src: Gallery9, alt: "Neuntes Bild" },
+	{ src: Gallery6, alt: "Sechstes Bild" },
+	{ src: Gallery1, alt: "Erstes Bild" },
+	{ src: Gallery2, alt: "Zweites Bild" },
+	{ src: Gallery3, alt: "Drittes Bild" },
+	{ src: Gallery4, alt: "Viertes Bild" },
+	{ src: Gallery5, 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: 6em;
-  width: 6em;
+  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/Footer.css

@@ -13,9 +13,9 @@
 
 .copyright {
     text-align: center;
-    margin-bottom: 2rem;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .footer-sections {

src/styles/components/Header.css

@@ -0,0 +1,190 @@
+.header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	background-color: #0e0c0c;
+	z-index: 1000;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+	backdrop-filter: blur(5px);
+	width: 100%;
+	border-bottom: 1px solid #444;
+}
+
+.header-spacer {
+	height: 70px;
+	/* Should match the header height */
+}
+
+/* Desktop Layout */
+.desktop-layout {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1rem 2rem;
+	height: 70px;
+}
+
+.logo-container {
+	display: flex;
+	align-items: center;
+}
+
+.logo {
+	margin-left: 2em;
+	height: 4em;
+	width: auto;
+	transition: transform 0.3s ease;
+}
+
+.logo:hover {
+	transform: scale(1.05);
+}
+
+.nav-main {
+	display: flex;
+	align-items: center;
+}
+
+.nav-main a {
+	margin: 0 1rem;
+	color: white;
+	text-decoration: none;
+	font-size: 1rem;
+	cursor: pointer;
+}
+
+.nav-main a:hover {
+	color: #ffa500;
+}
+
+/* Mobile Layout */
+.mobile-layout {
+	display: none;
+	flex-direction: column;
+	align-items: center;
+	padding: 1rem;
+}
+
+.mobile-logo-container {
+	display: flex;
+	justify-content: center;
+	margin-bottom: 0.5rem;
+}
+
+.mobile-logo-container .logo {
+	margin: 0;
+	height: 3.5em;
+}
+
+/* Burger Menu Styles */
+.burger-menu {
+	display: flex;
+	justify-content: center;
+	cursor: pointer;
+	margin: 0.5rem 0;
+}
+
+.burger-icon {
+	width: 30px;
+	height: 24px;
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+
+.burger-icon span {
+	display: block;
+	height: 3px;
+	width: 100%;
+	background-color: white;
+	border-radius: 3px;
+	transition: all 0.3s ease;
+}
+
+.burger-icon.active span:nth-child(1) {
+	transform: translateY(10.5px) rotate(45deg);
+}
+
+.burger-icon.active span:nth-child(2) {
+	opacity: 0;
+}
+
+.burger-icon.active span:nth-child(3) {
+	transform: translateY(-10.5px) rotate(-45deg);
+}
+
+/* Mobile Menu Styles */
+.mobile-menu {
+	display: none;
+	width: 100%;
+	background-color: #0e0c0c;
+	flex-direction: column;
+	align-items: center;
+	padding: 0;
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	max-height: 0;
+	overflow: hidden;
+	transition: max-height 0.3s ease;
+	z-index: 999;
+}
+
+.mobile-menu.active {
+	max-height: 300px; /* Adjust based on content */
+	padding: 0.5rem 0;
+}
+
+.mobile-menu a {
+	margin: 0.5rem 0;
+	color: white;
+	text-decoration: none;
+	font-size: 1.2rem;
+	text-align: center;
+	width: 100%;
+	padding: 0.5rem 0;
+	border-bottom: 1px solid #333;
+}
+
+.mobile-menu a:last-child {
+	border-bottom: none;
+}
+
+.mobile-menu a:hover {
+	color: #ffa500;
+}
+
+@media (max-width: 768px) {
+	.header-spacer {
+		height: 120px; /* Adjusted for the taller mobile header */
+	}
+
+	/* Hide desktop layout, show mobile layout */
+	.desktop-layout {
+		display: none;
+	}
+
+	.mobile-layout {
+		display: flex;
+	}
+
+	/* Show mobile menu when active */
+	.mobile-menu.active {
+		display: flex;
+	}
+}
+
+@media (max-width: 480px) {
+	.header-spacer {
+		height: 110px; /* Slightly smaller for very small screens */
+	}
+
+	.mobile-logo-container .logo {
+		height: 3em;
+	}
+
+	.burger-icon {
+		width: 25px;
+		height: 20px;
+	}
+}

src/styles/components/Hero.css

@@ -1,4 +1,3 @@
-/* === Hero === */
 .hero-overlay {
 	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 1)), url('/images/Background.png');
 	background-size: cover;

src/styles/components/HoverCard.css

@@ -1,7 +1,7 @@
 .hover-card {
 	position: relative;
-	width: 350px;
-	height: 400px;
+	width: 25rem;
+	height: 25rem;
 	border-radius: var(--border-radius);
 	background-color: var(--color-accent-green);
 	box-shadow: var(--box-shadow);
@@ -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,11 +104,12 @@
 	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
 }
 
-.hover-card:hover .hover-text {
+/* Active state for mobile tap functionality */
+.hover-card.active .hover-text {
 	opacity: 1;
 }
 
-.hover-card:hover .card-image {
+.hover-card.active .card-image {
 	opacity: 0.1;
 }
 
@@ -110,5 +122,34 @@
 	.hover-card {
 		width: 100%;
 		max-width: 350px;
+		/* 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;
 	}
 }

styles/components/Header.css

@@ -1,92 +0,0 @@
-.header {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	background-color: #0e0c0c;
-	z-index: 1000;
-	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-	backdrop-filter: blur(5px);
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 1rem 2rem;
-	height: 70px;
-	width: 100%;
-	border-bottom: 1px solid #444;
-}
-
-.header-spacer {
-	height: 70px;
-	/* Should match the header height */
-}
-
-
-.logo-container {
-	display: flex;
-	align-items: center;
-}
-
-.logo {
-	margin-left: 2em;
-	height: 4em;
-	width: auto;
-	transition: transform 0.3s ease;
-}
-
-.logo:hover {
-	transform: scale(1.05);
-}
-
-.nav-main {
-	display: flex;
-	align-items: center;
-}
-
-.nav-main a {
-	margin: 0 1rem;
-	color: white;
-	text-decoration: none;
-	font-size: 1rem;
-	cursor: pointer;
-}
-
-.nav-main a:hover {
-	color: #ffa500;
-}
-
-@media (max-width: 768px) {
-	.header {
-		height: 65px;
-	}
-
-	.logo {
-		margin-left: 1em;
-		height: 3em;
-	}
-
-	.header-spacer {
-		height: 65px;
-	}
-}
-
-@media (max-width: 480px) {
-	.header {
-		padding: 0.5rem;
-		height: 60px;
-	}
-
-	.logo {
-		margin-left: 0.5em;
-		height: 2.5em;
-	}
-
-	.nav-main a {
-		margin: 0 0.5rem;
-		font-size: 0.9rem;
-	}
-
-	.header-spacer {
-		height: 60px;
-	}
-}