fs/tsv08kulmbach-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Split-Sektionen: tinted-Variante (sanft aufgehelltes Panel) für Historie + Sportheim

Browse Source 
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Felix Schneider
2026-06-11 22:31:58 +02:00
parent 51149e8c5f
commit f55bd40a1e
3 changed files with 107 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/components/section.php
View File

@@ -4,13 +4,15 @@ declare(strict_types=1);
/** /**
* Alternierende Bild/Text-Sektion. Props: * 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) * $level int Überschriften-Ebene (default 2)
* tinted: sanft aufgehelltes Panel hinter dem Inhalt (Abgrenzung vom Seitenhintergrund).
*/ */
$level = $level ?? 2; $level = $level ?? 2;
$flip = !empty($section['flip']); $flip = !empty($section['flip']);
$tinted = !empty($section['tinted']);
?> ?>
<section class="section split<?= $flip ? ' split--flip' : '' ?>" id="<?= e($section['id']) ?>"> <section class="section split<?= $flip ? ' split--flip' : '' ?><?= $tinted ? ' split--tinted' : '' ?>" id="<?= e($section['id']) ?>">
<div class="container split__inner"> <div class="container split__inner">
<div class="split__text"> <div class="split__text">
<h<?= $level ?>><?= e($section['title']) ?></h<?= $level ?>> <h<?= $level ?>><?= e($section['title']) ?></h<?= $level ?>>

150
data/home.json
View File

@@ -1,60 +1,100 @@
{ {
"hero": { "hero": {
"align": "center", "align": "center",
"title": "TSV 08 Kulmbach", "title": "TSV 08 Kulmbach",
"tagline": "Dein Verein für Fußball & Turnen in 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.", "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": { "image": {
"base": "img/hero/hero", "base": "img/hero/hero",
"widths": [640, 1000, 1600], "widths": [
"alt": "Fußballplatz des TSV 08 Kulmbach im Katzbachtal mit Vereinsfahnen" 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", "sections": [
"ctas": [ {
{ "label": "Jugendfußball", "slug": "jugendfussball", "style": "primary" }, "id": "historie",
{ "label": "Mitglied werden", "slug": "mitglied-werden", "style": "outline" } "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": {
"sections": [ "base": "img/pages/vereinshistorie",
{ "widths": [
"id": "historie", 519
"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.", "alt": "Historische Luftaufnahme der Sportanlage an der Bayreuther Straße"
"image": { },
"base": "img/pages/vereinshistorie", "flip": false,
"widths": [519], "cta": {
"alt": "Historische Luftaufnahme der Sportanlage an der Bayreuther Straße" "label": "Zur Vereinshistorie",
}, "slug": "historie",
"flip": false, "style": "primary"
"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"
}
]
}, },
{ "partners": {
"id": "sportheim", "title": "Unsere Sponsoren & Partner",
"title": "Feiern Sie Veranstaltungen im Katzbachtal", "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.",
"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.", "cta": {
"image": { "label": "Partner werden",
"base": "img/pages/sportheim", "slug": "kontakt",
"widths": [640, 1000], "style": "outline"
"alt": "Sportheim des TSV 08 Kulmbach im Katzbachtal" }
}, },
"flip": true, "contact": {
"cta": { "label": "Zur Buchungsübersicht", "slug": "sportheim", "style": "primary" } "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."
}
} }

8
public/assets/css/components.css
View File

@@ -165,6 +165,14 @@
gap: 3rem; 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 { .split--flip .split__text {
order: 2; order: 2;
} }