diff --git a/public/20260211174-JeftaBade.jpg b/public/20260211174-JeftaBade.jpg new file mode 100644 index 0000000..80016ff Binary files /dev/null and b/public/20260211174-JeftaBade.jpg differ diff --git a/src/components/FinalCTA.jsx b/src/components/FinalCTA.jsx index 5918a96..957f3cd 100644 --- 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 (
{/* Decoratieve elementen */} @@ -42,7 +45,13 @@ function FinalCTA() { - 8 plaatsen + Maximaal 8 deelnemers per workshop + +
+ + + + Er zijn nog {availableSpots} plekken beschikbaar
@@ -58,12 +67,12 @@ function FinalCTA() {
- {/* CTA Button - naar inschrijfpagina */} + {/* CTA Button - naar inschrijfpagina of wachtlijst */} - Doe mee op 6 maart + {isSoldOut ? 'Zet me op de wachtlijst' : 'Doe mee op 6 maart'} diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 00de26a..305b6f0 100644 --- 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 (
@@ -34,7 +37,10 @@ function Hero() { - {totalSpots}{' '}{availableSpots} plekken - kleine groep, persoonlijke aandacht + {isSoldOut + ? 'Volgeboekt - wachtlijst beschikbaar' + : <>{totalSpots}{' '}{availableSpots} plekken - kleine groep, persoonlijke aandacht + } @@ -108,15 +114,27 @@ function Hero() { {/* CTA Button */} - - Schrijf je in - - - - + {isSoldOut ? ( + + Zet me op de wachtlijst + + + + + ) : ( + + Schrijf je in + + + + + )} {/* Rechter kolom: workshop foto */} diff --git a/src/components/Pricing.jsx b/src/components/Pricing.jsx index 9b087bd..09c64e7 100644 --- 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() { - {/* CTA Button - naar inschrijfpagina */} + {/* CTA Button - naar inschrijfpagina of wachtlijst */} - Doe mee op 6 maart + {isSoldOut ? 'Zet me op de wachtlijst' : 'Doe mee op 6 maart'} {/* Annuleringsbeleid als vertrouwenssignaal */} diff --git a/src/components/StickyBar.jsx b/src/components/StickyBar.jsx index 2d5e18b..9f98bf3 100644 --- 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() { Utrecht + + + + + Nog {availableSpots} plekken beschikbaar + @@ -66,10 +75,10 @@ function StickyBar() { €399 excl. BTW - Inschrijven + {isSoldOut ? 'Wachtlijst' : 'Inschrijven'} @@ -88,14 +97,17 @@ function StickyBar() {
6 maart 2026 | Utrecht
+
+ {isSoldOut ? 'Volgeboekt' : `Nog ${availableSpots} plekken beschikbaar`} +
{/* Right: CTA */} - Inschrijven + {isSoldOut ? 'Wachtlijst' : 'Inschrijven'} diff --git a/src/components/Testimonials.jsx b/src/components/Testimonials.jsx index 6ea59d2..0810f97 100644 --- 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" }, diff --git a/src/config/payment.js b/src/config/payment.js index cd1c1e9..9be4300 100644 --- 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', }; diff --git a/src/config/workshop.js b/src/config/workshop.js new file mode 100644 index 0000000..bf3d369 --- /dev/null +++ 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, +}; diff --git a/src/main.jsx b/src/main.jsx index 32bbc23..f9c06ef 100644 --- 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( @@ -17,6 +19,8 @@ createRoot(document.getElementById('root')).render( } /> } /> } /> + } /> + } /> , diff --git a/src/pages/WaitlistSignup.jsx b/src/pages/WaitlistSignup.jsx new file mode 100644 index 0000000..a839aa0 --- /dev/null +++ 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 ( +
+ {/* Header */} +
+
+ + + + + Terug naar workshop + +
+
+ + {/* Content */} +
+
+ {/* Klokje icoon */} +
+ + + +
+ +

Zet je op de wachtlijst

+

+ 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. +

+

+ Geen verplichtingen, geen betaling. Alleen je naam en e-mailadres. +

+ + {/* Embedded Tally wachtlijst formulier */} +
+