<!doctype html>
<html class="scroll-smooth">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welkom » Bluey B.V.</title>
<link rel="canonical" href="https://bluey.dev"/>
<meta property="og:image" content="https://bluey.dev/build/assets/og-image-BccTCeQN.png"/>
<meta name="theme-color" content="#1883ff">
<meta name="msapplication-navbutton-color" content="#1883ff">
<meta name="apple-mobile-web-app-status-bar-style" content="#1883ff">
<link rel="icon" type="image/png" href="https://bluey.dev/build/assets/favicon-Ci73973f.png"/>
<link rel="apple-touch-icon" href="https://bluey.dev/build/assets/apple-touch-icon-192x192-tFGOvrO5.png">
<style>[x-cloak] {display: none !important;}</style>
<link rel="preload" as="style" href="https://bluey.dev/build/assets/app-CP2dHaue.css" /><link rel="modulepreload" href="https://bluey.dev/build/assets/app-C3Vx4vY5.js" /><link rel="stylesheet" href="https://bluey.dev/build/assets/app-CP2dHaue.css" /><script type="module" src="https://bluey.dev/build/assets/app-C3Vx4vY5.js"></script>
<script>
window.addEventListener('load', () => window.setTimeout(() => {
const makeLink = (asset) => {
const link = document.createElement('link')
Object.keys(asset).forEach((attribute) => {
link.setAttribute(attribute, asset[attribute])
})
return link
}
const loadNext = (assets, count) => window.setTimeout(() => {
if (count > assets.length) {
count = assets.length
if (count === 0) {
return
}
}
const fragment = new DocumentFragment
while (count > 0) {
const link = makeLink(assets.shift())
fragment.append(link)
count--
if (assets.length) {
link.onload = () => loadNext(assets, 1)
link.onerror = () => loadNext(assets, 1)
}
}
document.head.append(fragment)
})
loadNext([], 3)
}))
</script>
<link rel="stylesheet" href="https://use.typekit.net/rlf3wfy.css">
</head>
<body class="text-bluey-normal font-myriad">
<div class="relative">
<div
class="z-0 absolute object-cover object-center opacity-80 mix-blend-color inset-0 bottom-0"
style="background-image: url('https://bluey.dev/build/assets/pexels-buchkiste-3204235-4834961-small-C5RCyeOL.jpg')"
></div>
<div class="z-0 absolute inset-0 bg-gradient-to-t from-white to-30%"></div>
<div
class="relative z-10"
x-data="{sticky:false}"
x-init="() => {
window.addEventListener('scroll', () => {
sticky = window.scrollY > 50;
});
}"
>
<div class="h-6 md:h-10 lg:h-16"></div>
<header
:class="sticky ? 'bg-white shadow-md' : 'bg-transparent'"
class="sticky top-0 w-full transition-colors duration-300"
style="z-index: 2"
>
<div class="relative mx-auto max-w-7xl pl-2 pr-0 md:pl-8 md:pr-6 xl:px-0">
<div
class="relative flex items center justify-between mx-4 group/row isolate pt-[calc(theme(spacing.2)+1px)] last:pb-[calc(theme(spacing.2)+1px)]">
<div
aria-hidden="true"
class="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2 custom-hover"
:class="sticky ? 'bg-white/100' : ''"
>
<div class="absolute inset-x-0 top-0 border-t border-black/5"></div>
<div class="absolute inset-x-0 top-2 border-t border-black/5"></div>
<div
class="absolute inset-x-0 bottom-0 hidden border-b border-black/5 group-last/row:block"></div>
<div
class="absolute inset-x-0 bottom-2 hidden border-b border-black/5 group-last/row:block"></div>
</div>
<div class="relative flex gap-6">
<div class="py-3 group/item relative">
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-first/item:block absolute size-[15px] fill-black/10 -top-2 -left-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="absolute size-[15px] fill-black/10 -top-2 -right-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-last/row:group-first/item:block absolute size-[15px] fill-black/10 -bottom-2 -left-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-last/row:block absolute size-[15px] fill-black/10 -bottom-2 -right-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<a href="https://bluey.dev">
<img
src="https://bluey.dev/build/assets/bluey-logo-dark-animated-CG8SFsFV.svg"
alt="Logo Bluey B.V."
class="h-10 w-auto overflow-visible animate-appear"
width="1242"
height="631"
>
</a>
</div>
<div class="relative hidden items-center py-3 lg:flex">
<a
class="relative inline-flex gap-1 items-center justify-center px-4 py-[calc(theme(spacing.2)-1px)] rounded-full border border-transparent bg-white/15 shadow-md ring-1 ring-[#1883ff]/15 after:absolute after:inset-0 after:rounded-full after:shadow-[inset_0_0_2px_1px_#ffffff4d] whitespace-nowrap text-base font-medium text-gray-950 hover:bg-white custom-hover hover:drop-shadow-lg"
href="https://bluey.dev/contact"
>
Plan een <b>kennismaking</b>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
class="size-4"
>
<path fill-rule="evenodd"
d="M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06l-3.25 3.25a.75.75 0 0 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<nav class="relative flex">
<div class="relative flex group/item">
<svg viewBox="0 0 15 15" aria-hidden="true"
class="hidden group-first/item:block absolute size-[15px] fill-black/10 -top-2 -left-2">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true"
class="absolute size-[15px] fill-black/10 -top-2 -right-2">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true"
class="hidden group-last/row:group-first/item:block absolute size-[15px] fill-black/10 -bottom-2 -left-2">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true"
class="hidden group-last/row:block absolute size-[15px] fill-black/10 -bottom-2 -right-2">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<a
class="flex items-center px-4 py-3 text-base font-medium text-bluey-dark hover:bg-black/[2.5%] custom-hover"
href="https://bluey.dev/over-ons"
>
Over ons
</a>
</div>
<div class="relative flex group/item">
<svg viewBox="0 0 15 15" aria-hidden="true"
class="hidden group-first/item:block absolute size-[15px] fill-black/10 -top-2 -left-2">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true"
class="absolute size-[15px] fill-black/10 -top-2 -right-2">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true"
class="hidden group-last/row:group-first/item:block absolute size-[15px] fill-black/10 -bottom-2 -left-2">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true"
class="hidden group-last/row:block absolute size-[15px] fill-black/10 -bottom-2 -right-2">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<a class="flex items-center px-4 py-3 text-base font-medium text-bluey-dark hover:bg-black/[2.5%] custom-hover"
href="https://bluey.dev/contact">
Contact
</a>
</div>
</nav>
</div>
</div>
</header>
<div class="flex max-w-7xl mx-auto px-4 md:px-10 xl:pl-2 xl:pr-0">
<div class="pb-24 pt-16 sm:pb-32 sm:pt-24 md:pb-48 md:pt-32">
<h1
class="font-myriad text-balance text-6xl/[0.9] font-medium tracking-tight sm:text-6xl/[0.8] md:text-7xl/[0.8] lg:text-8xl/[0.8] xl:text-9xl/[0.8] text-bluey-dark">
<p
x-data="blurText({
text: 'From chaos to clarity, from ideas to impact',
delay: 200,
animateBy: 'words',
direction: 'top',
fontClasses: ["","","","font-kalam","","","","font-kalam font-bold"]
})"
x-ref="container"
id="blur-text-68c0004ca32c1"
class="block leading-[0.9] sm:leading-[0.8]"
>
</p>
</h1>
<p class="mt-8 max-w-xl text-xl/7 font-medium sm:text-2xl/8 opacity-0 animate-fade-up" style="--fade-delay: 2s">
Technologie die niet alleen werkt, maar vóór je werkt. Maandelijks gebruiken <span
x-data="{
value: 0,
target: 100,
duration: 2500,
delay: 2100,
direction: 'up',
separator: '.',
startWhen: true,
started: false,
formatNumber(number) {
return new Intl.NumberFormat('en-US', {
useGrouping: !!this.separator,
minimumFractionDigits: 0,
maximumFractionDigits: 0
}).format(number).replace(/,/g, this.separator)
},
init() {
this.$el.textContent = this.formatNumber(this.value);
if (!this.startWhen) return;
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !this.started) {
this.started = true;
setTimeout(() => this.animate(), this.delay);
}
});
observer.observe(this.$el);
},
animate() {
const start = performance.now();
const initialValue = this.direction === 'down' ? this.target : this.value;
const targetValue = this.direction === 'down' ? this.value : this.target;
const diff = targetValue - initialValue;
const step = (currentTime) => {
const elapsed = currentTime - start;
const rawProgress = Math.min(elapsed / this.duration, 1);
// Custom easing function that really slows down at the end
// Using a much stronger power curve (6) and adding a weighted average with a linear progression
const easeOut = 1 - Math.pow(1 - rawProgress, 6);
const linear = rawProgress;
const easing = 0.8 * easeOut + 0.2 * linear; // Weighted average favoring the ease out
this.value = Math.round(initialValue + (diff * easing));
this.$el.textContent = this.formatNumber(this.value);
if (rawProgress < 1) {
requestAnimationFrame(step);
}
};
requestAnimationFrame(step);
}
}"
class=""
></span>.000+ eindgebruikers
onze software.
</p>
<div class="mt-12 flex flex-col gap-x-6 gap-y-4 sm:flex-row opacity-0 animate-fade-up"
style="--fade-delay: 2.2s">
<a class="relative z-1 inline-flex items-center justify-center px-4 py-[calc(theme(spacing.2)-1px)] rounded-full border border-transparent bg-gray-950 shadow-md whitespace-nowrap text-base font-medium text-white custom-hover hover:drop-shadow-lg hover:bg-gray-950/70"
href="https://bluey.dev/contact" role="button">
Neem contact op
</a>
<a class="relative z-1 inline-flex items-center justify-center px-4 py-[calc(theme(spacing.2)-1px)] rounded-full border border-transparent bg-white/15 shadow-md ring-1 ring-[#1883ff]/15 whitespace-nowrap text-base font-medium text-gray-950 hover:bg-white custom-hover hover:drop-shadow-lg"
href="#projects" role="button">
Onze projecten
</a>
</div>
</div>
</div>
</div>
</div>
<main>
<div class="mx-auto max-w-2xl lg:max-w-7xl px-4 md:px-10 xl:pl-2 xl:pr-0">
<h2 class="sr-only font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Clients
</h2>
<div
class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-7 gap-6 sm:gap-8 items-center justify-items-center mx-auto">
<img loading="lazy" src="https://bluey.dev/build/assets/afzetbak-CxC5uH2X.svg"
class="h-auto w-full max-h-9 sm:max-h-8 lg:max-h-12 max-w-24 sm:max-w-28 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300"
alt="Logo Afzetbak">
<img loading="lazy" src="https://bluey.dev/build/assets/instantly-DFATIy3B.png"
class="h-auto w-full max-h-9 sm:max-h-8 lg:max-h-12 max-w-24 sm:max-w-28 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300"
alt="Logo Instantly">
<img loading="lazy" src="https://bluey.dev/build/assets/cloudcarrier-CjadMq-7.png"
class="h-auto w-full max-h-9 sm:max-h-8 lg:max-h-12 max-w-24 sm:max-w-28 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300"
alt="Logo Cloudcarrier">
<img loading="lazy" src="https://bluey.dev/build/assets/veluwade-C14uUig-.svg"
class="h-auto w-full max-h-9 sm:max-h-8 lg:max-h-12 max-w-24 sm:max-w-28 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300"
alt="Logo Veluwade">
<img loading="lazy" src="https://bluey.dev/build/assets/viatygo-hRAk2v4H.svg"
class="h-auto w-full max-h-9 sm:max-h-8 lg:max-h-12 max-w-24 sm:max-w-28 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300"
alt="Logo viaTYGO">
<img loading="lazy" src="https://bluey.dev/build/assets/ppsk-kiosk-DBtZTypJ.png"
class="h-auto w-full max-h-9 sm:max-h-8 lg:max-h-12 max-w-24 sm:max-w-28 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300"
alt="Logo PPSK-Kiosk">
<img loading="lazy" src="https://bluey.dev/build/assets/vakslopers-inverse-XKz7QC6R.svg"
class="h-auto w-full max-h-9 sm:max-h-8 lg:max-h-12 max-w-24 sm:max-w-28 grayscale hover:opacity-100 hover:grayscale-0 transition-all duration-300"
alt="Logo Vakslopers">
</div>
</div>
<div class="bg-gradient-to-b from-white from-50% to-gray-100 py-16 md:py-32">
<div class="overflow-hidden">
<div class="pb-16 md:pb-24 px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl grid gap-8 grid-cols-1 md:grid-cols-5 items-center">
<div class="col-span-1 md:col-span-2">
<div
class="relative aspect-[4/3] md:aspect-[var(--width)/var(--height)] [--radius:theme(borderRadius.xl)]">
<div
class="absolute -inset-[var(--padding)] rounded-[calc(var(--radius)+var(--padding))] shadow-sm ring-1 ring-black/5 [--padding:theme(spacing.2)]">
</div>
<img src="https://bluey.dev/build/assets/team4_no_beer-BmDo_EiR.png"
class="h-full w-full object-cover rounded-[var(--radius)] shadow-2xl ring-1 ring-black/10"
loading="lazy" alt="Team image">
</div>
</div>
<div class="col-span-1 md:col-span-3 p-4 pr-0 md:pr-0 md:p-10">
<h2 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Wie we zijn
</h2>
<p
class="max-w-3xl text-pretty text-3xl md:text-4xl font-medium tracking-tighter text-gray-950 sm:text-6xl">
Wij bouwen bruggen tussen systemen, processen en mensen
</p>
<div class="mt-6 md:mt-10 grid gap-4">
<p class="max-w-[600px] text-sm/6 text-gray-600">
Wij zijn Bluey, een klein maar krachtig team van techliefhebbers met een passie voor
eenvoud en efficiëntie. We zijn geen zzp'ers en ook geen grote agencies met onnodige
overhead.
</p>
<p class="max-w-[600px] text-sm/6 text-gray-600">
Ons team bestaat uit techneuten die zelf meebouwen aan de oplossingen die jij nodig
hebt. Met een transparante aanpak in planning en pricing werken we met minder ruis en
meer resultaat. Samen brengen we chaos terug naar helderheid en ideeën naar impact.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden">
<div class="pb-16 md:pb-24 pt-6 md:pt-14 px-4 sm:px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl grid gap-8 grid-cols-1 md:grid-cols-5 items-center">
<div class="col-span-1 md:col-span-2 md:order-last">
<div
class="relative aspect-[4/3] md:aspect-[var(--width)/var(--height)] [--radius:theme(borderRadius.xl)]">
<div
class="absolute -inset-[var(--padding)] rounded-[calc(var(--radius)+var(--padding))] shadow-sm ring-1 ring-black/5 [--padding:theme(spacing.2)]">
</div>
<img src="https://bluey.dev/build/assets/team-CkGysMhf.jpg"
class="h-full w-full object-cover rounded-[var(--radius)] shadow-2xl ring-1 ring-black/10"
loading="lazy" alt="Process image">
</div>
</div>
<div class="col-span-1 md:col-span-3 p-4 pl-0 md:pl-0 md:p-10">
<h2 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Hoe wij werken
</h2>
<p
class="max-w-3xl text-pretty text-3xl md:text-4xl font-medium tracking-tighter text-gray-950 sm:text-6xl">
Helder, persoonlijk en doelgericht
</p>
<div class="mt-6 md:mt-10 grid gap-4">
<p class="max-w-[600px] text-sm/6 text-gray-600">
Bij Bluey geloven we dat elk project begint met een goed gesprek. We starten met een
persoonlijke kennismaking bij een kop koffie, bij ons op kantoor of bij jou. Samen
bespreken we jouw uitdaging en denken we na over de beste aanpak. Vervolgens toetsen we
intern de mogelijkheden en komen we terug met een concreet plan waarin technologie,
planning en budget helder zijn uitgewerkt.
</p>
<p class="max-w-[600px] text-sm/6 text-gray-600">
Tijdens de ontwikkeling werken we nauw samen. We delen updates, vragen feedback en
zorgen dat de aanpak blijft aansluiten bij jouw wensen en onze expertise. De oplevering
stemmen we af op wat bij jou past: een volledig product of een stapsgewijze aanpak. En
ook daarna blijven we betrokken, met onderhoud, ondersteuning en uitbreidingen. Bij
Bluey is jouw succes ons doel.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-32">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl">
<h2 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Wat we doen
</h2>
<p class="mt-2 max-w-3xl text-pretty text-4xl font-medium tracking-tighter text-gray-950 sm:text-6xl">
Van mogelijkheden naar oplossingen
</p>
<div class="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6">
<div
class="lg:col-span-2 lg:rounded-tl-4xl group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
<div class="relative h-80 shrink-0">
<img src="https://bluey.dev/build/assets/development-D39ia08m.png"
alt="Development" loading="lazy" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-white to-50%"></div>
</div>
<div class="relative p-10">
<h3 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Webontwikkeling
</h3>
<p class="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950">
Jouw digitale fundament.
</p>
<p class="mt-2 max-w-[600px] text-sm/6 text-gray-600">
We bouwen moderne, snelle en gebruiksvriendelijke websites die passen bij jouw merk.
Altijd maatwerk, altijd gericht op jouw doelen.
</p>
</div>
</div>
<div
class="lg:col-span-2 group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
<div class="relative h-80 shrink-0">
<img src="https://bluey.dev/build/assets/app-CsS8TiCt.jpg"
alt="Apps" loading="lazy" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-white to-50%"></div>
</div>
<div class="relative p-10">
<h3 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Applicatieontwikkeling
</h3>
<p class="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950">
Slimme tools, speciaal voor jou.
</p>
<p class="mt-2 max-w-[600px] text-sm/6 text-gray-600">
Van concept tot realisatie ontwikkelen we krachtige applicaties die naadloos aansluiten
op jouw processen en uitdagingen.
</p>
</div>
</div>
<div
class="lg:col-span-2 group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
<div class="relative h-80 shrink-0">
<div class="image-comparison-slider select-none h-80 w-full relative overflow-hidden">
<div class="image-wrapper first-image absolute top-0 left-0 w-full h-full">
<img src="https://bluey.dev/build/assets/e-commerce-1-BwaQAJ6p.jpg"
alt="Ecommerce" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="image-wrapper second-image absolute top-0 left-0 w-full h-full">
<img src="https://bluey.dev/build/assets/e-commerce-2-C7Td4zTE.jpg"
alt="Ecommerce" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="slider-handle z-10 absolute top-0 w-1 h-full bg-white cursor-ew-resize"
style="left: 50%;">
<div
class="handle-circle absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-8 h-8 bg-white rounded-full shadow-lg flex items-center justify-center">
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none">
<path d="M8 8L4 12L8 16M16 8L20 12L16 16" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
</div>
</div>
<div class="absolute inset-0 bg-gradient-to-t from-white to-50%"></div>
</div>
<div class="relative p-10">
<h3 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
E-commerce oplossingen
</h3>
<p class="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950">
Meer verkopen, minder gedoe.
</p>
<p class="mt-2 max-w-[600px] text-sm/6 text-gray-600">
Wij creëren e-commerce platforms en apps die jouw klanten soepel laten winkelen en jouw
verkoop een boost geven.
</p>
</div>
</div>
<div
class="lg:col-span-3 group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
<div class="relative h-80 shrink-0">
<img src="https://bluey.dev/build/assets/api-D2nsKBon.jpg"
alt="APIs" loading="lazy" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-white to-50%"></div>
</div>
<div class="relative p-10">
<h3 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
API-integraties
</h3>
<p class="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950">
Systemen verbinden, systemen versterken.
</p>
<p class="mt-2 max-w-[600px] text-sm/6 text-gray-600">
We koppelen systemen en data via slimme API’s, zodat alles efficiënt en foutloos
samenwerkt. Waarom moeilijk doen als het makkelijk kan.
</p>
</div>
</div>
<div
class="lg:col-span-3 group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
<div class="relative h-80 shrink-0">
<img src="https://bluey.dev/build/assets/ai-Cm7I0RO-.jpg"
alt="AI development" loading="lazy" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-white to-50%"></div>
</div>
<div class="relative p-10">
<h3 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
AI-oplossingen
</h3>
<p class="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950">
Van data naar inzichten. Van inzichten naar automatiseren.
</p>
<p class="mt-2 max-w-[600px] text-sm/6 text-gray-600">
Met AI-technologie maken we je processen slimmer, van voorspellende analyses tot
automatisering op maat.
</p>
</div>
</div>
<div
class="lg:col-span-2 lg:rounded-bl-4xl group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
<div class="relative h-80 shrink-0">
<img src="https://bluey.dev/build/assets/online-zichtbaar-O8q9dyJw.jpg"
alt="Online zichtbaarheid" loading="lazy" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-white to-50%"></div>
</div>
<div class="relative p-10">
<h3 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Online zichtbaarheid vergroten
</h3>
<p class="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950">
Maak impact, word gezien.
</p>
<p class="mt-2 max-w-[600px] text-sm/6 text-gray-600">
We helpen je online op te vallen met strategieën en oplossingen die je bereik en merk
versterken.
</p>
</div>
</div>
<div
class="lg:col-span-2 group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
<div class="relative h-80 shrink-0">
<img src="https://bluey.dev/build/assets/automation-764-DpMK.jpg"
alt="Automatisering" loading="lazy" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-white to-50%"></div>
</div>
<div class="relative p-10">
<h3 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Processen automatiseren
</h3>
<p class="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950">
Efficiëntie, opnieuw uitgevonden.
</p>
<p class="mt-2 max-w-[600px] text-sm/6 text-gray-600">
We vervangen handmatig werk door slimme automatiseringen, zodat jij meer kunt doen in
minder tijd.
</p>
</div>
</div>
<div
class="max-lg:rounded-b-4xl lg:col-span-2 lg:rounded-br-4xl group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-black/5">
<div class="relative h-80 shrink-0">
<img src="https://bluey.dev/build/assets/online-betalingen-wgxPWeD6.jpg"
alt="Online betalingen" loading="lazy" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-white to-50%"></div>
</div>
<div class="relative p-10">
<h3 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Online betalingen vereenvoudigen
</h3>
<p class="mt-1 text-2xl/8 font-medium tracking-tight text-gray-950">
Makkelijk betalen, tevreden klanten.
</p>
<p class="mt-2 max-w-[600px] text-sm/6 text-gray-600">
We implementeren veilige en gebruiksvriendelijke betaaloplossingen, zodat je klanten
soepel kunnen afrekenen.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="overflow-hidden py-32" id="projects">
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl">
<div>
<h2 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Projecten
</h2>
<span class="mt-2 text-pretty text-4xl font-medium tracking-tighter text-bluey-dark sm:text-6xl">
Vertrouwd door professionals.
</span>
</div>
</div>
</div>
<div class="relative flex items-center">
<button id="scroll-left"
class="absolute left-16 z-10 p-4 bg-bluey-blue-dark text-white rounded-full shadow-lg hidden lg:flex">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
</svg>
</button>
<div id="testimonials-container"
class="mt-16 flex gap-8 px-[var(--scroll-padding)] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden snap-x snap-mandatory overflow-x-auto overscroll-x-contain scroll-smooth [--scroll-padding:max(theme(spacing.6),calc((100vw-theme(maxWidth.2xl))/2))] lg:[--scroll-padding:max(theme(spacing.8),calc((100vw-theme(maxWidth.7xl))/2))]">
<a href="https://www.afzetbak.nl/?ref=bluey" target="_blank"
class="hover:cursor-pointer testimonials-card relative flex h-80 shrink-0 snap-start scroll-ml-[var(--scroll-padding)] flex-col justify-end overflow-hidden rounded-3xl w-full lg:w-[33rem] lg:h-[26rem]">
<img loading="lazy" alt="Project Afzetbak"
src="https://bluey.dev/build/assets/bluey-project-preview-afzetbak-desktop-Cy2FopgQ.png"
class="absolute inset-0 h-full object-contain object-top">
<div aria-hidden="true"
class="absolute inset-0 rounded-3xl bg-gradient-to-t from-black lg:from-[calc(7/16*100%)] from-[calc(7/16*93%)] ring-1 ring-inset ring-gray-950/10 sm:from-25%">
</div>
<figure class="relative p-10">
<blockquote>
<p class="relative lg:text-xl/7 text-sm text-white">Bij Afzetbak.nl hebben we het complete systeem ontwikkeld. Een geautomatiseerde oplossing die klanten en medewerkers ontzorgt, met 30% jaarlijkse groei als resultaat.</p>
</blockquote>
<figcaption class="flex flex-col lg:flex-row lg:justify-between mt-6 border-t border-white/20 pt-6">
<p class="lg:text-sm/6 text-xs font-medium text-white">Laravel & Tailwind CSS</p>
<p class="lg:text-sm/6 text-sm font-medium text-white">Afzetbak</p>
</figcaption>
</figure>
</a>
<a href="https://getinstantly.app/?ref=bluey" target="_blank"
class="hover:cursor-pointer testimonials-card relative flex h-80 shrink-0 snap-start scroll-ml-[var(--scroll-padding)] flex-col justify-end overflow-hidden rounded-3xl w-full lg:w-[33rem] lg:h-[26rem]">
<img loading="lazy" alt="Project Instantly"
src="https://bluey.dev/build/assets/instantly-D6HaQSaK.png"
class="absolute inset-0 h-full object-contain object-top">
<div aria-hidden="true"
class="absolute inset-0 rounded-3xl bg-gradient-to-t from-black lg:from-[calc(7/16*100%)] from-[calc(7/16*93%)] ring-1 ring-inset ring-gray-950/10 sm:from-25%">
</div>
<figure class="relative p-10">
<blockquote>
<p class="relative lg:text-xl/7 text-sm text-white">Met Instantly blijven creators en fans direct verbonden. Fans ontvangen alleen relevante updates van hun favoriete creators, zonder onnodige ruis of advertenties.</p>
</blockquote>
<figcaption class="flex flex-col lg:flex-row lg:justify-between mt-6 border-t border-white/20 pt-6">
<p class="lg:text-sm/6 text-xs font-medium text-white">Laravel, Tailwind CSS & React</p>
<p class="lg:text-sm/6 text-sm font-medium text-white">Instantly</p>
</figcaption>
</figure>
</a>
<a href="https://www.veluwade.nl/?ref=bluey" target="_blank"
class="hover:cursor-pointer testimonials-card relative flex h-80 shrink-0 snap-start scroll-ml-[var(--scroll-padding)] flex-col justify-end overflow-hidden rounded-3xl w-full lg:w-[33rem] lg:h-[26rem]">
<img loading="lazy" alt="Project Veluwade"
src="https://bluey.dev/build/assets/bluey-project-preview-veluwade-p7g7X5JO.png"
class="absolute inset-0 h-full object-contain object-top">
<div aria-hidden="true"
class="absolute inset-0 rounded-3xl bg-gradient-to-t from-black lg:from-[calc(7/16*100%)] from-[calc(7/16*93%)] ring-1 ring-inset ring-gray-950/10 sm:from-25%">
</div>
<figure class="relative p-10">
<blockquote>
<p class="relative lg:text-xl/7 text-sm text-white">Al jaren verzorgt Bluey de online communicatie voor het vierdaagse Veluwade-evenement. Van website en ticketing tot social media, meer dan 8.000 bezoekers maken gebruik van onze oplossingen.</p>
</blockquote>
<figcaption class="flex flex-col lg:flex-row lg:justify-between mt-6 border-t border-white/20 pt-6">
<p class="lg:text-sm/6 text-xs font-medium text-white">Laravel & Tailwind CSS</p>
<p class="lg:text-sm/6 text-sm font-medium text-white">Veluwade</p>
</figcaption>
</figure>
</a>
<a href="https://ppsk-kiosk.com/?ref=bluey" target="_blank"
class="hover:cursor-pointer testimonials-card relative flex h-80 shrink-0 snap-start scroll-ml-[var(--scroll-padding)] flex-col justify-end overflow-hidden rounded-3xl w-full lg:w-[33rem] lg:h-[26rem]">
<img loading="lazy" alt="Project PPSK Kiosk"
src="https://bluey.dev/build/assets/bluey-project-preview-ppsk-kiosk-9VIMo9Fx.png"
class="absolute inset-0 h-full object-contain object-top">
<div aria-hidden="true"
class="absolute inset-0 rounded-3xl bg-gradient-to-t from-black lg:from-[calc(7/16*100%)] from-[calc(7/16*93%)] ring-1 ring-inset ring-gray-950/10 sm:from-25%">
</div>
<figure class="relative p-10">
<blockquote>
<p class="relative lg:text-xl/7 text-sm text-white">De PPSK-Kiosk app, gekoppeld aan ExtremeCloud IQ, genereert automatisch veilige Wi-Fi toegang voor uw gasten met één druk op de knop.</p>
</blockquote>
<figcaption class="flex flex-col lg:flex-row lg:justify-between mt-6 border-t border-white/20 pt-6">
<p class="lg:text-sm/6 text-xs font-medium text-white">Laravel, Tailwind CSS & Swift</p>
<p class="lg:text-sm/6 text-sm font-medium text-white">PPSK Kiosk</p>
</figcaption>
</figure>
</a>
<a href="https://viatygo.com/?ref=bluey" target="_blank"
class="hover:cursor-pointer testimonials-card relative flex h-80 shrink-0 snap-start scroll-ml-[var(--scroll-padding)] flex-col justify-end overflow-hidden rounded-3xl w-full lg:w-[33rem] lg:h-[26rem]">
<img loading="lazy" alt="Project viaTYGO"
src="https://bluey.dev/build/assets/bluey-project-preview-via-tygo-CWlgeZ0q.png"
class="absolute inset-0 h-full object-contain object-top">
<div aria-hidden="true"
class="absolute inset-0 rounded-3xl bg-gradient-to-t from-black lg:from-[calc(7/16*100%)] from-[calc(7/16*93%)] ring-1 ring-inset ring-gray-950/10 sm:from-25%">
</div>
<figure class="relative p-10">
<blockquote>
<p class="relative lg:text-xl/7 text-sm text-white">Blijf proactief op de hoogte van de verwerkingsstatus en vind snel een beschikbaar recyclingbedrijf. Door werk buiten uw regio uit te besteden, focust u op efficiënte verwerking in uw eigen gebied.</p>
</blockquote>
<figcaption class="flex flex-col lg:flex-row lg:justify-between mt-6 border-t border-white/20 pt-6">
<p class="lg:text-sm/6 text-xs font-medium text-white">Laravel & Tailwind CSS</p>
<p class="lg:text-sm/6 text-sm font-medium text-white">viaTYGO</p>
</figcaption>
</figure>
</a>
</div>
<button id="scroll-right"
class="absolute right-16 z-10 p-4 bg-bluey-blue-dark text-white rounded-full shadow-lg hidden lg:flex">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
</button>
</div>
<!-- Navigation -->
<div class="mt-16 px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl">
<div class="flex justify-between">
<div>
<p class="max-w-sm text-sm/6 text-gray-600">
Wil je dat jouw project ook in deze lijst voorkomt?
</p>
<div class="mt-2">
<a class="inline-flex items-center gap-2 font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark hover:text-bluey-blue-light custom-hover"
href="https://bluey.dev/contact">
Afspraak plannen
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true" data-slot="icon" class="size-5">
<path fill-rule="evenodd"
d="M2 10a.75.75 0 0 1 .75-.75h12.59l-2.1-1.95a.75.75 0 1 1 1.02-1.1l3.5 3.25a.75.75 0 0 1 0 1.1l-3.5 3.25a.75.75 0 1 1-1.02-1.1l2.1-1.95H2.75A.75.75 0 0 1 2 10Z"
clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
<div class="hidden sm:flex sm:gap-2" id="testimonial-dots">
<button onclick="scrollToTestimonial(0)" data-index="0"
aria-label="Scroll to testimonial 1"
class="size-2.5 rounded-full border border-transparent bg-gray-300 transition data-[active=true]:bg-bluey-blue-dark hover:bg-gray-400"></button>
<button onclick="scrollToTestimonial(1)" data-index="1"
aria-label="Scroll to testimonial 2"
class="size-2.5 rounded-full border border-transparent bg-gray-300 transition data-[active=true]:bg-bluey-blue-dark hover:bg-gray-400"></button>
<button onclick="scrollToTestimonial(2)" data-index="2"
aria-label="Scroll to testimonial 3"
class="size-2.5 rounded-full border border-transparent bg-gray-300 transition data-[active=true]:bg-bluey-blue-dark hover:bg-gray-400"></button>
<button onclick="scrollToTestimonial(3)" data-index="3"
aria-label="Scroll to testimonial 4"
class="size-2.5 rounded-full border border-transparent bg-gray-300 transition data-[active=true]:bg-bluey-blue-dark hover:bg-gray-400"></button>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="relative custom-bluey-gradient rounded-t-4xl">
<div class="absolute inset-2 rounded-3xl bg-white/70"></div>
<div class="px-6 lg:px-8">
<div class="mx-auto max-w-2xl lg:max-w-7xl">
<div class="relative pb-16 pt-20 text-center sm:py-24">
<hgroup>
<h2 class="font-kalam text-xs/5 font-semibold uppercase tracking-widest text-bluey-blue-dark">
Contact opnemen
</h2>
<p class="mt-6 text-3xl font-medium tracking-tight text-bluey-dark sm:text-5xl">
Zijn wij een goede match voor jouw project?
<br>
Wacht niet langer!
</p>
</hgroup>
<div class="mt-6">
<a class="w-full sm:w-auto inline-flex items-center justify-center px-4 py-[calc(theme(spacing.2)-1px)] rounded-full border border-transparent bg-gray-950 shadow-md whitespace-nowrap text-base font-medium text-white" href="/cdn-cgi/l/email-protection#a3cacdc5cce3c1cfd6c6da8dc7c6d59cd0d6c1c9c6c0d79eefc6d7d083d0c0cbc6c7d6cfc683c283cec6c6d7cacdc4">
Start nu
</a>
</div>
</div>
<div class="pb-16">
<div
class="group/row relative isolate pt-[calc(theme(spacing.2)+1px)] last:pb-[calc(theme(spacing.2)+1px)]">
<div aria-hidden="true" class="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2">
<div class="absolute inset-x-0 top-0 border-t border-black/5"></div>
<div class="absolute inset-x-0 top-2 border-t border-black/5"></div>
<div
class="absolute inset-x-0 bottom-0 hidden border-b border-black/5 group-last/row:block"></div>
<div
class="absolute inset-x-0 bottom-2 hidden border-b border-black/5 group-last/row:block"></div>
</div>
<div class="grid grid-cols-3 gap-y-10 pb-6 lg:grid-cols-6 lg:gap-8">
<div class="lg:col-span-2 flex">
<div class="pt-6 lg:pb-6 group/item relative">
<a href="https://bluey.dev" class="cursor-hover">
<img
src="https://bluey.dev/build/assets/bluey-logo-dark-DDHPcIYf.svg"
alt="Logo Bluey B.V."
loading="lazy"
class="h-12 lg:h-24 w-auto overflow-visible"
width="1242"
height="631"
>
</a>
</div>
</div>
<div class="pt-6 col-start-3 lg:col-start-6">
<h3 class="text-sm/6 font-medium text-bluey-dark/50">Klantenservice</h3>
<ul class="mt-3 space-y-1 text-sm/6">
<li>
<a
class="custom-underline font-medium text-bluey-dark"
href="https://bluey.dev/over-ons"
>
Wie zijn wij
</a>
</li>
<li>
<a
class="custom-underline font-medium text-bluey-dark"
href="https://bluey.dev/contact"
>
Contact
</a>
</li>
<li>
<a
class="custom-underline font-medium text-bluey-dark"
href="https://bluey.dev/terms"
rel="nofollow"
>
Algemene voorwaarden
</a>
</li>
</ul>
</div>
</div>
</div>
<div
class="flex justify-between group/row relative isolate pt-[calc(theme(spacing.2)+1px)] last:pb-[calc(theme(spacing.2)+1px)]">
<div aria-hidden="true" class="absolute inset-y-0 left-1/2 -z-10 w-screen -translate-x-1/2">
<div class="absolute inset-x-0 top-0 border-t border-black/5"></div>
<div class="absolute inset-x-0 top-2 border-t border-black/5"></div>
<div
class="absolute inset-x-0 bottom-0 hidden border-b border-black/5 group-last/row:block"></div>
<div
class="absolute inset-x-0 bottom-2 hidden border-b border-black/5 group-last/row:block"></div>
</div>
<div>
<div class="py-3 group/item relative">
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-first/item:block absolute size-[15px] fill-black/10 -top-2 -left-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="absolute size-[15px] fill-black/10 -top-2 -right-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-last/row:group-first/item:block absolute size-[15px] fill-black/10 -bottom-2 -left-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-last/row:block absolute size-[15px] fill-black/10 -bottom-2 -right-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<div class="text-sm/6 text-bluey-dark">© 2025 Bluey B.V.</div>
</div>
</div>
<div class="flex">
<div class="flex items-center gap-8 py-3 group/item relative">
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-first/item:block absolute size-[15px] fill-black/10 -top-2 -left-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="absolute size-[15px] fill-black/10 -top-2 -right-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-last/row:group-first/item:block absolute size-[15px] fill-black/10 -bottom-2 -left-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<svg viewBox="0 0 15 15" aria-hidden="true" class="hidden group-last/row:block absolute size-[15px] fill-black/10 -bottom-2 -right-4">
<path d="M8 0H7V7H0V8H7V15H8V8H15V7H8V0Z"></path>
</svg>
<a
target="_blank"
aria-label="Visit us on Gitlab"
class=" text-bluey-dark hover:text-bluey-dark/75 transition-transform duration-300 ease-in-out hover:scale-110"
href="https://gitlab.com/bluey-development"
>
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M503.5 204.6L502.8 202.8L433.1 21C431.7 17.5 429.2 14.4 425.9 12.4C423.5 10.8 420.8 9.9 417.9 9.6C415 9.3 412.2 9.7 409.5 10.7C406.8 11.7 404.4 13.3 402.4 15.5C400.5 17.6 399.1 20.1 398.3 22.9L351.3 166.9H160.8L113.7 22.9C112.9 20.1 111.5 17.6 109.6 15.5C107.6 13.4 105.2 11.7 102.5 10.7C99.9 9.7 97 9.3 94.1 9.6C91.3 9.9 88.5 10.8 86.1 12.4C82.8 14.4 80.3 17.5 78.9 21L9.3 202.8L8.5 204.6C-1.5 230.8-2.7 259.6 5 286.6C12.8 313.5 29.1 337.3 51.5 354.2L51.7 354.4L52.3 354.8L158.3 434.3L210.9 474L242.9 498.2C246.6 500.1 251.2 502.5 255.9 502.5C260.6 502.5 265.2 500.1 268.9 498.2L300.9 474L353.5 434.3L460.2 354.4L460.5 354.1C482.9 337.2 499.2 313.5 506.1 286.6C514.7 259.6 513.5 230.8 503.5 204.6z"/>
</svg>
</a>
<a
target="_blank"
aria-label="Visit us on Github"
class=" text-bluey-dark hover:text-bluey-dark/75 transition-transform duration-300 ease-in-out hover:scale-110"
href="https://github.com/bluey-development"
>
<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
<path
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
</svg>
</a>
<a
target="_blank"
aria-label="Visit us on X"
class=" text-bluey-dark hover:text-bluey-dark/75 transition-transform duration-300 ease-in-out hover:scale-110"
href="https://x.com/bluey_dev"
>
<svg viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
d="M12.6 0h2.454l-5.36 6.778L16 16h-4.937l-3.867-5.594L2.771 16H.316l5.733-7.25L0 0h5.063l3.495 5.114L12.6 0zm-.86 14.376h1.36L4.323 1.539H2.865l8.875 12.837z"></path>
</svg>
</a>
<a
target="_blank"
aria-label="Visit us on LinkedIn"
class=" text-bluey-dark hover:text-bluey-dark/75 transition-transform duration-300 ease-in-out hover:scale-110"
href="https://www.linkedin.com/company/bluey-bv/"
>
<svg viewBox="0 0 16 16" fill="currentColor" class="size-4">
<path
d="M14.82 0H1.18A1.169 1.169 0 000 1.154v13.694A1.168 1.168 0 001.18 16h13.64A1.17 1.17 0 0016 14.845V1.15A1.171 1.171 0 0014.82 0zM4.744 13.64H2.369V5.996h2.375v7.644zm-1.18-8.684a1.377 1.377 0 11.52-.106 1.377 1.377 0 01-.527.103l.007.003zm10.075 8.683h-2.375V9.921c0-.885-.015-2.025-1.234-2.025-1.218 0-1.425.966-1.425 1.968v3.775H6.233V5.997H8.51v1.05h.032c.317-.601 1.09-1.235 2.246-1.235 2.405-.005 2.851 1.578 2.851 3.63v4.197z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
document.addEventListener('alpine:init', () => {
Alpine.data('blurText', (options) => ({
elements: [],
animationCompleted: false,
init() {
this.setupElements();
this.setupIntersectionObserver();
},
setupElements() {
const text = options.text || '';
this.elements = options.animateBy === 'words' ? text.split(' ') : text.split('');
this.$refs.container.innerHTML = '';
this.elements.forEach((el, index) => {
const wrapper = document.createElement('span');
wrapper.style.display = 'inline';
const span = document.createElement('span');
span.classList.add('blur-text-element');
if (options.fontClasses && options.fontClasses[index]) {
span.classList.add(...options.fontClasses[index].split(' '));
}
span.dataset.index = index;
span.style.display = 'inline-block';
span.style.willChange = 'transform, filter, opacity';
span.style.opacity = '0';
span.style.filter = 'blur(10px)';
if (options.direction === 'top') {
span.style.transform = 'translate3d(0,-50px,0)';
} else {
span.style.transform = 'translate3d(0,50px,0)';
}
span.textContent = el;
wrapper.appendChild(span);
if (options.animateBy === 'words' && index < this.elements.length - 1) {
wrapper.appendChild(document.createTextNode(' '));
}
this.$refs.container.appendChild(wrapper);
});
},
setupIntersectionObserver() {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting && !this.animationCompleted) {
this.animateElements();
observer.unobserve(this.$refs.container);
}
}, {
threshold: 0.1,
rootMargin: '0px'
});
observer.observe(this.$refs.container);
},
animateElements() {
const elements = this.$refs.container.querySelectorAll('.blur-text-element');
let completedCount = 0;
elements.forEach((el, index) => {
setTimeout(() => {
el.style.transition = 'all 300ms ease-out';
el.style.opacity = '0.5';
el.style.filter = 'blur(5px)';
if (options.direction === 'top') {
el.style.transform = 'translate3d(0,5px,0)';
} else {
el.style.transform = 'translate3d(0,-5px,0)';
}
setTimeout(() => {
el.style.opacity = '1';
el.style.filter = 'blur(0px)';
el.style.transform = 'translate3d(0,0,0)';
completedCount++;
if (completedCount === elements.length) {
this.animationCompleted = true;
this.$refs.container.dispatchEvent(
new CustomEvent('blurtext:complete', { bubbles: true })
);
}
}, 300);
}, index * options.delay);
});
}
}));
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const slider = document.querySelector('.image-comparison-slider');
const sliderHandle = slider.querySelector('.slider-handle');
const secondImage = slider.querySelector('.second-image');
let isDragging = false;
let startX;
let sliderLeft;
let isAnimating = false;
function setSliderPosition(position) {
const sliderRect = slider.getBoundingClientRect();
const x = Math.max(0, Math.min(position, sliderRect.width));
const percentagePosition = (x / sliderRect.width) * 100;
sliderHandle.style.left = `${percentagePosition}%`;
secondImage.style.clipPath = `polygon(${percentagePosition}% 0, 100% 0, 100% 100%, ${percentagePosition}% 100%)`;
}
function startDragging(e) {
if (isAnimating) return;
isDragging = true;
slider.style.cursor = 'ew-resize';
startX = e.type === 'touchstart' ? e.touches[0].clientX : e.clientX;
sliderLeft = sliderHandle.getBoundingClientRect().left - slider.getBoundingClientRect().left;
if (e.type === 'mousedown') {
e.preventDefault();
}
}
function stopDragging() {
isDragging = false;
slider.style.cursor = 'default';
}
function drag(e) {
if (!isDragging || isAnimating) return;
e.preventDefault();
const currentX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
const diff = currentX - startX;
const newPosition = sliderLeft + diff;
setSliderPosition(newPosition);
}
async function animateSlider() {
if (isAnimating) return;
isAnimating = true;
const duration = 1500;
const startPosition = slider.offsetWidth / 6;
const endPosition = slider.offsetWidth;
await animate(startPosition, endPosition, duration);
await new Promise(resolve => setTimeout(resolve, 500));
await animate(endPosition, startPosition, duration);
await new Promise(resolve => setTimeout(resolve, 1500));
isAnimating = false;
}
function animate(start, end, duration) {
const startTime = performance.now();
return new Promise(resolve => {
function update(currentTime) {
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const easeInOutCubic = progress => progress < 0.5
? 4 * progress * progress * progress
: 1 - Math.pow(-2 * progress + 2, 3) / 2;
const currentPosition = start + (end - start) * easeInOutCubic(progress);
setSliderPosition(currentPosition);
if (progress < 1) {
requestAnimationFrame(update);
} else {
resolve();
}
}
requestAnimationFrame(update);
});
}
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && entry.intersectionRatio >= 0.8) {
animateSlider();
}
});
}, {
threshold: 0.8
});
observer.observe(slider);
sliderHandle.addEventListener('mousedown', startDragging);
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', stopDragging);
sliderHandle.addEventListener('touchstart', startDragging, { passive: true });
document.addEventListener('touchmove', drag, { passive: false });
document.addEventListener('touchend', stopDragging);
document.addEventListener('touchcancel', stopDragging);
setSliderPosition(slider.offsetWidth / 6);
return () => {
sliderHandle.removeEventListener('mousedown', startDragging);
document.removeEventListener('mousemove', drag);
document.removeEventListener('mouseup', stopDragging);
sliderHandle.removeEventListener('touchstart', startDragging);
document.removeEventListener('touchmove', drag);
document.removeEventListener('touchend', stopDragging);
document.removeEventListener('touchcancel', stopDragging);
observer.disconnect();
};
});
document.addEventListener('DOMContentLoaded', function () {
const container = document.getElementById('testimonials-container');
const parentContainer = document.querySelector('#testimonials-container');
const childrenContainer = parentContainer.querySelectorAll('.testimonials-card');
const leftButton = document.getElementById('scroll-left');
const rightButton = document.getElementById('scroll-right');
const dots = document.querySelectorAll('#testimonial-dots button');
let activeIndex = 0;
const gap = 32;
const computeOpacity = (element) => {
const parentRect = parentContainer.getBoundingClientRect();
const rect = element.getBoundingClientRect();
const paddingLeft = parseFloat(getComputedStyle(parentContainer).paddingLeft);
const paddingRight = parseFloat(getComputedStyle(parentContainer).paddingRight);
const visibleLeft = parentRect.left + paddingLeft;
const visibleRight = parentRect.right - paddingRight;
if (rect.right < visibleLeft || rect.left > visibleRight) {
return 0.3;
}
if (rect.left < visibleLeft) {
const diff = visibleLeft - rect.left;
const percent = diff / rect.width;
return Math.max(0.5, 1 - percent);
} else if (rect.right > visibleRight) {
const diff = rect.right - visibleRight;
const percent = diff / rect.width;
return Math.max(0.5, 1 - percent);
} else {
return 1;
}
};
const updateOpacityCard = () => {
childrenContainer.forEach((child) => {
const opacity = computeOpacity(child);
child.style.opacity = opacity.toString();
});
};
parentContainer.addEventListener('scroll', updateOpacityCard);
function updateActiveIndex() {
const width = container.children[0].offsetWidth;
activeIndex = Math.round(container.scrollLeft / (width + gap));
dots.forEach((dot, index) => {
dot.dataset.active = index === activeIndex;
});
}
function handleButtonEvents() {
const lastIndex = childrenContainer.length - 2;
function scrollToIndex(index) {
const width = container.children[0].offsetWidth;
container.scrollTo({
left: (width + gap) * index,
behavior: 'smooth'
});
activeIndex = index;
updateActiveIndex();
}
function scrollToFirstCard() {
scrollToIndex(0);
}
function scrollToLastCard() {
scrollToIndex(lastIndex)
}
leftButton.addEventListener('click', function () {
if (activeIndex === 0) {
scrollToLastCard();
} else {
scrollToIndex(activeIndex - 1);
}
});
rightButton.addEventListener('click', function () {
if (activeIndex === lastIndex) {
scrollToFirstCard();
} else {
scrollToIndex(activeIndex + 1);
} console.log(childrenContainer.length)
});
dots.forEach((dot, index) => {
dot.addEventListener('click', () => scrollToIndex(index));
});
}
container.addEventListener('scroll', function () {
requestAnimationFrame(() => {
updateActiveIndex();
});
});
handleButtonEvents();
updateActiveIndex();
updateOpacityCard();
});
</script>
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/vcd15cbe7772f49c399c6a5babf22c1241717689176015" integrity="sha512-ZpsOmlRQV6y907TI0dKBHq9Md29nnaEIPlkf84rnaERnq6zvWvPUqr2ft8M1aS28oN72PdrCzSjY4U6VaAw1EQ==" data-cf-beacon='{"version":"2024.11.0","token":"16b355fcdaeb4ccaabdc544bab0f103e","r":1,"server_timing":{"name":{"cfCacheStatus":true,"cfEdge":true,"cfExtPri":true,"cfL4":true,"cfOrigin":true,"cfSpeedBrain":true},"location_startswith":null}}' crossorigin="anonymous"></script>
</body>
</html>