From a517191176fe47492389c22269d12a7214bd7676 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 27 Mar 2025 22:59:20 +0000
Subject: [PATCH] Feat: Implement landing page

Implement a landing page with a frog green color scheme.
---
 src/components/AboutSection.tsx   |  62 +++++++++++++++++
 src/components/ContactSection.tsx | 107 ++++++++++++++++++++++++++++++
 src/components/Footer.tsx         |  83 +++++++++++++++++++++++
 src/components/GallerySection.tsx |  87 ++++++++++++++++++++++++
 src/components/Hero.tsx           |  40 +++++++++++
 src/components/Navbar.tsx         |  65 ++++++++++++++++++
 src/components/NewsSection.tsx    |  71 ++++++++++++++++++++
 src/components/TeamSection.tsx    |  75 +++++++++++++++++++++
 src/index.css                     |  56 ++++++----------
 src/pages/Index.tsx               |  24 +++++--
 tailwind.config.ts                |  30 ++++++++-
 11 files changed, 655 insertions(+), 45 deletions(-)
 create mode 100644 src/components/AboutSection.tsx
 create mode 100644 src/components/ContactSection.tsx
 create mode 100644 src/components/Footer.tsx
 create mode 100644 src/components/GallerySection.tsx
 create mode 100644 src/components/Hero.tsx
 create mode 100644 src/components/Navbar.tsx
 create mode 100644 src/components/NewsSection.tsx
 create mode 100644 src/components/TeamSection.tsx

