change design;
This commit is contained in:
tizian committed
1 parent
8cd8c3dc4b
commit
32e5db4ae8
11 files changed
+298
-120
No files matched your search
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 827.6 870.81"><defs><style>.cls-1,.cls-3,.cls-5{fill:#DEE213;}.cls-2{fill:#1d1d1b;}.cls-3,.cls-4,.cls-5{stroke:#1d1d1b;stroke-miterlimit:10;}.cls-3{stroke-width:2.38px;}.cls-4{fill:none;}.cls-4,.cls-5{stroke-width:2.25px;}</style></defs><g id="Ebene_2" data-name="Ebene 2"><g id="Ebene_2-2" data-name="Ebene 2"><path class="cls-1" d="M807.69,272.86l-56.74,1s-.49,1-6.77-5.89-13.72-6-13.72-6-4.62-10.08-10.08-13-15.69,1.76-15.69,1.76-.35,2.1-8.22-1.77-12.14,5.8-12.14,5.8-5.12-5.77-12.94-6S640.82,270,640.82,270L448.3,274.22s-6.79-10.3-4.52-15.69-7.7-40.68-13.69-53.71-.15-32.19-.15-32.19l56.16,2.93s-6.76-1.8-16.42-15.66-31.88-33.54-31.88-33.54-20.61-38.27-38.25-70.6S336.67,3.58,336.67,3.58,306.32,10,269,22.16s-60,42-60,42L186.64,212.39l-26,55.57-35.86-3.24L116.05,257l-15.76-1.53-6.45-44.37,35.69-72.65,51.23-57.95-65.93,35.7a326.11,326.11,0,0,0-26.45,28.55c-12.18,15.12-32.7,53.77-32.7,53.77l-6.17,55.61-2.26,3.63-6.32,4.58-22.4-11.44A85.12,85.12,0,0,0,5.65,272.86c-5.46,13.44,3,41.42,3,41.42l30-4.15,5.18,4.93,5.48,0,0,55.93,21.26,47.55-6,27.85,6.5,7s-4.62,6.71-9.66,28.13.84,85.67.84,85.67a61,61,0,0,1-5.46,10.5c-3.36,5,2,12.6,2,12.6l-.42,4.73s-2.21,10.59-4.8,38.06S51.21,697,52.47,709.6c1.24,12.32-8.9,11.83,3.32,154.25l81.09-1.26L146,683.77l4-15.39,18.33,175,332.58.37S517.34,788,514.82,711.8,497.5,592.12,497.5,592.12s3.46-52.6,2.2-67.09-4.27-45.27-4.27-45.27,29.47,28.9,52.15,37.72,48.53,12.41,48.53,12.41,11.31,8.69,15.72,7.74,8.18-9.45,8.18-9.45,10.08-2.94,14-5.52,25.08-28.8,39.32-45,23.92-75,25.6-93.09S710.53,350,710.53,350l14.28-9.67,15.73-20h25.58l24.36,3.36,22.67-.84,10.5-34.44Zm-660.1,57.85c-1.89.94-46.93,34.64-46.93,34.64l-6.3-28.66-1.26-23,17.58,1.3,15.49-8.23L205.86,309S149.48,329.76,147.59,330.71Zm22.68-57-2.21-5c1.58-.94,28.35-23.62,28.35-23.62l20.47,30.87Zm455.41,78.48s-8.81,6.56-19.84,15.76-18,15.72-18,15.72l-28.91-28.07s-5.79,1.85-6.16-5,6.3-12.28,6.3-12.28S535,313.39,531.83,312.13L589.78,309,623,316.51l6.09,22.06s2.24,2.53,4.84,5.6S625.68,352.18,625.68,352.18Z"/><path class="cls-2" d="M236.27,225.88a53.65,53.65,0,0,0-5.22-11.67,20.36,20.36,0,0,0-4.63-5.41,11.51,11.51,0,0,0-7.86-2.55,14.67,14.67,0,0,0-7.25,2.73,18.76,18.76,0,0,0-5.13,5.11,21.29,21.29,0,0,0-3.45,13.45,28.52,28.52,0,0,0,1.24,6.6,31.7,31.7,0,0,0,2.69,6,41.82,41.82,0,0,0,7.78,9.89l1.4-1.2a69,69,0,0,1-5.16-10.59,31.09,31.09,0,0,1-1.57-5.39,23.5,23.5,0,0,1-.44-5.4,19,19,0,0,1,.77-5.14,16.39,16.39,0,0,1,2.16-4.4,12.26,12.26,0,0,1,3.49-3.31A8.73,8.73,0,0,1,219,212.9a4.83,4.83,0,0,1,3.42,1.12,15.82,15.82,0,0,1,3.37,3.66,38.65,38.65,0,0,1,2.85,4.85c.9,1.69,1.75,3.51,2.52,5.28l.53,1.28.42,1.24c.14.41.19.74.3,1.1a1.61,1.61,0,0,0,0,.37c0,.17,0,.09,0,.16s.22-.16.12,0a5,5,0,0,1-1,.54,5.39,5.39,0,0,0-2,1.56,4.45,4.45,0,0,0-.89,2.45,10.43,10.43,0,0,0,.5,3.69,12,12,0,0,0,1.43,3.18,8.93,8.93,0,0,0,5.59,4.08l.44-1.8a7.19,7.19,0,0,1-3.31-3.74,11.2,11.2,0,0,1-.64-2.5c-.06-.43-.08-.89-.11-1.32a4,4,0,0,1,.11-1c0-.12.06-.27.12-.27s0-.08.08-.05.14,0,.46-.17.37-.12.71-.25l.45-.17.56-.29a5.24,5.24,0,0,0,1.18-1,4.94,4.94,0,0,0,.79-1.4,6.8,6.8,0,0,0,.34-2.47,18.09,18.09,0,0,0-.23-1.89A27,27,0,0,0,236.27,225.88Z"/><path class="cls-2" d="M336.81,213.28a70,70,0,0,0-6.7,2.78C328,217,325.8,218,323.67,219l.54,1.77a48.71,48.71,0,0,0,7-1.81c1.15-.36,2.28-.79,3.41-1.21a33.71,33.71,0,0,1,3.2-1.16c2.14-.67,4.41-1.14,6.68-1.61l6.91-1.29-.06-1.85A40.9,40.9,0,0,0,336.81,213.28Z"/><path class="cls-2" d="M415.85,203.6a12,12,0,0,0-1.33-.36c-.45-.06-.92-.15-1.37-.17a18.82,18.82,0,0,0-5.22.37,21.56,21.56,0,0,0-4.84,1.63l.56,1.76,4.73-.54a29.34,29.34,0,0,1,4.55-.18,9.73,9.73,0,0,1,2.12.33c.78.22,1.56.42,2.35.61,1.57.39,3.15.73,4.78,1l.62-1.74c-1.51-.68-3.05-1.31-4.6-1.88C417.42,204.14,416.64,203.86,415.85,203.6Z"/><path class="cls-2" d="M396.47,360.67h0S396.44,360.69,396.47,360.67Z"/><path class="cls-2" d="M402.59,267.24a15.26,15.26,0,0,1-3.46.45,71.72,71.72,0,0,1-7.58-.23c-2.56-.19-5.13-.45-7.7-.71-1.27-.14-2.54-.31-4.06-.38a37.06,37.06,0,0,0-4.23.1A156.23,156.23,0,0,0,359.77,269c-5.12,1-10.23,1.82-15.38,2.48a144.49,144.49,0,0,1-15.44,1.2,41.46,41.46,0,0,1-14.81-2.48,55.86,55.86,0,0,1-21.57-14.55c-.81-.94-1.62-1.89-2.44-2.82l.27-.4c.26-.36.56-.66.83-1a11.2,11.2,0,0,1,1-.9c.8-.7,1.64-1.35,2.47-2a62.1,62.1,0,0,1,5.35-3.79l-.09-1.85a13.41,13.41,0,0,0-7.91.81,19.76,19.76,0,0,0-3.49,1.78,14.85,14.85,0,0,0-1.77,1.33,16.63,16.63,0,0,0-1.5,1.67,17,17,0,0,0-3.12,7.48,17.56,17.56,0,0,0,.32,7.66l1.84.14c1.17-2.13,2.1-4.24,3.08-6.17.53-1.09,1.08-2.11,1.64-3.06,3.48,4.68,7,9.34,10.28,14.11l2.69,3.89a47,47,0,0,0,3.09,3.81c2.14,2.4,4.35,4.71,6.66,6.91a130.46,130.46,0,0,0,14.74,12.27c5.27,3.67,10.79,7.15,17.24,9.22a41.07,41.07,0,0,0,4.92,1.21c1.64.17,3.3.49,4.95.52a64.17,64.17,0,0,0,9.81-.18,78.92,78.92,0,0,0,19-4.21,49.85,49.85,0,0,0,9-4.24,24.39,24.39,0,0,0,4.14-3.23,13.65,13.65,0,0,0,1.8-2.2,21.62,21.62,0,0,0,1.26-2.27,39.22,39.22,0,0,0,3-9.51,49.82,49.82,0,0,0,.92-10.31l-1.47.51a13.54,13.54,0,0,0,2.74-1.06c1.21-.72,2.25-1.42,3.37-2.18L406.3,266ZMLine truncated
|
||||
|
After Width: | Height: | Size: 44 KiB |
+49
-1
@@ -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;
|
||||
}
|
||||
@@ -4,8 +4,8 @@ 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>
|
||||
@@ -16,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>
|
||||
|
||||
@@ -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">
|
||||
<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-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>
|
||||
);
|
||||
}
|
||||
@@ -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>© 2026 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">© 2026 Freiwillige Feuerwehr Friedberg</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
|
||||
@@ -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: 'Kontakt' },
|
||||
{ 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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,24 +1,53 @@
|
||||
import MobileImageLandscape from "../MobileImageLandscape";
|
||||
|
||||
import { FaCalendarAlt, FaMapMarkerAlt } from "react-icons/fa";
|
||||
|
||||
export default function Hero() {
|
||||
return (
|
||||
<section className="relative w-full bg-flyer-yellow flex flex-col">
|
||||
<div className="w-full h-[25vh] mt-4 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>
|
||||
</div>
|
||||
<div className="hidden md:block">
|
||||
<h1 className="text-9xl font-bold font-stick">STEINBRUCHFEST</h1>
|
||||
</div>
|
||||
<p className="text-2xl md:text-4xl mt-4">15. + 16. Aug.</p>
|
||||
</div>
|
||||
{/* <div className="w-full h-[50vh]">
|
||||
<MobileImageLandscape />
|
||||
</div> */}
|
||||
<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: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>
|
||||
|
||||
<div className="h-10 md:h-14 bg-flyer-black [clip-path:polygon(0_100%,100%_0,100%_100%)]" />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -1,31 +1,66 @@
|
||||
import { FaChurch, FaClock, FaMusic } from "react-icons/fa";
|
||||
import Dirndlrocker from "../Dirndlrocker";
|
||||
import Lauser from "../Lauser";
|
||||
|
||||
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</p>
|
||||
<div className="aspect-[682/466] w-40 max-w-xs">
|
||||
<a href="https://www.dirndl-rocker.at/" target="_blank" rel="noopener noreferrer">
|
||||
<Dirndlrocker></Dirndlrocker>
|
||||
</a>
|
||||
<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/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>
|
||||
<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 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 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>
|
||||
|
||||
@@ -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
|
||||
Reference in new issue
Block a user