Feat: Implement landing page
Implement a landing page with a frog green color scheme.
This commit is contained in:
gpt-engineer-app[bot]
parent
70d5ff284b
commit
a517191176
62
src/components/AboutSection.tsx
Normal file
62
src/components/AboutSection.tsx
Normal 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
107
src/components/ContactSection.tsx
Normal 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
83
src/components/Footer.tsx
Normal 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
87
src/components/GallerySection.tsx
Normal 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
40
src/components/Hero.tsx
Normal 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
65
src/components/Navbar.tsx
Normal 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
71
src/components/NewsSection.tsx
Normal 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
75
src/components/TeamSection.tsx
Normal 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;
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
@tailwind base;
|
@tailwind base;
|
||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
@ -13,42 +14,26 @@
|
|||||||
--popover: 0 0% 100%;
|
--popover: 0 0% 100%;
|
||||||
--popover-foreground: 222.2 84% 4.9%;
|
--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%;
|
--primary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--secondary: 210 40% 96.1%;
|
--secondary: 122 39% 94%;
|
||||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
--secondary-foreground: 122 39% 29%;
|
||||||
|
|
||||||
--muted: 210 40% 96.1%;
|
--muted: 210 40% 96.1%;
|
||||||
--muted-foreground: 215.4 16.3% 46.9%;
|
--muted-foreground: 215.4 16.3% 46.9%;
|
||||||
|
|
||||||
--accent: 210 40% 96.1%;
|
--accent: 122 59% 94%;
|
||||||
--accent-foreground: 222.2 47.4% 11.2%;
|
--accent-foreground: 122 39% 29%;
|
||||||
|
|
||||||
--destructive: 0 84.2% 60.2%;
|
--destructive: 0 84.2% 60.2%;
|
||||||
--destructive-foreground: 210 40% 98%;
|
--destructive-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--border: 214.3 31.8% 91.4%;
|
--border: 214.3 31.8% 91.4%;
|
||||||
--input: 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;
|
--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 {
|
.dark {
|
||||||
@ -61,16 +46,16 @@
|
|||||||
--popover: 222.2 84% 4.9%;
|
--popover: 222.2 84% 4.9%;
|
||||||
--popover-foreground: 210 40% 98%;
|
--popover-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--primary: 210 40% 98%;
|
--primary: 122 39% 49%;
|
||||||
--primary-foreground: 222.2 47.4% 11.2%;
|
--primary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
--secondary: 122 39% 29%;
|
||||||
--secondary-foreground: 210 40% 98%;
|
--secondary-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
--muted: 217.2 32.6% 17.5%;
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
--muted-foreground: 215 20.2% 65.1%;
|
||||||
|
|
||||||
--accent: 217.2 32.6% 17.5%;
|
--accent: 122 39% 29%;
|
||||||
--accent-foreground: 210 40% 98%;
|
--accent-foreground: 210 40% 98%;
|
||||||
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
@ -78,15 +63,7 @@
|
|||||||
|
|
||||||
--border: 217.2 32.6% 17.5%;
|
--border: 217.2 32.6% 17.5%;
|
||||||
--input: 217.2 32.6% 17.5%;
|
--input: 217.2 32.6% 17.5%;
|
||||||
--ring: 212.7 26.8% 83.9%;
|
--ring: 122 39% 49%;
|
||||||
--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%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -99,3 +76,10 @@
|
|||||||
@apply bg-background text-foreground;
|
@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");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -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 = () => {
|
const Index = () => {
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-gray-100">
|
<div className="min-h-screen bg-white">
|
||||||
<div className="text-center">
|
<Navbar />
|
||||||
<h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
|
<Hero />
|
||||||
<p className="text-xl text-gray-600">Start building your amazing project here!</p>
|
<NewsSection />
|
||||||
</div>
|
<TeamSection />
|
||||||
|
<GallerySection />
|
||||||
|
<AboutSection />
|
||||||
|
<ContactSection />
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@ -1,3 +1,4 @@
|
|||||||
|
|
||||||
import type { Config } from "tailwindcss";
|
import type { Config } from "tailwindcss";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -61,6 +62,18 @@ export default {
|
|||||||
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
|
||||||
border: 'hsl(var(--sidebar-border))',
|
border: 'hsl(var(--sidebar-border))',
|
||||||
ring: 'hsl(var(--sidebar-ring))'
|
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: {
|
borderRadius: {
|
||||||
@ -84,11 +97,22 @@ export default {
|
|||||||
to: {
|
to: {
|
||||||
height: '0'
|
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: {
|
animation: {
|
||||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
'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'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user