Update src/app/page.tsx
This commit is contained in:
164
src/app/page.tsx
164
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={[
|
||||
{ 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" /></div>
|
||||
<div id="features" data-section="features"><FeatureCardSix textboxLayout="default" title="Waarom kiezen voor VSO Controle?" description="Voorkom dat je te snel tekent." features={[]} /></div>
|
||||
<div id="pricing" data-section="pricing"><PricingCardOne animationType="depth-3d" textboxLayout="default" plans={[]} title="VSO Controle" description="Kies je pakket." /></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"}]} /></div>
|
||||
<div id="footer" data-section="footer"><FooterBaseCard logoText="VSO Controle" columns={[]} /></div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user