Add contact form and WhatsApp integration

- Created a new, styled contact form with input validation. - Added WhatsApp Chat link for direct communication. - Introduced `ContactForm.css` with responsive styles to improve usability.
Event Header fix
2025-07-20 14:28:13 +02:00 · 2025-07-20 13:59:45 +02:00 · 2025-07-20 13:57:33 +02:00
8 changed files with 199 additions and 27 deletions
--- a/src/components/EventsGrid.astro
+++ b/src/components/EventsGrid.astro
@ -12,8 +12,8 @@ const { events = [], id }: { events?: Event[], id?: string } = Astro.props as {
 import '../../styles/components/EventsGrid.css';
 ---

+<h2 class="section-title">Events</h2>
 <section id={id} class="events-gird container">
-	<h2 class="section-title">Events</h2>

 	{events.map((event: Event)  => (

--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -35,8 +35,8 @@ import "../../styles/components/Header.css"

 		</div>

-		<a href="/about">About</a>
-		<a href="/contact">Contact</a>
+		<a href="/About">About</a>
+		<a href="/Contact">Contact</a>

 	</nav>

--- a/src/components/Layout.astro
+++ b/src/components/Layout.astro
@ -2,6 +2,7 @@
 // src/components/Layout.astro
 import Header from "./Header.astro";
 import Footer from "./Footer.astro";
+import "../../styles/components/Layout.css"
 ---

 <!doctype html>
--- a/src/pages/Contact.astro
+++ b/src/pages/Contact.astro
@ -1,11 +1,42 @@
 ---
 import Layout from "../components/Layout.astro";
+import "../../styles/components/ContactForm.css";
 ---

 <Layout>
+	<div class="contact-container">
+		<h1 class="contact-title">Kontakt</h1>
 		
-	<h1>Contact</h1>
+		<form class="contact-form">
+			<div class="form-group">
+				<label for="name">Name</label>
+				<input type="text" id="name" name="name" required>
+			</div>
 			
-	<p>Hier findest du alle aktuellen und kommenden Contact im Gallus Pub.</p>
+			<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/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/Header.css
+++ b/styles/components/Header.css
@ -7,6 +7,11 @@
    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: 0.5rem 1rem;
+    height: 70px;
 }


@ -34,7 +39,6 @@
 .nav-main {
    display: flex;
    align-items: center;
-    margin-right: 377px;
 }

 .nav-main a,
@ -86,16 +90,8 @@
 }

@media (max-width: 768px) {
-    .nav-container {
-        padding: 1rem;
-    }
-
-    .nav-links {
-        gap: 1rem;
-    }
-    
-    .nav-main {
-        margin-right: 20px;
+    .header {
+        height: 65px;
    }
    
    .logo {
@ -106,14 +102,16 @@
    .dropdown-content {
        right: 0;
    }
+    
+    .header-spacer {
+        height: 65px;
+    }
 }

@media (max-width: 480px) {
    .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
        padding: 0.5rem;
+        height: 60px;
    }
    
    .logo {
@ -121,13 +119,13 @@
        height: 2.5em;
    }
    
-    .nav-main {
-        margin-right: 10px;
-    }
-    
    .nav-main a,
    .dropdbtn {
        margin: 0 0.5rem;
        font-size: 0.9rem;
    }
+    
+    .header-spacer {
+        height: 60px;
+    }
 }
--- 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/index.css
+++ b/styles/index.css
@ -11,7 +11,7 @@ html {
 }

 body {
-	font-family: var(--font-family-primary);
+	font-family: var(--font-family-primary), serif;
 	background-color: var(--color-background);
 	color: var(--color-text);
 	line-height: var(--line-height);