Unsere Teams
-
Von Anfängern bis Leistungssport - für jeden ist etwas dabei
+
Von Anfängern bis Leistungssport – für jeden ist etwas dabei
-
- {teams.map((team) => (
-
-
-
-
- {team.name}
-
- {team.league}
-
-
- {team.description}
-
- Training: {team.trainingTimes}
-
-
-
-
-
-
- ))}
+
+ {/* Navigation Buttons */}
+
+
+
+
+ {teams.map((team) => (
+
+
+
+
+
+ {team.name}
+
+ {team.league}
+
+
+ {team.description}
+
+ Training: {team.trainingTimes}
+
+
+
+
+
+
+
+
+
+ ))}
+
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
new file mode 100644
index 000000000..6b008c4ce
--- /dev/null
+++ b/src/layout/Layout.tsx
@@ -0,0 +1,19 @@
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import { ReactNode } from "react";
+
+type LayoutProps = {
+ children: ReactNode;
+ };
+
+ const Layout = ({ children }: LayoutProps) => {
+ return (
+
+
+ {children}
+
+
+ );
+ };
+
+ export default Layout;
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index 719464e3d..7010f075b 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,5 +1,49 @@
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import "keen-slider/keen-slider.min.css";
-createRoot(document.getElementById("root")!).render(
);
+import Index from "./pages/Index";
+import MitgliedWerdenPage from "./pages/MitgliedWerden";
+import AlleNeuigkeitenPage from "./pages/AlleNeuigkeiten";
+import Layout from "./layout/Layout";
+import TeamDetailPage from "./pages/TeamDetailPage";
+
+
+import "./index.css"
+
+
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+
+
+
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+
+
+
+ }
+ />
+ } />
+
+
+
+ );
\ No newline at end of file
diff --git a/src/pages/AlleNeuigkeiten.tsx b/src/pages/AlleNeuigkeiten.tsx
new file mode 100644
index 000000000..71d157319
--- /dev/null
+++ b/src/pages/AlleNeuigkeiten.tsx
@@ -0,0 +1,52 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+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"
+ },
+ // 🔜 später kannst du hier easy mehr News reinladen oder aus ner API holen
+];
+
+const AlleNeuigkeitenPage = () => {
+ return (
+
+
Alle Neuigkeiten
+
+ {news.map((item) => (
+
+
+
+
{item.description}
+
+
+ ))}
+
+
+ );
+};
+
+export default AlleNeuigkeitenPage;
diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index 66cbdbbbb..a39807503 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -11,14 +11,12 @@ import Footer from "@/components/Footer";
const Index = () => {
return (
);
};
diff --git a/src/pages/MitgliedWerden.tsx b/src/pages/MitgliedWerden.tsx
new file mode 100644
index 000000000..8d420bc9c
--- /dev/null
+++ b/src/pages/MitgliedWerden.tsx
@@ -0,0 +1,26 @@
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+
+const MitgliedWerdenPage = () => {
+ return (
+
+
+
+ Mitglied werden
+
+
+
+
+ );
+};
+
+export default MitgliedWerdenPage;
diff --git a/src/pages/TeamDetailPage.tsx b/src/pages/TeamDetailPage.tsx
new file mode 100644
index 000000000..93a5bede3
--- /dev/null
+++ b/src/pages/TeamDetailPage.tsx
@@ -0,0 +1,37 @@
+import { useParams } from "react-router-dom";
+
+const teamData = [
+ {
+ id: "1",
+ name: "Damen I",
+ league: "Landesliga Nord",
+ description: "Unsere erste Damenmannschaft ...",
+ trainingTimes: "Di & Do 19:00 - 21:00 Uhr",
+ },
+ {
+ id: "2",
+ name: "Herren I",
+ league: "Bezirksliga",
+ description: "Das Herrenteam kämpft ...",
+ trainingTimes: "Mo & Mi 20:00 - 22:00 Uhr",
+ },
+ // usw...
+];
+
+const TeamDetailPage = () => {
+ const { id } = useParams();
+ const team = teamData.find((t) => t.id === id);
+
+ if (!team) return
Team nicht gefunden 🐸
;
+
+ return (
+
+
{team.name}
+
{team.league}
+
{team.description}
+
Training: {team.trainingTimes}
+
+ );
+};
+
+export default TeamDetailPage;
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 40764c8d3..b38a3b988 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,120 +1,115 @@
-
import type { Config } from "tailwindcss";
export default {
- darkMode: ["class"],
- content: [
- "./pages/**/*.{ts,tsx}",
- "./components/**/*.{ts,tsx}",
- "./app/**/*.{ts,tsx}",
- "./src/**/*.{ts,tsx}",
- ],
- prefix: "",
- theme: {
- container: {
- center: true,
- padding: '2rem',
- screens: {
- '2xl': '1400px'
- }
- },
- extend: {
- colors: {
- border: 'hsl(var(--border))',
- input: 'hsl(var(--input))',
- ring: 'hsl(var(--ring))',
- background: 'hsl(var(--background))',
- foreground: 'hsl(var(--foreground))',
- primary: {
- DEFAULT: 'hsl(var(--primary))',
- foreground: 'hsl(var(--primary-foreground))'
- },
- secondary: {
- DEFAULT: 'hsl(var(--secondary))',
- foreground: 'hsl(var(--secondary-foreground))'
- },
- destructive: {
- DEFAULT: 'hsl(var(--destructive))',
- foreground: 'hsl(var(--destructive-foreground))'
- },
- muted: {
- DEFAULT: 'hsl(var(--muted))',
- foreground: 'hsl(var(--muted-foreground))'
- },
- accent: {
- DEFAULT: 'hsl(var(--accent))',
- foreground: 'hsl(var(--accent-foreground))'
- },
- popover: {
- DEFAULT: 'hsl(var(--popover))',
- foreground: 'hsl(var(--popover-foreground))'
- },
- card: {
- DEFAULT: 'hsl(var(--card))',
- foreground: 'hsl(var(--card-foreground))'
- },
- sidebar: {
- DEFAULT: 'hsl(var(--sidebar-background))',
- foreground: 'hsl(var(--sidebar-foreground))',
- primary: 'hsl(var(--sidebar-primary))',
- 'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
- accent: 'hsl(var(--sidebar-accent))',
- 'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
- border: 'hsl(var(--sidebar-border))',
- ring: 'hsl(var(--sidebar-ring))'
- },
+ darkMode: ["class"],
+ content: [
+ "./pages/**/*.{ts,tsx}",
+ "./components/**/*.{ts,tsx}",
+ "./app/**/*.{ts,tsx}",
+ "./src/**/*.{ts,tsx}",
+ ],
+ prefix: "",
+ theme: {
+ container: {
+ center: true,
+ padding: "2rem",
+ screens: {
+ "2xl": "1400px",
+ },
+ },
+ extend: {
+ backgroundImage: {
+ "hero-pattern": "url('/images/abteilung-bg.jpg')",
+ },
+ colors: {
+ border: "hsl(var(--border))",
+ input: "hsl(var(--input))",
+ ring: "hsl(var(--ring))",
+ background: "hsl(var(--background))",
+ foreground: "hsl(var(--foreground))",
+ primary: {
+ DEFAULT: "hsl(var(--primary))",
+ foreground: "hsl(var(--primary-foreground))",
+ },
+ secondary: {
+ DEFAULT: "hsl(var(--secondary))",
+ foreground: "hsl(var(--secondary-foreground))",
+ },
+ destructive: {
+ DEFAULT: "hsl(var(--destructive))",
+ foreground: "hsl(var(--destructive-foreground))",
+ },
+ muted: {
+ DEFAULT: "hsl(var(--muted))",
+ foreground: "hsl(var(--muted-foreground))",
+ },
+ accent: {
+ DEFAULT: "hsl(var(--accent))",
+ foreground: "hsl(var(--accent-foreground))",
+ },
+ popover: {
+ DEFAULT: "hsl(var(--popover))",
+ foreground: "hsl(var(--popover-foreground))",
+ },
+ card: {
+ DEFAULT: "hsl(var(--card))",
+ foreground: "hsl(var(--card-foreground))",
+ },
+ sidebar: {
+ DEFAULT: "hsl(var(--sidebar-background))",
+ foreground: "hsl(var(--sidebar-foreground))",
+ primary: "hsl(var(--sidebar-primary))",
+ "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+ accent: "hsl(var(--sidebar-accent))",
+ "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)',
- md: 'calc(var(--radius) - 2px)',
- sm: 'calc(var(--radius) - 4px)'
- },
- keyframes: {
- 'accordion-down': {
- from: {
- height: '0'
- },
- to: {
- height: 'var(--radix-accordion-content-height)'
- }
- },
- 'accordion-up': {
- from: {
- height: 'var(--radix-accordion-content-height)'
- },
- to: {
- height: '0'
- }
- },
- 'bounce-slow': {
- '0%, 100%': {
- transform: 'translateY(-5%)',
- animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)'
+ 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)",
+ md: "calc(var(--radius) - 2px)",
+ sm: "calc(var(--radius) - 4px)",
+ },
+ keyframes: {
+ "accordion-down": {
+ from: { height: "0" },
+ to: { height: "var(--radix-accordion-content-height)" },
+ },
+ "accordion-up": {
+ from: { height: "var(--radix-accordion-content-height)" },
+ 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',
- 'bounce-slow': 'bounce-slow 3s infinite'
- }
- }
- },
- plugins: [require("tailwindcss-animate")],
+ "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",
+ "bounce-slow": "bounce-slow 3s infinite",
+ },
+ },
+ },
+ plugins: [require("tailwindcss-animate")],
} satisfies Config;