Add src/app/vso-upload/page.tsx

src/app/vso-upload/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useState } from 'react';
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import { ButtonHoverMagnetic } from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';
+
+export default function VsoUploadPage() {
+  const [step, setStep] = useState(1);
+  const [formData, setFormData] = useState({});
+  const [isSubmitted, setIsSubmitted] = useState(false);
+
+  const steps = [
+    "Persoonlijke gegevens", "Gegevens werkgever", "Salaris en arbeidsvoorwaarden", 
+    "Reden van beëindiging", "Ziekte en arbeidsongeschiktheid", "De voorgestelde VSO", 
+    "Wat wil jij bereiken", "Upload documenten", "Controle en akkoord"
+  ];
+
+  const handleSubmit = () => {
+    setIsSubmitted(true);
+  };
+
+  if (isSubmitted) {
+    return (
+      <ThemeProvider>
+        <div className="min-h-screen flex items-center justify-center p-8">
+          <div className="max-w-md text-center">
+            <h1 className="text-3xl font-bold mb-4">Bedankt!</h1>
+            <p>Je aanvraag is verzonden. We nemen binnen 24 uur contact met je op.</p>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <ThemeProvider>
+      <div className="max-w-3xl mx-auto py-20 px-6">
+        <div className="mb-8">
+          <div className="h-2 bg-gray-200 rounded-full">
+            <div className="h-2 bg-primary-cta rounded-full" style={{ width: `${(step / steps.length) * 100}%` }}></div>
+          </div>
+          <p className="mt-2 text-sm">Stap {step} van {steps.length}: {steps[step - 1]}</p>
+        </div>
+
+        <div className="bg-card p-8 rounded-lg">
+          <h2 className="text-2xl mb-6">{steps[step - 1]}</h2>
+          <div className="space-y-4">
+            {/* Form fields would be dynamically rendered based on 'step' */}
+            <input className="w-full p-3 border rounded" placeholder="Vul hier je gegevens in..." />
+          </div>
+          <div className="mt-8 flex gap-4">
+            {step > 1 && <ButtonHoverMagnetic text="Vorige" onClick={() => setStep(step - 1)} />}
+            {step < steps.length ? (
+              <ButtonHoverMagnetic text="Volgende" onClick={() => setStep(step + 1)} />
+            ) : (
+              <ButtonHoverMagnetic text="Versturen" onClick={handleSubmit} />
+            )}
+          </div>
+        </div>
+      </div>
+    </ThemeProvider>
+  );
+}