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

src/app/vso-upload/page.tsx

@@ -2,11 +2,10 @@
 
 import { useState } from 'react';
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { ButtonHoverMagnetic } from '@/components/button/ButtonHoverMagnetic/ButtonHoverMagnetic';
+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 = [
@@ -19,9 +18,22 @@ export default function VsoUploadPage() {
     setIsSubmitted(true);
   };
 
+  const themeProps = {
+    defaultButtonVariant: "bounce-effect" as const,
+    defaultTextAnimation: "entrance-slide" as const,
+    borderRadius: "rounded" as const,
+    contentWidth: "medium" as const,
+    sizing: "medium" as const,
+    background: "circleGradient" as const,
+    cardStyle: "glass-elevated" as const,
+    primaryButtonStyle: "gradient" as const,
+    secondaryButtonStyle: "glass" as const,
+    headingFontWeight: "normal" as const,
+  };
+
   if (isSubmitted) {
     return (
-      <ThemeProvider>
+      <ThemeProvider {...themeProps}>
         <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>
@@ -33,7 +45,7 @@ export default function VsoUploadPage() {
   }
 
   return (
-    <ThemeProvider>
+    <ThemeProvider {...themeProps}>
       <div className="max-w-3xl mx-auto py-20 px-6">
         <div className="mb-8">
           <div className="h-2 bg-gray-200 rounded-full">
@@ -45,7 +57,6 @@ export default function VsoUploadPage() {
         <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">