change dj;

README.md

@@ -20,6 +20,12 @@ You can start editing the page by modifying `app/page.tsx`. The page auto-update
 
 This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
 
+## Production Build
+
+```docker compose build --no-cache```
+
+```docker compose up -d --force-recreate```
+
 ## Learn More
 
 To learn more about Next.js, take a look at the following resources:

ai_docs/images/favicon_io/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

docker-compose.yml

@@ -1,5 +1,3 @@
-version: '3.8'
-
 services:
   web:
     build:
@@ -12,10 +10,10 @@ services:
     restart: always
     labels:
       - traefik.enable=true
-      - traefik.http.routers.qplp.entrypoints=websecure
-      - traefik.http.routers.qplp.rule=Host(`poc.haider.app`)
-      - traefik.http.routers.qplp.tls=true
-      - traefik.http.routers.qplp.tls.certresolver=production
+      - traefik.http.routers.quarryparty.rule=Host(`steinbruchfest.at`) || Host(`www.steinbruchfest.at`)
+      - traefik.http.routers.quarryparty.entrypoints=websecure
+      - traefik.http.routers.quarryparty.tls=true
+      - traefik.http.routers.quarryparty.tls.certresolver=production
       - traefik.docker.network=traefik_nw_public
     networks:
       - traefik_nw_public

package.json

@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "next": "15.3.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "next": "16.0.7",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
     "react-icons": "^5.5.0"
   },
   "devDependencies": {
@@ -22,7 +22,7 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "15.3.4",
+    "eslint-config-next": "16.0.7",
     "tailwindcss": "^4",
     "typescript": "^5"
   }

src/app/globals.css

