Herren Seite

package-lock.json

@@ -51,6 +51,7 @@
         "react-dom": "^18.3.1",
         "react-hook-form": "^7.53.0",
         "react-resizable-panels": "^2.1.3",
+        "react-responsive-carousel": "^3.2.23",
         "react-router-dom": "^6.30.0",
         "recharts": "^2.12.7",
         "sonner": "^1.5.0",
@@ -3507,6 +3508,12 @@
         "url": "https://polar.sh/cva"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
+    },
     "node_modules/clsx": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
@@ -6044,6 +6051,18 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-easy-swipe": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz",
+      "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.5.8"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.53.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.1.tgz",
@@ -6123,6 +6142,17 @@
         "react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/react-responsive-carousel": {
+      "version": "3.2.23",
+      "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz",
+      "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==",
+      "license": "MIT",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "prop-types": "^15.5.8",
+        "react-easy-swipe": "^0.0.21"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.30.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.0.tgz",

package.json

@@ -54,6 +54,7 @@
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
     "react-resizable-panels": "^2.1.3",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.30.0",
     "recharts": "^2.12.7",
     "sonner": "^1.5.0",

src/components/AboutSection.tsx

@@ -10,7 +10,7 @@ const AboutSection = () => {
             <h2 className="text-3xl font-bold text-gray-900 mb-6">Über TG Laudenbach</h2>
             <div className="space-y-4 text-lg">
               <p>
-                Der Volleyballverein TG Laudenbach wurde 1975 gegründet und blickt auf eine erfolgreiche Geschichte zurück. 
+                Der Volleyballverein TG Laudenbach wurde 1974 gegründet und blickt auf eine erfolgreiche Geschichte zurück. 
                 Wir sind mehr als nur ein Sportverein – wir sind eine Gemeinschaft aus begeisterten Volleyballern jeden Alters und Spielniveaus.
               </p>
               <p>

src/components/Navbar.tsx

@@ -1,11 +1,11 @@
-
 import { useState } from 'react';
 import { Button } from "@/components/ui/button";
-import { Menu, X, Volleyball } from "lucide-react";
-import {Link} from "react-router-dom";
+import { Menu, X, Volleyball, ChevronDown } from "lucide-react";
+import { Link } from "react-router-dom";
 
 const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const [isTeamsOpen, setIsTeamsOpen] = useState(false);
 
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
@@ -24,7 +24,33 @@ const Navbar = () => {
           <div className="hidden md:flex items-center space-x-4">
             <a href="#" className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Startseite</a>
             <a href="#news" className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Aktuelles</a>
-            <a href="#team" className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Teams</a>
+
+            {/* Gemeinsames Container-Div für Hover */}
+            <div 
+              className="relative" 
+              onMouseEnter={() => setIsTeamsOpen(true)} 
+              onMouseLeave={() => setIsTeamsOpen(false)}
+            >
+              <button
+                className="flex items-center text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium focus:outline-none"
+              >
+                Teams
+                <ChevronDown className="ml-1 h-4 w-4" />
+              </button>
+
+              {/* Dropdown */}
+              {isTeamsOpen && (
+                <div
+                  className="absolute left-0 mt-2 w-40 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5 z-10"
+                >
+                  <Link to="/teams/damen1" className="block px-4 py-2 text-gray-700 hover:bg-frog-50 hover:text-frog-600">Damen 1</Link>
+                  <Link to="/teams/damen2" className="block px-4 py-2 text-gray-700 hover:bg-frog-50 hover:text-frog-600">Damen 2</Link>
+                  <Link to="/teams/herren1" className="block px-4 py-2 text-gray-700 hover:bg-frog-50 hover:text-frog-600">Herren 1</Link>
+                  <Link to="/teams/herren2" className="block px-4 py-2 text-gray-700 hover:bg-frog-50 hover:text-frog-600">Herren 2</Link>
+                </div>
+              )}
+            </div>
+
             <a href="#gallery" className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Galerie</a>
             <a href="#about" className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Über uns</a>
             <a href="#contact" className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Kontakt</a>
@@ -34,7 +60,7 @@ const Navbar = () => {
               </Button>
             </Link>
           </div>
-          
+
           {/* Mobile menu button */}
           <div className="md:hidden flex items-center">
             <Button 
@@ -55,11 +81,24 @@ const Navbar = () => {
           <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-white">
             <a href="#" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-frog-600 hover:bg-frog-50">Startseite</a>
             <a href="#news" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-frog-600 hover:bg-frog-50">Aktuelles</a>
-            <a href="#team" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-frog-600 hover:bg-frog-50">Teams</a>
+
+            {/* Mobile Teams Submenu */}
+            <div>
+              <div className="block px-3 py-2 rounded-md text-base font-medium text-gray-700">Teams</div>
+              <div className="pl-6">
+                <Link to="/teams/damen1" className="block px-3 py-1 text-gray-700 hover:text-frog-600">Damen 1</Link>
+                <Link to="/teams/damen2" className="block px-3 py-1 text-gray-700 hover:text-frog-600">Damen 2</Link>
+                <Link to="/teams/herren1" className="block px-3 py-1 text-gray-700 hover:text-frog-600">Herren 1</Link>
+                <Link to="/teams/herren2" className="block px-3 py-1 text-gray-700 hover:text-frog-600">Herren 2</Link>
+              </div>
+            </div>
+
             <a href="#gallery" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-frog-600 hover:bg-frog-50">Galerie</a>
             <a href="#about" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-frog-600 hover:bg-frog-50">Über uns</a>
             <a href="#contact" className="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-frog-600 hover:bg-frog-50">Kontakt</a>
-            <Button className="w-full bg-frog-500 hover:bg-frog-600 text-white mt-4">Mitglied werden</Button>
+            <Link to="/mitglied-werden">
+              <Button className="w-full bg-frog-500 hover:bg-frog-600 text-white mt-4">Mitglied werden</Button>
+            </Link>
           </div>
         </div>
       )}

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>
   );
 };