diff --git a/src/components/AboutSection.tsx b/src/components/AboutSection.tsx
new file mode 100644
index 000000000..69b6e1411
--- /dev/null
+++ b/src/components/AboutSection.tsx
@@ -0,0 +1,62 @@
+
+import { Button } from "@/components/ui/button";
+
+const AboutSection = () => {
+  return (
+    <section id="about" className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="grid md:grid-cols-2 gap-12 items-center">
+          <div>
+            <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. 
+                Wir sind mehr als nur ein Sportverein – wir sind eine Gemeinschaft aus begeisterten Volleyballern jeden Alters und Spielniveaus.
+              </p>
+              <p>
+                Unsere Philosophie ist es, Volleyball für alle zugänglich zu machen. Ob Wettkampf oder Freizeit, jung oder alt, 
+                Anfänger oder Profi – bei uns findet jeder seinen Platz.
+              </p>
+              <p>
+                Neben dem sportlichen Erfolg ist uns auch das Miteinander wichtig. Regelmäßige Vereinsfeste, gemeinsame Ausflüge und 
+                unser jährliches Beachvolleyball-Turnier sorgen für ein aktives Vereinsleben.
+              </p>
+              <div className="pt-4">
+                <Button className="bg-frog-500 hover:bg-frog-600">
+                  Mehr über uns erfahren
+                </Button>
+              </div>
+            </div>
+          </div>
+          <div className="space-y-6">
+            <div className="rounded-xl overflow-hidden shadow-md">
+              <img 
+                src="https://images.unsplash.com/photo-1574271143515-5cddf8da19be?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" 
+                alt="Teamfoto TG Laudenbach" 
+                className="w-full h-auto"
+              />
+            </div>
+            <div className="grid grid-cols-2 gap-6">
+              <div className="rounded-xl overflow-hidden shadow-md">
+                <img 
+                  src="https://images.unsplash.com/photo-1529676468461-bd9955e9e4f8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
+                  alt="Volleyball Training" 
+                  className="w-full h-auto"
+                />
+              </div>
+              <div className="rounded-xl overflow-hidden shadow-md">
+                <img 
+                  src="https://images.unsplash.com/photo-1612214070475-1e73f478188c?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" 
+                  alt="Volleyballhalle" 
+                  className="w-full h-auto"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default AboutSection;
diff --git a/src/components/ContactSection.tsx b/src/components/ContactSection.tsx
new file mode 100644
index 000000000..4de34d179
--- /dev/null
+++ b/src/components/ContactSection.tsx
@@ -0,0 +1,107 @@
+
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { MapPin, Phone, Mail, Clock } from "lucide-react";
+
+const ContactSection = () => {
+  return (
+    <section id="contact" className="py-16 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-gray-900">Kontakt</h2>
+          <p className="mt-4 text-xl text-gray-600">Wir freuen uns auf deine Nachricht</p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-8 lg:gap-12">
+          <div>
+            <Card>
+              <CardContent className="p-6">
+                <form className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div className="space-y-2">
+                      <label htmlFor="firstName" className="text-sm font-medium">Vorname</label>
+                      <Input id="firstName" placeholder="Dein Vorname" />
+                    </div>
+                    <div className="space-y-2">
+                      <label htmlFor="lastName" className="text-sm font-medium">Nachname</label>
+                      <Input id="lastName" placeholder="Dein Nachname" />
+                    </div>
+                  </div>
+                  <div className="space-y-2">
+                    <label htmlFor="email" className="text-sm font-medium">E-Mail</label>
+                    <Input id="email" type="email" placeholder="deine@email.de" />
+                  </div>
+                  <div className="space-y-2">
+                    <label htmlFor="subject" className="text-sm font-medium">Betreff</label>
+                    <Input id="subject" placeholder="Worum geht es?" />
+                  </div>
+                  <div className="space-y-2">
+                    <label htmlFor="message" className="text-sm font-medium">Nachricht</label>
+                    <Textarea id="message" placeholder="Deine Nachricht an uns" rows={4} />
+                  </div>
+                  <Button className="w-full bg-frog-500 hover:bg-frog-600">Nachricht senden</Button>
+                </form>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="space-y-6">
+            <div className="bg-white rounded-lg shadow p-6">
+              <h3 className="text-xl font-bold mb-4">Kontaktinformationen</h3>
+              <div className="space-y-4">
+                <div className="flex items-start">
+                  <MapPin className="h-5 w-5 text-frog-500 mt-1 mr-3" />
+                  <div>
+                    <p className="font-medium">Adresse</p>
+                    <p className="text-gray-600">Sporthalle Laudenbach<br />Schulstraße 15<br />69514 Laudenbach</p>
+                  </div>
+                </div>
+                <div className="flex items-start">
+                  <Phone className="h-5 w-5 text-frog-500 mt-1 mr-3" />
+                  <div>
+                    <p className="font-medium">Telefon</p>
+                    <p className="text-gray-600">+49 6201 123456</p>
+                  </div>
+                </div>
+                <div className="flex items-start">
+                  <Mail className="h-5 w-5 text-frog-500 mt-1 mr-3" />
+                  <div>
+                    <p className="font-medium">E-Mail</p>
+                    <p className="text-gray-600">info@tg-laudenbach-volleyball.de</p>
+                  </div>
+                </div>
+                <div className="flex items-start">
+                  <Clock className="h-5 w-5 text-frog-500 mt-1 mr-3" />
+                  <div>
+                    <p className="font-medium">Trainingszeiten</p>
+                    <div className="text-gray-600">
+                      <p>Mo: 18:00 - 22:00 Uhr</p>
+                      <p>Di & Do: 19:00 - 21:00 Uhr</p>
+                      <p>Fr: 17:00 - 19:00 Uhr (Jugend)</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-white rounded-lg shadow overflow-hidden">
+              <iframe 
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2585.923358188726!2d8.63338731565!3d49.58872697936459!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4797ca97ea4a7e55%3A0x4e3bd89fc8fa7adc!2sLaudenbach%2C%20Germany!5e0!3m2!1sen!2sus!4v1644950297175!5m2!1sen!2sus" 
+                width="100%" 
+                height="250" 
+                style={{ border: 0 }} 
+                allowFullScreen={false} 
+                loading="lazy"
+                title="Google Maps Standort TG Laudenbach"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ContactSection;
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 000000000..673f0086c
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,83 @@
+
+import { Facebook, Instagram, Twitter, Youtube, Volleyball } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const Footer = () => {
+  const currentYear = new Date().getFullYear();
+  
+  return (
+    <footer className="bg-gray-900 text-white">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 pb-8">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
+          <div className="space-y-4">
+            <div className="flex items-center">
+              <Volleyball className="h-8 w-8 text-frog-400 mr-2" />
+              <span className="font-bold text-xl">TG Laudenbach</span>
+            </div>
+            <p className="text-gray-400">
+              Volleyball mit Leidenschaft und Teamgeist seit 1975.
+            </p>
+            <div className="flex space-x-4">
+              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
+                <Facebook className="h-5 w-5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
+                <Instagram className="h-5 w-5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
+                <Twitter className="h-5 w-5" />
+              </Button>
+              <Button variant="ghost" size="icon" className="text-gray-400 hover:text-white">
+                <Youtube className="h-5 w-5" />
+              </Button>
+            </div>
+          </div>
+
+          <div>
+            <h3 className="font-bold text-lg mb-4">Schnelllinks</h3>
+            <ul className="space-y-2">
+              <li><a href="#" className="text-gray-400 hover:text-white">Startseite</a></li>
+              <li><a href="#news" className="text-gray-400 hover:text-white">Aktuelles</a></li>
+              <li><a href="#team" className="text-gray-400 hover:text-white">Teams</a></li>
+              <li><a href="#gallery" className="text-gray-400 hover:text-white">Galerie</a></li>
+              <li><a href="#about" className="text-gray-400 hover:text-white">Über uns</a></li>
+              <li><a href="#contact" className="text-gray-400 hover:text-white">Kontakt</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="font-bold text-lg mb-4">Infos</h3>
+            <ul className="space-y-2">
+              <li><a href="#" className="text-gray-400 hover:text-white">Datenschutz</a></li>
+              <li><a href="#" className="text-gray-400 hover:text-white">Impressum</a></li>
+              <li><a href="#" className="text-gray-400 hover:text-white">Satzung</a></li>
+              <li><a href="#" className="text-gray-400 hover:text-white">Beiträge</a></li>
+              <li><a href="#" className="text-gray-400 hover:text-white">Sponsoren</a></li>
+            </ul>
+          </div>
+
+          <div>
+            <h3 className="font-bold text-lg mb-4">Newsletter</h3>
+            <p className="text-gray-400 mb-4">Bleib auf dem Laufenden mit unseren neuesten Nachrichten und Events.</p>
+            <div className="flex">
+              <input
+                type="email"
+                placeholder="Deine E-Mail"
+                className="py-2 px-4 bg-gray-800 text-white rounded-l-md focus:outline-none focus:ring-2 focus:ring-frog-500 w-full"
+              />
+              <Button className="bg-frog-500 hover:bg-frog-600 rounded-l-none">
+                Abonnieren
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
+          <p>© {currentYear} TG Laudenbach Volleyball. Alle Rechte vorbehalten.</p>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;
diff --git a/src/components/GallerySection.tsx b/src/components/GallerySection.tsx
new file mode 100644
index 000000000..e673ead5a
--- /dev/null
+++ b/src/components/GallerySection.tsx
@@ -0,0 +1,87 @@
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { ChevronLeft, ChevronRight, X } from "lucide-react";
+
+const GallerySection = () => {
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const images = [
+    "https://images.unsplash.com/photo-1553005746-5be7d6d48a81?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1588286840104-8957b019727f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1599586120429-48281b6f0ece?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1592656094267-764a45160876?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+    "https://images.unsplash.com/photo-1544213456-e1c259fecc4f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
+  ];
+
+  const openLightbox = (image: string) => {
+    setSelectedImage(image);
+    document.body.style.overflow = "hidden";
+  };
+
+  const closeLightbox = () => {
+    setSelectedImage(null);
+    document.body.style.overflow = "auto";
+  };
+
+  return (
+    <section id="gallery" className="py-16 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-gray-900">Galerie</h2>
+          <p className="mt-4 text-xl text-gray-600">Eindrücke aus unserem Vereinsleben</p>
+        </div>
+
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+          {images.map((image, index) => (
+            <div 
+              key={index} 
+              className="aspect-square overflow-hidden rounded-lg cursor-pointer hover:opacity-90 transition-opacity"
+              onClick={() => openLightbox(image)}
+            >
+              <img 
+                src={image} 
+                alt={`Galeriebild ${index + 1}`} 
+                className="w-full h-full object-cover"
+              />
+            </div>
+          ))}
+        </div>
+
+        <div className="text-center mt-12">
+          <Button className="bg-frog-500 hover:bg-frog-600">
+            Mehr Bilder anzeigen
+          </Button>
+        </div>
+      </div>
+
+      {/* Lightbox */}
+      {selectedImage && (
+        <div className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center" onClick={closeLightbox}>
+          <Button 
+            variant="ghost" 
+            size="icon" 
+            className="absolute top-4 right-4 text-white hover:bg-white/10"
+            onClick={(e) => {
+              e.stopPropagation();
+              closeLightbox();
+            }}
+          >
+            <X className="h-8 w-8" />
+          </Button>
+          
+          <div className="relative max-w-4xl max-h-[80vh]" onClick={(e) => e.stopPropagation()}>
+            <img 
+              src={selectedImage} 
+              alt="Vergrößertes Bild" 
+              className="max-w-full max-h-[80vh] object-contain"
+            />
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};
+
+export default GallerySection;
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 000000000..adfbe6d6a
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,40 @@
+
+import { Button } from "@/components/ui/button";
+import { Volleyball } from "lucide-react";
+
+const Hero = () => {
+  return (
+    <div className="hero-pattern pt-28 pb-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col md:flex-row items-center">
+          <div className="md:w-1/2 text-white">
+            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
+              Willkommen beim <span className="text-white">TG Laudenbach</span>
+            </h1>
+            <p className="mt-4 text-lg md:text-xl">
+              Volleyball mit Leidenschaft und Teamgeist - werde Teil unserer Gemeinschaft!
+            </p>
+            <div className="mt-8 flex flex-wrap gap-4">
+              <Button className="bg-white text-frog-700 hover:bg-gray-100">
+                Training besuchen
+              </Button>
+              <Button variant="outline" className="text-white border-white hover:bg-white/10">
+                Teams kennenlernen
+              </Button>
+            </div>
+          </div>
+          <div className="md:w-1/2 flex justify-center mt-8 md:mt-0">
+            <div className="relative">
+              <div className="absolute -inset-1 rounded-full bg-white/20 blur-xl"></div>
+              <div className="relative bg-white/10 backdrop-blur-sm h-64 w-64 rounded-full flex items-center justify-center border border-white/30">
+                <Volleyball className="h-24 w-24 text-white animate-bounce-slow" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Hero;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
new file mode 100644
index 000000000..165f0c8f7
--- /dev/null
+++ b/src/components/Navbar.tsx
@@ -0,0 +1,65 @@
+
+import { useState } from 'react';
+import { Button } from "@/components/ui/button";
+import { Menu, X, Volleyball } from "lucide-react";
+
+const Navbar = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
+  return (
+    <nav className="bg-white shadow-md fixed w-full z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between h-16 items-center">
+          <div className="flex items-center">
+            <Volleyball className="h-8 w-8 text-frog-500 mr-2" />
+            <span className="font-bold text-xl text-frog-800">TG Laudenbach</span>
+          </div>
+
+          {/* Desktop Navigation */}
+          <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>
+            <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>
+            <Button className="bg-frog-500 hover:bg-frog-600 text-white">Mitglied werden</Button>
+          </div>
+          
+          {/* Mobile menu button */}
+          <div className="md:hidden flex items-center">
+            <Button 
+              variant="ghost" 
+              size="icon" 
+              onClick={toggleMenu}
+              aria-expanded={isMenuOpen}
+            >
+              {isMenuOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Navigation */}
+      {isMenuOpen && (
+        <div className="md:hidden">
+          <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>
+            <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>
+          </div>
+        </div>
+      )}
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/src/components/NewsSection.tsx b/src/components/NewsSection.tsx
new file mode 100644
index 000000000..82f6eadda
--- /dev/null
+++ b/src/components/NewsSection.tsx
@@ -0,0 +1,71 @@
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ArrowRight } from "lucide-react";
+
+const NewsSection = () => {
+  const news = [
+    {
+      id: 1,
+      title: "Saisonstart 2023/24",
+      date: "15. September 2023",
+      description: "Die neue Saison beginnt mit einem Heimspiel gegen VfB Mosbach. Kommt vorbei und unterstützt unser Team!",
+      image: "https://images.unsplash.com/photo-1612872087720-bb876e2e67d1?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
+    },
+    {
+      id: 2,
+      title: "Beachvolleyball-Turnier",
+      date: "3. Juli 2023",
+      description: "Unser jährliches Beachvolleyball-Turnier war ein voller Erfolg! 24 Teams kämpften um den Sieg.",
+      image: "https://images.unsplash.com/photo-1583514555852-6f77e7c9e081?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
+    },
+    {
+      id: 3,
+      title: "Neuer Trainer für die Jugendmannschaft",
+      date: "21. Mai 2023",
+      description: "Wir freuen uns, Marc Schneider als neuen Trainer für unsere U16-Mannschaft begrüßen zu dürfen.",
+      image: "https://images.unsplash.com/photo-1547347298-4074fc3086f0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=80"
+    }
+  ];
+
+  return (
+    <section id="news" className="py-16 bg-gray-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-gray-900">Aktuelles</h2>
+          <p className="mt-4 text-xl text-gray-600">Die neuesten Meldungen aus unserem Vereinsleben</p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {news.map((item) => (
+            <Card key={item.id} className="overflow-hidden hover:shadow-lg transition-shadow">
+              <div className="h-48 overflow-hidden">
+                <img src={item.image} alt={item.title} className="w-full h-full object-cover" />
+              </div>
+              <CardHeader>
+                <CardTitle>{item.title}</CardTitle>
+                <CardDescription>{item.date}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p>{item.description}</p>
+              </CardContent>
+              <CardFooter>
+                <Button variant="ghost" className="text-frog-600 hover:text-frog-700 p-0 hover:bg-transparent">
+                  Weiterlesen <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+
+        <div className="text-center mt-12">
+          <Button variant="outline" className="border-frog-500 text-frog-600 hover:bg-frog-50">
+            Alle Neuigkeiten
+          </Button>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default NewsSection;
diff --git a/src/components/TeamSection.tsx b/src/components/TeamSection.tsx
new file mode 100644
index 000000000..461500611
--- /dev/null
+++ b/src/components/TeamSection.tsx
@@ -0,0 +1,75 @@
+
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Users } from "lucide-react";
+
+const TeamSection = () => {
+  const teams = [
+    {
+      id: 1,
+      name: "Damen I",
+      league: "Landesliga Nord",
+      description: "Unsere erste Damenmannschaft spielt in der Landesliga Nord und konnte in der letzten Saison den 3. Platz erreichen.",
+      trainingTimes: "Di & Do 19:00 - 21:00 Uhr"
+    },
+    {
+      id: 2,
+      name: "Herren I",
+      league: "Bezirksliga",
+      description: "Das Herrenteam kämpft in der Bezirksliga und hat das Ziel, in dieser Saison den Aufstieg zu schaffen.",
+      trainingTimes: "Mo & Mi 20:00 - 22:00 Uhr"
+    },
+    {
+      id: 3,
+      name: "Jugend U16",
+      league: "Jugendliga",
+      description: "Unsere Nachwuchsspielerinnen und -spieler entwickeln sich prächtig und nehmen an der Jugendliga teil.",
+      trainingTimes: "Fr 17:00 - 19:00 Uhr"
+    },
+    {
+      id: 4,
+      name: "Freizeitgruppe",
+      league: "Hobby",
+      description: "Für alle, die Volleyball zum Spaß spielen möchten. Anfänger und Fortgeschrittene sind willkommen!",
+      trainingTimes: "Mo 18:00 - 20:00 Uhr"
+    }
+  ];
+
+  return (
+    <section id="team" className="py-16">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center mb-12">
+          <h2 className="text-3xl font-bold text-gray-900">Unsere Teams</h2>
+          <p className="mt-4 text-xl text-gray-600">Von Anfängern bis Leistungssport - für jeden ist etwas dabei</p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {teams.map((team) => (
+            <Card key={team.id} className="hover:shadow-lg transition-shadow border-t-4 border-t-frog-500">
+              <CardHeader>
+                <CardTitle className="flex items-center">
+                  <Users className="h-5 w-5 mr-2 text-frog-500" />
+                  {team.name}
+                </CardTitle>
+                <CardDescription>{team.league}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-gray-600 mb-4">{team.description}</p>
+                <div className="text-sm font-medium">
+                  <span className="text-frog-600">Training:</span> {team.trainingTimes}
+                </div>
+              </CardContent>
+              <CardFooter>
+                <Button variant="outline" size="sm" className="w-full border-frog-500 text-frog-600 hover:bg-frog-50">
+                  Team Details
+                </Button>
+              </CardFooter>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default TeamSection;
diff --git a/src/index.css b/src/index.css
index 33fdf9de4..4716475ca 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,4 @@
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -13,42 +14,26 @@
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 122 39% 49%; /* Froschgrün für Primärfarbe */
     --primary-foreground: 210 40% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 122 39% 94%;
+    --secondary-foreground: 122 39% 29%;
 
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 122 59% 94%;
+    --accent-foreground: 122 39% 29%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --ring: 122 39% 49%;
 
     --radius: 0.5rem;
-
-    --sidebar-background: 0 0% 98%;
-
-    --sidebar-foreground: 240 5.3% 26.1%;
-
-    --sidebar-primary: 240 5.9% 10%;
-
-    --sidebar-primary-foreground: 0 0% 98%;
-
-    --sidebar-accent: 240 4.8% 95.9%;
-
-    --sidebar-accent-foreground: 240 5.9% 10%;
-
-    --sidebar-border: 220 13% 91%;
-
-    --sidebar-ring: 217.2 91.2% 59.8%;
   }
 
   .dark {
@@ -61,16 +46,16 @@
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 122 39% 49%;
+    --primary-foreground: 210 40% 98%;
 
-    --secondary: 217.2 32.6% 17.5%;
+    --secondary: 122 39% 29%;
     --secondary-foreground: 210 40% 98%;
 
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
 
-    --accent: 217.2 32.6% 17.5%;
+    --accent: 122 39% 29%;
     --accent-foreground: 210 40% 98%;
 
     --destructive: 0 62.8% 30.6%;
@@ -78,15 +63,7 @@
 
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
+    --ring: 122 39% 49%;
   }
 }
 
@@ -98,4 +75,11 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
+
+@layer components {
+  .hero-pattern {
+    background-color: #4CAF50;
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657l1.415 1.414L13.857 0H11.03zm32.284 0l6.9 6.9-1.414 1.414-9.9-9.9 4.4 4.4L45.414.828 40.828 5.4l1.415 1.413L54.628 0h-8.686zM5.374 0L8.2 2.828 5.372 5.657l1.415 1.415L13.856 0H5.374zm36.626 0L39.8 2.828 35.543 0h6.457zm-14.5 0L32.657 5.657 28.4 0h6.457zM12.828 0L9.9 2.828 8.486 1.414 5.657 4.243 8.487 7.07 5.657 9.9l1.414 1.414L12.83 5.657l-4.4-4.4.83-.83L11.03 2.828 8.2 0h4.628zM0 0h49.8L39.8 9.9l-1.414-1.413L51.8 0h2.83L39.8 14.827l-1.413-1.414 8.684-8.686-4.4-4.4L42.8 0h-2.173L34.97 5.657l-1.414-1.414L40 0h-7.07l-3.66 3.657 1.42 1.414-5.657 5.657-1.414-1.414L28.8 3.657 25.97 0H20L16.34 3.66l1.414 1.413L11.03 11.03l-1.42-1.416 8.687-8.686L14.143 0h-2.83l-.828.828L14.8 5.657 8.787 11.67l1.415 1.414 5.657-5.657 5.657 5.657 5.657-5.657 5.657 5.657 1.414-1.414L28.8 5.657 34.457 0H20v.828l4.457 4.457L20 9.9l1.414 1.414L28.8 3.73l4.686 4.686 1.414-1.415-8.685-8.685h11.543l-4.4 4.4 1.413 1.414L45.8 0h-11.2l-3.03 3.03L31.57 3.03 28.8 0h-7.07l-4.686 4.686 1.415 1.414 4.685-4.685L31.57 9.243l1.414-1.414L27.38 2.223l-1.414 1.415L0 0zm8.487 0L0 8.486v2.83l8.487-8.487L16.97 11.31l1.415-1.413L8.488 0h-2.83L14.8 9.9l-1.413 1.414L5.657 3.657 0 9.313v2.827l5.657-5.657 7.07 7.07L14.143 12.14 5.657 3.658 0 9.314v2.83l5.657-5.657 7.07 7.07L14.143 12.14 5.657 3.657 0 9.313v2.83L5.657 6.484l4.243 4.242L11.31 9.312l-4.24-4.24L0 12.485v2.83l10.97-10.97 1.415 1.414-9.9 9.9 1.415 1.414 9.9-9.9v-2.83L3.658 14.97 5.07 16.38 16.143 5.33 14.73 3.914 3.657 14.97 5.07 16.382 17.557 3.9 16.14 2.5 5.07 13.558l1.414 1.414L17.9 3.555l-1.414-1.414L0 18.284v2.83L18.285 3.9l-1.414-1.415-9.9 9.9L8.4 13.8l9.9-9.9-1.415-1.414L0 18.284v-3.66L13.856 0H8.487zm-6.83 0l.917.917-1.416 1.414-1.415-1.414h1.83zm-7.07 0l5.657 5.657-1.414 1.414L0 8.487v2.83l5.657-5.657 5.657 5.657 1.414-1.414L8.487 5.657 0 14.143v2.83L14.14 3.657 12.73 2.243 0 14.972V20l14.142-14.142L12.728 4.444 0 17.172v2.83L17.17 2.828l-1.414-1.414L0 16.556v-8.08L8.487 0H0zm0 0v8.486l1.843-1.843L9.9 14.142l1.414-1.414L2.657 4.07 0 6.8v8.1L11.342 3.486l-1.414-1.414L0 11.97v-1.03L1.93 9.042 9.9 17.17l1.414-1.414L2.657 7.07 0 9.86v7.83L17.8 0h-9.9L0 7.796v1.03L7.827 0H0zm6.587 0L14.97 8.37l1.415-1.414L7.972 0H6.586zm9.9 0L28.284 11.8l1.414-1.415L16.485 0zm-1.414 0L26.87 11.8l1.414-1.415L15.07 0zm1.414 0l-1.414 1.414 11.314 11.314 1.414-1.414zm6.785 0l4.9 4.9 1.413-1.414L25.97 0zm-9.9 0l3.587 3.586 1.414-1.414L20.885 0zm-9.9 0l3.586 3.586 1.414-1.414L10.985 0zm13.486 0l-4.243 4.242 1.414 1.414L24.37 0zm-5.656 0L12.04 8.485l1.414 1.414L22.87 0zm-9.9 0L.973 8.485l1.414 1.414L12.97 0zm8.486 0l.828.828-1.415 1.414-1.414-1.414 2-2zm-4.243 0l-1.414 1.414 1.414 1.414 1.414-1.414zm.828 0l.587.587 10.728 10.728L21.37 0zM0 0v2.828l1.414 1.414L5.657 0H0zm15.071 0l-1.414 1.414L0 15.071v1.942l15.984-15.984L14.57 0zm-5.657 0l-1.415 1.414L0 9.428v3.9l9.428-9.43L7.987 2.5 0 10.6v2.83l10.6-10.6L9.2 1.385 0 10.586v1.543l10.543-10.543L9.114 0H0v1.03L1.03 0H0zm0 17.157l1.414 1.414L10.6 9.885l-1.414-1.414L0 17.157zm0-2.83l1.414 1.415L8.77 9.07l-1.414-1.414L0 14.327zM0 20v9.9l1.414-1.414L0 26.97V30l4.428-4.428L3.014 24.16 0 27.172V20zm0 0v5.657l1.414 1.414L5.657 22.8l-1.414-1.413L0 25.657V20H0zm11.314 0L8.485 2.828 7.07 4.243 10.657 7.83 16.97 1.414 15.557 0h-2.83l1.415 1.414 1.414-1.414h-2.83l.83.828-1.42 1.414L5.66 7.72 7.07 9.143l4.242-4.242L15.9 9.5l1.413-1.414L11.31 2.07 0 13.384v3.943l14.285-14.285-1.414-1.414L0 20v9.9l2.83-2.83-1.415-1.414L0 27.17v2.83L2.83 27.17l-1.415-1.414L0 28.243V31.5l3.657-3.657-1.414-1.414L0 28.97V31.8l1.414-1.414 1.414 1.414 1.414-1.414-1.414-1.414L5.657 25.7l-1.414-1.414L0 28.243z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
+  }
+}
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 52ea22c8d..66cbdbbbb 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -1,12 +1,24 @@
-// Update this page (the content is just a fallback if you fail to update the page)
+
+import Navbar from "@/components/Navbar";
+import Hero from "@/components/Hero";
+import NewsSection from "@/components/NewsSection";
+import TeamSection from "@/components/TeamSection";
+import GallerySection from "@/components/GallerySection";
+import AboutSection from "@/components/AboutSection";
+import ContactSection from "@/components/ContactSection";
+import Footer from "@/components/Footer";
 
 const Index = () => {
   return (
-    <div className="min-h-screen flex items-center justify-center bg-gray-100">
-      <div className="text-center">
-        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
-        <p className="text-xl text-gray-600">Start building your amazing project here!</p>
-      </div>
+    <div className="min-h-screen bg-white">
+      <Navbar />
+      <Hero />
+      <NewsSection />
+      <TeamSection />
+      <GallerySection />
+      <AboutSection />
+      <ContactSection />
+      <Footer />
     </div>
   );
 };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 8706086e1..40764c8d3 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,3 +1,4 @@
+
 import type { Config } from "tailwindcss";
 
 export default {
@@ -61,7 +62,19 @@ export default {
 					'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
 					border: 'hsl(var(--sidebar-border))',
 					ring: 'hsl(var(--sidebar-ring))'
-				}
+				},
+        frog: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#4CAF50', // Hauptfarbe Froschgrün
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+        }
 			},
 			borderRadius: {
 				lg: 'var(--radius)',
@@ -84,11 +97,22 @@ export default {
 					to: {
 						height: '0'
 					}
-				}
+				},
+        'bounce-slow': {
+          '0%, 100%': {
+            transform: 'translateY(-5%)',
+            animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)'
+          },
+          '50%': {
+            transform: 'translateY(0)',
+            animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)'
+          }
+        }
 			},
 			animation: {
 				'accordion-down': 'accordion-down 0.2s ease-out',
-				'accordion-up': 'accordion-up 0.2s ease-out'
+				'accordion-up': 'accordion-up 0.2s ease-out',
+        'bounce-slow': 'bounce-slow 3s infinite'
 			}
 		}
 	},