tizian/quarry-party-landing-page-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change design;

Browse Source
This commit is contained in:
tizian
2026-07-19 16:34:09 +02:00
parent 8cd8c3dc4b
commit 32e5db4ae8
11 changed files with 297 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
public/images/manschgerl_gelb.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

52
src/app/globals.css
View File

@@ -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 url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@700&display=swap');
@import "tailwindcss"; @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;
}

6
src/app/impressum/page.tsx
View File

@@ -4,8 +4,8 @@ export default function ImpressumPage() {
return ( return (
<> <>
{/* <Header /> */} {/* <Header /> */}
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-16 bg-flyer-cream min-h-screen">
<h1 className="text-3xl font-bold mb-6">Impressum</h1> <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> <h2 className="text-2xl font-semibold mb-4">Angaben gemäß § 5 E-Commerce-Gesetz (ECG) und § 25 Mediengesetz (MedienG):</h2>
<p> <p>
@@ -16,7 +16,7 @@ export default function ImpressumPage() {
<p className="mt-2"> <p className="mt-2">
Kommandant: HBI Ing. Bernhard Ehgartner<br /> Kommandant: HBI Ing. Bernhard Ehgartner<br />
E-Mail: kdo.008@bfvhb.at<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> </p>
<h2 className="text-2xl font-semibold mt-8 mb-4">Rechtsform:</h2> <h2 className="text-2xl font-semibold mt-8 mb-4">Rechtsform:</h2>

4
src/components/CookieBanner.tsx
View File

@@ -22,9 +22,9 @@ export default function CookieBanner() {
} }
return ( return (
<div className="fixed bottom-0 inset-x-0 bg-gray-800 text-white p-4 flex flex-col items-center z-50"> <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> <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-white text-black px-4 py-2 rounded-full mt-2">Akzeptieren</button> <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> </div>
); );
} }

25
src/components/layout/Footer.tsx
View File

@@ -1,10 +1,27 @@
import { FaEnvelope, FaFireAlt, FaMapMarkerAlt } from "react-icons/fa";
import Image from 'next/image';
export default function Footer() { export default function Footer() {
return ( 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"> <div className="container mx-auto px-4 text-center">
<p>&copy; 2026 Freiwillige Feuerwehr Friedberg</p> <div className="flex items-center justify-center gap-2 mb-4">
<p className="mt-2">Grazerstraße 355, 8240 Friedberg</p> <Image
<p className="mt-2">kdo.008@bfvhb.at</p> 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> </div>
</footer> </footer>
); );

64
src/components/layout/Header.tsx
View File

@@ -1,9 +1,17 @@
'use client'; 'use client';
import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { useState } from 'react'; import { useState } from 'react';
import { FaBars, FaTimes } from 'react-icons/fa'; import { FaBars, FaTimes } from 'react-icons/fa';
const NAV_LINKS = [
{ href: '/#program', label: 'Programm' },
{ href: '/#info', label: 'Infos' },
{ href: '/#contact', label: 'Kontakt' },
{ href: '/impressum', label: 'Impressum' },
];
export default function Header() { export default function Header() {
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
@@ -12,20 +20,48 @@ export default function Header() {
}; };
return ( return (
<header className="sticky top-0 left-0 w-full bg-white shadow-md z-50"> <header className="sticky top-0 left-0 w-full z-50">
<div className="w-full px-4 py-4 flex justify-between items-center"> <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)]" />
<Link href="/" className="text-2xl font-bold">FF Friedberg</Link>
<div className="md:hidden"> <div className="container mx-auto px-4 pt-3 pb-8 md:pb-10 flex justify-between items-center">
<button onClick={toggleMenu} className="text-2xl z-50 relative"> <Link href="/" className="flex items-center gap-2 md:gap-3 group" onClick={() => setIsOpen(false)}>
{isOpen ? <FaTimes /> : <FaBars />} <Image
</button> src="/images/android-chrome-512x512.png"
</div> alt="FF Friedberg"
<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`}> width={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"> height={40}
<li><Link href="/#program" className="hover:underline" onClick={toggleMenu}>Programm</Link></li> className="group-hover:scale-110 transition-transform"
<li><Link href="/#info" className="hover:underline" onClick={toggleMenu}>Infos</Link></li> />
<li><Link href="/#contact" className="hover:underline" onClick={toggleMenu}>Kontakt</Link></li> <span className="font-stick uppercase leading-tight text-white text-[11px] sm:text-sm md:text-lg">
<li><Link href="/impressum" className="hover:underline" onClick={toggleMenu}>Impressum</Link></li> 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> </ul>
</nav> </nav>
</div> </div>

45
src/components/sections/Contact.tsx
View File

@@ -1,27 +1,34 @@
import { FaCloudRain, FaMapMarkerAlt } from "react-icons/fa";
export default function Contact() { export default function Contact() {
return ( 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"> <div className="container mx-auto px-4">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Kontakt & Anfahrt</h2> <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-black mb-16">
<div className="flex flex-col md:flex-row md:space-x-8"> Anfahrt
<div className="flex-1 mb-8 md:mb-0"> </h2>
<h3 className="text-xl md:text-2xl font-bold mb-4">Adresse</h3> <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-8 items-stretch">
<p>Steinbruch Friedberg</p> <div className="bg-flyer-cream rounded-2xl shadow-xl p-8 border-2 border-flyer-black/10">
<p className="mt-4">Steinerstraße 253, 8240 Friedberg</p> <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6 text-flyer-black">
<p>Bei Schlechtwetter im Sportzentrum Friedberg</p> <FaMapMarkerAlt className="text-flyer-yellow" /> Adresse
</div> </h3>
<div className="flex-1"> <p className="text-lg font-bold">Steinbruch Friedberg</p>
<div className="aspect-w-16 aspect-h-9"> <p className="mt-1 text-flyer-black/80">Steinerstraße 253, 8240 Friedberg</p>
<iframe <div className="mt-6 flex items-start gap-3 bg-flyer-yellow/30 rounded-lg px-4 py-3 text-sm">
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" <FaCloudRain className="mt-0.5 shrink-0" />
width="100%" <span>Bei Schlechtwetter im Sportzentrum Friedberg</span>
height="100%"
style={{ border: 0 }}
allowFullScreen={true}
loading="lazy"
></iframe>
</div> </div>
</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>
</div> </div>
</section> </section>

59
src/components/sections/Hero.tsx
View File

@@ -1,24 +1,53 @@
import MobileImageLandscape from "../MobileImageLandscape"; import { FaCalendarAlt, FaMapMarkerAlt } from "react-icons/fa";
export default function Hero() { export default function Hero() {
return ( return (
<section className="relative w-full bg-flyer-yellow flex flex-col"> <section className="relative w-full bg-flyer-yellow overflow-hidden">
<div className="w-full h-[25vh] mt-4 flex flex-col text-center text-black"> <div className="absolute inset-0 bg-halftone opacity-50 pointer-events-none" />
<div className="md:hidden">
<h1 className="text-6xl font-bold font-stick">STEIN</h1> <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">
<h1 className="text-6xl font-bold font-stick">BRUCH</h1> <div className="text-black animate-fade-in-up">
<h1 className="text-6xl font-bold font-stick">FEST</h1> <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>
<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> </div>
<p className="text-2xl md:text-4xl mt-4">15. + 16. Aug.</p>
</div> </div>
{/* <div className="w-full h-[50vh]">
<MobileImageLandscape /> <div className="h-10 md:h-14 bg-flyer-black [clip-path:polygon(0_100%,100%_0,100%_100%)]" />
</div> */}
</section> </section>
); );
} }

60
src/components/sections/Info.tsx
View File

@@ -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() { export default function Info() {
return ( 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"> <div className="container mx-auto px-4">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Infos</h2> <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-black mb-16">
<div className="max-w-3xl mx-auto"> Infos
<div className="mb-8"> </h2>
<h3 className="text-xl md:text-2xl font-bold mb-4">Karten</h3>
<p>VVK € 10,- / AK € 12,-</p> <div className="max-w-4xl mx-auto grid md:grid-cols-2 gap-8">
<br /> <div className="bg-flyer-black text-white rounded-2xl shadow-xl p-8">
<p>Erhältlich bei</p> <h3 className="flex items-center gap-3 text-xl md:text-2xl font-bold mb-6">
<ul className="list-disc pl-5"> <FaTicketAlt className="text-flyer-yellow" /> Karten
<li>Trafik Gressenbauer</li> </h3>
<li>Der Salon - Monika Krammer</li> <div className="flex items-baseline gap-4 mb-6">
<li>Tapeziermeister Michäler</li> <span className="font-stick text-4xl text-flyer-yellow">€ 10,-</span>
<li>FF-Mitglieder</li> <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> </ul>
</div> </div>
<div>
<h3 className="text-xl md:text-2xl font-bold mb-4">Reinerlös</h3> <div className="bg-white rounded-2xl shadow-xl p-8 border-2 border-flyer-black/10">
<p>Der Reinerlös dient der Finanzierung von Fahrzeugen und Geräten der Feuerwehr.</p> <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> </div>
</div> </div>

77
src/components/sections/Program.tsx
View File

@@ -1,31 +1,66 @@
import { FaChurch, FaClock, FaMusic } from "react-icons/fa";
import Dirndlrocker from "../Dirndlrocker"; import Dirndlrocker from "../Dirndlrocker";
import Lauser from "../Lauser";
export default function Program() { export default function Program() {
return ( 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"> <div className="container mx-auto px-4">
<h2 className="text-3xl md:text-4xl font-bold text-center mb-12">Programm</h2> <h2 className="font-stick uppercase text-4xl md:text-5xl text-center text-flyer-yellow mb-16">
<div className="flex flex-col md:flex-row md:space-x-8"> Programm
<div className="flex-1 mb-8 md:mb-0"> </h2>
<h3 className="text-xl md:text-2xl font-bold mb-4">Samstag</h3>
<p>Beginn: 19 Uhr</p> <div className="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
<p>Ab 21 Uhr Musik</p> <div className="bg-flyer-yellow text-black rounded-2xl shadow-2xl p-8 flex flex-col">
<div className="aspect-[682/466] w-40 max-w-xs"> <h3 className="font-stick uppercase text-3xl mb-6">Samstag</h3>
<a href="https://www.dirndl-rocker.at/" target="_blank" rel="noopener noreferrer">
<Dirndlrocker></Dirndlrocker> <ul className="space-y-3 font-medium mb-8">
</a> <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/dj_baecksn/"
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/dj_baecksn.png"
alt="DJ BÄCKSN"
className="w-full h-auto object-contain"
/>
</a>
</div> </div>
<a href="https://www.instagram.com/dj_baecksn/" target="_blank" rel="noopener noreferrer">
<div className="aspect-[682/466] w-40 max-w-xs">
<img src="/images/dj_baecksn.png" alt="DJ BÄCKSN" />
</div>
</a>
</div> </div>
<div className="flex-1">
<h3 className="text-xl md:text-2xl font-bold mb-4">Sonntag</h3> <div className="bg-flyer-yellow text-black rounded-2xl shadow-2xl p-8 flex flex-col">
<p>Ab 8.45 Uhr Hl. Messe</p> <h3 className="font-stick uppercase text-3xl mb-6">Sonntag</h3>
<p className="mt-4">Frühschoppen mit der <span className="font-bold">Stadtkapelle Friedberg</span></p>
<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> </div>
</div> </div>

23
tailwind.config.ts
View File

@@ -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