161 lines
8.3 KiB
TypeScript
161 lines
8.3 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplit from '@/components/sections/contact/ContactSplit';
|
|
import FaqBase from '@/components/sections/faq/FaqBase';
|
|
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
|
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
|
|
import HeroBillboardCarousel from '@/components/sections/hero/HeroBillboardCarousel';
|
|
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
|
|
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="hover-bubble"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="rounded"
|
|
contentWidth="medium"
|
|
sizing="medium"
|
|
background="circleGradient"
|
|
cardStyle="glass-elevated"
|
|
primaryButtonStyle="gradient"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="normal"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{ name: "Home", id: "#hero" },
|
|
{ name: "Oplossingen", id: "#features" },
|
|
{ name: "Over ons", id: "#about" },
|
|
{ name: "Inspiratie", id: "#faq" },
|
|
]}
|
|
brandName="Fourtop ICT"
|
|
button={{
|
|
text: "Contact", href: "#contact"}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboardCarousel
|
|
background={{
|
|
variant: "gradient-bars"}}
|
|
title="Eindelijk, een strategische IT partner voor bedrijven die willen doorgroeien!"
|
|
description="Managed IT dienstverlening en security? Daarvoor kun je natuurlijk bij ons terecht. Maar wij gaan verder dan dat. Als jouw IT-strateeg denken we met je mee op ondernemersniveau."
|
|
buttons={[
|
|
{
|
|
text: "Ontdek Onze Oplossingen", href: "#features"},
|
|
]}
|
|
mediaItems={[
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-employees-using-tablet_23-2148339334.jpg", imageAlt: "Strategic IT Partnership" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/one-person-only-polygraph-examiner-works-office-with-his-lie-detector-s-equipment_146671-17238.jpg", imageAlt: "Managed IT Services" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/business-people-meeting_53876-20926.jpg", imageAlt: "Security Operations" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/corporate-employee-works-computer-solve-finance-tasks-meeting-objectives-coming-up-with_482257-133471.jpg", imageAlt: "Cloud Solutions" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/team-diverse-coworkers-modern-office-discuss-their-project-together_93675-133516.jpg", imageAlt: "Procesautomatisering" },
|
|
{ imageSrc: "http://img.b2bpic.net/free-photo/businessman-checking-report-tablet_482257-120320.jpg", imageAlt: "IT Strategie" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextSplitAbout
|
|
useInvertedBackground={true}
|
|
title="Jouw Strategische IT Partner"
|
|
description={[
|
|
"Bij Fourtop ICT zijn we meer dan alleen een servicedesk. Wij zijn de strategische partner die jouw bedrijf naar het volgende niveau helpt.", "Onze focus ligt op duurzame groei, security en processen die echt voor je werken. Samen bouwen we aan een IT-landschap dat klaar is voor de toekomst."]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardTwentyEight
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{ id: "f1", title: "Cloudoplossingen", subtitle: "Altijd en overal veilig werken.", category: "IT-infrastructuur", value: "100%" },
|
|
{ id: "f2", title: "Managed Services", subtitle: "Proactief beheer en support.", category: "Support", value: "24/7" },
|
|
{ id: "f3", title: "Cybersecurity", subtitle: "Optimale bescherming van jouw data.", category: "Security", value: "Max" },
|
|
]}
|
|
title="Onze Oplossingen"
|
|
description="Van cloud tot security: alles wat je nodig hebt om zorgeloos te groeien."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardSeven
|
|
animationType="depth-3d"
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{ id: "m1", value: "95%", title: "Klanttevredenheid", items: ["Snelle response", "Persoonlijke aanpak"] },
|
|
{ id: "m2", value: "100+", title: "Succesvolle Projecten", items: ["Strategische IT", "Security audits"] },
|
|
{ id: "m3", value: "20+", title: "Jaar Ervaring", items: ["Diepgaande expertise", "Vertrouwde partner"] },
|
|
]}
|
|
title="Impact in Cijfers"
|
|
description="Hoe wij onze partners ondersteunen bij hun dagelijkse doelen."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardSix
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{ id: "t1", name: "Sarah Jansen", handle: "CEO bij Groeibedrijf", testimonial: "Fourtop is voor ons echt een partner op strategisch niveau. Ze denken mee.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-adult-businesswoman-posing_23-2148452676.jpg" },
|
|
{ id: "t2", name: "Mark de Vries", handle: "Manager Operations", testimonial: "Sinds we bij Fourtop zitten, zijn onze IT-processen eindelijk stabiel.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-airport-terminal_107420-85070.jpg" },
|
|
{ id: "t3", name: "Emma Visser", handle: "IT-Verantwoordelijke", testimonial: "Deskundig, meedenkend en altijd bereikbaar. Een verademing.", imageSrc: "http://img.b2bpic.net/free-photo/happy-smiling-businesswoman-looking-camera-with-arms-crossed-portrait_1163-4337.jpg" },
|
|
{ id: "t4", name: "Daan Peters", handle: "Directeur", testimonial: "De beveiliging is top geregeld en we hebben geen omkijken meer naar onze IT.", imageSrc: "http://img.b2bpic.net/free-photo/closeup-content-pretty-businesswoman-glasses_1262-1740.jpg" },
|
|
{ id: "t5", name: "Lotte Bakker", handle: "Finance Director", testimonial: "Een partner die echt begrijpt wat ondernemen betekent.", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-black-blazer-portrait_23-2152009548.jpg" },
|
|
]}
|
|
title="Wat Klanten Over Ons Zeggen"
|
|
description="Ervaringen van ondernemers die met Fourtop ICT groeien."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqBase
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{ id: "q1", title: "Wat is een strategische IT partner?", content: "Het betekent dat we verder kijken dan techniek alleen. We kijken naar jouw bedrijfsdoelen en hoe IT deze kan versnellen." },
|
|
{ id: "q2", title: "Bieden jullie ook cybersecurity?", content: "Zeker, security zit in het DNA van onze dienstverlening. We beschermen je data volgens de hoogste standaarden." },
|
|
{ id: "q3", title: "Zijn jullie 24/7 bereikbaar?", content: "Voor kritieke IT-processen bieden we uitgebreide ondersteuning zodat je bedrijf altijd door kan." },
|
|
]}
|
|
title="Veelgestelde Vragen"
|
|
description="Heb je een vraag over onze aanpak of diensten? Hier vind je de antwoorden."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplit
|
|
useInvertedBackground={false}
|
|
background={{
|
|
variant: "plain"}}
|
|
tag="Contact"
|
|
title="Klaar voor de volgende stap?"
|
|
description="Laten we kennismaken en kijken hoe we jouw IT-strategie naar het volgende niveau kunnen tillen."
|
|
imageSrc="http://img.b2bpic.net/free-photo/digital-marketing-graph-statistics-analysis-finance-market-conce_53876-15838.jpg"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoReveal
|
|
logoText="Fourtop ICT"
|
|
leftLink={{
|
|
text: "servicedesk@fourtop.nl", href: "mailto:servicedesk@fourtop.nl"}}
|
|
rightLink={{
|
|
text: "Privacy Policy", href: "#"}}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
} |