From 675594ae8aa17e5d76473fe0a6e1a5aaad425b38 Mon Sep 17 00:00:00 2001
From: Selina Erci <selina.erci@3way.ch>
Date: Fri, 18 Jul 2025 16:17:18 +0200
Subject: [PATCH] first version with the components: EventGird, welcome and
 events

---
 .vscode/settings.json                         |   3 +
 Gallus_Pub_v1/src/components/EventsGrid.astro |  26 ++
 Gallus_Pub_v1/src/components/Footer.astro     |  20 +-
 Gallus_Pub_v1/src/components/Header.astro     | 106 +++-----
 Gallus_Pub_v1/src/components/Hero.astro       |  20 ++
 Gallus_Pub_v1/src/components/HoverCard.astro  |  94 +------
 Gallus_Pub_v1/src/components/Layout.astro     |  34 +++
 Gallus_Pub_v1/src/components/Welcome.astro    |  56 ++++
 Gallus_Pub_v1/src/pages/About.astro           |  11 +
 Gallus_Pub_v1/src/pages/Contact.astro         |  11 +
 Gallus_Pub_v1/src/pages/Drinks.astro          |  11 +
 Gallus_Pub_v1/src/pages/Gallery.astro         |  11 +
 Gallus_Pub_v1/src/pages/Openings.astro        |  11 +
 Gallus_Pub_v1/src/pages/index.astro           |  52 ++--
 Gallus_Pub_v1/styles/index.css                | 254 +++++++++++++-----
 package-lock.json                             |   6 +
 16 files changed, 460 insertions(+), 266 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 Gallus_Pub_v1/src/components/EventsGrid.astro
 create mode 100644 Gallus_Pub_v1/src/components/Hero.astro
 create mode 100644 Gallus_Pub_v1/src/components/Layout.astro
 create mode 100644 Gallus_Pub_v1/src/components/Welcome.astro
 create mode 100644 Gallus_Pub_v1/src/pages/About.astro
 create mode 100644 Gallus_Pub_v1/src/pages/Contact.astro
 create mode 100644 Gallus_Pub_v1/src/pages/Drinks.astro
 create mode 100644 Gallus_Pub_v1/src/pages/Gallery.astro
 create mode 100644 Gallus_Pub_v1/src/pages/Openings.astro
 create mode 100644 package-lock.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..b0d0749
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+	"editor.formatOnSave": false
+}
\ No newline at end of file
diff --git a/Gallus_Pub_v1/src/components/EventsGrid.astro b/Gallus_Pub_v1/src/components/EventsGrid.astro
new file mode 100644
index 0000000..cd4dcbc
--- /dev/null
+++ b/Gallus_Pub_v1/src/components/EventsGrid.astro
@@ -0,0 +1,26 @@
+---
+// src/components/EventsGrid.astro
+interface Event {
+  title: string;
+  date: Date;
+  description: string;
+}
+const { events = [] }: { events?: Event[] } = Astro.props as { events?: Event[] };
+---
+
+<section class="events-gird container">
+
+	{events.map((event: Event)  => ( 
+	
+		<article class="event-card">
+
+			<h3>{event.title}</h3>
+
+			<p class="date">{event.date}</p>
+			<p class="description">{event.description}</p>
+
+		</article>
+
+	))}
+
+</section>
\ No newline at end of file
diff --git a/Gallus_Pub_v1/src/components/Footer.astro b/Gallus_Pub_v1/src/components/Footer.astro
index 76778d4..5bb9241 100644
--- a/Gallus_Pub_v1/src/components/Footer.astro
+++ b/Gallus_Pub_v1/src/components/Footer.astro
@@ -1,17 +1,9 @@
 ---
+// src/components/Footer.astro
+---
 
----
-<!-- components/Footer.astro -->
-<footer>
-    <p>&copy; 2024 Meine Webseite. Alle Rechte vorbehalten.</p>
+<footer class="footer">
+	<p>
+		&copy; {new Date().getFullYear()} Gallus Pub. Alle Rechte vorbehalten.
+	</p>
 </footer>
-
-<style>
-  footer {
-    background-color: #333;
-    color: #fff;
-    text-align: center;
-    padding: 1rem;
-    margin-top: auto;
-  }
-</style>
\ No newline at end of file
diff --git a/Gallus_Pub_v1/src/components/Header.astro b/Gallus_Pub_v1/src/components/Header.astro
index 97bd9e3..8970a75 100644
--- a/Gallus_Pub_v1/src/components/Header.astro
+++ b/Gallus_Pub_v1/src/components/Header.astro
@@ -1,71 +1,37 @@
-<!-- components/Header.astro -->
-<header>
-	<div class="header-container">
-		<div class="logo-container">
-			<a href="/">
-				<img src="/images/Logo.png" alt="Logo" class="logo">
-			</a>
-		</div>
-		<nav>
-			<ul>
-				<li><a href="/">Startseite</a></li>
-				<li><a href="/contact">Kontakt</a></li>
-				<li><a href="/about">About</a></li>
-			</ul>
-		</nav>
-	</div>
-</header>
+---
+// src/components/Header.astro
+const { url } = Astro;
+---
 
