feat: add docker-compose for deployment

src/app/globals.css

@@ -1,26 +1 @@
 @import "tailwindcss";
-
-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
-
-@theme inline {
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}

src/app/impressum/page.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import Header from '../../components/layout/Header';
+
+export default function ImpressumPage() {
+  return (
+    <>
+      <Header />
+      <div className="container mx-auto px-4 py-8">
+        <h1 className="text-3xl font-bold mb-6">Impressum</h1>
+
+        <h2 className="text-2xl font-semibold mb-4">Angaben gemäß § 5 E-Commerce-Gesetz (ECG) und § 25 Mediengesetz (MedienG):</h2>
+        <p>
+          Freiwillige Feuerwehr Friedberg<br />
+          Grazerstraße 355<br />
+          8240 Friedberg
+        </p>
+        <p className="mt-2">
+          Kommandant: HBI Ing. Bernhard Ehgartner<br />
+          E-Mail: kdo.008@bfvhb.at<br />
+          Homepage: <a href="https://feuerwehr-friedberg.at" target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">https://feuerwehr-friedberg.at</a>
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Rechtsform:</h2>
+        <p>
+          Körperschaft öffentlichen Rechts nach dem Steiermärkischen Feuerwehrgesetz.
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Tätigkeiten:</h2>
+        <p>
+          Erledigung der gesetzlichen Aufgaben nach dem Steiermärkischen Feuerwehrgesetz samt Feuerwehrordnung und Dienstanweisungen des Landesfeuerwehrverbandes.
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Verantwortliche für den Inhalt:</h2>
+        <p>
+          HBI Ing. Bernhard Ehgartner<br />
+          OBI Tizian Haider
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Datenschutz:</h2>
+        <p>
+          Wir nehmen den Schutz Ihrer persönlichen Daten sehr ernst. Wir behandeln Ihre personenbezogenen Daten vertraulich und entsprechend der gesetzlichen Datenschutzvorschriften sowie dieser Datenschutzerklärung.
+        </p>
+        <p className="mt-2">
+          Unsere Website verwendet Cookies, um die Benutzerfreundlichkeit zu verbessern und bestimmte Funktionen zu ermöglichen. Cookies sind kleine Textdateien, die auf Ihrem Endgerät abgelegt werden und die Ihr Browser speichert. Einige der von uns verwendeten Cookies sind so genannte „Session-Cookies“. Sie werden nach Ende Ihres Besuchs automatisch gelöscht. Andere Cookies bleiben auf Ihrem Endgerät gespeichert, bis Sie diese löschen. Diese Cookies ermöglichen es uns, Ihren Browser beim nächsten Besuch wiederzuerkennen.
+        </p>
+        <p className="mt-2">
+          Sie können Ihren Browser so einstellen, dass Sie über das Setzen von Cookies informiert werden und Cookies nur im Einzelfall erlauben, die Annahme von Cookies für bestimmte Fälle oder generell ausschließen sowie das automatische Löschen der Cookies beim Schließen des Browsers aktivieren. Bei der Deaktivierung von Cookies kann die Funktionalität dieser Website eingeschränkt sein.
+        </p>
+        <p className="mt-2">
+          Auf unserer Website ist Google Maps eingebunden, um Ihnen die Anfahrt zu unserem Feuerwehrfest zu erleichtern.<br />
+          Beim Aufruf der Karte wird eine Verbindung zu Servern von Google hergestellt, wobei personenbezogene Daten (z. B. IP-Adresse) übertragen werden können. Zudem setzt Google Maps Cookies, die teilweise technisch notwendig sind, um die Kartenfunktion bereitzustellen, und teilweise für Analyse- und Werbezwecke genutzt werden.
+        </p>
+        <p className="mt-2">
+          Technisch notwendige Cookies ermöglichen die grundlegende Funktion der Kartenanzeige und erfordern keine Einwilligung.
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Haftungsausschluss:</h2>
+        <p>
+          Die Freiwillige Feuerwehr Friedberg übernimmt keine Haftung für die Aktualität, Richtigkeit und Vollständigkeit der bereitgestellten Informationen. Für den Inhalt verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich.
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Urheberrecht:</h2>
+        <p>
+          Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem österreichischen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet. Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.
+        </p>
+
+        <h2 className="text-2xl font-semibold mt-8 mb-4">Notruf:</h2>
+        <p>
+          Im Notfall wählen Sie bitte den Feuerwehr-Notruf 122.
+        </p>
+      </div>
+    </>
+  );
+}

