make main a version off dev

2025-07-23 21:25:24 +02:00
parent 5247bd9816
commit 74e4799ea9
49 changed files with 6594 additions and 280 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# build output
+dist/
+
+# generated types
+.astro/
+
+# dependencies
+node_modules/
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# environment variables
+.env
+.env.production
+
+# macOS-specific files
+.DS_Store
+
+# jetbrains setting folder
+.idea/
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}
--- a/.woodpecker.yml
+++ b/.woodpecker.yml
@ -1,18 +1,26 @@
-name: deploy
-
-steps:
-  deploy:
-    image: node:20
-    environment:
-      FLY_API_TOKEN:
-        from_secret: FLY_API_TOKEN
+pipeline:
+  build:
+    image: node:20-alpine
    commands:
-      - curl -L https://fly.io/install.sh | sh
-      - export PATH="$HOME/.fly/bin:$PATH"
-      - flyctl deploy --config fly.toml --app gallus-pub
+      - npm ci
+      - npm run build
+    when:
+      branch: main
+      event: [push, pull_request]
+  deploy:
+    depends_on: [build]
+    image: flyio/flyctl:latest
+    secrets: [fly_api_token]
+    commands:
+      - flyctl deploy --remote-only
+    when:
+      branch: main
+      event: push

-when:
-  branch:
-    - main
-  event:
-    - push
+branches:
+  include: [main, dev]
+
+cache:
+  mount:
+    - node_modules
+    - .npm
--- a/35
+++ b/35
@ -1,18 +1,25 @@
-FROM nginx:alpine
+FROM node:20-alpine AS build

-# Kopiere statische Dateien ins Nginx-Verzeichnis
-COPY src/ /usr/share/nginx/html/
+WORKDIR /app

-# Konfiguriere NGINX für Single-Page-Applications (optional)
-RUN echo 'server { \
-    listen 80; \
-    root /usr/share/nginx/html; \
-    index index.html; \
-    location / { \
-        try_files $uri $uri/ /index.html; \
-    } \
-}' > /etc/nginx/conf.d/default.conf
+COPY package*.json ./
+RUN npm ci

-EXPOSE 80
+COPY ../backup/backup .

