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

Reviewed-on: #3

.woodpecker.yml

@@ -1,26 +1,16 @@
-pipeline:
+steps:
-  build:
-    image: node:20-alpine
-    commands:
-      - npm ci
-      - npm run build
-    when:
-      branch: main
-      event: [push, pull_request]
   deploy:
-    depends_on: [build]
+    image: node:20
-    image: flyio/flyctl:latest
+    environment:
-    secrets: [fly_api_token]
+      FLY_API_TOKEN:
+        from_secret: FLY_API_TOKEN
     commands:
-      - flyctl deploy --remote-only
+      - curl -L https://fly.io/install.sh | sh
+      - export PATH="$HOME/.fly/bin:$PATH"
+      - flyctl deploy --config fly.toml --app gallus-pub
+
 when:
-      branch: main
+  branch:
-      event: push
+    - main
-
+  event:
-branches:
+    - push
-  include: [main, dev]
-
-cache:
-  mount:
-    - node_modules
-    - .npm

Dockerfile

@@ -1,25 +1,22 @@
 FROM node:20-alpine AS build
 
 WORKDIR /app
-
 COPY package*.json ./
 RUN npm ci
-
+COPY . .
-COPY ../backup/backup .
+# Ensure CSS variables are present
-
+RUN mkdir -p public/styles
+RUN cp -r styles/* public/styles/ || true
 RUN npm run build
 
 FROM node:20-alpine AS production
 
 WORKDIR /app
-
 RUN npm install -g serve
-
+COPY --from=build /app/dist ./dist
-COPY --from=build /app/dist /app
 
 EXPOSE 3000
-
+CMD ["serve", "-s", "dist", "-l", "3000"]
-CMD ["serve", "-s", ".", "-l", "3000"]
 
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD wget -qO- http://localhost:3000/ || exit 1

fly.toml

@@ -1,5 +1,5 @@
 app = "gallus-pub"
-primary_region = "fra" # Frankfurt region, change if needed
+primary_region = "fra"
 kill_signal = "SIGINT"
 kill_timeout = 5
 
@@ -26,7 +26,7 @@ kill_timeout = 5
   [[http_service.checks]]
     interval = "30s"
     timeout = "5s"
-    grace_period = "10s"
+    grace_period = "30s"
     method = "GET"
     path = "/"
     protocol = "http"

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

@@ -0,0 +1,42 @@
+---
+import Layout from "../components/Layout.astro";
+import "../styles/components/ContactForm.css";
+---
+
+<Layout>
+	<div class="contact-container">
+		<h1 class="contact-title">Kontakt</h1>
+		
+		<form class="contact-form">
+			<div class="form-group">
+				<label for="name">Name</label>
+				<input type="text" id="name" name="name" required>
+			</div>
+			
+			<div class="form-group">
+				<label for="email">E-Mail</label>
+				<input type="email" id="email" name="email" required>
+			</div>
+			
+			<div class="form-group">
+				<label for="subject">Betreff</label>
+				<input type="text" id="subject" name="subject" required>
+			</div>
+			
+			<div class="form-group">
+				<label for="message">Nachricht</label>
+				<textarea id="message" name="message" rows="5" required></textarea>
+			</div>
+			
+			<button type="submit" class="submit-button">Senden</button>
+		</form>
+		
+		<div class="whatsapp-container">
+			<p>Oder kontaktiere uns direkt über WhatsApp:</p>
+			<a href="https://wa.me/41772322770" class="whatsapp-link" target="_blank" rel="noopener noreferrer">
+				<span class="whatsapp-icon">📱</span>
+				<span>WhatsApp Chat starten</span>
+			</a>
+		</div>
+	</div>
+</Layout>

src/components/Drinks.astro

@@ -1,33 +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 class="Drinks">
+<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,26 +2,31 @@
 // src/components/EventsGrid.astro
 
 import HoverCard from "./HoverCard.astro";
+import type { ImageMetadata } from "astro";
+
 interface Event {
-    image: string;
+	image: ImageMetadata;
 	title: string;
-  date: Date;
+	date: string;
 	description: string;
 }
-const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
+const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
-import '../../styles/components/EventsGrid.css';
+	events?: Event[];
+	id?: string;
+};
+import "../styles/components/EventsGrid.css";
 ---
 
-<section class="events-gird container">
+<h2 class="section-title">Events</h2>
-
+<section id={id} class="events-gird container">
-	{events.map((event: Event)  => (
+	{
-
+		events.map((event: Event) => (
 			<HoverCard
 				title={event.title}
 				date={event.date}
 				description={event.description}
 				image={event.image}
 			/>
-    ))}
+		))
-
+	}
 </section>

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>Reservierungen via Whatsapp</p>
-				<p>Gerne öffnen wir auf Anfrage</p>
-				<p>auch ausserhalb unserer</p>
-				<p>Betriebszeiten.</p>
 			</div>
 		</div>
+		<div class="copyright">
+			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
+		</div>
 	</div>
 </footer>
 

src/components/Header.astro

@@ -1,39 +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 class="desktop-menu">
-		<div class="dropdown">
+				<a href="/#hero">Home</a>
-
+				<a href="/#events">Events</a>
-			<a href="/" class="dropdbtn">Home</a>
+				<a href="/#gallery">Galerie</a>
-
+				<a href="/#drinks">Drinks</a>
-			<div class="dropdown-content">
+				<a href="/#footer">Contact</a>
-
+				<!--<a href="/#about">About</a>
-				<a href="/events">Events</a>
+				<a href="/#contact">Contact</a>-->
-				<a href="/gallery">Gallery</a>
-				<a href="/openings">Openings</a>
-				<a href="/drinks">Drinks</a>
-
 			</div>
-
-		</div>
-
-		<a href="/about">About</a>
-		<a href="/contact">Contact</a>
-
 		</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,9 +1,11 @@
 ---
 // src/components/Hero.astro
-import "../../styles/components/Hero.css"
+import "../styles/components/Hero.css"
+
+const { id } = Astro.props;
 ---
 
-<section class="hero container">
+<section id={id} class="hero container">
 
 	<div class="hero-overlay">
 
@@ -13,7 +15,7 @@ import "../../styles/components/Hero.css"
 
 			<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,21 +1,55 @@
 ---
-// src/components/HoverCard.astro
+import { Image } from "astro:assets";
-import "../../styles/components/HoverCard.css"
+import type { ImageMetadata } from "astro";
-const { title, description, image = "", date} = Astro.props;
+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">{title}</h3>
-	<h4 class="card_date">{date}</h4>
-
 	<div class="hover-text">
 		<div>
-			<p>{description}</p>
+			<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

@@ -0,0 +1,116 @@
+---
+// src/components/ImageCarousel.astro
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+import "../styles/components/ImageCarousel.css";
+
+interface ImageData {
+  src: ImageMetadata;
+  alt: string;
+}
+
+const { images = [], id } = Astro.props as { images: ImageData[], id?: string };
+---
+
+<section id={id} class="image-carousel-container">
+  <h2 class="section-title">Galerie</h2>
+  <div class="image-carousel">
+    <button class="nav-button prev-button" aria-label="Previous image">
+      <span class="arrow">&#10094;</span>
+    </button>
+    
+    <div class="carousel-images">
+      <div class="carousel-track">
+        {images.map((image, index) => (
+          <div class="carousel-slide" data-index={index}>
+            <Image src={image.src} alt={image.alt} class="carousel-image" />
+          </div>
+        ))}
+      </div>
+    </div>
+    
+    <button class="nav-button next-button" aria-label="Next image">
+      <span class="arrow">&#10095;</span>
+    </button>
+  </div>
+  
+  <div class="carousel-indicators">
+    {images.map((_, index) => (
+      <button 
+        class="indicator-dot" 
+        data-index={index} 
+        aria-label={`Go to slide ${index + 1}`}
+      ></button>
+    ))}
+  </div>
+</section>
+
+<script>
+  // Initialize carousel functionality
+  function initCarousel() {
+    const carousel = document.querySelector('.image-carousel');
+    const track = document.querySelector('.carousel-track');
+    const slides = document.querySelectorAll('.carousel-slide');
+    const prevButton = document.querySelector('.prev-button');
+    const nextButton = document.querySelector('.next-button');
+    const indicators = document.querySelectorAll('.indicator-dot');
+    
+    if (!carousel || !track || !slides.length || !prevButton || !nextButton) return;
+    
+    let currentIndex = 0;
+    const slideCount = slides.length;
+    
+    // Set initial active state
+    updateCarousel();
+    
+    // Add event listeners
+    prevButton.addEventListener('click', () => {
+      currentIndex = (currentIndex - 1 + slideCount) % slideCount;
+      updateCarousel();
+    });
+    
+    nextButton.addEventListener('click', () => {
+      currentIndex = (currentIndex + 1) % slideCount;
+      updateCarousel();
+    });
+    
+    // Add click events to indicators
+    indicators.forEach((dot, index) => {
+      dot.addEventListener('click', () => {
+        currentIndex = index;
+        updateCarousel();
+      });
+    });
+    
+    // Function to update carousel display
+    function updateCarousel() {
+      // Update active class on slides
+      slides.forEach((slide, index) => {
+        const position = index - currentIndex;
+        
+        // Remove all position classes
+        slide.classList.remove('prev', 'current', 'next');
+        
+        // Add appropriate position class
+        if (position === -1 || (position === slideCount - 1 && currentIndex === 0)) {
+          slide.classList.add('prev');
+        } else if (position === 0) {
+          slide.classList.add('current');
+        } else if (position === 1 || (position === -(slideCount - 1) && currentIndex === slideCount - 1)) {
+          slide.classList.add('next');
+        }
+      });
+      
+      // Update indicators
+      indicators.forEach((dot, index) => {
+        dot.classList.toggle('active', index === currentIndex);
+      });
+    }
+  }
+  
+  // Run initialization when DOM is loaded
+  document.addEventListener('DOMContentLoaded', initCarousel);
+  
+  // Re-initialize on astro:page-load for Astro View Transitions
+  document.addEventListener('astro:page-load', initCarousel);
+</script>

src/components/Layout.astro

@@ -2,6 +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"
 ---
 
 <!doctype html>
@@ -13,8 +16,6 @@ import Footer from "./Footer.astro";
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>Gallus Pub</title>
-		<link rel="stylesheet" href="/styles/variables.css" />
-		<link rel="stylesheet" href="/styles/index.css" />
 	</head>
 
 	<body>

src/components/Welcome.astro

@@ -1,13 +1,18 @@
 ---
 // 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;
 ---
 
-<section class="welcome container">
+<section id={id} class="welcome container">
 
 	<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
@@ -49,7 +54,7 @@ import "../../styles/components/Welcome.css"
 
 
 	<div class="welcome-image">
-		<img src="/images/Welcome.png" alt="Welcome backgrount image" />
+		<Image src={WelcomeImg} alt="Welcome background image" />
 	</div>
 
 </section>

src/pages/Contact.astro

@@ -1,11 +0,0 @@
----
-import Layout from "../components/Layout.astro";
----
-
-<Layout>
-
-	<h1>Contact</h1>
-
-	<p>Hier findest du alle aktuellen und kommenden Contact im Gallus Pub.</p>
-	
-</Layout>

src/pages/index.astro

@@ -1,23 +1,104 @@
 ---
-// 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 EventsGrid from "../components/EventsGrid.astro";
 import Drinks from "../components/Drinks.astro";
+import ImageCarousel from "../components/ImageCarousel.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/Logo.png', title: 'Karaoke Night', date: 'Mi, 23. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
+		{
-  {image: '/images/Logo.png', title: 'Pub Quiz', date: 'Fr, 25. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptuaLorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' },
+		image: eventKaraoke,
-  {image: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
+		title: "Karaoke",
-  {image: '/images/Logo.png', title: 'Cocktail-Abend', date: 'So, 27. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua' }
+		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: eventPubQuiz,
+		title: "Pub Quiz",
+		date: "Jeden Freitag",
+		description: `
+			Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>
+			Jede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>
+			Auch Einzelpersonen sind herzlich willkommen! <br>
+			*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
+		`,
+	},
+		{
+		image: eventSchlager,
+		title: "Schlager Hüttenzauber Karaoke",
+		date: "27. November - 19:00 Uhr",
+		description: `
+			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: 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" },
 ];
 ---
 
 <Layout>
-
+	<Hero id="hero" />
-	<Hero />
+	<Welcome id="welcome" />
-	<Welcome />
+	<EventsGrid id="events" events={events} />
-	<EventsGrid events={events} />
+	<ImageCarousel id="gallery" images={images} />
-	<Drinks />
+	<Drinks id="drinks" />
 </Layout>

src/public/favicon.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+    <style>
+        path { fill: #000; }
+        @media (prefers-color-scheme: dark) {
+            path { fill: #FFF; }
+        }
+    </style>
+</svg>

src/styles/components/ContactForm.css

@@ -0,0 +1,125 @@
+.contact-container {
+  max-width: 800px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.contact-title {
+  margin-top: 70px;
+  padding-top: 2rem;
+  text-align: center;
+  margin-bottom: 2rem;
+  font-size: 2.5rem;
+  color: var(--color-text);
+}
+
+.contact-form {
+  background-color: rgba(33, 59, 40, 0.05);
+  padding: 2rem;
+  border-radius: 8px;
+  margin-bottom: 2rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
+.form-group input,
+.form-group textarea {
+  width: 100%;
+  padding: 0.75rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  font-family: inherit;
+  font-size: 1rem;
+  background-color: #fff;
+}
+
+.form-group textarea {
+  resize: vertical;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
+  outline: none;
+  border-color: #213b28;
+  box-shadow: 0 0 0 2px rgba(33, 59, 40, 0.2);
+}
+
+.submit-button {
+  background-color: #213b28;
+  color: white;
+  border: none;
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  font-weight: bold;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.submit-button:hover {
+  background-color: #2a4c35;
+}
+
+.whatsapp-container {
+  text-align: center;
+  margin: 2rem 0;
+}
+
+.whatsapp-link {
+  display: inline-flex;
+  align-items: center;
+  background-color: #25D366;
+  color: white;
+  text-decoration: none;
+  padding: 0.75rem 1.5rem;
+  border-radius: 4px;
+  font-weight: bold;
+  transition: background-color 0.3s ease;
+  margin-top: 0.5rem;
+}
+
+.whatsapp-link:hover {
+  background-color: #128C7E;
+}
+
+.whatsapp-icon {
+  font-size: 1.2rem;
+  margin-right: 0.5rem;
+  display: inline-block;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .contact-form {
+    padding: 1.5rem;
+  }
+  
+  .contact-title {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .contact-form {
+    padding: 1rem;
+  }
+  
+  .contact-title {
+    font-size: 1.75rem;
+  }
+  
+  .submit-button,
+  .whatsapp-link {
+    width: 100%;
+    justify-content: center;
+  }
+}

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;
+  height: 35vh;
-  width: 6em;
+  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/EventsGrid.css

@@ -1,3 +1,11 @@
+.section-title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
 .events-gird {
   display: flex;
   flex-wrap: wrap;

src/styles/components/Footer.css

@@ -13,9 +13,9 @@
 
 .copyright {
     text-align: center;
-    margin-bottom: 2rem;
+    margin-top: 2rem;
-    padding-bottom: 1rem;
+    padding-top: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    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

@@ -0,0 +1,65 @@
+.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;
+	background-position: center;
+	background-repeat: no-repeat;
+	margin-top: 2em;
+}
+
+h1 {
+	padding-top: 2em;
+}
+
+.hero {
+	position: relative;
+	height: 70vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: white;
+	margin-bottom: 2rem;
+}
+
+.hero-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	/* Background is set in the component */
+}
+
+.hero-content {
+	position: relative;
+	text-align: center;
+	z-index: 1;
+}
+
+.hero-content h1 {
+	font-size: 4rem;
+	font-weight: bold;
+}
+
+.hero-content p {
+	margin: 0.5rem 0 1rem 0;
+	font-size: 1.2rem;
+}
+
+.button {
+	margin-top: 2rem;
+	padding: 0.8rem 2rem;
+	background: linear-gradient(45deg, #ffa500, #ff7f00);
+	color: white;
+	border: none;
+	border-radius: 30px;
+	font-size: 1rem;
+	font-weight: bold;
+	text-decoration: none;
+	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+	transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.button:hover {
+	transform: translateY(-3px);
+	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
+}

src/styles/components/HoverCard.css

@@ -0,0 +1,155 @@
+.hover-card {
+	position: relative;
+	width: 25rem;
+	height: 25rem;
+	border-radius: var(--border-radius);
+	background-color: var(--color-accent-green);
+	box-shadow: var(--box-shadow);
+	transition: transform var(--transition-standard);
+	overflow: hidden;
+	margin: var(--margin-standard);
+	display: flex;
+	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;
+	color: var(--color-accent-beige);
+	font-size: var(--font-size-medium);
+	text-align: center;
+	order: -2;
+}
+
+.card_date {
+	padding: 0 15px 15px 15px;
+	margin: 0;
+	color: var(--color-accent-beige);
+	font-size: var(--font-size-small);
+	text-align: center;
+	font-style: italic;
+	order: -1;
+}
+
+.image-container {
+	flex-grow: 1;
+	position: relative;
+	overflow: hidden;
+}
+
+.card-image {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	transition: opacity 0.3s ease;
+}
+
+.hover-text {
+	font-size: var(--font-size-small-medium);
+	text-align: center;
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-color: var(--color-accent-green-transparent);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 20px;
+	opacity: 0;
+	transition: opacity var(--transition-standard);
+}
+
+.hover-text div {
+	color: var(--color-accent-beige);
+	text-align: center;
+	max-height: 100%;
+	width: 100%;
+	overflow-y: auto;
+	padding-right: 5px;
+}
+
+.hover-text div::-webkit-scrollbar {
+	width: 5px;
+}
+
+.hover-text div::-webkit-scrollbar-track {
+	background: rgba(0, 0, 0, 0.1);
+	border-radius: 10px;
+}
+
+.hover-text div::-webkit-scrollbar-thumb {
+	background: var(--color-accent-beige);
+	border-radius: 10px;
+}
+
+.hover-text div {
+	scrollbar-width: thin;
+	scrollbar-color: var(--color-accent-beige) rgba(0, 0, 0, 0.1);
+}
+
+/* Active state for mobile tap functionality */
+.hover-card.active .hover-text {
+	opacity: 1;
+}
+
+.hover-card.active .card-image {
+	opacity: 0.1;
+}
+
+.hover-text p {
+	margin: 0;
+	padding: 0;
+}
+
+@media (max-width: 768px) {
+	.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;
+	}
+}

src/styles/components/ImageCarousel.css

@@ -0,0 +1,176 @@
+/* styles/components/ImageCarousel.css */
+
+.image-carousel-container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+.section-title {
+  text-align: center;
+  margin-bottom: 1.5rem;
+  font-size: 2rem;
+  font-weight: bold;
+  color: var(--color-text);
+}
+
+.image-carousel {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  height: 400px;
+}
+
+.carousel-images {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.carousel-track {
+  display: flex;
+  height: 100%;
+  position: relative;
+}
+
+.carousel-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: all 0.5s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0.8);
+  z-index: 1;
+}
+
+/* Current slide - center and fully visible */
+.carousel-slide.current {
+  opacity: 1;
+  transform: scale(1);
+  z-index: 3;
+}
+
+/* Previous slide - left side, partially visible */
+.carousel-slide.prev {
+  opacity: 0.7;
+  transform: translateX(-30%) scale(0.85);
+  z-index: 2;
+}
+
+/* Next slide - right side, partially visible */
+.carousel-slide.next {
+  opacity: 0.7;
+  transform: translateX(30%) scale(0.85);
+  z-index: 2;
+}
+
+.carousel-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Navigation buttons */
+.nav-button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(255, 255, 255, 0.7);
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+  transition: background-color 0.3s ease;
+}
+
+.nav-button:hover {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.prev-button {
+  left: 10px;
+}
+
+.next-button {
+  right: 10px;
+}
+
+.arrow {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+/* Indicators */
+.carousel-indicators {
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  gap: 8px;
+}
+
+.indicator-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #ccc;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.indicator-dot.active {
+  background-color: #333;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .image-carousel {
+    height: 300px;
+  }
+  
+  .carousel-slide.prev,
+  .carousel-slide.next {
+    opacity: 0.5;
+    transform: scale(0.7);
+  }
+  
+  .carousel-slide.prev {
+    transform: translateX(-20%) scale(0.7);
+  }
+  
+  .carousel-slide.next {
+    transform: translateX(20%) scale(0.7);
+  }
+}
+
+@media (max-width: 480px) {
+  .image-carousel {
+    height: 250px;
+  }
+  
+  .carousel-slide.prev,
+  .carousel-slide.next {
+    display: none;
+  }
+  
+  .nav-button {
+    width: 30px;
+    height: 30px;
+  }
+}