src/app/layout.tsx

@@ -25,7 +25,7 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-flyer-yellow`}
       >
         {children}
       </body>

src/app/page.tsx

@@ -1,103 +1,23 @@
-import Image from "next/image";
+import Header from '@/components/layout/Header';
+import Footer from '@/components/layout/Footer';
+import CookieBanner from '@/components/CookieBanner';
+import Hero from '@/components/sections/Hero';
+import Program from '@/components/sections/Program';
+import Info from '@/components/sections/Info';
+import Contact from '@/components/sections/Contact';
 
 export default function Home() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
+    <>
+      <Header />
+      <main>
+        <Hero />
+        <Program />
+        <Info />
+        <Contact />
       </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+      <Footer />
+      <CookieBanner />
+    </>
   );
-}
+}

src/components/CookieBanner.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export default function CookieBanner() {
+  const [showBanner, setShowBanner] = useState(false);
+
+  useEffect(() => {
+    const cookieConsent = localStorage.getItem('cookieConsent');
+    if (!cookieConsent) {
+      setShowBanner(true);
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem('cookieConsent', 'true');
+    setShowBanner(false);
+  };
+
+  if (!showBanner) {
+    return null;
+  }
+
+  return (
+    <div className="fixed bottom-0 left-0 w-full bg-gray-800 text-white p-4 flex flex-col md:flex-row justify-center items-center z-50 space-y-2 md:space-y-0 md:space-x-4">
+      <p>Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.</p>
+      <button onClick={handleAccept} className="bg-flyer-yellow text-black px-4 py-2 rounded">Akzeptieren</button>
+    </div>
+  );
+}

src/components/layout/Footer.tsx

@@ -0,0 +1,11 @@
+export default function Footer() {
+  return (
+    <footer className="bg-gray-800 text-white py-8 min-h-fit">
+      <div className="container mx-auto px-4 text-center">
+        <p>&copy; 2025 Freiwillige Feuerwehr Friedberg</p>
+        <p className="mt-2">Grazerstraße 355, 8240 Friedberg</p>
+        <p className="mt-2">kdo.008@bfvhb.at</p>
+      </div>
+    </footer>
+  );
+}

src/components/layout/Header.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import Link from 'next/link';
+import { useState } from 'react';
+import { FaBars, FaTimes } from 'react-icons/fa';
+
+export default function Header() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <header className="fixed top-0 left-0 w-full bg-white shadow-md z-50">
+      <div className="container mx-auto px-4 py-4 flex justify-between items-center">
+        <Link href="/" className="text-2xl font-bold">FF Friedberg</Link>
+        <div className="md:hidden">
+          <button onClick={toggleMenu} className="text-2xl">
+            {isOpen ? <FaTimes /> : <FaBars />}
+          </button>
+        </div>
+        <nav className={`md:flex ${isOpen ? 'block' : 'hidden'} absolute md:relative top-full left-0 w-full md:w-auto bg-white md:bg-transparent shadow-md md:shadow-none`}>
+          <ul className="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0 p-4 md:p-0">
+            <li><Link href="/#program" className="hover:underline" onClick={toggleMenu}>Programm</Link></li>
+            <li><Link href="/#info" className="hover:underline" onClick={toggleMenu}>Infos</Link></li>
+            <li><Link href="/#contact" className="hover:underline" onClick={toggleMenu}>Kontakt</Link></li>
+            <li><Link href="/impressum" className="hover:underline" onClick={toggleMenu}>Impressum</Link></li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  );
+}

src/components/sections/Contact.tsx

@@ -0,0 +1,29 @@
+export default function Contact() {
+  return (
+    <section id="contact" className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Kontakt & Anfahrt</h2>
+        <div className="flex flex-col md:flex-row md:space-x-8">
+          <div className="flex-1 mb-8 md:mb-0">
+            <h3 className="text-xl md:text-2xl font-bold mb-4">Adresse</h3>
+            <p>Steinbruch Friedberg</p>
+            <p className="mt-4">Steinerstraße 253, 8240 Friedberg</p>
+            <p>Bei Schlechtwetter im Sportzentrum Friedberg</p>
+          </div>
+          <div className="flex-1">
+            <div className="aspect-w-16 aspect-h-9">
+              <iframe
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3228.641194756047!2d16.055658899999997!3d47.448087799999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x476e7d7cb5936f95%3A0xab5b000c861e595b!2sSteinbruch%20Friedberg!5e1!3m2!1sde!2sat!4v1751542474148!5m2!1sde!2sat"
+                width="100%"
+                height="100%"
+                style={{ border: 0 }}
+                allowFullScreen={true}
+                loading="lazy"
+              ></iframe>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/sections/Hero.tsx

@@ -0,0 +1,11 @@
+export default function Hero() {
+  return (
+    <section className="relative w-full min-h-screen bg-flyer-yellow flex items-center justify-center">
+      <img src="/images/150_image.png" alt="150 Jahre Feuerwehr Friedberg" className="absolute inset-0 w-full h-full object-cover opacity-20" />
+      <div className="relative z-10 text-center text-black">
+        <h1 className="text-6xl md:text-9xl font-bold">STEINBRUCHFEST</h1>
+        <p className="text-2xl md:text-4xl mt-4">16. + 17. Aug.</p>
+      </div>
+    </section>
+  );
+}

src/components/sections/Info.tsx

@@ -0,0 +1,20 @@
+export default function Info() {
+  return (
+    <section id="info" className="py-20 bg-gray-100">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Infos</h2>
+        <div className="max-w-3xl mx-auto">
+          <div className="mb-8">
+            <h3 className="text-xl md:text-2xl font-bold mb-4">Karten</h3>
+            <p>VVK € 10,- / AK € 12,-</p>
+            <p>Karten: Trafik Gressenbauer, Der Salon - Monika Krammer, Tapeziermeister Michäler, FF-Mitglieder</p>
+          </div>
+          <div>
+            <h3 className="text-xl md:text-2xl font-bold mb-4">Reinerlös</h3>
+            <p>Der Reinerlös dient der Finanzierung von Fahrzeugen und Geräten der Feuerwehr.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/sections/Program.tsx

@@ -0,0 +1,22 @@
+export default function Program() {
+  return (
+    <section id="program" className="py-20 bg-white">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Programm</h2>
+        <div className="flex flex-col md:flex-row md:space-x-8">
+          <div className="flex-1 mb-8 md:mb-0">
+            <h3 className="text-xl md:text-2xl font-bold mb-4">Samstag</h3>
+            <p>Beginn: 19 Uhr</p>
+            <p>Ab 21 Uhr Musik: <span className="font-bold">LAUSER</span></p>
+          </div>
+          <div className="flex-1">
+            <h3 className="text-xl md:text-2xl font-bold mb-4">Sonntag</h3>
+            <p>Ab 8.45 Uhr Hl. Messe</p>
+            <p>Musik: <span className="font-bold">MGV Wechselklang</span></p>
+            <p className="mt-4">Frühschoppen mit der <span className="font-bold">Stadtkapelle Friedberg</span></p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}