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

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