feat: wachtlijst flow + availableSpots naar 3

- Centrale workshop config (workshop.js) met availableSpots, totalSpots, isSoldOut - isSoldOut vlag schakelt alle CTA's site-breed om naar wachtlijst - Nieuwe pagina's: /wachtlijst-inschrijven (Tally kdyPJZ) en /wachtlijst-bedankt - StickyBar, Hero, FinalCTA, Pricing tonen wachtlijsttekst bij isSoldOut: true - Nog 3 plekken beschikbaar zichtbaar in StickyBar en FinalCTA - Testimonial Jefta Bade foto toegevoegd Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-02-23 22:34:24 +01:00 · 2026-02-23 22:34:24 +01:00 · 9ea32169da
commit 9ea32169da
parent 7d3f67bd2f
11 changed files with 264 additions and 25 deletions
--- a/public/20260211174-JeftaBade.jpg
+++ b/public/20260211174-JeftaBade.jpg
--- a/src/components/FinalCTA.jsx
+++ b/src/components/FinalCTA.jsx
@ -7,8 +7,11 @@

 import { Link } from 'react-router-dom';
 import { PAYMENT_CONFIG } from '../config/payment';
+import { WORKSHOP_CONFIG } from '../config/workshop';

 function FinalCTA() {
+  const { availableSpots, isSoldOut } = WORKSHOP_CONFIG;
+
  return (
    <section className="py-16 lg:py-24 bg-coral-500 relative overflow-hidden">
      {/* Decoratieve elementen */}
@ -42,7 +45,13 @@ function FinalCTA() {
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
              </svg>
-              <span>8 plaatsen</span>
+              <span>Maximaal 8 deelnemers per workshop</span>
+            </div>
+            <div className="flex items-center gap-2 font-semibold text-white">
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              <span>Er zijn nog {availableSpots} plekken beschikbaar</span>
            </div>
            <div className="flex items-center gap-2">
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -58,12 +67,12 @@ function FinalCTA() {
            </div>
          </div>

-          {/* CTA Button - naar inschrijfpagina */}
+          {/* CTA Button - naar inschrijfpagina of wachtlijst */}
          <Link
-            to={PAYMENT_CONFIG.SIGNUP_URL}
+            to={isSoldOut ? PAYMENT_CONFIG.WAITLIST_URL : PAYMENT_CONFIG.SIGNUP_URL}
            className="inline-flex items-center gap-2 px-8 py-4 bg-white text-coral-600 font-semibold text-lg rounded-xl shadow-lg hover:bg-coral-50 hover:shadow-xl active:bg-coral-100 transition-all duration-200"
          >
-            Doe mee op 6 maart
+            {isSoldOut ? 'Zet me op de wachtlijst' : 'Doe mee op 6 maart'}
            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@ -5,10 +5,13 @@
 * Gebruikt coral accent kleuren en een decoratieve blob op de achtergrond.
 */

+import { Link } from 'react-router-dom';
+import { WORKSHOP_CONFIG } from '../config/workshop';
+import { PAYMENT_CONFIG } from '../config/payment';
+
 function Hero() {
-  // Aantal beschikbare plaatsen
-  const totalSpots = 8;
-  const availableSpots = 7;
+  // Aantal beschikbare plaatsen - beheer via src/config/workshop.js
+  const { totalSpots, availableSpots, isSoldOut } = WORKSHOP_CONFIG;

  return (
    <section className="section relative overflow-hidden">
@ -34,7 +37,10 @@ function Hero() {
                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-coral-500 opacity-75"></span>
                  <span className="relative inline-flex rounded-full h-2 w-2 bg-coral-500"></span>
                </span>
-                <span className="line-through opacity-60">{totalSpots}</span>{' '}{availableSpots} plekken - kleine groep, persoonlijke aandacht
+                {isSoldOut
+                  ? 'Volgeboekt - wachtlijst beschikbaar'
+                  : <><span className="line-through opacity-60">{totalSpots}</span>{' '}{availableSpots} plekken - kleine groep, persoonlijke aandacht</>
+                }
              </span>
            </div>

@ -108,6 +114,17 @@ function Hero() {
            </div>

            {/* CTA Button */}
+            {isSoldOut ? (
+              <Link
+                to={PAYMENT_CONFIG.WAITLIST_URL}
+                className="btn-primary inline-flex items-center gap-2"
+              >
+                Zet me op de wachtlijst
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
+                </svg>
+              </Link>
+            ) : (
              <a
                href="#inschrijven"
                className="btn-primary inline-flex items-center gap-2"
@ -117,6 +134,7 @@ function Hero() {
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </a>
+            )}
          </div>

          {/* Rechter kolom: workshop foto */}
--- a/src/components/Pricing.jsx
+++ b/src/components/Pricing.jsx
@ -7,8 +7,10 @@

 import { Link } from 'react-router-dom';
 import { PAYMENT_CONFIG } from '../config/payment';
+import { WORKSHOP_CONFIG } from '../config/workshop';

 function Pricing() {
+  const { isSoldOut } = WORKSHOP_CONFIG;
  // Wat is inbegrepen
  const included = [
    "Volledige workshop (9:00 - 14:00)",
@ -116,12 +118,12 @@ function Pricing() {
                </div>
              </div>

-              {/* CTA Button - naar inschrijfpagina */}
+              {/* CTA Button - naar inschrijfpagina of wachtlijst */}
              <Link
-                to={PAYMENT_CONFIG.SIGNUP_URL}
+                to={isSoldOut ? PAYMENT_CONFIG.WAITLIST_URL : PAYMENT_CONFIG.SIGNUP_URL}
                className="btn-primary w-full text-center block"
              >
-                Doe mee op 6 maart
+                {isSoldOut ? 'Zet me op de wachtlijst' : 'Doe mee op 6 maart'}
              </Link>

              {/* Annuleringsbeleid als vertrouwenssignaal */}
--- a/src/components/StickyBar.jsx
+++ b/src/components/StickyBar.jsx
@ -9,8 +9,11 @@
 import { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { PAYMENT_CONFIG } from '../config/payment';
+import { WORKSHOP_CONFIG } from '../config/workshop';

 function StickyBar() {
+  const { availableSpots, isSoldOut } = WORKSHOP_CONFIG;
+
  // State om te bepalen of de bar zichtbaar moet zijn
  const [isVisible, setIsVisible] = useState(false);

@ -57,6 +60,12 @@ function StickyBar() {
                  </svg>
                  Utrecht
                </span>
+                <span className="flex items-center gap-1 text-coral-600 font-medium">
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
+                  </svg>
+                  Nog {availableSpots} plekken beschikbaar
+                </span>
              </div>
            </div>

@ -66,10 +75,10 @@ function StickyBar() {
                €399 <span className="text-sm font-normal text-warm-500">excl. BTW</span>
              </span>
              <Link
-                to={PAYMENT_CONFIG.SIGNUP_URL}
+                to={isSoldOut ? PAYMENT_CONFIG.WAITLIST_URL : PAYMENT_CONFIG.SIGNUP_URL}
                className="px-6 py-2 bg-coral-500 text-white font-semibold rounded-lg shadow-sm hover:bg-coral-600 transition-colors"
              >
-                Inschrijven
+                {isSoldOut ? 'Wachtlijst' : 'Inschrijven'}
              </Link>
            </div>
          </div>
@ -88,14 +97,17 @@ function StickyBar() {
              <div className="text-xs text-warm-500">
                6 maart 2026 | Utrecht
              </div>
+              <div className="text-xs text-coral-600 font-medium">
+                {isSoldOut ? 'Volgeboekt' : `Nog ${availableSpots} plekken beschikbaar`}
+              </div>
            </div>

            {/* Right: CTA */}
            <Link
-              to={PAYMENT_CONFIG.SIGNUP_URL}
+              to={isSoldOut ? PAYMENT_CONFIG.WAITLIST_URL : PAYMENT_CONFIG.SIGNUP_URL}
              className="flex-shrink-0 px-6 py-3 bg-coral-500 text-white font-semibold rounded-lg shadow-sm hover:bg-coral-600 transition-colors"
            >
-              Inschrijven
+              {isSoldOut ? 'Wachtlijst' : 'Inschrijven'}
            </Link>
          </div>
        </div>
--- a/src/components/Testimonials.jsx
+++ b/src/components/Testimonials.jsx
@ -27,7 +27,7 @@ function Testimonials() {
      quote: "Onbeschrijfelijk inspirerend om dit mét een groep te doen. Dit zetje had ik net nodig.",
      name: "Jefta Bade",
      role: "Strategic Visualizer",
-      avatar: "https://media.licdn.com/dms/image/v2/D4E03AQGgpwYSPHAihA/profile-displayphoto-crop_800_800/B4EZwo83s5GcAI-/0/1770213573365?e=1772064000&v=beta&t=i9hNyvY6KEfEJaGLOKJGsUgrfHMQBLtxn9L1pvhJh1s",
+      avatar: `${import.meta.env.BASE_URL}20260211174-JeftaBade.jpg`,
      url: "https://drawn.today/",
      initials: "JB"
    },
--- a/src/config/payment.js
+++ b/src/config/payment.js
@ -4,8 +4,13 @@
 * CTA-knoppen linken naar de inschrijfpagina met embedded Tally formulier.
 * Na het formulier redirect Tally naar de Mollie betaalpagina.
 * Test/live Mollie link wordt ingesteld in Tally's redirect URL.
+ *
+ * WAITLIST_TALLY_ID: Tally formulier voor wachtlijst (alleen naam + e-mail, geen betaling).
+ * Tally URL: https://tally.so/r/kdyPJZ
 */

 export const PAYMENT_CONFIG = {
  SIGNUP_URL: '/inschrijven',
+  WAITLIST_URL: '/wachtlijst-inschrijven',
+  WAITLIST_TALLY_ID: 'kdyPJZ',
 };
--- a/src/config/workshop.js
+++ b/src/config/workshop.js
@ -0,0 +1,13 @@
+/**
+ * workshop.js - Workshop details configuratie
+ *
+ * Centrale plek voor beschikbaarheid en andere workshopdetails.
+ * Pas availableSpots hier aan als er een plek verkocht is.
+ * Zet isSoldOut op true als alle plekken weg zijn - activeert wachtlijstmodus op de hele site.
+ */
+
+export const WORKSHOP_CONFIG = {
+  totalSpots: 8,
+  availableSpots: 3,
+  isSoldOut: false,
+};
--- a/src/main.jsx
+++ b/src/main.jsx
@ -7,6 +7,8 @@ import Privacy from './pages/Privacy.jsx'
 import Terms from './pages/Terms.jsx'
 import ThankYou from './pages/ThankYou.jsx'
 import Signup from './pages/Signup.jsx'
+import WaitlistSignup from './pages/WaitlistSignup.jsx'
+import WaitlistThankYou from './pages/WaitlistThankYou.jsx'

 createRoot(document.getElementById('root')).render(
  <StrictMode>
@ -17,6 +19,8 @@ createRoot(document.getElementById('root')).render(
        <Route path="/voorwaarden" element={<Terms />} />
        <Route path="/inschrijven" element={<Signup />} />
        <Route path="/bedankt" element={<ThankYou />} />
+        <Route path="/wachtlijst-inschrijven" element={<WaitlistSignup />} />
+        <Route path="/wachtlijst-bedankt" element={<WaitlistThankYou />} />
      </Routes>
    </BrowserRouter>
  </StrictMode>,
--- a/src/pages/WaitlistSignup.jsx
+++ b/src/pages/WaitlistSignup.jsx
@ -0,0 +1,94 @@
+/**
+ * WaitlistSignup.jsx - Wachtlijst inschrijfpagina met embedded Tally formulier
+ *
+ * Bezoekers komen hier als de workshop volgeboekt is.
+ * Tally formulier verzamelt naam + e-mail, geen betaling.
+ * Tally ID: kdyPJZ (https://tally.so/r/kdyPJZ)
+ */
+
+import { useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { PAYMENT_CONFIG } from '../config/payment';
+
+function WaitlistSignup() {
+  // Laad het Tally embed script zodra de pagina mount
+  useEffect(() => {
+    const scriptUrl = 'https://tally.so/widgets/embed.js';
+
+    if (typeof window.Tally !== 'undefined') {
+      window.Tally.loadEmbeds();
+      return;
+    }
+
+    if (!document.querySelector(`script[src="${scriptUrl}"]`)) {
+      const script = document.createElement('script');
+      script.src = scriptUrl;
+      script.onload = () => {
+        if (typeof window.Tally !== 'undefined') {
+          window.Tally.loadEmbeds();
+        }
+      };
+      document.body.appendChild(script);
+    }
+  }, []);
+
+  return (
+    <div className="min-h-screen bg-warm-50">
+      {/* Header */}
+      <header className="bg-white border-b border-warm-200 py-6">
+        <div className="container-page">
+          <Link
+            to="/"
+            className="text-coral-500 hover:text-coral-600 transition-colors inline-flex items-center gap-2"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Terug naar workshop
+          </Link>
+        </div>
+      </header>
+
+      {/* Content */}
+      <main className="container-page py-12">
+        <div className="max-w-2xl mx-auto">
+          {/* Klokje icoon */}
+          <div className="mx-auto w-20 h-20 bg-coral-100 rounded-full flex items-center justify-center mb-8">
+            <svg className="w-10 h-10 text-coral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+          </div>
+
+          <h1 className="heading-hero mb-4 text-center">Zet je op de wachtlijst</h1>
+          <p className="text-center text-warm-600 mb-4">
+            De workshop van 6 maart is volgeboekt. Zet je op de wachtlijst en we laten je weten als er een plek vrijkomt of als er een nieuwe editie gepland wordt.
+          </p>
+          <p className="text-center text-warm-500 text-sm mb-10">
+            Geen verplichtingen, geen betaling. Alleen je naam en e-mailadres.
+          </p>
+
+          {/* Embedded Tally wachtlijst formulier */}
+          <div className="card">
+            <iframe
+              data-tally-src={`https://tally.so/embed/${PAYMENT_CONFIG.WAITLIST_TALLY_ID}?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1`}
+              loading="lazy"
+              width="100%"
+              height="300"
+              frameBorder="0"
+              title="Wachtlijst Claude Code Workshop"
+            />
+          </div>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-warm-900 text-warm-400 py-6">
+        <div className="container-page text-center text-sm">
+          &copy; {new Date().getFullYear()} Frank Meeuwsen. Alle rechten voorbehouden.
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default WaitlistSignup;
--- a/src/pages/WaitlistThankYou.jsx
+++ b/src/pages/WaitlistThankYou.jsx
@ -0,0 +1,82 @@
+/**
+ * WaitlistThankYou.jsx - Bevestigingspagina na wachtlijst inschrijving
+ *
+ * Bezoekers komen hier na het invullen van het wachtlijst formulier.
+ * Geen betaling - alleen bevestiging + uitleg wat er nu gebeurt.
+ */
+
+import { Link } from 'react-router-dom';
+
+function WaitlistThankYou() {
+  return (
+    <div className="min-h-screen bg-warm-50">
+      {/* Header */}
+      <header className="bg-white border-b border-warm-200 py-6">
+        <div className="container-page">
+          <Link
+            to="/"
+            className="text-coral-500 hover:text-coral-600 transition-colors inline-flex items-center gap-2"
+          >
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
+            </svg>
+            Terug naar homepage
+          </Link>
+        </div>
+      </header>
+
+      {/* Content */}
+      <main className="container-page py-12">
+        <div className="max-w-2xl mx-auto text-center">
+          {/* Klokje icoon */}
+          <div className="mx-auto w-20 h-20 bg-teal-100 rounded-full flex items-center justify-center mb-8">
+            <svg className="w-10 h-10 text-teal-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+            </svg>
+          </div>
+
+          <h1 className="heading-hero mb-4">Je staat op de wachtlijst!</h1>
+          <p className="text-xl text-warm-600 mb-10">
+            Goed dat je je hebt aangemeld. We houden je op de hoogte.
+          </p>
+
+          {/* Wat er nu gebeurt */}
+          <div className="card text-left mb-10">
+            <h2 className="heading-3 mb-4">Wat gebeurt er nu?</h2>
+            <ol className="space-y-4 text-warm-600">
+              <li className="flex gap-3">
+                <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">1</span>
+                <span>Als er een plek vrijkomt door uitval, nemen we als eerste contact met je op.</span>
+              </li>
+              <li className="flex gap-3">
+                <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">2</span>
+                <span>Als de wachtlijst groot genoeg is, plannen we een volgende editie. Je krijgt dan als eerste de uitnodiging.</span>
+              </li>
+              <li className="flex gap-3">
+                <span className="flex-shrink-0 w-7 h-7 bg-coral-100 text-coral-600 rounded-full flex items-center justify-center font-semibold text-sm">3</span>
+                <span>Je ontvangt nooit spam. Alleen een bericht als er echt nieuws is.</span>
+              </li>
+            </ol>
+          </div>
+
+          {/* Contact */}
+          <p className="text-warm-500">
+            Vragen? Mail naar{' '}
+            <a href="mailto:frank@frankmeeuwsen.com" className="text-coral-500 hover:text-coral-600">
+              frank@frankmeeuwsen.com
+            </a>
+          </p>
+        </div>
+      </main>
+
+      {/* Footer */}
+      <footer className="bg-warm-900 text-warm-400 py-6">
+        <div className="container-page text-center text-sm">
+          &copy; {new Date().getFullYear()} Frank Meeuwsen. Alle rechten voorbehouden.
+        </div>
+      </footer>
+    </div>
+  );
+}
+
+export default WaitlistThankYou;