-CMD ["nginx", "-g", "daemon off;"]
+RUN npm run build
+
+FROM node:20-alpine AS production
+
+WORKDIR /app
+
+RUN npm install -g serve
+
+COPY --from=build /app/dist /app
+
+EXPOSE 3000
+
+CMD ["serve", "-s", ".", "-l", "3000"]
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
+  CMD wget -qO- http://localhost:3000/ || exit 1
--- a/README.md
+++ b/README.md
@ -0,0 +1,47 @@
+# Astro Starter Kit: Minimal
+
+```sh
+npm create astro@latest -- --template minimal
+```
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal)
+[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
+[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
+
+> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
+
+## 🚀 Project Structure
+
+Inside of your Astro project, you'll see the following folders and files:
+
+```text
+/
+├── public/
+├── src/
+│   └── pages/
+│       └── index.astro
+└── package.json
+```
+
+Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
+
+There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
+
+Any static assets, like images, can be placed in the `public/` directory.
+
+## 🧞 Commands
+
+All commands are run from the root of the project, from a terminal:
+
+| Command                   | Action                                           |
+| :------------------------ | :----------------------------------------------- |
+| `npm install`             | Installs dependencies                            |
+| `npm run dev`             | Starts local dev server at `localhost:4321`      |
+| `npm run build`           | Build your production site to `./dist/`          |
+| `npm run preview`         | Preview your build locally, before deploying     |
+| `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
+| `npm run astro -- --help` | Get help using the Astro CLI                     |
+
+## 👀 Want to learn more?
+
+Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -0,0 +1,5 @@
+// @ts-check
+import { defineConfig } from 'astro/config';
+
+// https://astro.build/config
+export default defineConfig({});
--- a/fly.toml
+++ b/fly.toml
@ -1,28 +1,42 @@
-app = 'gallus-pub'
-primary_region = 'fra'
-
-[experimental]
-  auto_rollback = true
+app = "gallus-pub"
+primary_region = "fra" # Frankfurt region, change if needed
+kill_signal = "SIGINT"
+kill_timeout = 5

 [build]
-  dockerfile = 'Dockerfile'
+  dockerfile = "Dockerfile"
+
+[env]
+  PORT = "3000"
+  NODE_ENV = "production"

 [http_service]
-  internal_port = 80
+  internal_port = 3000
  force_https = true
-  auto_stop_machines = 'stop'
+  auto_stop_machines = true
  auto_start_machines = true
  min_machines_running = 0
-  processes = ['app']
+  processes = ["app"]
+
+  [http_service.concurrency]
+    type = "connections"
+    hard_limit = 1000
+    soft_limit = 500

  [[http_service.checks]]
-    interval = '10s'
-    timeout = '2s'
-    grace_period = '5s'
-    method = 'GET'
-    path = '/'
+    interval = "30s"
+    timeout = "5s"
+    grace_period = "10s"
+    method = "GET"
+    path = "/"
+    protocol = "http"
+    tls_skip_verify = false
+
+[metrics]
+  port = 9091
+  path = "/metrics"

 [[vm]]
-  memory = '1gb'
-  cpu_kind = 'shared'
-  cpus = 1
+  memory = "512MB"
+  cpu_kind = "shared"
+  cpus = 1
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,14 @@
+{
+  "name": "",
+  "type": "module",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "astro": "^5.12.0"
+  }
+}
--- a/public/favicon.svg
+++ b/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>
--- a/public/images/Background.png
+++ b/public/images/Background.png
--- a/public/images/Logo.png
+++ b/public/images/Logo.png
--- a/public/images/Welcome.png
+++ b/public/images/Welcome.png
--- a/public/images/crepes_sucette.jpg
+++ b/public/images/crepes_sucette.jpg
--- a/public/images/karaoke.jpg
+++ b/public/images/karaoke.jpg
--- a/public/images/kevin_mcflannigan.jpeg
+++ b/public/images/kevin_mcflannigan.jpeg
--- a/public/images/pub_quiz.jpg
+++ b/public/images/pub_quiz.jpg
--- a/public/pdf/Menu.pdf
+++ b/public/pdf/Menu.pdf
--- a/src/components/About.astro
+++ b/src/components/About.astro
@ -0,0 +1,11 @@
+---
+import Layout from "../components/Layout.astro";
+---
+
+<Layout>
+
+	<h1>About</h1>
+
+	<p>Hier findest du alle aktuellen und kommenden About im Gallus Pub.</p>
+	
+</Layout>
--- a/src/components/Contact.astro
+++ b/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>
--- a/src/components/Drinks.astro
+++ b/src/components/Drinks.astro
@ -0,0 +1,35 @@
+---
+import "../../styles/components/Drinks.css"
+
+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>
+
+    <h3 class="monats-hit">Monats Hit</h3>
+
+    <div class="mate-vodka">
+        <div class="circle" title="Mate Vodka">
+            <span class="circle-label">Mate Vodka</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.
+    </p>
+</section>
--- a/src/components/EventsGrid.astro
+++ b/src/components/EventsGrid.astro
@ -0,0 +1,31 @@
+---
+// src/components/EventsGrid.astro
+
+import HoverCard from "./HoverCard.astro";
+
+interface Event {
+	image: string;
+	title: string;
+	date: string;
+	description: string;
+}
+const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
+	events?: Event[];
+	id?: string;
+};
+import "../../styles/components/EventsGrid.css";
+---
+
+<h2 class="section-title">Events</h2>
+<section id={id} class="events-gird container">
+	{
+		events.map((event: Event) => (
+			<HoverCard
+				title={event.title}
+				date={event.date}
+				description={event.description}
+				image={event.image}
+			/>
+		))
+	}
+</section>
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@ -0,0 +1,44 @@
+---
+// src/components/Footer.astro
+import "/styles/components/Footer.css"
+const currentYear = new Date().getFullYear();
+---
+
+<footer class="footer">
+	<div class="footer-content">
+		<div class="copyright">
+			&copy; {currentYear} Gallus Pub. Alle Rechte vorbehalten.
+		</div>
+
+		<div class="footer-sections">
+			<div class="footer-section">
+				<h3>Öffnungszeiten</h3>
+				<p>Mittwoch: 19:00 - 00:00</p>
+				<p>Donnerstag: 19:00 - 00:00</p>
+				<p>Freitag: 19:00 - 01:00</p>
+				<p>Samstag: 19:00 - 01:00</p>
+			</div>
+
+			<div class="footer-section">
+				<h3>Kontakt</h3>
+				<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>
+			</div>
+
+			<div class="footer-section">
+				<h3>Raumreservationen</h3>
+				<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>
+			</div>
+		</div>
+	</div>
+</footer>
+
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -0,0 +1,28 @@
+---
+// src/components/Header.astro
+const { url } = Astro;
+import "../../styles/components/Header.css";
+---
+
+<header class="header">
+	<div class="logo-container">
+		<a href="/">
+			<img src="/images/Logo.png" alt="Logo" class="logo" />
+		</a>
+	</div>
+
+	<!-- Hauptnavigation: immer Home, About, Contact -->
+	<nav class="nav-main">
+		<div>
+			<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="/#about">About</a>
+			<a href="/#contact">Contact</a>-->
+		</div>
+	</nav>
+</header>
+
+<div class="header-spacer"></div>
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@ -0,0 +1,27 @@
+---
+// src/components/Hero.astro
+import "../../styles/components/Hero.css"
+
+const { id } = Astro.props;
+---
+
+<section id={id} class="hero container">
+
+	<div class="hero-overlay">
+
+		<div class="hero-content">
+
+			<h1>Dein Irish Pub</h1>
+
+			<p>Im Herzen von St.Gallen</p>
+
+			<a href="#" class="button">Aktuelles ↓</a>
+		</div>
+
+	</div>
+
+</section>
+
+<style>
+
+</style>
--- a/src/components/HoverCard.astro
+++ b/src/components/HoverCard.astro
@ -0,0 +1,18 @@
+---
+// src/components/HoverCard.astro
+import "../../styles/components/HoverCard.css";
+const { title, description, image = "", date } = Astro.props;
+---
+
+<article class="hover-card">
+	<div class="image-container">
+		<img 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">
+		<p set:html={description} />
+	</div>
+</article>
--- a/src/components/ImageCarousel.astro
+++ b/src/components/ImageCarousel.astro
@ -0,0 +1,114 @@
+---
+// src/components/ImageCarousel.astro
+import "../../styles/components/ImageCarousel.css";
+
+interface Image {
+  src: string;
+  alt: string;
+}
+
+const { images = [], id } = Astro.props as { images: Image[], 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}>
+            <img 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>
--- a/src/components/Layout.astro
+++ b/src/components/Layout.astro
@ -0,0 +1,35 @@
+---
+// src/components/Layout.astro
+import Header from "./Header.astro";
+import Footer from "./Footer.astro";
+import "../../styles/components/Layout.css"
+---
+
+<!doctype html>
+
+<html lang="de">
+
+	<head>
+
+		<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>
+
+		<Header />
+
+		<main class="container">
+
+			<slot />
+
+		</main>
+
+		<Footer />
+
+	</body>
+
+</html>
--- a/src/components/Welcome.astro
+++ b/src/components/Welcome.astro
@ -0,0 +1,57 @@
+---
+// src/components/Welcome.astro
+import "../../styles/components/Welcome.css"
+
+const { id } = Astro.props;
+---
+
+<section id={id} class="welcome container">
+
+	<div class="welcome-text">
+
+		<h2>Herzlich willkommen im Gallus Pub!</h2>
+
+		<p>
+			Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung
+			oder alt, Rocker, Elf, Nerd, Meerjungfrau oder einfach nur du
+			selbst. Unsere Türen stehen offen für alle, die Spass haben wollen
+			und gute Gesellschaft suchen!
+		</p>
+
+		<p><b>Unsere Highlights:</b></p>
+
+		<ul>
+			<li>
+				<b>Karaoke:</b> Von Mittwoch bis Samstag kannst du deine
+				Stimme auf zwei Stockwerken zum Besten geben. Keine Sorge, es geht
+				nicht darum, perfekt zu sein, sondern einfach Spass zu haben! Du singst
+				gerne, aber lieber für dich? Dann kannst du den 2. OG auch privat
+				mieten.
+			</li>
+
+			<li>
+				<b>Pub Quiz:</b> Jeden Freitag ab 20:00 Uhr testet ihr
+				euer Wissen in verschiedenen Runden. Jede Woche gibt es ein neues
+				Thema und einen neuen Champion.
+			</li>
+
+			<li>
+				<b>Getränke:</b> Geniesst frisches Guinness, Smithwicks,
+				Gallus Old Style Ale und unsere leckeren Cocktails. Für Whisky-Liebhaber
+				haben wir erlesene Sorten aus Schottland und Irland im Angebot.
+			</li>
+		</ul>
+
+		<p>
+			Wir freuen uns darauf, euch bald bei uns begrüssen zu können! Lasst
+			uns gemeinsam unvergessliche Abende feiern. - Sabrina & Raphael
+		</p>
+
+	</div>
+
+
+	<div class="welcome-image">
+		<img src="/images/Welcome.png" alt="Welcome backgrount image" />
+	</div>
+
+</section>
--- a/src/index.html
+++ b/src/index.html
@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Coming Soon - Gallus Pub</title>
-    <link rel="stylesheet" href="styles.css">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-</head>
-<body>
-    <div class="container">
-        <div class="logo-container">
-                <img src="public/Logo.png" alt="Gallus Pub Logo">
-        </div>
-
-        <h1 class="coming-soon">Coming Soon</h1>
-
-        <div class="social-links">
-            <a href="https://www.instagram.com/galluspubsanktgallen/" target="_blank" class="social-link">
-                <i class="fab fa-instagram"></i> Instagram
-            </a>
-            <a href="mailto:info@gallus-pub.ch" class="social-link">
-                <i class="far fa-envelope"></i> Email
-            </a>
-            <a href="https://wa.me/+41772322770" target="_blank" class="social-link">
-                <i class="fab fa-whatsapp"></i> WhatsApp Business
-            </a>
-        </div>
-
-        <div class="opening-hours">
-            <h2>Öffnungszeiten</h2>
-            <p>Mittwoch: 19:00 - 24:00</p>
-            <p>Donnerstag: 19:00 - 24:00</p>
-            <p>Freitag: 19:00 - 01:00</p>
-            <p>Samstag: 19:00 - 01:00</p>
-        </div>
-
-
-        <div class="events-note">
-            <p>Aktuelle Events findest du</p>
-            <p>auf unserem Social Media.</p>
-        </div>
-    </div>
-
-    <script src="script.js"></script>
-</body>
-</html>
--- a/src/pages/Gallery.astro
+++ b/src/pages/Gallery.astro
@ -0,0 +1,11 @@
+---
+import Layout from "../components/Layout.astro";
+---
+
+<Layout>
+	
+	<h1>Gallery</h1>
+
+	<p>Hier findest du alle aktuellen und kommenden Gallery im Gallus Pub.</p>
+
+</Layout>
--- a/src/pages/Openings.astro
+++ b/src/pages/Openings.astro
@ -0,0 +1,11 @@
+---
+import Layout from "../components/Layout.astro";
+---
+
+<Layout>
+
+	<h1>Openings</h1>
+
+	<p>Hier findest du alle aktuellen und kommenden Openings im Gallus Pub.</p>
+	
+</Layout>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -0,0 +1,76 @@
+---
+// 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";
+
+const events = [
+	{
+		image: "/images/karaoke.jpg",
+		title: "Karaoke",
+		date: "Mittwoch - Samstag",
+		description: `
+			Bei uns gibt es Karaoke Mi-Sa!! <br>
+			Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
+			Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
+		`,
+	},
+	{
+		image: "/images/pub_quiz.jpg",
+		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: "/images/crepes_sucette.jpg",
+		title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
+		date: "Do, 04. September 2025",
+		description: `
+			<b>20:00 Uhr</b> <br>
+			<a href="Metzgergasse 13, 9000 St. Gallen">Metzgergasse 13, 9000 St. Gallen</a> <br>
+			Erlebt einen musikalischen Abend mit der Band <b>Crepes Sucette</b> <br>
+			Jetzt reservieren: <a href="tel:+41772322770">077 232 27 70</a>`,
+	},
+	{
+		image: "/images/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>
+		`,
+	},
+];
+
+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" },
+];
+---
+
+<Layout>
+	<Hero id="hero" />
+	<Welcome id="welcome" />
+	<EventsGrid id="events" events={events} />
+	<ImageCarousel id="gallery" images={images} />
+	<Drinks id="drinks" />
+</Layout>
--- a/src/script.js
+++ b/src/script.js
@ -1,37 +0,0 @@
-// Wait for the DOM to be fully loaded
-document.addEventListener('DOMContentLoaded', function() {
-    // Add a fade-in effect to the main elements
-    const elements = [
-        document.querySelector('.logo'),
-        document.querySelector('.coming-soon'),
-        document.querySelector('.social-links'),
-        document.querySelector('.opening-hours'),
-        document.querySelector('.events-note')
-    ];
-    
-    // Apply fade-in animation with delay for each element
-    elements.forEach((element, index) => {
-        if (element) {
-            element.style.opacity = '0';
-            element.style.transition = 'opacity 1s ease-in-out';
-            
-            // Stagger the animations
-            setTimeout(() => {
-                element.style.opacity = '1';
-            }, 300 * index);
-        }
-    });
-    
-    // Add a subtle hover effect to the logo
-    const logo = document.querySelector('.logo');
-    if (logo) {
-        logo.addEventListener('mouseover', function() {
-            this.style.transform = 'scale(1.05)';
-            this.style.transition = 'transform 0.3s ease';
-        });
-        
-        logo.addEventListener('mouseout', function() {
-            this.style.transform = 'scale(1)';
-        });
-    }
-});
--- a/src/styles.css
+++ b/src/styles.css
@ -1,149 +0,0 @@
-/* Global styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-body {
-    font-family: 'Arial', sans-serif;
-    background-color: #213b28;
-    color: #ceb39b;
-    line-height: 1.6;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-}
-
-.container {
-    max-width: 800px;
-    margin: 0 auto;
-    padding: 40px 20px;
-    text-align: center;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 100vh;
-}
-
-/* Logo styles */
-.logo-container {
-    margin-bottom: 30px;
-    width: 100%;
-    max-width: 100%;
-}
-
-.logo-container img {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 0 auto;
-}
-
-.logo {
-    font-size: 48px;
-    font-weight: bold;
-    color: #333;
-    padding: 20px;
-    border: 3px solid #333;
-    display: inline-block;
-}
-
-.logo img {
-    max-width: 200px;
-    height: auto;
-    display: block;
-}
-
-/* Coming soon text */
-.coming-soon {
-    font-size: 36px;
-    margin-bottom: 40px;
-    text-transform: uppercase;
-    letter-spacing: 4px;
-}
-
-/* Social links */
-.social-links {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    gap: 20px;
-    margin-bottom: 40px;
-}
-
-.social-link {
-    display: inline-flex;
-    align-items: center;
-    padding: 10px 20px;
-    background-color: #333;
-    color: white;
-    text-decoration: none;
-    border-radius: 30px;
-    transition: all 0.3s ease;
-}
-
-.social-link i {
-    margin-right: 10px;
-    font-size: 18px;
-}
-
-.social-link:hover {
-    background-color: #555;
-    transform: translateY(-3px);
-}
-
-/* Opening hours */
-.opening-hours {
-    margin-bottom: 30px;
-    padding: 20px;
-    border-top: 1px solid #ddd;
-    border-bottom: 1px solid #ddd;
-    width: 100%;
-    max-width: 500px;
-}
-
-.opening-hours h2 {
-    margin-bottom: 15px;
-    font-size: 24px;
-}
-
-.opening-hours p {
-    margin-bottom: 5px;
-}
-
-/* Events note */
-.events-note {
-    font-style: italic;
-    margin-top: 20px;
-    padding: 10px;
-    background-color: #2F2F2F;
-    color: #fff;
-    border-radius: 5px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 600px) {
-    .social-links {
-        flex-direction: column;
-        gap: 10px;
-    }
-
-    .logo {
-        font-size: 36px;
-    }
-
-    .coming-soon {
-        font-size: 28px;
-    }
-
-    .container {
-        padding: 20px 10px;
-    }
-    
-    .logo-container img {
-        max-width: 90%;
-    }
-}
--- a/styles/components/ContactForm.css
+++ b/styles/components/ContactForm.css
@ -0,0 +1,127 @@
+/* styles/components/ContactForm.css */
+
+.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;
+  }
+}
--- a/styles/components/Drinks.css
+++ b/styles/components/Drinks.css
@ -0,0 +1,195 @@
+.Drinks {
+  font-family: var(--font-family-primary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2rem;
+  text-align: center;
+  background-color: var(--color-accent-green);
+  color: var(--color-accent-beige);
+  padding: 2rem;
+  width: 100%;
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+}
+
+.title {
+  font-size: var(--font-size-large);
+  margin-bottom: 1.5rem;
+  font-weight: bold;
+  color: var(--color-text);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.card-link {
+  border: 2px solid var(--color-accent-beige);
+  padding: 0.75rem 1.5rem;
+  margin-bottom: 2.5rem;
+  color: var(--color-text);
+  background-color: var(--color-background);
+  text-decoration: none;
+  border-radius: var(--border-radius);
+  font-weight: bold;
+  transition: all var(--transition-standard);
+  display: inline-block;
+}
+
+.card-link:hover {
+  background-color: var(--color-accent-beige);
+  color: var(--color-accent-green);
+  transform: translateY(-3px);
+  box-shadow: var(--box-shadow);
+}
+
+.monats-hit {
+  margin-bottom: 1.5rem;
+  font-size: var(--font-size-medium);
+  color: var(--color-text);
+  font-weight: bold;
+  position: relative;
+  padding-bottom: 0.5rem;
+}
+
+.monats-hit::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 50px;
+  height: 2px;
+  background-color: var(--color-accent-beige);
+}
+
+.mate-vodka {
+  display: flex;
+  flex-direction: column;
+  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;
+}
+
+.mate-vodka div:not(.circle) {
+  margin-top: 0.5rem;
+  font-weight: bold;
+  color: var(--color-accent-beige);
+}
+
+.circle {
+  height: 6em;
+  width: 6em;
+  border: 2px solid var(--color-accent-beige);
+  border-radius: 50%;
+  margin: 0.5rem;
+  background: radial-gradient(circle at 30% 30%, rgba(206, 179, 155, 0.2), transparent 70%);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  transition: all var(--transition-standard);
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.circle:hover {
+  transform: scale(1.05);
+  border-color: var(--color-text);
+}
+
+.circle-label {
+  opacity: 0;
+  color: var(--color-text);
+  font-weight: bold;
+  font-size: 0.8rem;
+  text-align: center;
+  transition: opacity var(--transition-standard);
+  position: absolute;
+}
+
+.circle:hover .circle-label {
+  opacity: 1;
+}
+
+.circle-row {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+  margin: 1.5rem 0;
+}
+
+.note {
+  margin-top: 2rem;
+  font-style: italic;
+  text-align: center;
+  color: var(--color-text);
+  max-width: 80%;
+  line-height: 1.6;
+  padding: 1rem;
+  border-top: 1px solid rgba(206, 179, 155, 0.3);
+  border-bottom: 1px solid rgba(206, 179, 155, 0.3);
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .Drinks {
+    padding: 1.5rem;
+  }
+
+  .title {
+    font-size: calc(var(--font-size-medium) + 0.2rem);
+  }
+
+  .mate-vodka {
+    width: 90%;
+  }
+
+  .circle {
+    height: 5em;
+    width: 5em;
+  }
+
+  .circle-label {
+    font-size: 0.7rem;
+  }
+
+  /* Make labels always visible on touch devices */
+  .circle-label {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding: 2px 5px;
+    border-radius: 3px;
+  }
+
+  .circle-row {
+    gap: 1rem;
+  }
+
+  .note {
+    max-width: 95%;
+  }
+}
+
+@media (max-width: 480px) {
+  .circle-row {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .card-link {
+    padding: 0.5rem 1rem;
+  }
+
+  .circle {
+    margin: 1rem 0;
+  }
+
+  .mate-vodka {
+    padding: 0.8rem;
+  }
+}
--- a/styles/components/EventsGrid.css
+++ b/styles/components/EventsGrid.css
@ -0,0 +1,28 @@
+.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;
+  justify-content: center;
+  gap: var(--gap-standard);
+  padding: var(--padding-vertical) var(--padding-horizontal);
+  width: 100%;
+}
+
+@media (min-width: 1600px) {
+  .events-gird {
+    justify-content: space-between;
+  }
+}
+
+@media (max-width: 1599px) {
+  .events-gird {
+    justify-content: space-around;
+  }
+}
--- a/styles/components/Footer.css
+++ b/styles/components/Footer.css
@ -0,0 +1,62 @@
+.footer {
+    background-color: #213b28;
+    color: white;
+    padding: 3rem 0;
+    margin-top: 4rem;
+}
+
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 1rem;
+}
+
+.copyright {
+    text-align: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.footer-sections {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+    justify-content: center;
+}
+
+.footer-section {
+    text-align: center;
+}
+
+.footer-section h3 {
+    color: #ffffff;
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
+}
+
+.footer-section p {
+    margin: 0.5rem 0;
+    color: #cccccc;
+    font-size: 0.9rem;
+}
+
+.footer-section a {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+.footer-section a:hover {
+    text-decoration: underline;
+}
+
+@media (max-width: 768px) {
+    .footer-sections {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    .footer-section {
+        padding: 0 1rem;
+    }
+}
--- a/styles/components/Header.css
+++ b/styles/components/Header.css
@ -0,0 +1,92 @@
+.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;
+	}
+}
--- a/styles/components/Hero.css
+++ b/styles/components/Hero.css
@ -0,0 +1,66 @@
+/* === 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;
+	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);
+}
--- a/styles/components/HoverCard.css
+++ b/styles/components/HoverCard.css
@ -0,0 +1,114 @@
+.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 {
+	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);
+}
+
+.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;
+	}
+}
--- a/styles/components/ImageCarousel.css
+++ b/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;
+  }
+}
--- a/styles/components/Layout.css
+++ b/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;
+}
--- a/styles/components/Welcome.css
+++ b/styles/components/Welcome.css
@ -0,0 +1,41 @@
+/* === Welcome === */
+.welcome {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    background-color: #1f3a2d;
+    padding: 3rem 0;
+    margin-bottom: 2rem;
+    gap: 2rem;
+}
+
+.welcome-text {
+    order: 1;
+    flex: 2 1 400px;
+    padding: 0 1.6rem 0 2rem;
+    color: #fff3e0;
+}
+
+.welcome-text h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1rem;
+    color: #e8c6a7;
+}
+
+.welcome-text ul {
+    margin: 1rem 0;
+    padding-left: 1.2rem;
+}
+
+.welcome-image {
+    order: 2;
+    height: 100%;
+    flex: 1 1 300px;
+    margin-right: 2em;
+}
+
+.welcome-image img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+}
--- a/styles/index.css
+++ b/styles/index.css
@ -0,0 +1,34 @@
+/* === Global Reset === */
+* {
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+/* Add smooth scrolling behavior */
+html {
+	scroll-behavior: smooth;
+}
+
+body {
+	font-family: var(--font-family-primary), serif;
+	background-color: var(--color-background);
+	color: var(--color-text);
+	line-height: var(--line-height);
+}
+
+/* === Container für zentralen Content === */
+.container {
+	max-width: var(--container-max-width);
+	width: var(--container-width);
+	margin: 0 auto;
+}
+
+
+a {
+	color: #ffa500;
+}
+
+a:hover {
+	text-decoration: none;
+}
--- a/styles/variables.css
+++ b/styles/variables.css
@ -0,0 +1,34 @@
+: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);
+	--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;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist"]
+}