@@ -1,3 +1,51 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@700&display=swap');
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
+
+@theme {
+  --color-flyer-yellow: #DEE213;
+  --color-flyer-black: #171512;
+  --color-flyer-cream: #FAF7EC;
+
+  --font-roboto: Roboto, sans-serif;
+  --font-stick: "Stick No Bills", sans-serif;
+}
+
+html {
+  scroll-behavior: smooth;
+  scroll-padding-top: 84px;
+}
+
+@keyframes fade-in-up {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fade-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+
+@keyframes photo-sway {
+  0%, 100% {
+    transform: rotate(3deg);
+  }
+  50% {
+    transform: rotate(-2deg);
+  }
+}
+
+.animate-photo-sway {
+  animation: photo-sway 5s ease-in-out infinite;
+}
+
+.bg-halftone {
+  background-image: radial-gradient(rgba(23, 21, 18, 0.12) 1.5px, transparent 1.5px);
+  background-size: 12px 12px;
+}

src/app/impressum/page.tsx

@@ -1,12 +1,11 @@
 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>
+      <div className="container mx-auto px-4 py-16 bg-flyer-cream min-h-screen">
+        <h1 className="font-stick uppercase text-4xl md:text-5xl mb-10 text-flyer-black">Impressum</h1>
 
         <h2 className="text-2xl font-semibold mb-4">Angaben gemäß § 5 E-Commerce-Gesetz (ECG) und § 25 Mediengesetz (MedienG):</h2>
         <p>
@@ -17,7 +16,7 @@ export default function ImpressumPage() {
         <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>
+          Homepage: <a href="https://feuerwehr-friedberg.at" target="_blank" rel="noopener noreferrer" className="text-flyer-black font-bold underline decoration-flyer-yellow decoration-4 underline-offset-2 hover:decoration-black">https://feuerwehr-friedberg.at</a>
         </p>
 
         <h2 className="text-2xl font-semibold mt-8 mb-4">Rechtsform:</h2>

src/app/layout.tsx

@@ -16,8 +16,18 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Steinbruchfest 2025",
-  description: "Steinbruchfest und 150 Jahr-Feier der Freiwillige Feuerwehr Friedberg",
+  title: "Steinbruchfest 2026",
+  description: "Steinbruchfest der Freiwillige Feuerwehr Friedberg",
+  openGraph: {
+    images: [ { width: 512, height: 512, url: 'https://steinbruchfest.at/images/android-chrome-512x512.png', type: 'image/png' } ],
+    type: "website",
+    url: "https://steinbruchfest.at",
+    title: "Steinbruchfest 2026",
+    description: "Steinbruchfest der Freiwillige Feuerwehr Friedberg",
+    locale: "de_AT",
+    siteName: "Steinbruchfest 2026"
+    
+  },
 };
 
 export default function RootLayout({

src/components/CookieBanner.tsx

@@ -22,9 +22,9 @@ export default function CookieBanner() {
   }
 
   return (
-    <div className="fixed bottom-0 inset-x-0 bg-gray-800 text-white p-4 flex flex-col items-center z-50">
-      <p className="text-center max-w-prose mx-auto">Wir verwenden Cookies, um Ihre Erfahrung zu verbessern.</p>
-      <button onClick={handleAccept} className="bg-white text-black px-4 py-2 rounded-full mt-2">Akzeptieren</button>
+    <div className="fixed bottom-0 inset-x-0 bg-flyer-black text-white border-t-4 border-flyer-yellow p-4 flex flex-col items-center z-50">
+      <p className="text-center max-w-prose mx-auto">Beim Steinbruchfest gibt es dann frische Mehlspeisen. Hier leider nur technisch notwendige Cookies</p>
+      <button onClick={handleAccept} className="bg-flyer-yellow text-black font-bold px-6 py-2 rounded-full mt-3 hover:scale-105 transition-transform">Akzeptieren</button>
     </div>
   );
 }

src/components/Dirndlrocker.tsx

@@ -0,0 +1,11 @@
+
+export default function Dirndlrocker() {
+    return (
+        <svg
+            className="w-full h-full object-cover"
+            viewBox="0 0 1920 576"
+            xmlns="http://www.w3.org/2000/svg">
+            <image href="/images/dirndlrocker_black.png" width="1920" height="576" />
+        </svg>
+    )
+}

src/components/Lauser.tsx

@@ -0,0 +1,83 @@
+
+export default function Lauser() {
+    return (
+        <svg
+        className="w-full h-full object-cover"
+            version="1.1"
+            id="svg2"
+            width="1122.52"
+            height="793.70667"
+            viewBox="0 0 1122.52 793.70667"
+            xmlns="http://www.w3.org/2000/svg">
+            <defs
+                id="defs6">
+                <clipPath
+                    clipPathUnits="userSpaceOnUse"
+                    id="clipPath20">
+                    <path
+                        d="M 0,595.28 H 841.89 V 0 H 0 Z"
+                        id="path18" />
+                </clipPath>
+            </defs>
+            <g
+                id="g8"
+                transform="matrix(1.3333333,0,0,-1.3333333,0,793.70667)">
+                <g
+                    id="g10"
+                    transform="translate(116.1533,428.5979)">
+                    <path
+                        d="m 0,0 v -202.099 h 43.307 v -34.646 H -36.089 V 0 Z"
+                        style={{ fill: "#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" }}
+                        id="path12" />
+                </g>
+                <g
+                    id="g14">
+                    <g
+                        id="g16"
+                        clipPath="url(#clipPath20)">
+                        <g
+                            id="g22"
+                            transform="translate(231.6387,382.404)">
+                            <path
+                                d="M 0,0 V -98.163 H 21.654 V 0 c 0,3.271 -1.108,6.013 -3.321,8.228 -2.214,2.213 -4.716,3.32 -7.506,3.32 -2.792,0 -5.294,-1.107 -7.507,-3.32 C 1.105,6.013 0,3.271 0,0 m 57.743,0 v -98.163 h 14.436 v -34.646 H 57.743 v -57.742 H 21.654 v 57.742 H 0 v -57.742 h -36.089 v 57.742 h -14.436 v 34.646 h 14.436 V 0 c 0,12.606 4.547,23.458 13.642,32.552 9.094,9.095 20.185,13.642 33.274,13.642 13.087,0 24.18,-4.547 33.275,-13.642 C 53.196,23.458 57.743,12.606 57.743,0"
+                                style={{ fill: "#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" }}
+                                id="path24" />
+                        </g>
+                        <g
+                            id="g26"
+                            transform="translate(383.2144,428.5979)">
+                            <path
+                                d="m 0,0 h 36.089 v -190.551 c 0,-12.609 -4.547,-23.458 -13.642,-32.552 -9.094,-9.095 -20.187,-13.642 -33.274,-13.642 -13.089,0 -24.18,4.547 -33.274,13.642 -9.095,9.094 -13.642,19.943 -13.642,32.552 V 0 h 36.089 v -190.551 c 0,-3.273 1.106,-6.016 3.321,-8.229 2.212,-2.215 4.714,-3.319 7.506,-3.319 2.79,0 5.292,1.104 7.507,3.319 2.213,2.213 3.32,4.956 3.32,8.229 z"
+                                style={{ fill: "#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" }}
+                                id="path28" />
+                        </g>
+                        <g
+                            id="g30"
+                            transform="translate(497.9775,315.5666)">
+                            <path
+                                d="m 0,0 c 14.916,-14.918 22.376,-31.133 22.376,-48.648 0,-20.596 -7.362,-38.255 -22.087,-52.979 -14.725,-14.725 -33.829,-22.086 -57.31,-22.086 v 34.645 c 13.184,0 23.697,3.92 31.542,11.765 7.843,7.843 11.765,17.395 11.765,28.655 0,10.682 -3.561,19.871 -10.682,27.572 l -10.25,10.393 c -14.917,14.916 -22.375,31.132 -22.375,48.649 0,20.593 7.363,38.254 22.086,52.979 14.725,14.724 33.828,22.086 57.311,22.086 V 78.386 c -13.187,0 -23.7,-3.923 -31.542,-11.765 -7.846,-7.845 -11.766,-17.395 -11.766,-28.655 0,-10.683 3.56,-19.874 10.683,-27.572 z"
+                                style={{ fill: "#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" }}
+                                id="path32" />
+                        </g>
+                        <g
+                            id="g34"
+                            transform="translate(635.8398,428.5979)">
+                            <path
+                                d="M 0,0 V -34.646 H -43.308 V -57.743 H 14.436 V -92.388 H -43.308 V -202.099 H 0 v -34.646 h -79.396 v 144.357 h -14.436 v 34.645 h 14.436 V 0 Z"
+                                style={{ fill: "#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" }}
+                                id="path36" />
+                        </g>
+                        <g
+                            id="g38"
+                            transform="translate(708.0176,387.8894)">
+                            <path
+                                d="m 0,0 v -97.585 c 4.331,1.538 9.672,4.858 16.023,9.96 13.376,10.683 20.067,23.625 20.067,38.833 0,15.204 -6.691,28.149 -20.067,38.832 C 9.672,-4.861 4.331,-1.541 0,0 m 0,-145.801 v -50.235 H -36.089 V 40.708 c 31.372,0 57.26,-8.733 77.664,-26.2 20.402,-17.467 30.604,-38.568 30.604,-63.3 0,-24.735 -10.202,-45.812 -30.604,-63.229 -7.026,-6.063 -13.522,-10.587 -19.488,-13.57 l 52.835,-70.445 H 37.678 Z"
+                                style={{ fill: "#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none" }}
+                                id="path40" />
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </svg>
+    )
+}

src/components/layout/Footer.tsx

@@ -1,10 +1,27 @@
+import { FaEnvelope, FaFireAlt, FaMapMarkerAlt } from "react-icons/fa";
+import Image from 'next/image';
+
 export default function Footer() {
   return (
-    <footer className="bg-gray-800 text-white py-8 min-h-fit">
+    <footer className="bg-flyer-black text-white border-t-4 border-flyer-yellow py-12">
       <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 className="flex items-center justify-center gap-2 mb-4">
+        <Image
+          src="/images/android-chrome-512x512.png"
+          alt="FF Friedberg"
+          width={32}
+          height={32}
+          className="group-hover:scale-110 transition-transform"
+        />
+          <p className="font-stick uppercase tracking-wide">Freiwillige Feuerwehr Friedberg</p>
+        </div>
+        <p className="flex items-center justify-center gap-2 text-white/70 text-sm mt-2">
+          <FaMapMarkerAlt className="shrink-0" /> Grazerstraße 355, 8240 Friedberg
+        </p>
+        <p className="flex items-center justify-center gap-2 text-white/70 text-sm mt-2">
+          <FaEnvelope className="shrink-0" /> kdo.008@bfvhb.at
+        </p>
+        <p className="text-white/40 text-xs mt-8">&copy; 2026 Freiwillige Feuerwehr Friedberg</p>
       </div>
     </footer>
   );

src/components/layout/Header.tsx

@@ -1,9 +1,17 @@
 'use client';
 
+import Image from 'next/image';
 import Link from 'next/link';
 import { useState } from 'react';
 import { FaBars, FaTimes } from 'react-icons/fa';
 
+const NAV_LINKS = [
+  { href: '/#program', label: 'Programm' },
+  { href: '/#info', label: 'Infos' },
+  { href: '/#contact', label: 'Anfahrt' },
+  { href: '/impressum', label: 'Impressum' },
+];
+
 export default function Header() {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -12,20 +20,48 @@ export default function Header() {
   };
 
   return (
-    <header className="sticky top-0 left-0 w-full bg-white shadow-md z-50">
-      <div className="w-full 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 z-50 relative">
-            {isOpen ? <FaTimes /> : <FaBars />}
-          </button>
-        </div>
-        <nav className={`md:flex ${isOpen ? 'block' : 'hidden'} fixed md:relative top-0 left-0 w-full h-full md:w-auto md:h-auto bg-white md:bg-transparent z-40`}>
-          <ul className="flex flex-col md:flex-row items-center justify-center h-full 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>
+    <header className="sticky top-0 left-0 w-full z-50">
+      <div className="absolute inset-0 -z-10 bg-flyer-black [clip-path:polygon(0_0,100%_0,100%_100%,0_82%)] [filter:drop-shadow(0_4px_0_#DEE213)]" />
+
+      <div className="container mx-auto px-4 pt-3 pb-8 md:pb-10 flex justify-between items-center">
+        <Link href="/" className="flex items-center gap-2 md:gap-3 group" onClick={() => setIsOpen(false)}>
+          <Image
+            src="/images/android-chrome-512x512.png"
+            alt="FF Friedberg"
+            width={40}
+            height={40}
+            className="group-hover:scale-110 transition-transform"
+          />
+          <span className="font-stick uppercase leading-tight text-white text-[11px] sm:text-sm md:text-lg">
+            Freiwillige<br />Feuerwehr<br />Friedberg
+          </span>
+        </Link>
+
+        <button
+          onClick={toggleMenu}
+          className="md:hidden text-2xl text-white z-50 relative"
+          aria-label="Menü öffnen"
+        >
+          {isOpen ? <FaTimes /> : <FaBars />}
+        </button>
+
+        <nav
+          className={`fixed md:relative top-0 left-0 w-full h-screen md:h-auto md:w-auto bg-flyer-black md:bg-transparent z-40 transition-transform duration-300 ${
+            isOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
+          }`}
+        >
+          <ul className="flex flex-col md:flex-row items-center justify-center h-full md:h-auto gap-8 md:gap-6 p-4 md:p-0">
+            {NAV_LINKS.map((link) => (
+              <li key={link.href}>
+                <Link
+                  href={link.href}
+                  onClick={toggleMenu}
+                  className="text-lg md:text-base font-bold uppercase tracking-wide text-white hover:text-flyer-yellow transition-colors border-b-2 border-transparent hover:border-flyer-yellow pb-1"
+                >
+                  {link.label}
+                </Link>
+              </li>
+            ))}
           </ul>
         </nav>
       </div>

src/components/sections/Contact.tsx

@@ -1,27 +1,34 @@
+import { FaCloudRain, FaMapMarkerAlt } from "react-icons/fa";
+
 export default function Contact() {
   return (
-    <section id="contact" className="py-20 bg-white">
+    <section id="contact" className="py-20 md:py-28 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>
+        <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-black mb-16">
+          Anfahrt
+        </h2>
+        <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-8 items-stretch">
+          <div className="bg-flyer-cream rounded-2xl shadow-xl p-8 border-2 border-flyer-black/10">
+            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6 text-flyer-black">
+              <FaMapMarkerAlt className="text-flyer-yellow" /> Adresse
+            </h3>
+            <p className="text-lg font-bold">Steinbruch Friedberg</p>
+            <p className="mt-1 text-flyer-black/80">Steinerstraße 253, 8240 Friedberg</p>
+            <div className="mt-6 flex items-start gap-3 bg-flyer-yellow/30 rounded-lg px-4 py-3 text-sm">
+              <FaCloudRain className="mt-0.5 shrink-0" />
+              <span>Bei Schlechtwetter im Sportzentrum Friedberg</span>
             </div>
           </div>
+          <div className="rounded-2xl overflow-hidden shadow-xl border-2 border-flyer-black/10 min-h-[300px]">
+            <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, minHeight: 300 }}
+              allowFullScreen={true}
+              loading="lazy"
+            ></iframe>
+          </div>
         </div>
       </div>
     </section>

src/components/sections/Hero.tsx

@@ -1,23 +1,53 @@
-import MobileImageLandscape from "../MobileImageLandscape";
-
+import { FaCalendarAlt, FaMapMarkerAlt } from "react-icons/fa";
 
 export default function Hero() {
   return (
-    <section className="relative w-full min-h-screen bg-flyer-yellow flex flex-col">
-      <div className="w-full h-[50vh]">
-        <MobileImageLandscape />
-      </div>
-      <div className="w-full h-[50vh] flex flex-col text-center text-black">
-        <div className="md:hidden">
-          <h1 className="text-6xl font-bold font-stick">STEIN</h1>
-          <h1 className="text-6xl font-bold font-stick">BRUCH</h1>
-          <h1 className="text-6xl font-bold font-stick">FEST</h1>
+    <section className="relative w-full bg-flyer-yellow overflow-hidden">
+      <div className="absolute inset-0 bg-halftone opacity-50 pointer-events-none" />
+
+      <div className="relative container mx-auto px-4 pt-20 pb-24 md:pt-24 md:pb-32 grid md:grid-cols-2 gap-12 items-center">
+        <div className="text-black animate-fade-in-up">
+          <h1 className="font-stick uppercase leading-[0.85] tracking-tight text-7xl sm:text-8xl lg:text-[7.5rem] [text-shadow:4px_4px_0_rgba(255,255,255,0.4)]">
+            Stein<br />Bruch<br />Fest
+          </h1>
+
+          <div className="mt-8 inline-flex flex-wrap items-center gap-3">
+            <span className="inline-flex items-center gap-2 bg-flyer-black text-flyer-yellow font-bold uppercase tracking-wide px-4 py-2 rounded-full text-sm sm:text-base">
+              <FaCalendarAlt /> 15. + 16. Aug.
+            </span>
+            <span className="inline-flex items-center gap-2 bg-black/10 text-black font-bold uppercase tracking-wide px-4 py-2 rounded-full text-sm sm:text-base border-2 border-black">
+              <FaMapMarkerAlt /> Steinbruch Friedberg
+            </span>
+          </div>
+
+          <div className="mt-10 flex flex-wrap gap-4">
+            <a
+              href="#program"
+              className="bg-transparent text-black font-bold uppercase tracking-wide px-8 py-4 rounded-full border-2 border-black hover:bg-black hover:text-white transition-colors"
+            >
+              Programm
+            </a>
+            <a
+              href="#contact"
+              className="bg-transparent text-black font-bold uppercase tracking-wide px-8 py-4 rounded-full border-2 border-black hover:bg-black hover:text-white transition-colors"
+            >
+              Anfahrt
+            </a>
+          </div>
         </div>
-        <div className="hidden md:block">
-          <h1 className="text-9xl font-bold font-stick">STEINBRUCHFEST</h1>
+
+        <div className="hidden md:flex justify-center animate-fade-in-up [animation-delay:150ms]">
+          <div className="animate-photo-sway bg-white p-4 rounded-lg shadow-2xl">
+            <img
+                src="/images/manschgerl_gelb.svg"
+                alt="150 Jahre FF Friedberg"
+                className="w-48 sm:w-64 md:w-72 h-auto shrink-0"
+              />
+          </div>
         </div>
-        <p className="text-2xl md:text-4xl mt-4">16. + 17. Aug.</p>
       </div>
+
+      <div className="h-10 md:h-14 bg-flyer-black [clip-path:polygon(0_100%,100%_0,100%_100%)]" />
     </section>
   );
 }

src/components/sections/Info.tsx

@@ -1,24 +1,52 @@
+import { FaHandHoldingHeart, FaTicketAlt } from "react-icons/fa";
+
+const VENDORS = [
+  "Trafik Gressenbauer",
+  "Der Salon - Monika Krammer",
+  "Tapeziermeister Michäler",
+  "FF-Mitglieder",
+];
+
 export default function Info() {
   return (
-    <section id="info" className="py-20 bg-gray-100">
+    <section id="info" className="py-20 md:py-28 bg-flyer-cream">
       <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>
-            <br />
-            <p>Erhältlich bei</p>
-            <ul className="list-disc pl-5">
-              <li>Trafik Gressenbauer</li>
-              <li>Der Salon - Monika Krammer</li>
-              <li>Tapeziermeister Michäler</li>
-              <li>FF-Mitglieder</li>
+        <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-black mb-16">
+          Infos
+        </h2>
+
+        <div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
+          <div className="bg-flyer-black text-white rounded-2xl shadow-xl p-8">
+            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6">
+              <FaTicketAlt className="text-flyer-yellow" /> Karten
+            </h3>
+            <div className="flex items-baseline gap-4 mb-6">
+              <span className="font-stick text-4xl text-flyer-yellow">€ 10,-</span>
+              <span className="uppercase text-sm tracking-wide text-white/70">VVK</span>
+              <span className="text-white/40">/</span>
+              <span className="font-stick text-4xl text-flyer-yellow">€ 12,-</span>
+              <span className="uppercase text-sm tracking-wide text-white/70">AK</span>
+            </div>
+            <p className="uppercase text-sm tracking-wide text-white/70 mb-3">Erhältlich bei</p>
+            <ul className="space-y-2">
+              {VENDORS.map((vendor) => (
+                <li
+                  key={vendor}
+                  className="bg-white/10 rounded-lg px-4 py-2 text-sm md:text-base"
+                >
+                  {vendor}
+                </li>
+              ))}
             </ul>
           </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 className="bg-white rounded-2xl shadow-xl p-8 border-2 border-flyer-black/10">
+            <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6 text-flyer-black">
+              <FaHandHoldingHeart className="text-flyer-yellow" /> Reinerlös
+            </h3>
+            <p className="text-flyer-black/80 leading-relaxed">
+              Der Reinerlös dient der Finanzierung von Fahrzeugen und Geräten der Feuerwehr.
+            </p>
           </div>
         </div>
       </div>

src/components/sections/Program.tsx

@@ -1,19 +1,66 @@
+import { FaChurch, FaClock, FaMusic } from "react-icons/fa";
+import Dirndlrocker from "../Dirndlrocker";
+
 export default function Program() {
   return (
-    <section id="program" className="py-20 bg-white">
+    <section id="program" className="bg-flyer-black text-white py-20 md:py-28">
       <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>
+        <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-yellow mb-16">
+          Programm
+        </h2>
+
+        <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
+          <div className="bg-flyer-yellow text-black rounded-2xl shadow-2xl p-8 flex flex-col">
+            <h3 className="font-stick uppercase text-3xl mb-6">Samstag</h3>
+
+            <ul className="space-y-3 font-medium mb-8">
+              <li className="flex items-center gap-3">
+                <FaClock className="shrink-0" /> Beginn: 19 Uhr
+              </li>
+              <li className="flex items-center gap-3">
+                <FaMusic className="shrink-0" /> Ab 21 Uhr Musik
+              </li>
+            </ul>
+
+            <div className="mt-auto grid grid-cols-2 gap-4">
+              <a
+                href="https://www.dirndl-rocker.at/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-white rounded-xl p-4 flex items-center justify-center hover:scale-105 transition-transform"
+              >
+                <div className="aspect-[1920/576] w-full">
+                  <Dirndlrocker />
+                </div>
+              </a>
+              <a
+                href="https://www.instagram.com/dn.sounds/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-white rounded-xl p-4 flex items-center justify-center hover:scale-105 transition-transform"
+              >
+                <img
+                  src="/images/DN_Sounds_black_transparent.png"
+                  alt="DN Sounds"
+                  className="w-full h-auto object-contain"
+                />
+              </a>
+            </div>
           </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 className="bg-flyer-yellow text-black rounded-2xl shadow-2xl p-8 flex flex-col">
+            <h3 className="font-stick uppercase text-3xl mb-6">Sonntag</h3>
+
+            <ul className="space-y-4 font-medium mb-8">
+              <li className="flex items-start gap-3">
+                <FaChurch className="shrink-0 mt-1" /> Ab 8.45 Uhr Hl. Messe
+              </li>
+              <li className="flex items-start gap-3">
+                <FaMusic className="shrink-0 mt-1" />
+                Frühschoppen mit der{" "}
+                <span className="font-bold">Stadtkapelle Friedberg</span>
+              </li>
+            </ul>
           </div>
         </div>
       </div>

tailwind.config.ts

@@ -1,23 +0,0 @@
-import type { Config } from 'tailwindcss'
-const defaultTheme = require('tailwindcss/defaultTheme');
-
-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',
-      },
-    },
-    fontFamily: {
-        roboto: ['Roboto', ...defaultTheme.fontFamily.sans],
-        stick: ['"Stick No Bills"', ...defaultTheme.fontFamily.sans],
-      },
-  },
-  plugins: [require('@tailwindcss/typography')],
-}
-export default config

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,19 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }