Home
Ervaar
algemeen
Lidmaatschap test
Lesrooster
Webshop
Account
0 Verlanglijst
0 Winkelwagen

Inloggen

E-mailadres

Wachtwoord

import { useEffect, useMemo, useState } from "react"; import { motion } from "framer-motion"; import { Check, Crown, Star, Gem, Clock, Gift, Sparkles, Shield, Mail } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; // === CONFIG === // Ontvanger voor aanmeldingen const RECIPIENT_EMAIL = "jacobwoort@gmail.com"; // Countdown eindigt op 31 oktober 2025 23:59:59 (Europe/Amsterdam) function useCountdown(targetDate: Date) { const [now, setNow] = useState(new Date()); useEffect(() => { const t = setInterval(() => setNow(new Date()), 1000); return () => clearInterval(t); }, []); const diff = Math.max(0, targetDate.getTime() - now.getTime()); const totalSeconds = Math.floor(diff / 1000); const days = Math.floor(totalSeconds / (3600 * 24)); const hours = Math.floor((totalSeconds % (3600 * 24)) / 3600); const minutes = Math.floor((totalSeconds % 3600) / 60); const seconds = totalSeconds % 60; return { days, hours, minutes, seconds, finished: diff <= 0 }; } const packages = [ { id: "basis", name: "Stralend Basis", price: "€23,95 p/m", bullets: ["2 zonmomenten per maand"], icon: Star, highlight: false, }, { id: "goud", name: "Gouden Glans", price: "€41,95 p/m", bullets: ["1 zonmoment per week (4–5 p/mnd)"], icon: Crown, highlight: true, badge: "Meest gekozen", }, { id: "premium", name: "Luxe Brons", price: "€59,95 p/m", bullets: ["2 zonmomenten per week (8 p/mnd)", "Altijd toegang tot premiumbanken"], icon: Gem, highlight: false, }, ]; export default function AanmeldPagina() { const target = useMemo(() => { // 31 oktober 2025 23:59:59 local time return new Date(2025, 9, 31, 23, 59, 59); }, []); const { days, hours, minutes, seconds } = useCountdown(target); const [selected, setSelected] = useState("goud"); const [submitting, setSubmitting] = useState(false); const [submitted, setSubmitted] = useState(false); const onSubmit = (e: React.FormEvent) => { e.preventDefault(); setSubmitting(true); const form = e.currentTarget as HTMLFormElement; const data = new FormData(form); const voornaam = String(data.get("voornaam") || "").trim(); const achternaam = String(data.get("achternaam") || "").trim(); const email = String(data.get("email") || "").trim(); const telefoon = String(data.get("telefoon") || "").trim(); const pakket = packages.find(p => p.id === selected); const subject = encodeURIComponent(`Nieuwe aanmelding – ${pakket?.name || "Pakket"}`); const body = encodeURIComponent( [ `Naam: ${voornaam} ${achternaam}`, `E-mail: ${email}`, `Telefoon: ${telefoon}`, `Gewenst abonnement: ${pakket?.name} (${pakket?.price})`, `Datum: ${new Date().toLocaleString()}`, ].join("\n") ); // Open standaard mailprogramma (breed compatibel) const mailto = `mailto:${RECIPIENT_EMAIL}?subject=${subject}&body=${body}`; window.location.href = mailto; // Simuleer succesvolle submit voor UX setTimeout(() => { setSubmitting(false); setSubmitted(true); form.reset(); }, 800); }; return (

{/* Hero */}

Oktoberactie: eerste 50 klanten krijgen €100 cashback

Kies jouw glans. Meld je aan in 2 minuten.

Premium zonnebanken. Slim geprijsde pakketten. Een warm welkom met extra’s.

{/* Countdown */}

Nog maar

tot einde actie (31 okt 23:59)

{/* Pricing */}

{packages.map((p, idx) => ( {p.badge && (

{p.badge}

)}

{p.name}

{p.price}

{b}

))}

{/* Welcome Gift */}

Welkomstcadeau bij ieder abonnement

5 gratis sessies
5× zonnecrème-zakje t.w.v. €4,95 p.st.

Totaalwaarde bijna €50 – direct genieten van extra’s.

{/* Signup Form */}

Aanmelden {submitted ? (

Bedankt! 🎉

Je aanmelding is verzonden naar {RECIPIENT_EMAIL}. We nemen snel contact op om je abonnement te activeren.

) : (

Voornaam

Achternaam

E-mail

Telefoon

Gewenst abonnement

18+ | Huidtype-intake verplicht | Max. volgens advies & norm 0,3 W/m² | Doorlopend per maand, maand opzegtermijn.

Inzendingen worden gemaild naar {RECIPIENT_EMAIL}.

Actie geldig t/m 31 oktober of tot 50 aanmeldingen (op = op). Cashback uitgekeerd na eerste incasso.

)} {/* Campaign Block */}

Campagneactie – Alleen in oktober

Eerste 50 klanten: €100 cashback bij aanmelding!

Premium banken – luxe & power
Welkomstcadeau: 5 sessies + 5× zakje
Schrijf je in binnen 2 minuten

); } function TimeBox({ label, value }: { label: string; value: number }) { return (

{String(value).padStart(2, "0")}

{label}

); } function TimeSep() { return

; } function TimeBoxInverted({ label, value }: { label: string; value: number }) { return (

{String(value).padStart(2, "0")}

{label}

); } function TimeSepInverted() { return

; }

Powered by JouwWeb