-<style>
-	header {
-		background-color: #3C2A26;
-		color: #ffffff;
-		padding: 1rem;
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		z-index: 100;
-		box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-	}
-	
-	.header-container {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		max-width: 1200px;
-		margin: 0 auto;
-		width: 100%;
-	}
-	
-	nav ul {
-		display: flex;
-		list-style: none;
-		gap: 1.5rem;
-	}
-	
-	nav a {
-		color: #fff;
-		text-decoration: none;
-		font-weight: bold;
-	}
-	
-	nav a:hover {
-		color: #ddd;
-	}
-	
-	.logo-container {
-		display: flex;
-		align-items: center;
-	}
-	
-	.logo {
-		height: 40px;
-		width: auto;
-		transition: transform 0.3s ease;
-	}
-	
-	.logo:hover {
-		transform: scale(1.05);
-	}
-</style>
\ No newline at end of file
+<header class="header">
+
+	<div>
+
+		<img src="/Gallus_Pub_v1/public/images/Logo.png" alt="Gallus Pub Logo" />
+
+	</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>
diff --git a/Gallus_Pub_v1/src/components/Hero.astro b/Gallus_Pub_v1/src/components/Hero.astro
new file mode 100644
index 0000000..ecd059a
--- /dev/null
+++ b/Gallus_Pub_v1/src/components/Hero.astro
@@ -0,0 +1,20 @@
+---
+// src/components/Hero.astro
+---
+
+<section class="hero container">
+
+	<div class="hero-overlay">
+
+		<div class="hero-content">
+	
+			<h1>Dein Irish Pub</h1>
+	
+			<p>Dein Irish Pub</p>
+	
+			<a href="#" class="button">Aktuelles ↓</a>
+		</div>
+
+	</div>
+
+</section>
diff --git a/Gallus_Pub_v1/src/components/HoverCard.astro b/Gallus_Pub_v1/src/components/HoverCard.astro
index 17ff057..0756081 100644
--- a/Gallus_Pub_v1/src/components/HoverCard.astro
+++ b/Gallus_Pub_v1/src/components/HoverCard.astro
@@ -1,91 +1,21 @@
 ---
-// HoverCard.astro
-// Diese Komponente nimmt ein Bild, einen Titel und einen Text entgegen und zeigt sie als Hover-Karte an
-
-// Definieren der Props, die die Komponente akzeptiert
-interface Props {
-    imageSrc: string;  // Pfad zum Bild
-    title: string;     // Titel der Karte
-    text: string;      // Text, der beim Hover angezeigt wird
-    altText?: string;  // Alternative Textbeschreibung für das Bild (optional)
-}
-
-// Extrahieren der Props
-const {imageSrc, title, text, altText = ""} = Astro.props;
+// src/components/HoverCard.astro
+const { title, description, image, link } = Astro.props;
 ---
 
-<div class="hover-card">
-    <h3 class="card-title">{title}</h3>
-    <div class="image-container">
-        <img src={imageSrc} alt={altText || title} class="card-image"/>
-    </div>
-    <div class="hover-text">
-        <p>{text}</p>
-    </div>
-</div>
+<article class="hover-card">
 
-<style>
-  .hover-card {
-    position: relative;
-    width: 250px;
-    height: 300px;
-    overflow: hidden;
-    border-radius: 8px;
-    background-color: #213b28; /* Grüner Hintergrund, der gleiche wie in Ihrer Website */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    transition: transform 0.3s ease;
-  }
+	<a href={link}>
 
-  .hover-card:hover {
-    transform: translateY(-5px);
-  }
+		<img src={image} alt={title} />
 
-  .image-container {
-    width: 100%;
-    padding-top: 100%; /* Macht das Bild quadratisch */
-    position: relative;
-    overflow: hidden;
-  }
+		<div class="info">
 
-  .card-image {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover; /* Damit wird das Bild ohne Verzerrung angepasst */
-    transition: transform 0.3s ease;
-  }
+			<h3>{title}</h3>
 
-  .card-title {
-    padding: 15px;
-    margin: 0;
-    color: #ceb39b; /* Gleiche Textfarbe wie in Ihrer Website */
-    font-size: 1.2rem;
-    text-align: center;
-  }
+			<p>{description}</p>
 