src/styles/components/Layout.css

@@ -0,0 +1,15 @@
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+}
+
+main {
+    flex: 1;
+    padding: 0 1rem;
+}

src/styles/index.css

@@ -5,9 +5,15 @@
 	box-sizing: border-box;
 }
 
+/* Add smooth scrolling behavior */
+html {
+	scroll-behavior: smooth;
+}
+
 body {
-	font-family: var(--font-family-primary);
+	font-family: var(--font-family-primary), serif;
-	background-color: var(--color-background);
+	background-color: var(--color-background, #000000);
+	background: #000000;
 	color: var(--color-text);
 	line-height: var(--line-height);
 }
@@ -18,3 +24,12 @@ body {
 	width: var(--container-width);
 	margin: 0 auto;
 }
+
+
+a {
+	color: #ffa500;
+}
+
+a:hover {
+	text-decoration: none;
+}

src/styles/variables.css

@@ -0,0 +1,34 @@
+:root {
+	/* Colors */
+	--color-background: #000000 !important;
+	--color-text: #f5f5f5;
+	--color-accent-green: #213b28;
+	--color-accent-beige: #ceb39b;
+	--color-accent-green-transparent: rgba(33, 59, 40, 0.95);
+	--color-shadow: rgba(0, 0, 0, 0.2);
+	--color-orange1: #ffa500;
+
+	/* Font Sizes */
+	--font-family-primary: 'Georgia', serif;
+	--font-size-small: 1rem;
+	--font-size-small-medium: 1.2rem;
+	--font-size-medium: 1.5rem;
+	--font-size-large: 2rem;
+	--line-height: 1.6;
+
+
+	--container-width: 100%;
+	--container-max-width: 1600px;
+	--padding-vertical: 2rem;
+	--padding-horizontal: 0;
+	--margin-standard: 1rem;
+	--gap-standard: 30px;
+
+	--border-radius: 8px;
+	--box-shadow: 0 4px 8px var(--color-shadow);
+	--transition-standard: 0.3s ease;
+
+
+	--breakpoint-mobile: 768px;
+	--breakpoint-desktop: 1600px;
+}

styles/components/Header.css

@@ -1,94 +0,0 @@
-.header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(26, 26, 26, 0.95);
-    z-index: 1000;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-    backdrop-filter: blur(5px);
-}
-
-
-.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;
-    margin-right: 377px;
-}
-
-.nav-main a,
-.dropdbtn {
-    margin: 0 1rem;
-    color: white;
-    text-decoration: none;
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-.nav-main a:hover,
-.dropdbtn:hover {
-    color: #ffa500;
-}
-
-/* Dropdown für Home */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #0e0c0c;
-    min-width: 160px;
-    z-index: 1;
-    border: 1px solid #444;
-    border-radius: 4px;
-}
-
-.dropdown-content a {
-    color: #f5f5f5;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-    display: block;
-}
-
-.dropdown-content a:hover {
-    background-color: #1f1a1a;
-    color: #ffa500;
-}
-
-.dropdown:hover .dropdown-content {
-    display: block;
-}
-
-@media (max-width: 768px) {
-    .nav-container {
-        padding: 1rem;
-    }
-
-    .nav-links {
-        gap: 1rem;
-    }
-}

