Add src/app/schedule/page.tsx

src/app/schedule/page.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import { Award, Zap, Clock } from "lucide-react";
+import Link from "next/link";
+
+export default function SchedulePage() {
+  const schedule = [
+    {
+      day: "Maandag",      sessions: [
+        { time: "17:30 - 18:30", type: "Beginners", description: "Inleiding tot boksen voor beginners. Focus op basisstappen en technieken." },
+        { time: "18:45 - 19:45", type: "Intermediate", description: "Uitgebreide techniektraining voor gevorderden. Combinaties en timing." },
+      ],
+    },
+    {
+      day: "Dinsdag",      sessions: [
+        { time: "19:00 - 20:00", type: "Advanced", description: "Geavanceerde bokstechnieken en voorbereiding wedstrijdboxers." },
+        { time: "20:15 - 21:15", type: "Fitness Boksen", description: "Boksgeïnspireerde fitnesstraining. Cardio, kracht en coördinatie." },
+      ],
+    },
+    {
+      day: "Woensdag",      sessions: [
+        { time: "17:00 - 18:00", type: "Jeugd (8-12 jaar)", description: "Bokstraining speciaal ontworpen voor jongeren. Veilig en leerzaam." },
+        { time: "18:15 - 19:15", type: "Beginners", description: "Inleiding tot boksen voor beginners. Focus op basisstappen en technieken." },
+      ],
+    },
+    {
+      day: "Donderdag",      sessions: [
+        { time: "19:30 - 20:30", type: "Intermediate", description: "Uitgebreide techniektraining voor gevorderden. Combinaties en timing." },
+        { time: "20:45 - 21:45", type: "Advanced", description: "Geavanceerde bokstechnieken en voorbereiding wedstrijdboxers." },
+      ],
+    },
+    {
+      day: "Vrijdag",      sessions: [
+        { time: "18:00 - 19:00", type: "Fitness Boksen", description: "Boksgeïnspireerde fitnesstraining. Cardio, kracht en coördinatie." },
+        { time: "19:15 - 20:15", type: "Beginners", description: "Inleiding tot boksen voor beginners. Focus op basisstappen en technieken." },
+      ],
+    },
+    {
+      day: "Zaterdag",      sessions: [
+        { time: "10:00 - 11:00", type: "Jeugd (8-12 jaar)", description: "Bokstraining speciaal ontworpen voor jongeren. Veilig en leerzaam." },
+        { time: "11:15 - 12:15", type: "All Levels", description: "Gemengde training voor alle niveaus. Flexibel programma met individuele aandacht." },
+        { time: "14:00 - 15:00", type: "Advanced", description: "Geavanceerde bokstechnieken en voorbereiding wedstrijdboxers." },
+      ],
+    },
+  ];
+
+  return (
+    <ThemeProvider
+      defaultButtonVariant="hover-bubble"
+      defaultTextAnimation="background-highlight"
+      borderRadius="pill"
+      contentWidth="small"
+      sizing="mediumLargeSizeMediumTitles"
+      background="circleGradient"
+      cardStyle="gradient-mesh"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="radial-glow"
+      headingFontWeight="extrabold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Boxing A80"
+          navItems={[
+            { name: "Over Ons", id: "/" },
+            { name: "Trainingsprogramma", id: "/" },
+            { name: "Schema", id: "/schedule" },
+            { name: "Waarden", id: "/" },
+            { name: "Getuigenissen", id: "/" },
+            { name: "Contact", id: "/" },
+          ]}
+          button={{ text: "Proefles", href: "/" }}
+        />
+      </div>
+
+      <div className="py-20">
+        <div className="w-full max-w-4xl mx-auto px-6">
+          <div className="mb-12">
+            <h1 className="text-5xl md:text-6xl font-bold mb-4 text-foreground">Trainingsschema Boxing A80</h1>
+            <p className="text-lg md:text-xl text-foreground/80">
+              Hier vind je ons volledige trainingsschema voor alle niveaus. Van beginners tot geavanceerde boxers - er is altijd een les die bij jou past.
+            </p>
+          </div>
+
+          <div className="grid gap-8">
+            {schedule.map((daySchedule, dayIndex) => (
+              <div
+                key={dayIndex}
+                className="border border-accent rounded-lg overflow-hidden bg-card shadow-lg hover:shadow-xl transition-shadow"
+              >
+                <div className="bg-primary-cta text-primary-cta-text px-6 py-4">
+                  <h2 className="text-2xl font-bold">{daySchedule.day}</h2>
+                </div>
+                <div className="p-6">
+                  {daySchedule.sessions.map((session, sessionIndex) => (
+                    <div
+                      key={sessionIndex}
+                      className={`pb-6 ${
+                        sessionIndex < daySchedule.sessions.length - 1 ? "border-b border-accent/30" : ""
+                      }`}
+                    >
+                      <div className="flex items-start gap-4">
+                        <div className="flex-shrink-0 mt-1">
+                          <Clock className="w-6 h-6 text-primary-cta" />
+                        </div>
+                        <div className="flex-grow">
+                          <div className="flex items-center gap-2 mb-2">
+                            <h3 className="text-xl font-bold text-foreground">{session.time}</h3>
+                            <span className="inline-block px-3 py-1 bg-primary-cta text-primary-cta-text text-sm font-semibold rounded-full">
+                              {session.type}
+                            </span>
+                          </div>
+                          <p className="text-foreground/70">{session.description}</p>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-12 p-8 bg-background-accent/10 border border-accent rounded-lg">
+            <h3 className="text-2xl font-bold mb-4 text-foreground">Informatie</h3>
+            <ul className="space-y-3 text-foreground/80">
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span>Alle lessen zijn geopend voor leden. Leden kunnen kiezen welke sessies het beste voor hen werken.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span>Geen ervaring nodig voor Beginners-sessies. Onze trainers begeleiden je stap voor stap.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span>Jeugdsessies zijn speciaal ontworpen voor veiligheid en leerzaamheid van jonge boksers.</span>
+              </li>
+              <li className="flex items-start gap-3">
+                <span className="text-primary-cta font-bold mt-1">•</span>
+                <span>Wil je een proefles volgen? Neem contact met ons op of meld je aan voor je eerste sessie.</span>
+              </li>
+            </ul>
+          </div>
+
+          <div className="mt-12 text-center">
+            <Link
+              href="/"
+              className="inline-block px-8 py-4 bg-primary-cta text-primary-cta-text font-bold rounded-lg hover:opacity-90 transition-opacity"
+            >
+              Terug naar Home
+            </Link>
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}