-  .hover-text {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(33, 59, 40, 0.9); /* Leicht transparente Version des grünen Hintergrunds */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 20px;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-    color: #ceb39b;
-  }
-
-  .hover-card:hover .hover-text {
-    opacity: 1;
-  }
-
-  .hover-card:hover .card-image {
-    transform: scale(1.1);
-  }
-</style>
\ No newline at end of file
+		</div>
+	</a>
+	
+</article>
diff --git a/Gallus_Pub_v1/src/components/Layout.astro b/Gallus_Pub_v1/src/components/Layout.astro
new file mode 100644
index 0000000..88e0f7e
--- /dev/null
+++ b/Gallus_Pub_v1/src/components/Layout.astro
@@ -0,0 +1,34 @@
+---
+// src/components/Layout.astro
+import Header from "./Header.astro";
+import Footer from "./Footer.astro";
+---
+
+<!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/index.css" />
+
+	</head>
+
+	<body>
+
+		<Header />
+
+		<main class="container">
+
+			<slot />
+
+		</main>
+
+		<Footer />
+
+	</body>
+
+</html>
diff --git a/Gallus_Pub_v1/src/components/Welcome.astro b/Gallus_Pub_v1/src/components/Welcome.astro
new file mode 100644
index 0000000..a55eaf0
--- /dev/null
+++ b/Gallus_Pub_v1/src/components/Welcome.astro
@@ -0,0 +1,56 @@
+---
+// src/components/Welcome.astro
+---
+
+<section 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="/Gallus_Pub_v1/public/images/Background.png" alt="Welcome backgrount image" />
+
+	</div>
+
+</section>
diff --git a/Gallus_Pub_v1/src/pages/About.astro b/Gallus_Pub_v1/src/pages/About.astro
new file mode 100644
index 0000000..2a3e34b
--- /dev/null
+++ b/Gallus_Pub_v1/src/pages/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>
diff --git a/Gallus_Pub_v1/src/pages/Contact.astro b/Gallus_Pub_v1/src/pages/Contact.astro
new file mode 100644
index 0000000..643f347
--- /dev/null
+++ b/Gallus_Pub_v1/src/pages/Contact.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../components/Layout.astro";
+---
+
+<Layout>
+
+	<h1>Contact</h1>
+
+	<p>Hier findest du alle aktuellen und kommenden Contact im Gallus Pub.</p>
+	
+</Layout>
diff --git a/Gallus_Pub_v1/src/pages/Drinks.astro b/Gallus_Pub_v1/src/pages/Drinks.astro
new file mode 100644
index 0000000..bb3d861
--- /dev/null
+++ b/Gallus_Pub_v1/src/pages/Drinks.astro
@@ -0,0 +1,11 @@
+---
+import Layout from "../components/Layout.astro";
+---
+
+<Layout>
+	
+	<h1>Drinks</h1>
+
+	<p>Hier findest du alle aktuellen und kommenden Drinks im Gallus Pub.</p>
+
+</Layout>
diff --git a/Gallus_Pub_v1/src/pages/Gallery.astro b/Gallus_Pub_v1/src/pages/Gallery.astro
new file mode 100644
index 0000000..74272d2
--- /dev/null
+++ b/Gallus_Pub_v1/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>
diff --git a/Gallus_Pub_v1/src/pages/Openings.astro b/Gallus_Pub_v1/src/pages/Openings.astro
new file mode 100644
index 0000000..edc1019
--- /dev/null
+++ b/Gallus_Pub_v1/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>
diff --git a/Gallus_Pub_v1/src/pages/index.astro b/Gallus_Pub_v1/src/pages/index.astro
index 858053d..75176f7 100644
--- a/Gallus_Pub_v1/src/pages/index.astro
+++ b/Gallus_Pub_v1/src/pages/index.astro
@@ -1,40 +1,22 @@
 ---