styles/components/Hero.css

@@ -1,128 +0,0 @@
-/* === Header & Nav === */
-.header {
-    background-color: #0e0c0c;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 1rem 2rem;
-    border-bottom: 1px solid #444;
-}
-
-
-.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;
-    background-position: center;
-    background-repeat: no-repeat;
-    margin-top: 2em;
-}
-
-h1 {
-    padding-top: 2em;
-}
-
-.nav-main {
-    display: flex;
-    align-items: center;
-    margin-right: 377px;
-}
-
-.nav-main a,
-.dropdbtn {
-    margin: 0 1rem;
-    color: white;
-    text-decoration: none;
-    font-size: 1rem;
-    cursor: pointer;
-}
-
-.nav-main a:hover,
-.dropdbtn:hover {
-    color: #ffa500;
-}
-
-/* Dropdown für Home */
-.dropdown {
-    position: relative;
-    display: inline-block;
-}
-
-.dropdown-content {
-    display: none;
-    position: absolute;
-    background-color: #0e0c0c;
-    min-width: 160px;
-    z-index: 1;
-    border: 1px solid #444;
-    border-radius: 4px;
-}
-
-.dropdown-content a {
-    color: #f5f5f5;
-    padding: 0.5rem 1rem;
-    text-decoration: none;
-    display: block;
-}
-
-.dropdown-content a:hover {
-    background-color: #1f1a1a;
-    color: #ffa500;
-}
-
-.dropdown:hover .dropdown-content {
-    display: block;
-}
-
-.hero {
-    position: relative;
-    height: 70vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: white;
-    margin-bottom: 2rem;
-}
-
-.hero-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    /* Background is set in the component */
-}
-
-.hero-content {
-    position: relative;
-    text-align: center;
-    z-index: 1;
-}
-
-.hero-content h1 {
-    font-size: 4rem;
-    font-weight: bold;
-}
-
-.hero-content p {
-    margin: 0.5rem 0 1rem 0;
-    font-size: 1.2rem;
-}
-
-.button {
-    margin-top: 2rem;
-    padding: 0.8rem 2rem;
-    background: linear-gradient(45deg, #ffa500, #ff7f00);
-    color: white;
-    border: none;
-    border-radius: 30px;
-    font-size: 1rem;
-    font-weight: bold;
-    text-decoration: none;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
-    transition: transform 0.2s, box-shadow 0.2s;
-}
-
-.button:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
-}

