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

Reviewed-on: #3

.gitignore

@@ -1,5 +1,6 @@
 # build output
 dist/
+
 # generated types
 .astro/
 
@@ -12,7 +13,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
-
 # environment variables
 .env
 .env.production

.idea/.gitignore

@@ -1,8 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/
-# Datasource local storage ignored files
-/dataSources/
-/dataSources.local.xml

.idea/Gallus_Pub.iml

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-    <orderEntry type="library" name="font-awesome" level="application" />
-  </component>
-</module>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/Gallus_Pub.iml" filepath="$PROJECT_DIR$/.idea/Gallus_Pub.iml" />
-    </modules>
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-	"editor.formatOnSave": false
-}

.woodpecker.yml

@@ -0,0 +1,16 @@
+steps:
+  deploy:
+    image: node:20
+    environment:
+      FLY_API_TOKEN:
+        from_secret: FLY_API_TOKEN
+    commands:
+      - 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
+  event:
+    - push

Dockerfile

@@ -1,25 +1,22 @@
 FROM node:20-alpine AS build
 
 WORKDIR /app
-
 COPY package*.json ./
 RUN npm ci
-
 COPY . .
-
+# 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 /app
+COPY --from=build /app/dist ./dist
 
 EXPOSE 3000
-
-CMD ["serve", "-s", ".", "-l", "3000"]
+CMD ["serve", "-s", "dist", "-l", "3000"]
 
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD wget -qO- http://localhost:3000/ || exit 1

Gallus_Pub/.gitignore

@@ -1,37 +0,0 @@
-# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
-
-# dependencies
-node_modules/
-
-# Expo
-.expo/
-dist/
-web-build/
-expo-env.d.ts
-
-# Native
-.kotlin/
-*.orig.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-
-# Metro
-.metro-health-check*
-
-# debug
-npm-debug.*
-yarn-debug.*
-yarn-error.*
-
-# macOS
-.DS_Store
-*.pem
-
-# local env files
-.env*.local
-
-# typescript
-*.tsbuildinfo

Gallus_Pub/App.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { View } from 'react-native';
-import LoginScreen from './src/pages/LoginPage';
-import AdminScreen from './src/pages/AdminPage';
-import HomeScreen from './src/pages/HomePage';
-import ProtectedRoute from './src/components/ProtectedRoute';
-import { AuthProvider } from './src/AuthContext';
-
-export default function App() {
-  return (
-    <AuthProvider>
-      <BrowserRouter>
-        <View style={{ flex: 1 }}>
-          <Routes>
-            <Route path="/" element={<HomeScreen />} />
-            <Route path="/admin/login" element={<LoginScreen />} />
-            <Route path="/admin" element={
-              <ProtectedRoute>
-                <AdminScreen />
-              </ProtectedRoute>
-            } />
-          </Routes>
-        </View>
-      </BrowserRouter>
-    </AuthProvider>
-  );
-}

Gallus_Pub/app.json

@@ -1,29 +0,0 @@
-{
-  "expo": {
-    "name": "Gallus_Pub",
-    "slug": "Gallus_Pub",
-    "version": "1.0.0",
-    "orientation": "portrait",
-    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
-    "newArchEnabled": true,
-    "splash": {
-      "image": "./assets/splash-icon.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
-    },
-    "ios": {
-      "supportsTablet": true
-    },
-    "android": {
-      "adaptiveIcon": {
-        "foregroundImage": "./assets/adaptive-icon.png",
-        "backgroundColor": "#ffffff"
-      },
-      "edgeToEdgeEnabled": true
-    },
-    "web": {
-      "favicon": "./assets/favicon.png"
-    }
-  }
-}

Gallus_Pub/index.ts

@@ -1,8 +0,0 @@
-import { registerRootComponent } from 'expo';
-
-import App from './App';
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in Expo Go or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App);

Gallus_Pub/package.json

@@ -1,27 +0,0 @@
-{
-  "name": "gallus_pub",
-  "version": "1.0.0",
-  "main": "index.ts",
-  "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web"
-  },
-  "dependencies": {
-    "@expo/metro-runtime": "~5.0.4",
-    "expo": "~53.0.9",
-    "expo-status-bar": "~2.2.3",
-    "react": "19.0.0",
-    "react-native": "0.79.2",
-    "react-native-web": "^0.20.0",
-    "react-router-dom": "^7.6.0",
-    "react-dom": "19.0.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.25.2",
-    "@types/react": "~19.0.10",
-    "typescript": "~5.8.3"
-  },
-  "private": true
-}

Gallus_Pub/src/AuthContext.tsx