-import Header from '../components/Header.astro';
-import Footer from '../components/Footer.astro';
-import HoverCard from '../components/HoverCard.astro';
-import '../../styles/index.css'
+// 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';
+
+const events = [
+  { 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' },
+  { 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' },
+  { title: 'Live-Musik', date: 'Sa, 26. Juli 2025', description: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod' },
+  { 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' }
+];
 ---
 
-<html lang="de">
-<body>
-<Header />
+<Layout>
 
-<main>
-	<h1>Willkommen auf meiner Webseite</h1>
-	<p>Dies ist der Hauptinhalt der Seite.</p>
+	<Hero />
+	<Welcome />
+	<EventsGrid events={events} />
 
-	<div class="content-container">
-		<h2>Abschnitt mit besserem Kontrast</h2>
-		<p>Dieser Text ist durch den halbtransparenten Hintergrund besser lesbar.</p>
-	</div>
-
-
-	<div style="height: 100vh; margin: 2rem 0;">
-		<h2>Abschnitt 1</h2>
-		<p>Inhalt zum Scrollen...</p>
-	</div>
-
-	<div class="content-container">
-		<h2>Abschnitt 2</h2>
-		<p>Mehr Inhalt zum Scrollen...</p>
-	</div>
-	<HoverCard
-		imageSrc="images/Logo.png"
-		title="Whisky-Tasting"
-		text="Jeden ersten Mittwoch im Monat bieten wir ein exklusives Whisky-Tasting an. Erfahren Sie mehr über die verschiedenen Aromen und Geschmacksrichtungen."
-	/>
-
-</main>
-<Footer />
-</body>
-</html>
\ No newline at end of file
+</Layout>
diff --git a/Gallus_Pub_v1/styles/index.css b/Gallus_Pub_v1/styles/index.css
index 13bce8a..b697be6 100644
--- a/Gallus_Pub_v1/styles/index.css
+++ b/Gallus_Pub_v1/styles/index.css
@@ -1,92 +1,216 @@
+/* === Global Reset === */
 * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+	box-sizing: border-box;
 }
 
 body {
-    font-family: Arial, sans-serif;
-    line-height: 1.6;
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
+	font-family: 'Georgia', serif;
+	background-color: #1f1414;
+	color: #f5f5f5;
+	line-height: 1.6;
 }
 
-header {
-    background-color: #333;
-    color: #fff;
-    padding: 1rem;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 100;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+/* === Container für zentralen Content === */
+.container {
+	max-width: 1140px;
+	margin: 0 auto;
+	padding: 0 1rem;
 }
 
-.header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    max-width: 1200px;
-    margin: 0 auto;
-    width: 100%;
+/* === Header & Nav === */
+.header {
+	background-color: #0e0c0c;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 1rem 2rem;
+	border-bottom: 1px solid #444;
 }
 
-nav ul {
-    display: flex;
-    list-style: none;
-    gap: 1.5rem;
+.nav-main {
+	display: flex;
+	align-items: center;
+	margin-right: 377px;
 }
 
-nav a {
-    color: #fff;
-    text-decoration: none;
-    font-weight: bold;
+.nav-main a,
+.dropdbtn {
+	margin: 0 1rem;
+	color: white;
+	text-decoration: none;
+	font-size: 1rem;
+	cursor: pointer;
 }
 
-nav a:hover {
-    color: #ddd;
+.nav-main a:hover,
+.dropdbtn:hover {
+	color: #ffa500;
 }
 
-.logo-container {
-    display: flex;
-    align-items: center;
+/* Dropdown für Home */
+.dropdown {
+	position: relative;
+	display: inline-block;
 }
 
-.logo {
-    height: 40px;
-    width: auto;
-    transition: transform 0.3s ease;
+.dropdown-content {
+	display: none;
+	position: absolute;
+	background-color: #0e0c0c;
+	min-width: 160px;
+	z-index: 1;
+	border: 1px solid #444;
+	border-radius: 4px;
 }
 
-.logo:hover {
-    transform: scale(1.05);
+.dropdown-content a {
+	color: #f5f5f5;
+	padding: 0.5rem 1rem;
+	text-decoration: none;
+	display: block;
 }
 
-main {
-    flex: 1;
-    padding: 6rem 1rem 2rem;
-    background-image: url('../public/images/background.png');
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    color: #fff;
+.dropdown-content a:hover {
+	background-color: #1f1a1a;
+	color: #ffa500;
 }
 
-.content-container {
-    background-color: rgba(255, 255, 255, 0.8);
-    padding: 2rem;
-    border-radius: 8px;
-    margin: 2rem 0;
-    color: #333;
+.dropdown:hover .dropdown-content {
+	display: block;
 }
 
-footer {
-    background-color: #333;
-    color: #fff;
-    text-align: center;
-    padding: 1rem;
-    margin-top: auto;
+/* === Hero === */
+.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: rgba(0, 0, 0, 0.5);
+}
+
+.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);
+}
+
+/* === 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;
+	flex: 1 1 300px;
+}
+
+.welcome-image img {
+	width: 100%;
+	height: auto;
+	border-radius: 8px;
+}
+
+/* === Events Grid === */
+.events-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 2rem;
+  margin: 3rem 0;
+}
+.event-card {
+  background-color: #2a2a2a;
+  padding: 1.5rem;
+  border-radius: 8px;
+  transition: transform 0.2s;
+}
+.event-card:hover {
+  transform: translateY(-5px);
+}
+.event-card h3 {
+  margin-bottom: 0.5rem;
+  color: #ffa500;
+}
+.event-card .date {
+  font-size: 0.9rem;
+  color: #ccc;
+  margin-bottom: 1rem;
+}
+.event-card .description {
+  font-size: 1rem;
+  color: #eee;
+}
+
+/* === Footer === */
+.footer {
+	text-align: center;
+	padding: 1.5rem 0;
+	background-color: #0e0c0c;
+	color: #aaa;
+	margin-top: 4rem;
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..3e17eb7
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,6 @@
+{
+  "name": "Gallus_Pub",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}