diff --git a/app/components/person-card.php b/app/components/person-card.php new file mode 100644 index 0000000..b7e4014 --- /dev/null +++ b/app/components/person-card.php @@ -0,0 +1,41 @@ + +
+
+ <?= $image ? e($person['name']) : '' ?> +
+
+

+

+ + + + + +
+
diff --git a/app/components/person-grid.php b/app/components/person-grid.php new file mode 100644 index 0000000..b053fe7 --- /dev/null +++ b/app/components/person-grid.php @@ -0,0 +1,26 @@ + +
+
+

+ +

+ + +
+
diff --git a/data/ansprechpartner.json b/data/ansprechpartner.json new file mode 100644 index 0000000..c8745a9 --- /dev/null +++ b/data/ansprechpartner.json @@ -0,0 +1,36 @@ +{ + "title": "Ansprechpartner", + "intro": "Du hast Fragen zu einer Abteilung? Unsere Ansprechpartner helfen dir direkt weiter.", + "persons": [ + { + "department": "Herrenfußball", + "name": "Benedikt Höfner", + "phone": "+49 160 97516404", + "image": "img/persons/benedikt-hoefner.jpg" + }, + { + "department": "Damenfußball", + "name": "Sam Kern", + "phone": "+49 176 91371064", + "image": "img/persons/sam-kern.jpg" + }, + { + "department": "Jugendfußball", + "name": "Fabian Früh", + "phone": "+49 160 97516797", + "image": "img/persons/fabian-frueh.jpg" + }, + { + "department": "Jugendfußball", + "name": "Kerstin Tauber", + "phone": "+49 176 38957526", + "image": null + }, + { + "department": "Turnen", + "name": "Maxi Roßberg", + "email": "turnabteilung.tsv08kulmbach@gmail.com", + "image": null + } + ] +} diff --git a/public/assets/css/components.css b/public/assets/css/components.css index 12ee397..63fd001 100644 --- a/public/assets/css/components.css +++ b/public/assets/css/components.css @@ -277,6 +277,90 @@ object-fit: contain; } +/* === persons (Ansprechpartner-Visitenkarten) === */ +.persons > .container { + text-align: center; +} + +.persons__intro { + margin-inline: auto; + margin-top: 1rem; + max-width: 60ch; + color: var(--clr-text-muted); +} + +.persons__grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1.5rem; + margin-top: 2.5rem; + text-align: left; +} + +.person-card { + display: grid; + height: 100%; + background: var(--clr-glass-bg); + border: 1px solid var(--clr-glass-border); + border-radius: var(--radius-card); + overflow: hidden; + transition: transform var(--transition), box-shadow var(--transition); +} + +.person-card:hover { + transform: translateY(-4px); + box-shadow: var(--shadow-card); +} + +.person-card__media img { + width: 100%; + height: auto; + aspect-ratio: 4 / 5; + object-fit: cover; +} + +.person-card__body { + display: grid; + gap: 0.2rem; + padding: 1.1rem 1.2rem 1.2rem; + /* Verlauf knüpft an die dunklen Studiofotos an */ + background: linear-gradient(180deg, rgb(20 20 20 / 0) 0%, rgb(20 20 20 / 0.35) 100%); +} + +.person-card__department { + font-size: var(--fs-650); + letter-spacing: 0.04em; +} + +.person-card__name { + color: var(--clr-text-muted); +} + +.person-card__contact { + display: inline-flex; + align-items: center; + gap: 0.5rem; + margin-top: 0.5rem; + padding-block: 0.3rem; + color: var(--clr-text); + text-decoration: none; + font-size: var(--fs-500); +} + +.person-card__contact .icon { + color: var(--clr-accent); + flex: none; +} + +.person-card__contact span { + overflow-wrap: anywhere; +} + +.person-card__contact:hover { + text-decoration: underline; + text-underline-offset: 0.25em; +} + /* === contact form === */ .contact__inner { display: grid; @@ -462,7 +546,9 @@ .ad-banner__subline { margin-top: 0.75rem; - max-width: 70ch; + /* Volle Breite, damit der Dank in einer Zeile steht; auf Mobil bricht er natürlich um. */ + max-width: none; + text-wrap: balance; } .ad-banner__track { diff --git a/public/assets/icons/telephone.svg b/public/assets/icons/telephone.svg new file mode 100644 index 0000000..c1853fe --- /dev/null +++ b/public/assets/icons/telephone.svg @@ -0,0 +1 @@ + diff --git a/public/assets/img/persons/benedikt-hoefner.jpg b/public/assets/img/persons/benedikt-hoefner.jpg new file mode 100644 index 0000000..d2f6cbc Binary files /dev/null and b/public/assets/img/persons/benedikt-hoefner.jpg differ diff --git a/public/assets/img/persons/fabian-frueh.jpg b/public/assets/img/persons/fabian-frueh.jpg new file mode 100644 index 0000000..e2e55f5 Binary files /dev/null and b/public/assets/img/persons/fabian-frueh.jpg differ diff --git a/public/assets/img/persons/platzhalter.jpg b/public/assets/img/persons/platzhalter.jpg new file mode 100644 index 0000000..bdf171f Binary files /dev/null and b/public/assets/img/persons/platzhalter.jpg differ diff --git a/public/assets/img/persons/sam-kern.jpg b/public/assets/img/persons/sam-kern.jpg new file mode 100644 index 0000000..0179d3e Binary files /dev/null and b/public/assets/img/persons/sam-kern.jpg differ