@@ -1,44 +0,0 @@
-import React, { createContext, useState, useContext, ReactNode } from 'react';
-
-type AuthContextType = {
-  isAdmin: boolean;
-  login: (username: string, password: string) => Promise<void>;
-  logout: () => void;
-};
-
-const AuthContext = createContext<AuthContextType | null>(null);
-
-export const AuthProvider = ({ children }: { children: ReactNode }) => {
-  const [isAdmin, setIsAdmin] = useState(false);
-
-  const login = async (username: string, password: string) => {
-    // Hier würden Sie normalerweise API-Anfragen machen, um die Anmeldedaten zu überprüfen
-    // Einfache Validierung für das Beispiel:
-    if (username === 'admin' && password === 'password') {
-      setIsAdmin(true);
-      // In einer echten Anwendung würden Sie hier einen Token im localStorage speichern
-      localStorage.setItem('isAdmin', 'true');
-      return;
-    }
-    throw new Error('Falsche Anmeldedaten');
-  };
-
-  const logout = () => {
-    setIsAdmin(false);
-    localStorage.removeItem('isAdmin');
-  };
-
-  return (
-    <AuthContext.Provider value={{ isAdmin, login, logout }}>
-      {children}
-    </AuthContext.Provider>
-  );
-};
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error('useAuth muss innerhalb eines AuthProviders verwendet werden');
-  }
-  return context;
-};

Gallus_Pub/src/components/ProtectedRoute.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import { Navigate } from 'react-router-dom';
-import { useAuth } from '../AuthContext';
-
-type ProtectedRouteProps = {
-  children: React.ReactNode;
-};
-
-const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
-  const { isAdmin } = useAuth();
-  
-  if (!isAdmin) {
-    // Wenn nicht angemeldet, zur Login-Seite umleiten
-    return <Navigate to="/admin/login" replace />;
-  }
-
-  return <>{children}</>;
-};
-
-export default ProtectedRoute;

Gallus_Pub/src/pages/AdminPage.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { useAuth } from '../AuthContext';
-
-const AdminPage: React.FC = () => {
-  const { logout } = useAuth();
-
-  return (
-    <div style={styles.container}>
-      <h1>Admin</h1>
-      <p>Willkommen im Admin-Bereich! Hier können Sie Ihr Gallus Pub verwalten.</p>
-      <button onClick={logout} style={styles.button}>Abmelden</button>
-    </div>
-  );
-};
-
-const styles = {
-  container: {
-    maxWidth: '800px',
-    margin: '50px auto',
-    padding: '20px',
-    boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-    borderRadius: '5px',
-  },
-  button: {
-    padding: '10px',
-    backgroundColor: '#f44336',
-    color: 'white',
-    border: 'none',
-    borderRadius: '3px',
-    cursor: 'pointer',
-    marginTop: '20px',
-  }
-};
-
-export default AdminPage;

Gallus_Pub/src/pages/HomePage.tsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-
-export default function HomeScreen() {
-  return (
-    <View style={styles.container}>
-      <Text style={styles.title}>Willkommen bei Gallus Pub</Text>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  title: {
-    fontSize: 24,
-    fontWeight: 'bold',
-  },
-});

Gallus_Pub/src/pages/LoginPage.tsx

@@ -1,93 +0,0 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../AuthContext';
-
-const LoginPage: React.FC = () => {
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [error, setError] = useState('');
-  const { login } = useAuth();
-  const navigate = useNavigate();
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setError('');
-    
-    try {
-      await login(username, password);
-      navigate('/admin');
-    } catch (err) {
-      setError('Anmeldung fehlgeschlagen. Bitte überprüfen Sie Ihre Anmeldedaten.');
-    }
-  };
-
-  return (
-    <div style={styles.container}>
-      <h2>Admin-Login</h2>
-      {error && <p style={styles.error}>{error}</p>}
-      <form onSubmit={handleSubmit} style={styles.form}>
-        <div style={styles.inputGroup}>
-          <label htmlFor="username">Benutzername:</label>
-          <input
-            type="text"
-            id="username"
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            style={styles.input}
-            required
-          />
-        </div>
-        <div style={styles.inputGroup}>
-          <label htmlFor="password">Passwort:</label>
-          <input
-            type="password"
-            id="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            style={styles.input}
-            required
-          />
-        </div>
-        <button type="submit" style={styles.button}>Anmelden</button>
-      </form>
-    </div>
-  );
-};
-
-const styles = {
-  container: {
-    maxWidth: '400px',
-    margin: '100px auto',
-    padding: '20px',
-    boxShadow: '0 0 10px rgba(0,0,0,0.1)',
-    borderRadius: '5px',
-  },
-  form: {
-    display: 'flex',
-    flexDirection: 'column' as 'column',
-  },
-  inputGroup: {
-    marginBottom: '15px',
-  },
-  input: {
-    width: '100%',
-    padding: '10px',
-    borderRadius: '3px',
-    border: '1px solid #ddd',
-    marginTop: '5px',
-  },
-  button: {
-    padding: '10px',
-    backgroundColor: '#4CAF50',
-    color: 'white',
-    border: 'none',
-    borderRadius: '3px',
-    cursor: 'pointer',
-  },
-  error: {
-    color: 'red',
-    marginBottom: '15px',
-  }
-};
-
-export default LoginPage;

