Update src/app/page.tsx

Merge version_3 into main

src/app/page.tsx

@@ -31,7 +31,6 @@ export default function LandingPage() {
             <NavbarStyleFullscreen
               navItems={[
                 { name: "Home", id: "hero" },
-                { name: "Over ons", id: "about" },
                 { name: "Tarief", id: "pricing" },
                 { name: "Contact", id: "contact" },
               ]}
@@ -43,122 +42,18 @@ export default function LandingPage() {
             <HeroOverlayTestimonial
               title="Laat je VSO controleren door arbeidsrecht juristen"
               description="Een VSO kan grote gevolgen hebben voor je WW-rechten, vergoeding en toekomst. Voor €399,99 weet je binnen 24 uur waar je op moet letten en waar mogelijk nog winst te behalen valt. Voorkom dat je te snel tekent."
-              testimonials={[
-                { name: "Sarah", handle: "@sarah", testimonial: "Zeer deskundig advies gekregen over mijn VSO.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kmc9e0" },
-                { name: "Mark", handle: "@mark", testimonial: "Binnen 24 uur een volledig rapport in handen.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ormt4d" },
-                { name: "Emma", handle: "@emma", testimonial: "Duidelijke uitleg en goede onderhandelingstips.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ymgwl9" },
-                { name: "David", handle: "@david", testimonial: "Professioneel, snel en zeer betrouwbaar.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=xx38jl" },
-                { name: "Sophie", handle: "@sophie", testimonial: "Heeft me enorm geholpen met mijn ontslagregeling.", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=67sig2" }
-              ]}
+              testimonials={[]}
               buttons={[{ text: "Start mijn VSO-controle", href: "/vso-upload" }]}
-              imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/professional-lawyer-workspace-with-a-leg-1778265275322-d0f181ab.png?_wi=1"
-              avatars={[
-                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/professional-lawyer-workspace-with-a-leg-1778265275322-d0f181ab.png", alt: "Sarah" },
-                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/team-of-professional-employment-law-juri-1778265285450-d91fc9bf.png", alt: "Mark" },
-                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/person-reviewing-a-contract-with-a-pen-i-1778265293919-177c8824.png", alt: "Emma" },
-                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=kmc9e0", alt: "David" },
-                { src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ormt4d", alt: "Sophie" }
-              ]}
-              avatarText="Vertrouwd door 500+ professionals"
             />
         </div>
-
-        <div id="about" data-section="about">
-          <TextAbout
-            useInvertedBackground={false}
-            title="Juridische expertise bij jouw ontslag"
-          />
-        </div>
-
-        <div id="features" data-section="features">
-          <FeatureCardSix
-            textboxLayout="default"
-            useInvertedBackground={false}
-            features={[
-              { title: "Deskundig team", description: "Juristen met uitgebreide ervaring in het arbeidsrecht staan voor je klaar.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/team-of-professional-employment-law-juri-1778265285450-d91fc9bf.png", imageAlt: "Jurist team" },
-              { title: "Snelheid", description: "Binnen 24 uur ontvang je onze bevindingen, aandachtspunten en winstkansen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/professional-lawyer-workspace-with-a-leg-1778265275322-d0f181ab.png?_wi=2", imageAlt: "Snelheid" },
-              { title: "Transparant", description: "Wij werken met duidelijke afspraken en een vaste prijs, zonder verrassingen.", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/person-reviewing-a-contract-with-a-pen-i-1778265293919-177c8824.png?_wi=1", imageAlt: "Transparantie" }
-            ]}
-            title="Waarom kiezen voor VSO Controle?"
-            description="Voorkom dat je te snel tekent. Laat je VSO eerst controleren door juristen met ervaring in het arbeidsrecht."
-          />
-        </div>
-
-        <div id="pricing" data-section="pricing">
-          <PricingCardOne
-            animationType="depth-3d"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            plans={[
-              {
-                id: "standard",                badge: "Populair",                price: "€399,99",                subtitle: "Volledige VSO controle binnen 24 uur",                features: ["Volledige controle van je VSO", "Bevindingen binnen 24 uur", "Check op WW-risico’s", "Check op einddatum en opzegtermijn", "Check op transitievergoeding", "Check op vakantiedagen", "Check op concurrentiebeding", "Check op finale kwijting", "Praktische uitleg in gewone taal", "Onderhandelingsruimte indicatie"]
-              }
-            ]}
-            title="VSO Controle — €399,99"
-            description="Laat je vaststellingsovereenkomst controleren door juristen met ervaring in het arbeidsrecht. Binnen 24 uur ontvang je onze bevindingen, aandachtspunten en waar mogelijk winst te behalen valt."
-            buttons={[{ text: "Start mijn VSO-controle", href: "/vso-upload" }]}
-          />
-        </div>
-
-        <div id="testimonials" data-section="testimonials">
-          <TestimonialCardSixteen
-            animationType="slide-up"
-            textboxLayout="default"
-            useInvertedBackground={false}
-            testimonials={[
-              { id: "1", name: "Sarah", role: "Marketing", company: "GrowthCo", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ppugbe" },
-              { id: "2", name: "Mark", role: "IT", company: "TechLab", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=hm68zn" },
-              { id: "3", name: "Emma", role: "Sales", company: "BusinessInc", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=62fn3x" },
-              { id: "4", name: "David", role: "Design", company: "ArtStudio", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=76v8od" },
-              { id: "5", name: "Sophie", role: "Finance", company: "MoneyCorp", rating: 5, imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=19q1l9" }
-            ]}
-            kpiItems={[
-              { value: "100%", label: "Transparant" },
-              { value: "24u", label: "Snelle service" },
-              { value: "Expert", label: "Arbeidsrecht" }
-            ]}
-            title="Wat klanten over ons zeggen"
-            description="Betrouwbare juridische ondersteuning op maat."
-          />
-        </div>
-
-        <div id="faq" data-section="faq">
-          <FaqSplitText
-            useInvertedBackground={false}
-            faqs={[
-              { id: "q1", title: "Wat gebeurt er als ik mijn VSO upload?", content: "Onze juristen beoordelen jouw VSO direct en sturen je binnen 24 uur de bevindingen toe." },
-              { id: "q2", title: "Kan ik de factuur declareren?", content: "Vaak is dit mogelijk. Wij bieden een duidelijke factuur die je kunt overleggen aan je werkgever als juridische kosten." },
-              { id: "q3", title: "Is mijn data veilig?", content: "Wij gaan uiterst vertrouwelijk om met jouw persoonlijke documenten." }
-            ]}
-            sideTitle="Veelgestelde vragen"
-            faqsAnimation="slide-up"
-          />
-        </div>
-
-        <div id="contact" data-section="contact">
-          <ContactSplitForm
-            useInvertedBackground={false}
-            title="Direct contact opnemen"
-            description="Heb je vragen of wil je direct geholpen worden?"
-            inputs={[
-              { name: "name", type: "text", placeholder: "Je naam", required: true },
-              { name: "email", type: "email", placeholder: "E-mailadres", required: true }
-            ]}
-            textarea={{ name: "message", placeholder: "Stel hier je vraag", rows: 4, required: true }}
-            imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DRLqekDrDgj7cwgtaTSZZ1Xtzm/person-reviewing-a-contract-with-a-pen-i-1778265293919-177c8824.png?_wi=2"
-          />
-        </div>
-
-        <div id="footer" data-section="footer">
-          <FooterBaseCard
-            logoText="VSO Controle"
-            columns={[
-              { title: "Diensten", items: [{ label: "VSO Controle", href: "#pricing" }] },
-              { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Use", href: "#" }] }
-            ]}
-          />
-        </div>
+        <div id="about" data-section="about"><TextAbout title="Juridische expertise bij jouw ontslag" useInvertedBackground={false} /></div>
+        <div id="features" data-section="features"><FeatureCardSix textboxLayout="default" title="Waarom kiezen voor VSO Controle?" description="Voorkom dat je te snel tekent." features={[]} useInvertedBackground={false} /></div>
+        <div id="pricing" data-section="pricing"><PricingCardOne animationType="depth-3d" textboxLayout="default" plans={[]} title="VSO Controle" description="Kies je pakket." useInvertedBackground={false} /></div>
+        <div id="testimonials" data-section="testimonials"><TestimonialCardSixteen animationType="slide-up" textboxLayout="default" useInvertedBackground={false} title="Klantverhalen" description="Wat anderen zeggen." testimonials={[]} kpiItems={[{value:"100%", label:"Success"},{value:"24u", label:"Snelheid"},{value:"Expert", label:"Kennis"}]} /></div>
+        <div id="faq" data-section="faq"><FaqSplitText useInvertedBackground={false} faqs={[]} sideTitle="Veelgestelde vragen" faqsAnimation="slide-up" /></div>
+        <div id="contact" data-section="contact"><ContactSplitForm title="Direct contact" description="Stel hier je vraag." inputs={[{name:"name", type:"text", placeholder:"Naam"},{name:"email", type:"email", placeholder:"E-mail"}]} useInvertedBackground={false} /></div>
+        <div id="footer" data-section="footer"><FooterBaseCard logoText="VSO Controle" columns={[]} /></div>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0b07ff;
-  --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #0c1325;
-  --accent: #93b7ff;
-  --background-accent: #a8bae8;
+  --background: #fafffb;
+  --card: #f7fffa;
+  --foreground: #001a0a;
+  --primary-cta: #0a7039;
+  --primary-cta-text: #fafffb;
+  --secondary-cta: #15479c;
+  --secondary-cta-text: #f5faff;
+  --accent: #a8d9be;
+  --background-accent: #6bbf8e;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);

src/app/vso-upload/page.tsx

@@ -0,0 +1,84 @@
+"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 [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);
+  };
+
+  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 {...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>
+            <p>Je aanvraag is verzonden. We nemen binnen 24 uur contact met je op.</p>
+          </div>
+        </div>
+      </ThemeProvider>
+    );
+  }
+
+  return (
+    <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">
+            <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">
+            {step === 8 ? (
+              <div className="p-6 border-2 border-dashed border-accent rounded-lg text-center">
+                <p className="mb-2 font-medium">Upload je documenten</p>
+                <p className="text-sm text-foreground/70 mb-4">
+                  Je kunt hier de vaststellingsovereenkomst, loonstroken, arbeidsovereenkomst en andere relevante documenten uploaden.
+                </p>
+                <input type="file" multiple className="w-full p-3 border rounded" />
+              </div>
+            ) : (
+              <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>
+  );
+}