diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..52fcd57
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,29 @@
+# Git
+.git
+.gitignore
+
+# node_modules
+node_modules
+
+# Next.js build output
+.next
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Local environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..0812b70
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,28 @@
+# Use the official Node.js 22 LTS image.
+FROM node:22-alpine AS base
+
+# Set the working directory in the container.
+WORKDIR /app
+
+# Install git.
+RUN apk add --no-cache git
+
+# Clone the repository.
+# IMPORTANT: Replace with your actual repository URL.
+RUN git clone https://git.haider.app/your-repo.git .
+
+# Install dependencies.
+RUN npm install
+
+# Build the Next.js application.
+RUN npm run build
+
+# Create a non-root user to run the application.
+RUN addgroup -S nextjs && adduser -S nextjs -G nextjs
+USER nextjs
+
+# Expose the port the app runs on.
+EXPOSE 8150
+
+# Set the command to start the application.
+CMD ["npm", "start", "--", "-p", "8150"]
diff --git a/GEMINI.md b/GEMINI.md
new file mode 100644
index 0000000..386dd7a
--- /dev/null
+++ b/GEMINI.md
@@ -0,0 +1,6 @@
+This project is a landing page for a fire brigade festival.
+
+**Tech Stack:**
+*   **Framework:** Next.js (React with TypeScript) for Server-Side Rendering (SSR).
+*   **Styling:** Tailwind CSS v4.
+*   **Runtime:** Node.js version >= 22 LTS.
diff --git a/ai_docs/001_init_project_task.md b/ai_docs/001_init_project_task.md
new file mode 100644
index 0000000..3bfcc0e
--- /dev/null
+++ b/ai_docs/001_init_project_task.md
@@ -0,0 +1,103 @@
+# Task Title
+
+**Task ID:** `quarry-party-landing-page-react-001`
+**Date Created:** `2025-07-03`
+**Author:** `Gemini`
+
+---
+
+## Task Description
+
+The objective of this task is to create a new React landing page for the "Steinbruch Fest" hosted by the Freiwillige Feuerwehr Friedberg. The landing page will be built using Next.js and styled with Tailwind CSS v4, ensuring a mobile-first design. All information from the provided flyer will be incorporated into the page, including a Google Maps card in the contact section and a cookie information banner.
+
+---
+
+## Instructions
+
+1.  **Initialize Next.js Project:**
+    *   Create a new Next.js application using `npx create-next-app@latest`.
+    *   Set up the project with TypeScript and Tailwind CSS.
+
+2.  **Project Structure:**
+    *   Organize the project with separate directories for components, styles, and public assets.
+    *   Create individual components for each section of the landing page.
+
+3.  **Header Section:**
+    *   Display the main heading: "Steinbruch Fest."
+    *   Include the dates: "16. + 17. Aug."
+
+4.  **Program Section:**
+    *   **Saturday:**
+        *   Start time: 19:00.
+        *   Music from 21:00 by "LAUSER."
+    *   **Sunday:**
+        *   Holy Mass at 8:45 with music by "MGV Wechselklang."
+        *   Followed by a "FRÜHSCHOPPEN" with the "Stadtkapelle Friedberg."
+
+5.  **Information Section:**
+    *   Ticket prices: VVK €10,- / AK €12,-.
+    *   Ticket sale locations: Trafik Gressenbauer, Der Salon - Monika Krammer, Tapeziermeister Michäler, FF-Mitglieder.
+    *   Charity information: The proceeds will be used to finance vehicles and equipment for the fire department.
+
+6.  **Contact Section:**
+    *   Address: Grazerstraße 355, 8240 Friedberg.
+    *   Embed a Google Maps card showing the location.
+    *   Include a note: "Bei Schlechtwetter im Sportzentrum Friedberg."
+
+7.  **Footer Section:**
+    *   Impressum: Freiwillige Feuerwehr Friedberg, Grazerstraße 355, 8240 Friedberg, kdo.008@bfvhb.at.
+    *   Sponsor logo: "pfeffer & partner."
+
+8.  **Cookie Banner:**
+    *   Implement a cookie information banner to comply with privacy regulations.
+
+9.  **Styling:**
+    *   Use Tailwind CSS v4 for all styling.
+    *   Ensure a mobile-first and responsive design.
+
+---
+
+## Input Data
+
+-   **Image:** `@ai_docs/images/Flyer.jpeg`
+-   **Template:** `@ai_docs/templates/task_template.md`
+
+---
+
+## Expected Output
+
+A fully functional and styled Next.js landing page that includes all the information from the flyer, is mobile-friendly, and features a Google Maps card and a cookie banner.
+
+---
+
+## Constraints & Requirements
+
+-   **Framework:** Next.js
+-   **Styling:** Tailwind CSS v4
+-   **Design:** Mobile-first
+
+---
+
+## System Instructions
+
+> You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.
+
+---
+
+## References
+
+-   [Next.js Documentation](https://nextjs.org/docs)
+-   [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+-   [Google Maps Embed API](https://developers.google.com/maps/documentation/embed/get-started)
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | High             |
+| Status          | Open             |
+| Tags            | React, Next.js, TailwindCSS, Landing Page |
+
+---
diff --git a/ai_docs/002_fix_tailwindcss_task.md b/ai_docs/002_fix_tailwindcss_task.md
new file mode 100644
index 0000000..02b921e
--- /dev/null
+++ b/ai_docs/002_fix_tailwindcss_task.md
@@ -0,0 +1,60 @@
+# Fix Tailwind CSS Import in globals.css
+
+**Task ID:** 002
+**Date Created:** 2025-07-03
+**Author:** Gemini
+
+---
+
+## Task Description
+
+The current implementation of Tailwind CSS in `src/app/globals.css` uses an older import syntax. This task is to update the import to the new v4 syntax.
+
+---
+
+## Instructions
+
+- Open `src/app/globals.css`.
+- Replace the old `@tailwind` directives with the new `@import "tailwindcss";` syntax.
+
+---
+
+## Input Data
+
+`src/app/globals.css`
+
+---
+
+## Expected Output
+
+An updated `src/app/globals.css` file with the correct Tailwind CSS v4 import syntax.
+
+---
+
+## Constraints & Requirements
+
+- Must use Tailwind CSS v4 syntax.
+
+---
+
+## System Instructions (Optional)
+
+> You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.
+
+---
+
+## References (Optional)
+
+- [Tailwind CSS v4 Documentation](https://tailwindcss.com/docs)
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | High             |
+| Status          | Open             |
+| Tags            | CSS, TailwindCSS, Bugfix |
+
+---
diff --git a/ai_docs/003_responsive_fixxes.md b/ai_docs/003_responsive_fixxes.md
new file mode 100644
index 0000000..e51246f
--- /dev/null
+++ b/ai_docs/003_responsive_fixxes.md
@@ -0,0 +1,78 @@
+# Responsive Fixes and Image/Color Update
+
+**Task ID:** 003
+**Date Created:** 2025-07-03
+**Author:** Gemini
+
+---
+
+## Task Description
+
+This task addresses several UI/UX issues to improve the landing page's responsiveness, visual consistency, and user experience. It includes fixing the cut-off footer, ensuring the cookie banner's visibility and proper alignment, making text responsive, updating an image, and applying a specific brand color to the page background.
+
+---
+
+## Instructions
+
+- **Fix Footer:** Adjust CSS to ensure the footer is fully visible and not cut off on any screen size.
+- **Fix Cookie Banner:**
+    - Ensure the 'Accept' button is always visible in desktop mode.
+    - Center the cookie message and the accept button within the banner.
+- **Fix Responsive Text:** Review and apply appropriate responsive Tailwind CSS classes to text elements to ensure they scale correctly across different screen sizes.
+- **Update Image:** Replace the existing `public/images/flyer.jpeg` with `public/images/150_image.png`. (Note: `150_image.png` will be moved from `ai_docs/images` to `public/images` first).
+- **Apply Brand Color:** Identify the yellow color from `ai_docs/images/150_image.png` and apply it as the background color for the main page layout.
+
+---
+
+## Input Data
+
+- `src/components/layout/Footer.tsx`
+- `src/components/CookieBanner.tsx`
+- `src/app/globals.css` (or other relevant CSS files)
+- `src/app/layout.tsx` (or `src/app/page.tsx`)
+- `src/components/sections/Hero.tsx` (or other components using `flyer.jpeg`)
+- `ai_docs/images/150_image.png`
+- `public/images/flyer.jpeg`
+
+---
+
+## Expected Output
+
+- A fully visible footer.
+- A cookie banner with a visible and centered 'Accept' button and centered message.
+- Text elements that are responsive and scale appropriately.
+- The `150_image.png` displayed where `flyer.jpeg` was previously used.
+- The main page background colored with the specified yellow.
+- Updated relevant code files.
+
+---
+
+## Constraints & Requirements
+
+- Maintain existing project conventions (Next.js, React, TypeScript, Tailwind CSS).
+- Ensure changes are responsive and work across various screen sizes.
+- The yellow color must be extracted accurately from `150_image.png`.
+
+---
+
+## System Instructions (Optional)
+
+> You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.
+
+---
+
+## References (Optional)
+
+- `ai_docs/images/failure_footer_cut_off.png`
+- `ai_docs/images/failure_responive_view.png`
+- `ai_docs/images/150_image.png`
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | High             |
+| Status          | Open             |
+| Tags            | UI/UX, Responsive, CSS, Image, Color |
diff --git a/ai_docs/004_create_impressum_page.md b/ai_docs/004_create_impressum_page.md
new file mode 100644
index 0000000..ef58847
--- /dev/null
+++ b/ai_docs/004_create_impressum_page.md
@@ -0,0 +1,65 @@
+# Create Impressum Page
+
+**Task ID:** 004
+**Date Created:** 2025-07-03
+**Author:** Gemini
+
+---
+
+## Task Description
+
+Create a new "Impressum" page for the website, containing the legally required German impressum text for "Freiwillige Feuerwehr Friedberg" as a public corporation under Austrian law. The page must also include information regarding cookie usage. Additionally, a new menu entry for this Impressum page needs to be added to the website's navigation.
+
+---
+
+## Instructions
+
+- Create a new file `src/app/impressum/page.tsx` for the Impressum page.
+- Populate `src/app/impressum/page.tsx` with the necessary German impressum text for "Freiwillige Feuerwehr Friedberg" (Körperschaft öffentlichen Rechts) and cookie information.
+- Add a new navigation link to the `src/components/layout/Header.tsx` component that points to the new `/impressum` page.
+
+---
+
+## Input Data
+
+- `ai_docs/templates/task_template.md` (used for this plan)
+- Information for "Freiwillige Feuerwehr Friedberg" (Körperschaft öffentlichen Rechts) for generating the Impressum text.
+
+---
+
+## Expected Output
+
+- A new, functional Impressum page at `/impressum`.
+- The Impressum page containing legally compliant German text for Austrian law, including cookie information.
+- An updated navigation menu in the header with a link to the Impressum page.
+
+---
+
+## Constraints & Requirements
+
+- The Impressum text must comply with Austrian legal requirements for a "Körperschaft öffentlichen Rechts".
+- The cookie information must be included.
+- The page must be in German.
+- Adhere to existing Next.js, React, and TypeScript conventions.
+
+---
+
+## System Instructions (Optional)
+
+> You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.
+
+---
+
+## References (Optional)
+
+- Austrian E-Commerce Law (ECG) for Impressum requirements.
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | High             |
+| Status          | Open             |
+| Tags            | Legal, UI/UX, New Feature |
diff --git a/ai_docs/005_impressum_header_content.md b/ai_docs/005_impressum_header_content.md
new file mode 100644
index 0000000..09fc9dd
--- /dev/null
+++ b/ai_docs/005_impressum_header_content.md
@@ -0,0 +1,70 @@
+# Add Header and Update Content for Impressum Page
+
+**Task ID:** 005
+**Date Created:** 2025-07-03
+**Author:** Gemini
+
+---
+
+## Task Description
+
+Add a header component to the impressum page (`src/app/impressum/page.tsx`) and update its content with the information provided in `ai_docs/templates/impressum.md`.
+
+---
+
+## Instructions
+
+- Read the content of `ai_docs/templates/impressum.md`.
+- Modify `src/app/impressum/page.tsx` to include the `Header` component from `src/components/layout/Header.tsx`.
+- Replace the existing content of the impressum page with the content from `ai_docs/templates/impressum.md`, adapting it to JSX format.
+- Ensure all links are properly formatted and accessible.
+- Run the linter to check for any new issues.
+
+---
+
+## Input Data
+
+- `ai_docs/templates/impressum.md`: Markdown file containing the impressum content.
+- `src/app/impressum/page.tsx`: The impressum page component.
+- `src/components/layout/Header.tsx`: The header component to be included.
+
+---
+
+## Expected Output
+
+- The impressum page (`src/app/impressum/page.tsx`) should display the content from `ai_docs/templates/impressum.md` and include the `Header` component at the top.
+- No linting errors should be introduced.
+
+---
+
+## Constraints & Requirements
+
+- The changes must adhere to the existing code style and structure.
+- The `Header` component must be imported and used correctly.
+- All content from `ai_docs/templates/impressum.md` must be accurately reflected in the `page.tsx` file.
+
+---
+
+## System Instructions (Optional)
+
+> You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.
+
+---
+
+## References (Optional)
+
+- `ai_docs/templates/impressum.md`
+- `src/app/impressum/page.tsx`
+- `src/components/layout/Header.tsx`
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | High             |
+| Status          | Completed        |
+| Tags            | impressum, header, content update |
+
+---
diff --git a/ai_docs/006_fix_menu_navigation.md b/ai_docs/006_fix_menu_navigation.md
new file mode 100644
index 0000000..dc810c1
--- /dev/null
+++ b/ai_docs/006_fix_menu_navigation.md
@@ -0,0 +1,64 @@
+# Fix Menu Navigation on Impressum Page
+
+**Task ID:** 006
+**Date Created:** 2025-07-03
+**Author:** Gemini
+
+---
+
+## Task Description
+
+When navigating from the impressum page, the menu links for "Programm", "Infos", and "Kontakt" were incorrectly trying to find the anchor on the impressum page itself, leading to a broken navigation experience. This task fixes the navigation to correctly direct to the main page and then scroll to the respective sections.
+
+---
+
+## Instructions
+
+- Modify `src/components/layout/Header.tsx`.
+- Prepend a `/` to the `href` attributes for the "Programm", "Infos", and "Kontakt" links to ensure they always navigate to the root path before attempting to scroll to the anchor.
+- Run the linter to check for any new issues.
+
+---
+
+## Input Data
+
+- `src/components/layout/Header.tsx`: The header component containing the navigation links.
+
+---
+
+## Expected Output
+
+- Clicking on "Programm", "Infos", or "Kontakt" from the impressum page should navigate to the main page and then scroll to the corresponding section.
+- No linting errors should be introduced.
+
+---
+
+## Constraints & Requirements
+
+- The changes must ensure correct navigation behavior from all pages.
+- The `Link` component from `next/link` should be used appropriately.
+
+---
+
+## System Instructions (Optional)
+
+> You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.
+
+---
+
+## References (Optional)
+
+- `src/components/layout/Header.tsx`
+- `ai_docs/images/failure_navigation.png`
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | High             |
+| Status          | Completed        |
+| Tags            | navigation, bugfix, impressum |
+
+---
diff --git a/ai_docs/007_mobile_fixes.md b/ai_docs/007_mobile_fixes.md
new file mode 100644
index 0000000..bee3ad5
--- /dev/null
+++ b/ai_docs/007_mobile_fixes.md
@@ -0,0 +1,67 @@
+# Add Burger Menu and Fix Hero Section Cut-off
+
+**Task ID:** 007
+**Date Created:** 2025-07-03
+**Author:** Gemini
+
+---
+
+## Task Description
+
+This task addresses two issues: ensuring the hero section is not cut off in mobile view and confirming the implementation of a burger menu for mobile navigation.
+
+---
+
+## Instructions
+
+- Modified `src/components/sections/Hero.tsx` to use `min-h-screen` instead of `h-screen` to prevent content from being cut off on smaller screens.
+- Verified that the burger menu functionality is already implemented in `src/components/layout/Header.tsx` using `useState` and conditional Tailwind CSS classes for responsiveness.
+- Run the linter to check for any new issues.
+
+---
+
+## Input Data
+
+- `src/components/sections/Hero.tsx`: The Hero section component.
+- `src/components/layout/Header.tsx`: The Header component containing the navigation.
+
+---
+
+## Expected Output
+
+- The Hero section should display correctly on all screen sizes without content being cut off.
+- The burger menu in the header should function as expected on mobile devices, toggling the navigation links.
+- No linting errors should be introduced.
+
+---
+
+## Constraints & Requirements
+
+- The changes must maintain the existing design and responsiveness.
+- The burger menu should be intuitive and functional.
+
+---
+
+## System Instructions (Optional)
+
+> You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.
+
+---
+
+## References (Optional)
+
+- `src/components/sections/Hero.tsx`
+- `src/components/layout/Header.tsx`
+- `ai_docs/images/failure_cut_off_hero_section.png`
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | High             |
+| Status          | Completed        |
+| Tags            | mobile, responsive, hero section, burger menu |
+
+---
diff --git a/ai_docs/008_dockerize_application.md b/ai_docs/008_dockerize_application.md
new file mode 100644
index 0000000..ac08dc6
--- /dev/null
+++ b/ai_docs/008_dockerize_application.md
@@ -0,0 +1,58 @@
+# Task Title
+
+**Task ID:** 008
+**Date Created:** 2025-07-04
+**Author:** Gemini
+
+---
+
+## Task Description
+
+This task is to containerize the application using Docker and Docker Compose. The project code will be cloned from a git repository before the build.
+
+---
+
+## Instructions
+
+- A `Dockerfile` is created to define the build steps for the Next.js application.
+- A `.dockerignore` file is created to exclude unnecessary files from the Docker build context.
+- A `docker-compose.yml` file is created to define the services for the application.
+
+---
+
+## Input Data
+
+- The git repository URL from `git.haider.app`.
+
+---
+
+## Expected Output
+
+- A Docker image that can be run as a container.
+- The application will be accessible on port 8150.
+
+---
+
+## Constraints & Requirements
+
+- The project code must be cloned from a git repository.
+- The application must run on port 8150.
+
+---
+
+## References (Optional)
+
+- [Docker Documentation](https://docs.docker.com/)
+- [Docker Compose Documentation](https://docs.docker.com/compose/)
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | High             |
+| Status          | Done             |
+| Tags            | Docker, Docker Compose, Deployment |
+
+---
diff --git a/ai_docs/images/Flyer.jpeg b/ai_docs/images/Flyer.jpeg
new file mode 100644
index 0000000..0f90b64
Binary files /dev/null and b/ai_docs/images/Flyer.jpeg differ
diff --git a/ai_docs/images/failure_cut_off_heo_section.png b/ai_docs/images/failure_cut_off_heo_section.png
new file mode 100644
index 0000000..0b1c258
Binary files /dev/null and b/ai_docs/images/failure_cut_off_heo_section.png differ
diff --git a/ai_docs/images/failure_footer_cut_off.png b/ai_docs/images/failure_footer_cut_off.png
new file mode 100644
index 0000000..48d70a7
Binary files /dev/null and b/ai_docs/images/failure_footer_cut_off.png differ
diff --git a/ai_docs/images/failure_navigation.png b/ai_docs/images/failure_navigation.png
new file mode 100644
index 0000000..b2cccd8
Binary files /dev/null and b/ai_docs/images/failure_navigation.png differ
diff --git a/ai_docs/images/failure_responive_view.png b/ai_docs/images/failure_responive_view.png
new file mode 100644
index 0000000..5544410
Binary files /dev/null and b/ai_docs/images/failure_responive_view.png differ
diff --git a/ai_docs/templates/impressum.md b/ai_docs/templates/impressum.md
new file mode 100644
index 0000000..225baaf
--- /dev/null
+++ b/ai_docs/templates/impressum.md
@@ -0,0 +1,44 @@
+## Impressum
+
+**Angaben gemäß § 5 E-Commerce-Gesetz (ECG) und § 25 Mediengesetz (MedienG):**
+
+Freiwillige Feuerwehr Friedberg
+Grazerstraße 355
+8240 Friedberg
+
+Kommandant: HBI Ing. Bernhard Ehgartner
+E-Mail: kdo.008@bfvhb.at
+Homepage: htps://feuerwehr-friedberg.at
+
+**Rechtsform:**  
+Körperschaft öffentlichen Rechts nach dem Steiermärkischen Feuerwehrgesetz.
+
+**Tätigkeiten:**  
+Erledigung der gesetzlichen Aufgaben nach dem Steiermärkischen Feuerwehrgesetz samt Feuerwehrordnung und Dienstanweisungen des Landesfeuerwehrverbandes.
+
+**Verantwortliche für den Inhalt:**  
+HBI Ing. Bernhard Ehgartner
+OBI Tizian Haider
+
+**Datenschutz:**  
+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.
+ 
+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.
+
+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.
+
+Auf unserer Website ist Google Maps eingebunden, um Ihnen die Anfahrt zu unserem Feuerwehrfest zu erleichtern.
+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.
+
+Technisch notwendige Cookies ermöglichen die grundlegende Funktion der Kartenanzeige und erfordern keine Einwilligung.
+
+**Haftungsausschluss:**  
+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.
+
+**Urheberrecht**   
+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.
+      
+
+**Notruf:**  
+Im Notfall wählen Sie bitte den Feuerwehr-Notruf 122.
+
diff --git a/ai_docs/templates/task_template.md b/ai_docs/templates/task_template.md
new file mode 100644
index 0000000..b4835ff
--- /dev/null
+++ b/ai_docs/templates/task_template.md
@@ -0,0 +1,75 @@
+# Task Title
+
+**Task ID:** <!-- Unique identifier for the task -->
+**Date Created:** <!-- YYYY-MM-DD -->
+**Author:** <!-- Name or team -->
+
+---
+
+## Task Description
+
+Provide a concise and clear description of the task.  
+Explain the objective, background, and any relevant context.
+
+---
+
+## Instructions
+
+- List step-by-step instructions for completing this task.
+- Be specific and unambiguous.
+- Use bullet points or numbered lists for clarity.
+
+---
+
+## Input Data
+
+Describe the expected input(s) for this task.  
+You may include:
+- Data formats (e.g., text, image, JSON)
+- Example input(s)
+
+---
+
+## Expected Output
+
+Describe the desired output(s) for this task.  
+Include:
+- Output format (e.g., Markdown, JSON, plain text)
+- Example output(s)
+
+---
+
+## Constraints & Requirements
+
+- List any rules, constraints, or requirements.
+- Specify model version if necessary (e.g., gemini-1.5-pro).
+
+---
+
+## System Instructions (Optional)
+
+> You are an expert assistant. Follow the instructions precisely and provide clear, concise answers.
+
+---
+
+## References (Optional)
+
+- List any relevant documents, links, or resources.
+
+---
+
+## Metadata
+
+| Key             | Value            |
+|-----------------|------------------|
+| Priority        | <!-- e.g., High --> |
+| Status          | <!-- e.g., Open --> |
+| Tags            | <!-- e.g., NLP, Summarization --> |
+
+---
+
+<!--
+Notes:
+- This template is designed for compatibility with Gemini's Markdown file handling and collaborative editing features.
+- You can upload, edit, and export this file using Gemini's Markdown tools[6].
+-->
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..0f46ec6
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,8 @@
+version: '3.8'
+
+services:
+  web:
+    build: .
+    ports:
+      - "8150:8150"
+    restart: unless-stopped
diff --git a/package-lock.json b/package-lock.json
index 0963856..d559f7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,11 +10,13 @@
       "dependencies": {
         "next": "15.3.4",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@tailwindcss/postcss": "^4",
+        "@tailwindcss/typography": "^0.5.16",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
@@ -1262,6 +1264,22 @@
         "tailwindcss": "4.1.11"
       }
     },
+    "node_modules/@tailwindcss/typography": {
+      "version": "0.5.16",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.16.tgz",
+      "integrity": "sha512-0wDLwCVF5V3x3b1SGXPCDcdsbDHMBe+lkFzBRaHeLvNi+nrrnZ1lA18u+OTWO8iSWU2GxUOCvlXtDuqftc1oiA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lodash.castarray": "^4.4.0",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.merge": "^4.6.2",
+        "postcss-selector-parser": "6.0.10"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
@@ -2388,6 +2406,19 @@
         "node": ">= 8"
       }
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
@@ -4479,6 +4510,20 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash.castarray": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
+      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -5024,6 +5069,20 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -5098,6 +5157,15 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -6023,6 +6091,13 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 1c60a6e..292744b 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,21 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "next": "15.3.4"
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/typography": "^0.5.16",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
     "eslint": "^9",
     "eslint-config-next": "15.3.4",
-    "@eslint/eslintrc": "^3"
+    "tailwindcss": "^4",
+    "typescript": "^5"
   }
 }
diff --git a/public/images/150_image.png b/public/images/150_image.png
new file mode 100644
index 0000000..22fa47e
Binary files /dev/null and b/public/images/150_image.png differ
diff --git a/public/images/flyer.jpeg b/public/images/flyer.jpeg
new file mode 100644
index 0000000..0f90b64
Binary files /dev/null and b/public/images/flyer.jpeg differ
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..f1d8c73 100644
--- a/src/app/globals.css
+++ b/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;
-}
diff --git a/src/app/impressum/page.tsx b/src/app/impressum/page.tsx
new file mode 100644
index 0000000..90dd1c5
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index f7fa87e..5ec7991 100644
--- a/src/app/layout.tsx
+++ b/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>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index e68abe6..ee743e2 100644
--- a/src/app/page.tsx
+++ b/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 />
+    </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/CookieBanner.tsx b/src/components/CookieBanner.tsx
new file mode 100644
index 0000000..d123496
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..b955195
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 0000000..dadc320
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/sections/Contact.tsx b/src/components/sections/Contact.tsx
new file mode 100644
index 0000000..531959a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/sections/Hero.tsx b/src/components/sections/Hero.tsx
new file mode 100644
index 0000000..11b0d38
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/sections/Info.tsx b/src/components/sections/Info.tsx
new file mode 100644
index 0000000..314f19a
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/sections/Program.tsx b/src/components/sections/Program.tsx
new file mode 100644
index 0000000..ada92fa
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..83d3ca3
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,18 @@
+import type { Config } from 'tailwindcss'
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'flyer-yellow': '#FFD700',
+      },
+    },
+  },
+  plugins: [require('@tailwindcss/typography')],
+}
+export default config