Gallus_Pub/tsconfig.json

@@ -1,6 +0,0 @@
-{
-  "extends": "expo/tsconfig.base",
-  "compilerOptions": {
-    "strict": true
-  }
-}

Gallus_Pub_v1/.woodpecker.yml

@@ -1,26 +0,0 @@
-pipeline:
-  build:
-    image: node:20-alpine
-    commands:
-      - 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
-
-branches:
-  include: [main, dev]
-
-cache:
-  mount:
-    - node_modules
-    - .npm

Gallus_Pub_v1/README.md

@@ -1,47 +0,0 @@
-# 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).

Gallus_Pub_v1/src/components/Drinks.astro

@@ -1,33 +0,0 @@
----
-import "../../styles/components/Drinks.css"
----
-<section 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>

Gallus_Pub_v1/src/components/EventsGrid.astro

@@ -1,27 +0,0 @@
----
-// src/components/EventsGrid.astro
-
-import HoverCard from "./HoverCard.astro";
-interface Event {
-    image: string;
-  title: string;
-  date: Date;
-  description: string;
-}
-const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
-import '../../styles/components/EventsGrid.css';
----
-
-<section class="events-gird container">
-
-	{events.map((event: Event)  => (
-
-            <HoverCard
-                    title={event.title}
-                    date={event.date}
-                    description={event.description}
-                    image={event.image}
-            />
-    ))}
-
-</section>

Gallus_Pub_v1/src/components/Header.astro

@@ -1,39 +0,0 @@
----
-// 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 class="dropdown">
-
-			<a href="/" class="dropdbtn">Home</a>
-
-			<div class="dropdown-content">
-
-				<a href="/events">Events</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>
-
-</header>
-<div class="header-spacer"></div>

Gallus_Pub_v1/src/components/HoverCard.astro

@@ -1,21 +0,0 @@
----
-// 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">{title}</h3>
-	<h4 class="card_date">{date}</h4>
-
-	<div class="hover-text">
-		<div>
-			<p>{description}</p>
-		</div>
-	</div>
-</article>
-

Gallus_Pub_v1/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>

Gallus_Pub_v1/src/pages/index.astro

@@ -1,23 +0,0 @@
----
-// 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";
-
-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: '/images/Logo.png', title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
-  {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' }
-];
----
-
-<Layout>
-
-	<Hero />
-	<Welcome />
-	<EventsGrid events={events} />
-	<Drinks />
-</Layout>

Gallus_Pub_v1/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;
-    }
-}

Gallus_Pub_v1/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);
-}

Gallus_Pub_v1/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;
-  }
-}

Gallus_Pub_v1/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;
-}

README.md

@@ -1,6 +1,47 @@
-# Gallus_Pub
+# Astro Starter Kit: Minimal
 
