Merge version_2 into main

Merge version_2 into main

src/app/page.tsx

@@ -11,8 +11,15 @@ import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/Nav
 import PricingCardOne from '@/components/sections/pricing/PricingCardOne';
 import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
 import TextAbout from '@/components/sections/about/TextAbout';
+import { useState } from 'react';
 
 export default function LandingPage() {
+  const [requests] = useState([
+    { id: 'REQ-001', name: 'John Doe', status: 'Pending', date: '2025-05-15' },
+    { id: 'REQ-002', name: 'Jane Smith', status: 'In Review', date: '2025-05-16' },
+    { id: 'REQ-003', name: 'Bob Johnson', status: 'Completed', date: '2025-05-17' },
+  ]);
+
   return (
     <ThemeProvider
         defaultButtonVariant="bounce-effect"
@@ -31,7 +38,7 @@ export default function LandingPage() {
             <NavbarStyleFullscreen
               navItems={[
                 { name: "Home", id: "hero" },
-                { name: "Over ons", id: "about" },
+                { name: "Dashboard", id: "admin" },
                 { name: "Tarief", id: "pricing" },
                 { name: "Contact", id: "contact" },
               ]}
@@ -39,126 +46,55 @@ export default function LandingPage() {
             />
         </div>
 
+        <div id="admin" data-section="admin" className="py-20 px-8">
+            <div className="max-w-6xl mx-auto">
+                <h2 className="text-3xl font-bold mb-8">VSO Intake Requests</h2>
+                <div className="overflow-x-auto shadow-md rounded-lg">
+                    <table className="w-full text-left">
+                        <thead className="bg-accent text-foreground">
+                            <tr>
+                                <th className="p-4">Request ID</th>
+                                <th className="p-4">Name</th>
+                                <th className="p-4">Date</th>
+                                <th className="p-4">Status</th>
+                                <th className="p-4">Actions</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {requests.map((req) => (
+                                <tr key={req.id} className="border-b border-accent">
+                                    <td className="p-4">{req.id}</td>
+                                    <td className="p-4">{req.name}</td>
+                                    <td className="p-4">{req.date}</td>
+                                    <td className="p-4 font-semibold text-primary-cta">{req.status}</td>
+                                    <td className="p-4 flex gap-2">
+                                        <button className="px-3 py-1 bg-primary-cta text-white rounded text-sm">View</button>
+                                        <button className="px-3 py-1 bg-background-accent text-white rounded text-sm">Edit</button>
+                                    </td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
         <div id="hero" data-section="hero">
             <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={[
+              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" }
-              ]}
               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 title="Juridische expertise bij jouw ontslag" /></div>
-        <div id="about" data-section="about">
+        <div id="features" data-section="features"><FeatureCardSix textboxLayout="default" title="Waarom kiezen voor VSO Controle?" description="Voorkom dat je te snel tekent." features={[]} /></div>
-          <TextAbout
+        <div id="pricing" data-section="pricing"><PricingCardOne animationType="depth-3d" textboxLayout="default" plans={[]} title="VSO Controle" description="Kies je pakket." /></div>
-            useInvertedBackground={false}
+        <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>
-            title="Juridische expertise bij jouw ontslag"
+        <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"}]} /></div>
-        </div>
+        <div id="footer" data-section="footer"><FooterBaseCard logoText="VSO Controle" columns={[]} /></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>
       </ReactLenis>
     </ThemeProvider>
   );
-}
+}

src/app/styles/variables.css

@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f7f6f7;
+  --background: #fafffb;
-  --card: #ffffff;
+  --card: #f7fffa;
-  --foreground: #0c1325;
+  --foreground: #001a0a;
-  --primary-cta: #0b07ff;
+  --primary-cta: #0a7039;
-  --primary-cta-text: #f7f6f7;
+  --primary-cta-text: #fafffb;
-  --secondary-cta: #ffffff;
+  --secondary-cta: #15479c;
-  --secondary-cta-text: #0c1325;
+  --secondary-cta-text: #f5faff;
-  --accent: #93b7ff;
+  --accent: #a8d9be;
-  --background-accent: #a8bae8;
+  --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,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>
+  );
+}