From f55bd40a1e9d49c6de2cdd5de645a1e031d86738 Mon Sep 17 00:00:00 2001 From: Felix Schneider Date: Thu, 11 Jun 2026 22:31:58 +0200 Subject: [PATCH] =?UTF-8?q?Split-Sektionen:=20tinted-Variante=20(sanft=20a?= =?UTF-8?q?ufgehelltes=20Panel)=20f=C3=BCr=20Historie=20+=20Sportheim?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Fable 5 --- app/components/section.php | 6 +- data/home.json | 150 +++++++++++++++++++------------ public/assets/css/components.css | 8 ++ 3 files changed, 107 insertions(+), 57 deletions(-) diff --git a/app/components/section.php b/app/components/section.php index bb7e9cb..f32ea37 100644 --- a/app/components/section.php +++ b/app/components/section.php @@ -4,13 +4,15 @@ declare(strict_types=1); /** * Alternierende Bild/Text-Sektion. Props: - * $section array{id, title, text, image, flip?, cta?} (aus home.json o.ä.) + * $section array{id, title, text, image, flip?, tinted?, cta?} (aus home.json o.ä.) * $level int Überschriften-Ebene (default 2) + * tinted: sanft aufgehelltes Panel hinter dem Inhalt (Abgrenzung vom Seitenhintergrund). */ $level = $level ?? 2; $flip = !empty($section['flip']); +$tinted = !empty($section['tinted']); ?> -
+
>> diff --git a/data/home.json b/data/home.json index 5198c9f..dea68bc 100644 --- a/data/home.json +++ b/data/home.json @@ -1,60 +1,100 @@ { - "hero": { - "align": "center", - "title": "TSV 08 Kulmbach", - "tagline": "Dein Verein für Fußball & Turnen in Kulmbach", - "text": "Egal ob Fußball oder Turnen – wir sind als Kulmbacher Sportverein deine Möglichkeit, im Landkreis Kulmbach aktiv zu werden! Wir sind stolz, dir auf unserer Website einen Eindruck geben zu können, was dich bei uns erwartet. Du willst selbst aktiv werden? Dann zögere nicht, uns zu kontaktieren.", - "image": { - "base": "img/hero/hero", - "widths": [640, 1000, 1600], - "alt": "Fußballplatz des TSV 08 Kulmbach im Katzbachtal mit Vereinsfahnen" + "hero": { + "align": "center", + "title": "TSV 08 Kulmbach", + "tagline": "Dein Verein für Fußball & Turnen in Kulmbach", + "text": "Egal ob Fußball oder Turnen – wir sind als Kulmbacher Sportverein deine Möglichkeit, im Landkreis Kulmbach aktiv zu werden! Wir sind stolz, dir auf unserer Website einen Eindruck geben zu können, was dich bei uns erwartet. Du willst selbst aktiv werden? Dann zögere nicht, uns zu kontaktieren.", + "image": { + "base": "img/hero/hero", + "widths": [ + 640, + 1000, + 1600 + ], + "alt": "Fußballplatz des TSV 08 Kulmbach im Katzbachtal mit Vereinsfahnen" + }, + "video": "video/hero.mp4", + "ctas": [ + { + "label": "Jugendfußball", + "slug": "jugendfussball", + "style": "primary" + }, + { + "label": "Mitglied werden", + "slug": "mitglied-werden", + "style": "outline" + } + ] }, - "video": "video/hero.mp4", - "ctas": [ - { "label": "Jugendfußball", "slug": "jugendfussball", "style": "primary" }, - { "label": "Mitglied werden", "slug": "mitglied-werden", "style": "outline" } - ] - }, - "sections": [ - { - "id": "historie", - "title": "Damals wie Heute: entdecke den Katzbachtaler Weg", - "text": "Seit über 100 Jahren lebt der TSV 08 Kulmbach den Sportgedanken in Kulmbach. Dabei entwickelte sich der Verein vom Standort an der Bayreuther Straße hin ins Katzbachtal, wo heutzutage sowohl die Fußball- als auch die Turnabteilung zuhause ist.", - "image": { - "base": "img/pages/vereinshistorie", - "widths": [519], - "alt": "Historische Luftaufnahme der Sportanlage an der Bayreuther Straße" - }, - "flip": false, - "cta": { "label": "Zur Vereinshistorie", "slug": "historie", "style": "primary" } + "sections": [ + { + "id": "historie", + "title": "Damals wie Heute: entdecke den Katzbachtaler Weg", + "text": "Seit über 100 Jahren lebt der TSV 08 Kulmbach den Sportgedanken in Kulmbach. Dabei entwickelte sich der Verein vom Standort an der Bayreuther Straße hin ins Katzbachtal, wo heutzutage sowohl die Fußball- als auch die Turnabteilung zuhause ist.", + "image": { + "base": "img/pages/vereinshistorie", + "widths": [ + 519 + ], + "alt": "Historische Luftaufnahme der Sportanlage an der Bayreuther Straße" + }, + "flip": false, + "cta": { + "label": "Zur Vereinshistorie", + "slug": "historie", + "style": "primary" + }, + "tinted": true + }, + { + "id": "sportheim", + "title": "Feiern Sie Veranstaltungen im Katzbachtal", + "text": "Unser Sportheim ist die perfekte Location für Veranstaltungen wie Geburtstage, betriebliche Feiern und Partys. Sie suchen noch einen Veranstaltungsort in Kulmbach? Zögern Sie nicht, unsere Räumlichkeiten im Katzbachtal anzufragen.", + "image": { + "base": "img/pages/sportheim", + "widths": [ + 640, + 1000 + ], + "alt": "Sportheim des TSV 08 Kulmbach im Katzbachtal" + }, + "flip": true, + "cta": { + "label": "Zur Buchungsübersicht", + "slug": "sportheim", + "style": "primary" + }, + "tinted": true + } + ], + "stats": { + "items": [ + { + "value": "650+", + "label": "Mitglieder" + }, + { + "value": "10+", + "label": "Mannschaften" + }, + { + "value": "20+", + "label": "Partner" + } + ] }, - { - "id": "sportheim", - "title": "Feiern Sie Veranstaltungen im Katzbachtal", - "text": "Unser Sportheim ist die perfekte Location für Veranstaltungen wie Geburtstage, betriebliche Feiern und Partys. Sie suchen noch einen Veranstaltungsort in Kulmbach? Zögern Sie nicht, unsere Räumlichkeiten im Katzbachtal anzufragen.", - "image": { - "base": "img/pages/sportheim", - "widths": [640, 1000], - "alt": "Sportheim des TSV 08 Kulmbach im Katzbachtal" - }, - "flip": true, - "cta": { "label": "Zur Buchungsübersicht", "slug": "sportheim", "style": "primary" } + "partners": { + "title": "Unsere Sponsoren & Partner", + "text": "Wir sind stolz darauf, mit vielen Kulmbacher Unternehmen und Partnern regelmäßig zusammenzuarbeiten und so aus Ideen handfeste Projekte umzusetzen. Hier seht ihr eine Übersicht über unsere aktuellen Sponsoren und Partner.", + "cta": { + "label": "Partner werden", + "slug": "kontakt", + "style": "outline" + } + }, + "contact": { + "title": "Kontaktiere uns gern!", + "text": "Du hast Fragen zu unseren Abteilungen, möchtest selbst aktiv werden oder uns unterstützen? Schreib uns – wir melden uns so schnell wie möglich." } - ], - "stats": { - "items": [ - { "value": "650+", "label": "Mitglieder" }, - { "value": "10+", "label": "Mannschaften" }, - { "value": "20+", "label": "Partner" } - ] - }, - "partners": { - "title": "Unsere Sponsoren & Partner", - "text": "Wir sind stolz darauf, mit vielen Kulmbacher Unternehmen und Partnern regelmäßig zusammenzuarbeiten und so aus Ideen handfeste Projekte umzusetzen. Hier seht ihr eine Übersicht über unsere aktuellen Sponsoren und Partner.", - "cta": { "label": "Partner werden", "slug": "kontakt", "style": "outline" } - }, - "contact": { - "title": "Kontaktiere uns gern!", - "text": "Du hast Fragen zu unseren Abteilungen, möchtest selbst aktiv werden oder uns unterstützen? Schreib uns – wir melden uns so schnell wie möglich." - } } diff --git a/public/assets/css/components.css b/public/assets/css/components.css index 63fd001..be8eb88 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -165,6 +165,14 @@ gap: 3rem; } +/* Variante: sanft aufgehelltes Panel hinter dem Inhalt (tinted: true im JSON) */ +.split--tinted .split__inner { + padding: clamp(1.75rem, 1rem + 2.5vw, 3.5rem); + background: linear-gradient(180deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.04)); + border: 1px solid rgb(255 255 255 / 0.12); + border-radius: var(--radius-card); +} + .split--flip .split__text { order: 2; }