styles/components/HoverCard.css

@@ -1,112 +0,0 @@
-.hover-card {
-  position: relative;
-  width: 350px;
-  height: 400px;
-  border-radius: var(--border-radius);
-  background-color: var(--color-accent-green);
-  box-shadow: var(--box-shadow);
-  transition: transform var(--transition-standard);
-  overflow: hidden;
-  margin: var(--margin-standard);
-  display: flex;
-  flex-direction: column;
-}
-
-.hover-card:hover {
-  transform: translateY(-5px);
-}
-
-.card-title {
-  padding: 15px 15px 5px 15px;
-  margin: 0;
-  color: var(--color-accent-beige);
-  font-size: var(--font-size-medium);
-  text-align: center;
-  order: -2;
-}
-
-.card_date {
-  padding: 0 15px 15px 15px;
-  margin: 0;
-  color: var(--color-accent-beige);
-  font-size: var(--font-size-small);
-  text-align: center;
-  font-style: italic;
-  order: -1;
-}
-
-.image-container {
-  flex-grow: 1;
-  position: relative;
-  overflow: hidden;
-}
-
-.card-image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: opacity 0.3s ease;
-}
-
-.hover-text {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--color-accent-green-transparent);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 20px;
-  opacity: 0;
-  transition: opacity var(--transition-standard);
-}
-
-.hover-text div {
-  color: var(--color-accent-beige);
-  text-align: center;
-  max-height: 100%;
-  width: 100%;
-  overflow-y: auto;
-  padding-right: 5px;
-}
-
-.hover-text div::-webkit-scrollbar {
-  width: 5px;
-}
-
-.hover-text div::-webkit-scrollbar-track {
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-}
-
-.hover-text div::-webkit-scrollbar-thumb {
-  background: var(--color-accent-beige);
-  border-radius: 10px;
-}
-
-.hover-text div {
-  scrollbar-width: thin;
-  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;
-}
-
-.hover-text p {
-  margin: 0;
-  padding: 0;
-}
-
-@media (max-width: 768px) {
-  .hover-card {
-    width: 100%;
-    max-width: 350px;
-  }
-}

styles/variables.css

@@ -1,30 +0,0 @@
-:root {
-  /* Colors */
-  --color-background: #000;
-  --color-text: #f5f5f5;
-  --color-accent-green: #213b28;
-  --color-accent-beige: #ceb39b;
-  --color-accent-green-transparent: rgba(33, 59, 40, 0.95);
-  --color-shadow: rgba(0, 0, 0, 0.2);
-
-  --font-family-primary: 'Georgia', serif;
-  --font-size-small: 1rem;
-  --font-size-medium: 1.5rem;
-  --font-size-large: 2rem;
-  --line-height: 1.6;
-
-  --container-width: 100%;
-  --container-max-width: 1600px;
-  --padding-vertical: 2rem;
-  --padding-horizontal: 0;
-  --margin-standard: 1rem;
-  --gap-standard: 30px;
-
-  --border-radius: 8px;
-  --box-shadow: 0 4px 8px var(--color-shadow);
-  --transition-standard: 0.3s ease;
-
-
-  --breakpoint-mobile: 768px;
-  --breakpoint-desktop: 1600px;
-}