mrcwlnd/volleyball-dev-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Implement landing page

Browse Source 
Implement a landing page with a frog green color scheme.
This commit is contained in:
gpt-engineer-app[bot] 2025-03-27 22:59:20 +00:00
parent 70d5ff284b
commit a517191176
11 changed files with 655 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/AboutSection.tsx Normal file
View File

@ -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;

107
src/components/ContactSection.tsx Normal file
View File

@ -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;

83
src/components/Footer.tsx Normal file
View File

@ -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;

87
src/components/GallerySection.tsx Normal file
View File

@ -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;

40
src/components/Hero.tsx Normal file
View File

@ -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;

65
src/components/Navbar.tsx Normal file
View File

@ -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;

71
src/components/NewsSection.tsx Normal file
View File

@ -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;

75
src/components/TeamSection.tsx Normal file
View File

@ -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;

56
src/index.css
View File

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

24
src/pages/Index.tsx
View File

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

30
tailwind.config.ts
View File

@ -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'
}
}
},