Herren Seite

src/pages/TeamDetailPage.tsx

@@ -1,21 +1,50 @@
 import { useParams } from "react-router-dom";
+import { useEffect, useState } from "react";
+import { Carousel } from "react-responsive-carousel"; // Neue Library!
+import "react-responsive-carousel/lib/styles/carousel.min.css"; // Wichtig!
 
 const teamData = [
   {
     id: "1",
     name: "Damen I",
     league: "Landesliga Nord",
-    description: "Unsere erste Damenmannschaft ...",
-    trainingTimes: "Di & Do 19:00 - 21:00 Uhr",
+    description: "Unsere erste Damenmannschaft spielt auf hohem Niveau und liebt den Volleyballsport.",
+    trainingTimes: "Dienstag & Donnerstag 19:00 - 21:00 Uhr",
+    images: [
+      "/images/damen1-1.jpg",
+      "/images/damen1-2.jpg",
+      "/images/damen1-3.jpg",
+    ],
+    players: [
+      { name: "Anna", position: "Außenangriff", nickname: "Speedy", image: "/images/anna.jpg" },
+      { name: "Lea", position: "Libera", nickname: "Wall-E", image: "/images/lea.jpg" },
+      { name: "Sophie", position: "Zuspiel", nickname: "Magic", image: "/images/sophie.jpg" },
+    ],
   },
   {
     id: "2",
     name: "Herren I",
-    league: "Bezirksliga",
-    description: "Das Herrenteam kämpft ...",
-    trainingTimes: "Mo & Mi 20:00 - 22:00 Uhr",
+    league: "Landesliga",
+    description: "Das Team der Herren 1 ist tritt in der Saison 25/26 in der Landesliga beim NVV an.",
+    trainingTimes: "Montag & Freitag 20:00 - 22:00 Uhr",
+    images: [
+      "/images/players/herren1/carousel/carousel2.jpg",
+      "/images/players/herren1/carousel/carousel2.jpg",
+      "/images/players/herren1/carousel/carousel2.jpg",
+    ],
+    players: [
+      { name: "Samuel", position: "Mittelblock", nickname: "BeSamu", image: "/images/players/herren1/samuel.jpg" },
+      { name: "Sten", position: "Außen/Annahme", nickname: "Stenislav", image: "/images/players/herren1/sten.jpg" },
+      { name: "David", position: "Mittelblock", nickname: "Blocki", image: "/images/players/herren1/david.jpg" },
+      { name: "Erik", position: "Libero", nickname: "Erika", image: "/images/players/herren1/erik.jpg" },
+      { name: "Lasse", position: "Außen/Annahme", nickname: "Lass es!", image: "/images/players/herren1/lasse.jpg" },
+      { name: "Peter", position: "Zuspieler", nickname: "-", image: "/images/players/herren1/peter.jpg" },
+      { name: "Tony", position: "Zuspieler", nickname: "Tony Mahony", image: "/images/players/herren1/tony.jpg" },
+      { name: "Marc", position: "Diagonal", nickname: "Marci", image: "/images/players/herren1/marc.jpg" },
+      { name: "Phillip", position: "Libero", nickname: "Hifi", image: "/images/players/herren1/phillip.jpg" },
+      { name: "Kathrin", position: "Trainerin", nickname: "Mutti", image: "/images/players/herren1/phillip.jpg" },
+    ],
   },
-  // usw...
 ];
 
 const TeamDetailPage = () => {
@@ -25,11 +54,53 @@ const TeamDetailPage = () => {
   if (!team) return <p>Team nicht gefunden 🐸</p>;
 
   return (
-    <div className="max-w-3xl mx-auto py-12 px-4">
-      <h1 className="text-4xl font-bold text-frog-600 mb-2">{team.name}</h1>
-      <p className="text-gray-700 mb-2">{team.league}</p>
-      <p className="text-gray-600 mb-4">{team.description}</p>
-      <p className="text-sm text-frog-700 font-medium">Training: {team.trainingTimes}</p>
+    <div className="max-w-7xl mx-auto py-8 px-4">
+      {/* Karussell */}
+      <div className="mb-8">
+      <Carousel
+        showThumbs={false}
+        showStatus={false}
+        infiniteLoop
+        autoPlay
+        interval={4000}
+        dynamicHeight={false} 
+        className="rounded-lg overflow-hidden"
+      >
+        {team.images.map((src, index) => (
+          <div key={index} className="h-96">
+            <img
+              src={src}
+              alt={`Team ${team.name} Bild ${index + 1}`}
+              className="w-full h-full object-cover"
+            />
+          </div>
+        ))}
+      </Carousel>
+      </div>
+
+      {/* Team Info */}
+      <div className="text-center mb-12">
+        <h1 className="text-4xl font-bold text-frog-600">{team.name}</h1>
+        <p className="text-lg text-gray-700 mt-2">{team.league}</p>
+        <p className="text-gray-600 mt-4">{team.description}</p>
+        <p className="text-sm text-frog-700 font-medium mt-2">Training: {team.trainingTimes}</p>
+      </div>
+
+      {/* Spielerübersicht */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        {team.players.map((player, idx) => (
+          <div key={idx} className="bg-white rounded-lg shadow-md p-4 flex flex-col items-center text-center hover:shadow-lg transition">
+            <img
+              src={player.image}
+              alt={player.name}
+              className="w-full h-108 object-cover rounded-lg mb-4"
+            />
+            <h3 className="text-xl font-semibold text-frog-700">{player.name}</h3>
+            <p className="text-gray-500">{player.position}</p>
+            <p className="text-sm text-frog-500 mt-1">„{player.nickname}“</p>
+          </div>
+        ))}
+      </div>
     </div>
   );
 };