-Reposetory für die Website vom Gallus Pub
-
-Auftragsgeber: Sabrina Signer
-Geschäfft: Gallus Pub
+```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).

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.json

@@ -1,5 +1,5 @@
 {
-  "name": "gallus-pub-v1",
+  "name": "Gallus Pub Site",
   "type": "module",
   "version": "0.0.1",
   "scripts": {
@@ -11,4 +11,4 @@
   "dependencies": {
     "astro": "^5.12.0"
   }
-}
+}

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

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

@@ -0,0 +1,32 @@
+---
+// src/components/EventsGrid.astro
+
+import HoverCard from "./HoverCard.astro";
+import type { ImageMetadata } from "astro";
+
+interface Event {
+	image: ImageMetadata;
+	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>

src/components/Footer.astro

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

src/components/Header.astro

@@ -0,0 +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";
+---
+
+<header class="header">
+	<!-- Desktop Layout -->
+	<div class="desktop-layout">
+		<div class="logo-container">
+			<a href="/">
+				<Image src={Logo} alt="Logo" class="logo" />
+			</a>
+		</div>
+
+		<nav class="nav-main">
+			<div class="desktop-menu">
+				<a href="/#hero">Home</a>
+				<a href="/#events">Events</a>
+				<a href="/#gallery">Galerie</a>
+				<a href="/#drinks">Drinks</a>
+				<a href="/#footer">Contact</a>
+				<!--<a href="/#about">About</a>
+				<a href="/#contact">Contact</a>-->
+			</div>
+		</nav>
+	</div>
+
+	<!-- Mobile Layout -->
+	<div class="mobile-layout">
+		<!-- Centered Logo -->
+		<div class="mobile-logo-container">
+			<a href="/">
+				<Image src={Logo} alt="Logo" class="logo" />
+			</a>
+		</div>
+
+		<!-- Burger Menu Below Logo -->
+		<div class="burger-menu">
+			<div class="burger-icon">
+				<span></span>
+				<span></span>
+				<span></span>
+			</div>
+		</div>
+
+		<!-- Mobile Navigation Menu (Dropdown) -->
+		<div class="mobile-menu">
+			<a href="/#hero">Home</a>
+			<a href="/#events">Events</a>
+			<a href="/#gallery">Galerie</a>
+			<a href="/#drinks">Drinks</a>
+			<a href="/#footer">Contact</a>
+		</div>
+	</div>
+</header>
+
+<div class="header-spacer"></div>
+
+<script>
+	// Toggle mobile menu when burger icon is clicked
+	document.addEventListener('DOMContentLoaded', () => {
+		const burgerIcon = document.querySelector('.burger-icon');
+		const mobileMenu = document.querySelector('.mobile-menu');
+		const mobileMenuLinks = document.querySelectorAll('.mobile-menu a');
+		
+		// Toggle menu when burger icon is clicked
+		burgerIcon?.addEventListener('click', () => {
+			burgerIcon.classList.toggle('active');
+			mobileMenu?.classList.toggle('active');
+		});
+		
+		// Close menu when a navigation link is clicked
+		mobileMenuLinks.forEach(link => {
+			link.addEventListener('click', () => {
+				burgerIcon?.classList.remove('active');
+				mobileMenu?.classList.remove('active');
+			});
+		});
+	});
+</script>

src/components/Hero.astro

@@ -1,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

@@ -0,0 +1,55 @@
+---
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+import "../styles/components/HoverCard.css";
+const {title, description, image, date} = Astro.props as {
+	title: string;
+	description: string;
+	image: ImageMetadata;
+	date: string;
+};
+---
+
+<article class="hover-card">
+	<div class="image-container">
+		<Image class="card-image" src={image} alt={title} />
+	</div>
+
+	<div class="hover-text">
+		<div>
+			<p set:html={description} />
+		</div>
+	</div>
+</article>
+
+<script>
+	document.addEventListener('DOMContentLoaded', () => {
+		const hoverCards = document.querySelectorAll('.hover-card');
+		
+		hoverCards.forEach(card => {
+			card.addEventListener('click', (e) => {
+				// Only toggle on mobile devices
+				if (window.innerWidth <= 768) {
+					e.preventDefault();
+					
+					// Close all other active cards first
+					hoverCards.forEach(otherCard => {
+						if (otherCard !== card) {
+							otherCard.classList.remove('active');
+						}
+					});
+					
+					// Toggle current card
+					card.classList.toggle('active');
+				}
+			});
+
+			// Close card when clicking outside (mobile only)
+			document.addEventListener('click', (e) => {
+				if (window.innerWidth <= 768 && !card.contains(e.target as Node)) {
+					card.classList.remove('active');
+				}
+			});
+		});
+	});
+</script>

src/components/ImageCarousel.astro

@@ -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/index.astro

@@ -0,0 +1,104 @@
+---
+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 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: eventKaraoke,
+		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: 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" />
+	<Welcome id="welcome" />
+	<EventsGrid id="events" events={events} />
+	<ImageCarousel id="gallery" images={images} />
+	<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;
-  width: 6em;
+  height: 35vh;
+  width: 35vh;
   border: 2px solid var(--color-accent-beige);
   border-radius: 50%;
   margin: 0.5rem;
@@ -94,6 +94,7 @@
   justify-content: center;
   align-items: center;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .circle:hover {
@@ -109,12 +110,25 @@
   text-align: center;
   transition: opacity var(--transition-standard);
   position: absolute;
+  z-index: 2;
 }
 
 .circle:hover .circle-label {
   opacity: 1;
 }
 
+.circle-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 50%;
+  z-index: 1;
+}
+
 .circle-row {
   display: flex;
   justify-content: center;
@@ -149,10 +163,6 @@
     width: 90%;
   }
 
-  .circle {
-    height: 5em;
-    width: 5em;
-  }
 
   .circle-label {
     font-size: 0.7rem;

src/styles/components/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;
-    padding-bottom: 1rem;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .footer-sections {