382 lines
12 KiB
TypeScript
382 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
|
|
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
|
|
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
|
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
|
import ProductCardThree from '@/components/sections/product/ProductCardThree';
|
|
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
|
|
import { Award, CheckCircle, Clock, MessageSquare, ShieldCheck, Users, Zap } from "lucide-react";
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-stagger"
|
|
defaultTextAnimation="entrance-slide"
|
|
borderRadius="soft"
|
|
contentWidth="compact"
|
|
sizing="largeSizeMediumTitles"
|
|
background="none"
|
|
cardStyle="solid"
|
|
primaryButtonStyle="double-inset"
|
|
secondaryButtonStyle="radial-glow"
|
|
headingFontWeight="medium"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleFullscreen
|
|
navItems={[
|
|
{
|
|
name: "Home",
|
|
id: "hero",
|
|
},
|
|
{
|
|
name: "Over Ons",
|
|
id: "about",
|
|
},
|
|
{
|
|
name: "Producten",
|
|
id: "products",
|
|
},
|
|
{
|
|
name: "Contact",
|
|
id: "footer",
|
|
},
|
|
]}
|
|
brandName="Aronto"
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroSplitTestimonial
|
|
background={{
|
|
variant: "downward-rays-static",
|
|
}}
|
|
title="Aronto: Technologie met een Menselijk Gezicht"
|
|
description="Geen callcenters, geen bandjes. Wij geloven in direct persoonlijk contact en eerlijke oplossingen voor al uw elektronica-vraagstukken."
|
|
testimonials={[
|
|
{
|
|
name: "Jan de Vries",
|
|
handle: "@jandevries",
|
|
testimonial: "Eindelijk een webshop die écht luistert. Aronto heeft mijn probleem in een middag opgelost.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg?_wi=1",
|
|
},
|
|
{
|
|
name: "Maaike Janssen",
|
|
handle: "@maaikej",
|
|
testimonial: "Zeer persoonlijke service. Je merkt aan alles dat ze gepassioneerd zijn over techniek.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-customer-service-agent_23-2151933132.jpg?_wi=1",
|
|
},
|
|
{
|
|
name: "Pieter Smit",
|
|
handle: "@pietersmit",
|
|
testimonial: "Probleemoplossend vermogen is ongekend. Zeer betrouwbaar en warm contact.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-serious-businessman-looking-camera-meeting-headshot-portrait_1163-3923.jpg?_wi=1",
|
|
},
|
|
{
|
|
name: "Anke Bakker",
|
|
handle: "@ankebakker",
|
|
testimonial: "Eerlijk, direct en zeer vakkundig. Aronto staat voor wat ze beloven.",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-entrepreneur-posing-with-arms-folded_74855-3027.jpg?_wi=1",
|
|
},
|
|
{
|
|
name: "Dirk Veenstra",
|
|
handle: "@dirkv",
|
|
testimonial: "Eindelijk weer menselijk contact bij een tech-aankoop. Top service!",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/old-friends-role-play_1098-13560.jpg?_wi=1",
|
|
},
|
|
]}
|
|
buttons={[
|
|
{
|
|
text: "Bekijk Ons Aanbod",
|
|
href: "#products",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/prism-dispersing-light-concept_23-2148599209.jpg"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg",
|
|
alt: "Jan de Vries",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/smiling-customer-service-agent_23-2151933132.jpg",
|
|
alt: "Maaike Janssen",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/young-serious-businessman-looking-camera-meeting-headshot-portrait_1163-3923.jpg",
|
|
alt: "Pieter Smit",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/positive-confident-entrepreneur-posing-with-arms-folded_74855-3027.jpg",
|
|
alt: "Anke Bakker",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/old-friends-role-play_1098-13560.jpg",
|
|
alt: "Dirk Veenstra",
|
|
},
|
|
]}
|
|
avatarText="Gewaardeerd door onze community"
|
|
marqueeItems={[
|
|
{
|
|
type: "text-icon",
|
|
text: "Persoonlijke Service",
|
|
icon: Users,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Snelle Support",
|
|
icon: Zap,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Eerlijk Advies",
|
|
icon: Award,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Betrouwbare Tech",
|
|
icon: ShieldCheck,
|
|
},
|
|
{
|
|
type: "text-icon",
|
|
text: "Direct Contact",
|
|
icon: MessageSquare,
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
icon: Users,
|
|
title: "Persoonlijk Contact",
|
|
value: "100%",
|
|
},
|
|
{
|
|
id: "m2",
|
|
icon: CheckCircle,
|
|
title: "Problemen Opgelost",
|
|
value: "99.8%",
|
|
},
|
|
{
|
|
id: "m3",
|
|
icon: Clock,
|
|
title: "Reactietijd",
|
|
value: "< 1 uur",
|
|
},
|
|
]}
|
|
title="Onze Kernwaarden"
|
|
description="Wat u mag verwachten bij Aronto."
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<InlineImageSplitTextAbout
|
|
useInvertedBackground={false}
|
|
heading={[
|
|
{
|
|
type: "text",
|
|
content: "Uw Partner in Technologie",
|
|
},
|
|
{
|
|
type: "image",
|
|
src: "http://img.b2bpic.net/free-photo/listen-me-our-strategy-is_329181-15214.jpg",
|
|
alt: "Service",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="philosophy" data-section="philosophy">
|
|
<FeatureCardTwelve
|
|
animationType="slide-up"
|
|
textboxLayout="split"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
id: "f1",
|
|
label: "Warmte",
|
|
title: "Menselijk contact",
|
|
items: [
|
|
"Geen chatbots",
|
|
"Directe support",
|
|
"Eerlijk advies",
|
|
],
|
|
},
|
|
{
|
|
id: "f2",
|
|
label: "Kracht",
|
|
title: "Oplossingsgericht",
|
|
items: [
|
|
"Denken mee",
|
|
"Kijken verder",
|
|
"Resultaatgericht",
|
|
],
|
|
},
|
|
{
|
|
id: "f3",
|
|
label: "Trouw",
|
|
title: "Betrouwbaar",
|
|
items: [
|
|
"Afspraak is afspraak",
|
|
"Transparant",
|
|
"Altijd bereikbaar",
|
|
],
|
|
},
|
|
]}
|
|
title="Onze Filosofie"
|
|
description="Technologie moet uw leven verbeteren, niet ingewikkelder maken."
|
|
/>
|
|
</div>
|
|
|
|
<div id="products" data-section="products">
|
|
<ProductCardThree
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
products={[
|
|
{
|
|
id: "p1",
|
|
name: "Sleek Media System",
|
|
price: "€499",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/view-robotic-vacuum-cleaner-flat-surface_23-2151736808.jpg",
|
|
},
|
|
{
|
|
id: "p2",
|
|
name: "Pro Audio Unit",
|
|
price: "€299",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/game-is-display-rgb-professional-powerful-computer-stream-chat-is-prepared-virtual-tournament-streaming-professsional-microphone-empty-gaming-home-studio-with-neon-lights_482257-12598.jpg",
|
|
},
|
|
{
|
|
id: "p3",
|
|
name: "Smart Hub V2",
|
|
price: "€159",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/black-smartphone-product-shot-dark-environment_187299-46536.jpg",
|
|
},
|
|
{
|
|
id: "p4",
|
|
name: "Power Pro Laptop",
|
|
price: "€1299",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/still-life-device-table_23-2150994360.jpg",
|
|
},
|
|
{
|
|
id: "p5",
|
|
name: "Gold Ed. Accessory",
|
|
price: "€89",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/macro-usb-type-c-port-neon-light-connector-closeup_169016-71437.jpg",
|
|
},
|
|
{
|
|
id: "p6",
|
|
name: "Pro Lens Kit",
|
|
price: "€649",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/metal-texture-with-gears_1048-4501.jpg",
|
|
},
|
|
]}
|
|
title="Geselecteerde Electronics"
|
|
description="Premium kwaliteit met garantie op persoonlijk advies."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "t1",
|
|
name: "Jan de Vries",
|
|
role: "Klant",
|
|
testimonial: "Geweldige ervaring!",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/people-having-dinner-luxurious-restaurants_23-2151081913.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "t2",
|
|
name: "Maaike Janssen",
|
|
role: "Klant",
|
|
testimonial: "Zeer persoonlijk.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiling-customer-service-agent_23-2151933132.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "t3",
|
|
name: "Pieter Smit",
|
|
role: "Klant",
|
|
testimonial: "Echt opgelost.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/young-serious-businessman-looking-camera-meeting-headshot-portrait_1163-3923.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "t4",
|
|
name: "Anke Bakker",
|
|
role: "Klant",
|
|
testimonial: "Eerlijk advies.",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/positive-confident-entrepreneur-posing-with-arms-folded_74855-3027.jpg?_wi=2",
|
|
},
|
|
{
|
|
id: "t5",
|
|
name: "Dirk Veenstra",
|
|
role: "Klant",
|
|
testimonial: "Super service!",
|
|
imageSrc: "http://img.b2bpic.net/free-photo/old-friends-role-play_1098-13560.jpg?_wi=2",
|
|
},
|
|
]}
|
|
title="Wat klanten zeggen"
|
|
description="Echte ervaringen van mensen die voor Aronto kozen."
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-photo/golden-sky-cloud-background_1017-3389.jpg"
|
|
logoText="Aronto"
|
|
columns={[
|
|
{
|
|
title: "Over Aronto",
|
|
items: [
|
|
{
|
|
label: "Filosofie",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Over Ons",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
title: "Contact",
|
|
items: [
|
|
{
|
|
label: "Support",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Service",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|