Trainer Bambini bis C

theMattCode · theMattCode · commit 5cb09a82c32a · 2025-07-28T08:15:46.000+02:00
diff --git a/app/(cms)/cms/people/[id]/section/Preview.tsx b/app/(cms)/cms/people/[id]/section/Preview.tsx
@@ -1,5 +1,5 @@
 import { PersonWithRoles } from "#/lib/types/people";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { Person } from "#/content/people";
 
 export function Preview({ person }: { person: PersonWithRoles }) {
diff --git a/app/(web)/badminton/erwachsene/page.tsx b/app/(web)/badminton/erwachsene/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { badminton, badmintonErwachsene } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/badminton/kinder/page.tsx b/app/(web)/badminton/kinder/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { badminton, badmintonKinder } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/badminton/page.tsx b/app/(web)/badminton/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { badminton } from "#/content/sitemap";
 import { SubMenu } from "#/components/navigation/SubMenu";
diff --git a/app/(web)/fitness-und-gesundheitssport/fit-und-gesund/page.tsx b/app/(web)/fitness-und-gesundheitssport/fit-und-gesund/page.tsx
@@ -5,7 +5,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { fitUndGesund } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/fitness-und-gesundheitssport/gymnastik-65plus/page.tsx b/app/(web)/fitness-und-gesundheitssport/gymnastik-65plus/page.tsx
@@ -5,7 +5,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { gymnastik65plus } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/fitness-und-gesundheitssport/page.tsx b/app/(web)/fitness-und-gesundheitssport/page.tsx
@@ -13,7 +13,7 @@ import {
 import { getTitle } from "#/lib/page";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 
diff --git a/app/(web)/fitness-und-gesundheitssport/powerfitness/page.tsx b/app/(web)/fitness-und-gesundheitssport/powerfitness/page.tsx
@@ -5,7 +5,7 @@ import { calcImageDimensionsForWidth } from "#/lib/image";
 import { getTitle } from "#/lib/page";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { powerFitness } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/fitness-und-gesundheitssport/steel-darts/page.tsx b/app/(web)/fitness-und-gesundheitssport/steel-darts/page.tsx
@@ -4,7 +4,7 @@ import { Metadata } from "next";
 import { getTitle } from "#/lib/page";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { steelDarts } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/fitness-und-gesundheitssport/teen-dance/page.tsx b/app/(web)/fitness-und-gesundheitssport/teen-dance/page.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { Metadata } from "next";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { teenDance } from "#/content/sitemap";
 import { getTitle } from "#/lib/page";
diff --git a/app/(web)/fitness-und-gesundheitssport/yoga/page.tsx b/app/(web)/fitness-und-gesundheitssport/yoga/page.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { Metadata } from "next";
 import { yoga } from "#/content/sitemap";
diff --git a/app/(web)/fussball/a-junioren/page.tsx b/app/(web)/fussball/a-junioren/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 import { PlayerRow } from "#/app/(web)/fussball/aktive/page";
@@ -45,7 +45,7 @@ export default function BJunioren() {
           players="Tim Keller, Maxi Wörn, Linus Schmidt, Adonis Giannakoglu, Dennis Hess, Jonathan Troost, Chinar Kyose"
         />
         <SectionTitle title="Trainer und Betreuer" />
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <PersonCard person={getPersonByName("Finn Kittelmann")} />
           <PersonCard person={getPersonByName("Björn Kittelmann")} />
           <PersonCard person={getPersonByName("Benjamin Link")} />
diff --git a/app/(web)/fussball/ah/page.tsx b/app/(web)/fussball/ah/page.tsx
@@ -3,7 +3,7 @@ import { Metadata } from "next";
 import { getTitle } from "#/lib/page";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { fussballAH } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/fussball/aktive/page.tsx b/app/(web)/fussball/aktive/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName, Person } from "#/content/people";
 import { NextFussballDeIframeWidget } from "#/components/widget/NextFussballDeWidget";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/fussball/b-junioren/page.tsx b/app/(web)/fussball/b-junioren/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 import { PlayerRow } from "#/app/(web)/fussball/aktive/page";
diff --git a/app/(web)/fussball/bambini/page.tsx b/app/(web)/fussball/bambini/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 import { PlayerRow } from "#/app/(web)/fussball/aktive/page";
@@ -44,7 +44,7 @@ export default function Bambini() {
           players="Chrysostomos Kouranos, Josia Meyer, Matteo Klemm, Samuel Siedler, Manuel Liepe (Trainer), Volker Siedler (Trainer)"
         />
         <SectionTitle title="Trainer und Betreuer" />
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
           <PersonCard person={getPersonByName("Tao Qin")} />
           <PersonCard person={getPersonByName("Dirk Brucklacher")} />
           <PersonCard person={getPersonByName("Hendrik Renninger")} />
@@ -53,7 +53,7 @@ export default function Bambini() {
           <PersonCard person={getPersonByName("Volker Siedler")} />
         </div>
         <div>
-          <h3>Saison 2025/26</h3>
+          <SectionTitle title="Saison 2025/26" />
           <p>
             In Saison 2024/25 spielen und trainieren die Kinder der <b>Jahrgänge 2019 und 2020</b> in der U7 im
             Grundlagenbereich der <Link href="/fussball/akademie">SV Walddorf Akademie</Link>. Mit koordinativen und
diff --git a/app/(web)/fussball/c-junioren/page.tsx b/app/(web)/fussball/c-junioren/page.tsx
@@ -5,7 +5,7 @@ import Link from "next/link";
 import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 import { PlayerRow } from "#/app/(web)/fussball/aktive/page";
diff --git a/app/(web)/fussball/d-junioren/page.tsx b/app/(web)/fussball/d-junioren/page.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { getTitle } from "#/lib/page";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 import { PlayerRow } from "#/app/(web)/fussball/aktive/page";
diff --git a/app/(web)/fussball/e-junioren/page.tsx b/app/(web)/fussball/e-junioren/page.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { getTitle } from "#/lib/page";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 import { PlayerRow } from "#/app/(web)/fussball/aktive/page";
diff --git a/app/(web)/fussball/f-junioren/page.tsx b/app/(web)/fussball/f-junioren/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 import { PlayerRow } from "#/app/(web)/fussball/aktive/page";
diff --git a/app/(web)/fussball/frauen/page.tsx b/app/(web)/fussball/frauen/page.tsx
@@ -6,7 +6,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { fussballFrauen } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/fussball/hobbykicker/page.tsx b/app/(web)/fussball/hobbykicker/page.tsx
@@ -5,7 +5,7 @@ import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { fussballHobby } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/fussball/schiedsrichter/page.tsx b/app/(web)/fussball/schiedsrichter/page.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import { getTitle } from "#/lib/page";
 import { PageContent } from "#/components/web/page/PageContent";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
 
diff --git a/app/(web)/rehasport/page.tsx b/app/(web)/rehasport/page.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import { getTitle } from "#/lib/page";
 import { calcImageDimensionsForWidth } from "#/lib/image";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName } from "#/content/people";
 import { rehasport } from "#/content/sitemap";
 import { ArticleSection } from "#/components/web/articles/ArticleSection";
diff --git a/app/(web)/verein/ansprechpartner/page.tsx b/app/(web)/verein/ansprechpartner/page.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import Link from "next/link";
 import { PageContent } from "#/components/web/page/PageContent";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { getPersonByName, getPersonByTag } from "#/content/people";
 import { ansprechpartner } from "#/content/sitemap";
 import { Metadata } from "next";
diff --git a/app/(web)/verein/jugendschutz/page.tsx b/app/(web)/verein/jugendschutz/page.tsx
@@ -5,7 +5,7 @@ import { PageContent } from "#/components/web/page/PageContent";
 import { Metadata } from "next";
 import { getTitle } from "#/lib/page";
 import { jugendschutz } from "#/content/sitemap";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import Image from "next/image";
 import { calcImageDimensionsForHeight } from "#/lib/image";
 import Link from "next/link";
diff --git a/app/(web)/verein/vorstand/page.tsx b/app/(web)/verein/vorstand/page.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { getPersonByTag, getPersonName } from "#/content/people";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 import { SectionTitle } from "#/components/web/section/SectionTitle";
 import { PageContent } from "#/components/web/page/PageContent";
 import { Metadata } from "next";
diff --git a/components/web/card/Card.tsx b/components/web/card/Card.tsx
@@ -23,7 +23,7 @@ export function CardTitle({ children }: { children: string }) {
 }
 
 export function CardContent({ children }: PropsWithChildren<{ icon?: IconType }>) {
-  return <div className="w-full px-4 flex flex-col grow gap-2 @5xl:flex-auto">{children}</div>;
+  return <div className="w-full px-4 flex flex-col grow gap-2 @5xl:flex-auto min-w-48">{children}</div>;
 }
 
 export function CardFooter({ children }: PropsWithChildren<{}>) {
diff --git a/components/web/person/PersonCard.stories.tsx b/components/web/person/PersonCard.stories.tsx
@@ -1,6 +1,6 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { getPersonByTag } from "#/content/people";
-import { PersonCard } from "#/components/person/PersonCard";
+import { PersonCard } from "#/components/web/person/PersonCard";
 
 const meta: Meta<typeof PersonCard> = {
   title: "Components/People",
diff --git a/components/web/person/PersonCard.tsx b/components/web/person/PersonCard.tsx
@@ -4,34 +4,42 @@ import { PropsWithChildren } from "react";
 import { getPersonName, Person } from "#/content/people";
 import { BsPersonBoundingBox as Placeholder } from "react-icons/bs";
 import { calcImageDimensionsForWidth } from "#/lib/image";
+import { CardContent, CardTitle } from "#/components/web/card/Card";
 
-type Props = {
-  person: Person | undefined;
-};
+type PersonImageProps = { person: Person };
 
-export function PersonCard({ person }: Props) {
-  if (person === undefined) return null;
+export function PersonImage({ person }: PersonImageProps) {
+  const { image } = person;
+
+  if (image) {
+    const { width, height } = image ? calcImageDimensionsForWidth(image, 512) : { width: 0, height: 0 };
+    return (
+      <Image
+        src={image.src}
+        alt={getPersonName(person)}
+        width={width}
+        height={height}
+        quality={85}
+        className="object-cover aspect-4/5 @md:w-48 @xl:w-60"
+      />
+    );
+  }
+
+  return <Placeholder className="text-gray-300 object-cover aspect-4/5 @md:w-48 @xl:w-60" />;
+}
+
+type PersonCardProps = { person: Person | undefined };
 
-  const imageDimensions = person.image ? calcImageDimensionsForWidth(person.image, 400) : { width: 400, height: 400 };
+export function PersonCard({ person }: PersonCardProps) {
+  if (person === undefined) return null;
 
-  const joinedTags = `${person.tags.join(", ")}`;
   return (
-    <div className="container @container">
-      <div className="bg-white shadow-lg flex flex-col @md:flex-row">
-        {person.image ? (
-          <Image
-            className="p-1 w-full h-80 object-cover transition-all @md:h-auto @md:w-48"
-            src={person.image.src}
-            alt={`${person.firstname} ${person.lastname} - ${joinedTags}`}
-            width={imageDimensions.width}
-            height={imageDimensions.height}
-          />
-        ) : (
-          <Placeholder className="p-1 w-full h-80 text-gray-300 object-cover @md:h-auto @md:w-48" />
-        )}
-        <div className="w-full p-4 flex flex-col justify-start">
-          <div className="text-xl">{getPersonName(person)}</div>
-          <div className="font-normal">{joinedTags}</div>
+    <div className="w-full @container ">
+      <div className="bg-white w-full h-full @container flex flex-col @md:flex-row transition-all pb-4 @md:pb-0">
+        {person.image && <PersonImage person={person} />}
+        <CardContent>
+          <CardTitle>{getPersonName(person)}</CardTitle>
+          <div className="font-normal">{person.tags.join(", ")}</div>
           <div className="flex flex-col @md:grid @-md:grid-cols-[auto_minmax(0,1fr)] @md:gap-x-4">
             {person.email && (
               <ContactDetail label="E-Mail">
@@ -45,7 +53,7 @@ export function PersonCard({ person }: Props) {
               </ContactDetail>
             )}
           </div>
-        </div>
+        </CardContent>
       </div>
     </div>
   );
@@ -54,6 +62,7 @@ export function PersonCard({ person }: Props) {
 type ContactDetailProps = {
   label: string;
 };
+
 function ContactDetail({ label, children }: PropsWithChildren<ContactDetailProps>) {
   return (
     <>
diff --git a/content/people.ts b/content/people.ts
