https://bene.be/
Saved copy from just now.
<!DOCTYPE html>
<html lang="en" data-theme="bene">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bene — creative digital design studio · Bene-be</title>
<meta name="description" content="Bene — a creative studio that puts people first, using technology and creativity to help your ideas grow.">
<link rel="icon" href="https://bene.be/favicon.ico" sizes="any">
<link rel="icon" type="image/svg+xml" href="https://bene.be/favicon.svg">
<link rel="icon" type="image/png" sizes="16x16" href="https://bene.be/assets/favicon/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="https://bene.be/assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="https://bene.be/assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="https://bene.be/assets/favicon/android-icon-192x192.png">
<link rel="apple-touch-icon" sizes="57x57" href="https://bene.be/assets/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="https://bene.be/assets/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="https://bene.be/assets/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="https://bene.be/assets/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="https://bene.be/assets/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="https://bene.be/assets/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="https://bene.be/assets/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://bene.be/assets/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://bene.be/assets/favicon/apple-icon-180x180.png">
<link rel="manifest" href="https://bene.be/assets/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#1a1712">
<meta name="msapplication-TileImage" content="https://bene.be/assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#1a1712">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..900&family=IBM+Plex+Sans:wght@400;500;600;700&family=DM+Serif+Display:ital@0;1&family=Jost:wght@400;500;600;700&family=Josefin+Slab:ital,wght@0,400;0,600;1,400&family=Barlow+Condensed:wght@400;500;600;700&family=Nunito:ital,wght@0,400;0,600;0,700;1,400&family=Bebas+Neue&family=Raleway:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/assets/dist/app.css?v=2">
<link rel="stylesheet" href="https://unpkg.com/@phosphor-icons/web@2.1.2/src/regular/style.css"
integrity="sha384-6p9AefaqUhEVheRlj1mpAkbngHXy9mbYMrIdcIt4Jlc9lOLIablJq3bBsLOjGwZ7" crossorigin="anonymous">
<script defer src="https://unpkg.com/alpinejs@3.15.12/dist/cdn.min.js"
integrity="sha384-pb6hrQvo4s23cEUFtj0CZkzGE3jyK3pj26RIupXXxhSrrcUA/Cn0lZgcCrGH0t6L" crossorigin="anonymous"></script>
<!-- Privacy-friendly analytics by Plausible (loaded only after cookie consent) -->
<script>
window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments) };
window.beneLoadAnalytics = function () {
if (document.getElementById('plausible-script')) return;
var s = document.createElement('script');
s.id = 'plausible-script';
s.async = true;
s.src = 'https://plausible.io/js/pa-6SxiZkOuEElPcbOmcfT77.js';
s.onload = function () { window.plausible.init && window.plausible.init(); };
document.head.appendChild(s);
};
</script>
<!-- Instagram embed script (loaded only after cookie consent: unlike the
YouTube embeds above, embed.js has no privacy-enhanced mode and
always sets third-party cookies from Meta) -->
<script>
window.beneLoadInstagramEmbeds = function () {
if (document.getElementById('instagram-embed-script')) {
if (window.instgrm) window.instgrm.Embeds.process();
return;
}
var s = document.createElement('script');
s.id = 'instagram-embed-script';
s.async = true;
s.src = 'https://www.instagram.com/embed.js';
document.body.appendChild(s);
};
</script>
<title>Bene-be</title><meta name="generator" content="SEOmatic">
<meta name="referrer" content="no-referrer-when-downgrade">
<meta name="robots" content="all">
<meta content="en" property="og:locale">
<meta content="Bene-be" property="og:site_name">
<meta content="website" property="og:type">
<meta content="https://bene.be/" property="og:url">
<meta name="twitter:card" content="summary">
<meta name="twitter:creator" content="@">
<link href="https://bene.be/" rel="canonical">
<link href="https://bene.be/" rel="home">
<link type="text/plain" href="https://bene.be/humans.txt" rel="author"></head>
<body class="min-h-screen flex flex-col bg-base-100 text-base-content"
x-data="{ openMenu: false, scrollY: 0, portfolioView: (typeof localStorage !== 'undefined' && localStorage.getItem('portfolioView')) || 'single' }"
x-init="$watch('portfolioView', value => { if (typeof localStorage !== 'undefined') localStorage.setItem('portfolioView', value) })"
@scroll.window="scrollY = window.pageYOffset" :class="openMenu ? 'overflow-hidden' : ''">
<div x-data="{ open: localStorage.getItem('bene-announcement-dismissed') !== '1' }"
x-show="open"
style="display:none"
class="fixed top-0 left-0 w-full z-[60]">
<div class="relative bg-primary text-primary-content overflow-hidden py-2.5">
<a href="https://shop.acco.be/nl-be/items/9789493510807/Praktische-gids-voor-Design-Research" class="block no-underline text-primary-content hover:opacity-80 transition-opacity duration-300">
<div class="flex whitespace-nowrap animate-bene-marquee pr-10">
<span class="text-[10px] uppercase tracking-[0.3em] font-heading font-bold px-4">Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · </span>
<span class="text-[10px] uppercase tracking-[0.3em] font-heading font-bold px-4" aria-hidden="true">Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · Pre-order het boek: Praktische gids voor Design Research · </span>
</div>
</a>
<button @click="open = false; localStorage.setItem('bene-announcement-dismissed', '1')"
class="absolute right-0 top-0 h-full px-4 flex items-center text-primary-content/60 hover:text-primary-content transition-colors bg-primary cursor-pointer"
aria-label="Dismiss notification">
<i class="ph ph-x"></i>
</button>
</div>
</div>
<nav x-data="{ isHero: false }"
:class="(!isHero || scrollY > 60 || openMenu || portfolioView === 'grid') ? 'bg-base-100/95 backdrop-blur-sm' : ''"
class="fixed top-9 left-0 w-full z-40 px-4 md:px-8 py-5 md:py-6 flex justify-between items-center transition-all duration-300">
<a href="https://bene.be/" class="no-underline" aria-label="Bene.be">
<svg class="h-10 md:h-12 w-auto transition-colors duration-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 132.48" :class="(!isHero || scrollY > 60 || openMenu || portfolioView === 'grid') ? 'text-primary' : 'text-white'" fill="currentColor" aria-hidden="true" focusable="false">
<defs>
<style>
.rnrfhgulsr-cls-1 {
fill: none;
}
</style>
</defs>
<g id="rnrfhgulsr-contouren">
<rect class="rnrfhgulsr-cls-1" x="-6836" y="-7054.88" width="14400" height="14400"></rect>
<g>
<path d="M2.73,109.44c0-.87.74-1.58,1.58-1.58s1.58.71,1.58,1.58-.71,1.55-1.58,1.55-1.58-.68-1.58-1.55ZM3.11,126.37v-13.16h2.45v13.16h-2.45Z"></path>
<path d="M19.57,126.37v-8.42c0-2.18-1.12-2.89-2.81-2.89-1.53,0-2.92.93-3.62,1.91v9.4h-2.45v-13.16h2.45v1.85c.87-1.06,2.62-2.18,4.66-2.18,2.78,0,4.22,1.47,4.22,4.25v9.24h-2.45Z"></path>
<path d="M27.18,122.85c.9.98,2.64,1.88,4.42,1.88s2.83-.76,2.83-1.88c0-1.31-1.5-1.74-3.19-2.13-2.23-.52-4.85-1.12-4.85-3.95,0-2.1,1.8-3.9,5.01-3.9,2.26,0,3.9.82,5.01,1.88l-1.09,1.72c-.76-.93-2.23-1.61-3.9-1.61s-2.7.65-2.7,1.72c0,1.14,1.42,1.53,3.05,1.91,2.29.52,5.01,1.14,5.01,4.17,0,2.26-1.85,4.03-5.31,4.03-2.21,0-4.14-.68-5.48-2.04l1.17-1.8Z"></path>
<path d="M43.59,131.38h-2.45v-18.18h2.45v1.88c.95-1.31,2.53-2.21,4.31-2.21,3.43,0,5.86,2.59,5.86,6.9s-2.43,6.92-5.86,6.92c-1.72,0-3.24-.79-4.31-2.23v6.92ZM47.24,115.06c-1.5,0-3,.87-3.65,1.93v5.59c.65,1.04,2.15,1.93,3.65,1.93,2.45,0,3.95-1.99,3.95-4.74s-1.5-4.71-3.95-4.71Z"></path>
<path d="M57.71,109.44c0-.87.74-1.58,1.58-1.58s1.58.71,1.58,1.58-.71,1.55-1.58,1.55-1.58-.68-1.58-1.55ZM58.09,126.37v-13.16h2.45v13.16h-2.45Z"></path>
<path d="M65.67,126.37v-13.16h2.45v2.02c1.01-1.31,2.56-2.32,4.31-2.32v2.48c-.25-.05-.52-.08-.84-.08-1.23,0-2.89.93-3.46,1.91v9.16h-2.45Z"></path>
<path d="M81.88,112.88c3.95,0,6.4,3.08,6.4,7.11v.6h-10.41c.19,2.23,1.83,4.09,4.47,4.09,1.39,0,2.92-.54,3.9-1.55l1.14,1.61c-1.31,1.28-3.16,1.96-5.29,1.96-3.92,0-6.81-2.78-6.81-6.92,0-3.82,2.75-6.9,6.6-6.9ZM77.85,118.82h8.04c-.05-1.74-1.23-3.92-4.01-3.92s-3.9,2.13-4.03,3.92Z"></path>
<path d="M92.02,128.96c.87-.54,1.72-1.63,1.85-2.53-.05,0-.27.05-.41.05-.84,0-1.47-.65-1.47-1.55s.74-1.66,1.66-1.66c1.01,0,1.91.82,1.91,2.26,0,1.77-1.01,3.41-2.4,4.39l-1.14-.95Z"></path>
<path d="M114.29,112.88c2.48,0,3.98,1.04,4.93,2.32l-1.64,1.5c-.79-1.12-1.85-1.63-3.19-1.63-2.59,0-4.25,1.99-4.25,4.71s1.66,4.74,4.25,4.74c1.34,0,2.4-.54,3.19-1.63l1.64,1.5c-.95,1.28-2.45,2.32-4.93,2.32-3.98,0-6.7-2.97-6.7-6.92s2.73-6.9,6.7-6.9Z"></path>
<path d="M123.15,126.37v-13.16h2.45v2.02c1.01-1.31,2.56-2.32,4.31-2.32v2.48c-.25-.05-.52-.08-.84-.08-1.23,0-2.89.93-3.46,1.91v9.16h-2.45Z"></path>
<path d="M139.37,112.88c3.95,0,6.4,3.08,6.4,7.11v.6h-10.41c.19,2.23,1.83,4.09,4.47,4.09,1.39,0,2.92-.54,3.9-1.55l1.14,1.61c-1.31,1.28-3.16,1.96-5.29,1.96-3.92,0-6.81-2.78-6.81-6.92,0-3.82,2.75-6.9,6.6-6.9ZM135.34,118.82h8.04c-.05-1.74-1.23-3.92-4.01-3.92s-3.9,2.13-4.03,3.92Z"></path>
<path d="M158.2,126.37v-1.44c-1.04,1.14-2.53,1.77-4.31,1.77-2.18,0-4.58-1.47-4.58-4.36s2.37-4.31,4.58-4.31c1.77,0,3.3.57,4.31,1.74v-2.18c0-1.63-1.34-2.62-3.22-2.62-1.5,0-2.78.57-3.95,1.74l-1.06-1.69c1.47-1.44,3.27-2.15,5.4-2.15,2.86,0,5.29,1.25,5.29,4.61v8.88h-2.45ZM158.2,121.25c-.74-.98-2.02-1.5-3.38-1.5-1.77,0-3.02,1.06-3.02,2.62s1.25,2.62,3.02,2.62c1.36,0,2.64-.52,3.38-1.5v-2.23Z"></path>
<path d="M166.3,123.45v-8.09h-2.18v-2.15h2.18v-3.6h2.45v3.6h2.67v2.15h-2.67v7.55c0,.93.44,1.61,1.28,1.61.57,0,1.09-.25,1.34-.52l.63,1.85c-.52.49-1.28.84-2.56.84-2.07,0-3.13-1.17-3.13-3.24Z"></path>
<path d="M181.15,112.88c3.95,0,6.4,3.08,6.4,7.11v.6h-10.41c.19,2.23,1.83,4.09,4.47,4.09,1.39,0,2.92-.54,3.9-1.55l1.14,1.61c-1.31,1.28-3.16,1.96-5.29,1.96-3.92,0-6.81-2.78-6.81-6.92,0-3.82,2.75-6.9,6.6-6.9ZM177.12,118.82h8.04c-.05-1.74-1.23-3.92-4.01-3.92s-3.9,2.13-4.03,3.92Z"></path>
<path d="M215.03,126.37h-3.27c-.49-.44-1.12-1.06-1.8-1.74-1.33,1.23-3.02,2.07-5.18,2.07-3.19,0-5.75-1.72-5.75-5.12,0-2.83,1.88-4.28,3.98-5.37-.79-1.39-1.33-2.78-1.33-4.03,0-2.43,2.04-4.25,4.74-4.25,2.42,0,4.31,1.34,4.31,3.65,0,2.75-2.29,3.92-4.58,5.07.68.93,1.39,1.77,1.93,2.43.68.79,1.33,1.53,1.99,2.26.93-1.42,1.55-2.94,1.88-3.98l2.04.93c-.63,1.44-1.42,3.11-2.48,4.58,1.09,1.14,2.21,2.26,3.52,3.52ZM208.55,123.15c-.95-1.01-1.88-2.02-2.37-2.62-.71-.84-1.44-1.77-2.15-2.75-1.34.84-2.37,1.91-2.37,3.6,0,2.13,1.63,3.33,3.41,3.33,1.36,0,2.54-.63,3.49-1.55ZM205.2,115.14c1.8-.9,3.32-1.8,3.32-3.46,0-1.23-.84-1.91-1.99-1.91-1.31,0-2.34,1.01-2.34,2.45,0,.87.41,1.91,1.01,2.92Z"></path>
<path d="M228.18,127.95c1.09,1.25,2.42,1.74,4.22,1.74,2.04,0,4.09-.98,4.09-3.76v-1.72c-1.01,1.31-2.56,2.26-4.33,2.26-3.41,0-5.86-2.51-5.86-6.81s2.45-6.79,5.86-6.79c1.72,0,3.27.82,4.33,2.24v-1.91h2.45v12.65c0,4.52-3.3,5.86-6.54,5.86-2.21,0-3.82-.46-5.4-1.96l1.17-1.8ZM236.49,116.99c-.68-1.06-2.18-1.93-3.65-1.93-2.45,0-3.98,1.91-3.98,4.61s1.53,4.63,3.98,4.63c1.47,0,2.97-.9,3.65-1.96v-5.34Z"></path>
<path d="M252.95,126.37v-1.8c-1.01,1.09-2.67,2.13-4.69,2.13-2.81,0-4.2-1.42-4.2-4.2v-9.29h2.45v8.48c0,2.18,1.09,2.83,2.78,2.83,1.53,0,2.92-.87,3.65-1.85v-9.46h2.45v13.16h-2.45Z"></path>
<path d="M260.15,109.44c0-.87.74-1.58,1.58-1.58s1.58.71,1.58,1.58-.71,1.55-1.58,1.55-1.58-.68-1.58-1.55ZM260.53,126.37v-13.16h2.45v13.16h-2.45Z"></path>
<path d="M277.48,126.37v-1.88c-.98,1.31-2.56,2.21-4.31,2.21-3.43,0-5.89-2.59-5.89-6.89s2.45-6.92,5.89-6.92c1.69,0,3.24.82,4.31,2.24v-6.92h2.45v18.18h-2.45ZM277.48,116.99c-.68-1.06-2.15-1.93-3.65-1.93-2.45,0-3.98,1.99-3.98,4.74s1.53,4.71,3.98,4.71c1.5,0,2.97-.84,3.65-1.91v-5.61Z"></path>
<path d="M290.87,112.88c3.95,0,6.4,3.08,6.4,7.11v.6h-10.41c.19,2.23,1.83,4.09,4.47,4.09,1.39,0,2.92-.54,3.9-1.55l1.14,1.61c-1.31,1.28-3.16,1.96-5.29,1.96-3.92,0-6.81-2.78-6.81-6.92,0-3.82,2.75-6.9,6.59-6.9ZM286.83,118.82h8.04c-.05-1.74-1.23-3.92-4.01-3.92s-3.9,2.13-4.03,3.92Z"></path>
</g>
</g>
<g id="rnrfhgulsr-contouren-2" data-name="contouren">
<rect class="rnrfhgulsr-cls-1" x="-6836" y="-7054.88" width="14400" height="14400"></rect>
<g>
<path d="M22.41,89.76c-16.31,0-22.41-8.92-22.41-19.95,0-4.46,1.06-9.27,2.7-13.96L17.48,15.25H4.46L9.97,0h41.53l-11.85,32.73c4.58-5.16,9.27-7.86,17.36-7.86,10.79,0,14.31,7.86,14.31,17.25,0,19.12-22.06,47.64-48.93,47.64ZM41.42,40.24c-6.45,0-16.19,27.57-16.19,32.27,0,1.29.7,2.46,1.99,2.46,6.1,0,17.01-21.82,17.01-30.86,0-2.35-.82-3.87-2.82-3.87Z"></path>
<path d="M100.66,64.06c-2.82,10.21,2.46,13.73,10.79,13.73,6.8,0,10.79-3.87,13.02-9.27l10.44.7c-3.52,10.91-12.44,20.53-31.68,20.53s-30.51-12.09-30.51-25.93c0-17.36,14.2-38.95,40.83-38.95,16.89,0,26.63,8.45,26.63,18.3,0,11.26-15.14,20.42-39.54,20.88ZM115.92,38.72c-5.28,0-9.86,7.63-12.08,15.37,9.5,0,16.07-6.1,16.07-10.68,0-3.17-1.06-4.69-3.99-4.69Z"></path>
<path d="M203.91,89.76c-14.2,0-20.77-10.21-16.19-22.88l5.75-15.6c.82-2.35,1.29-3.87,1.29-5.63,0-1.88-.7-2.93-1.99-2.93-2.58,0-5.4,1.17-7.98,8.8l-13.49,36.96h-28.39l13.61-37.19c1.53-4.22,2.7-8.56.47-8.56-2.46,0-4.11,1.17-6.69,8.8h-10.44l1.76-5.16c5.04-13.73,14.67-21.35,25.58-21.35,12.2,0,16.54,8.45,16.78,15.25,5.63-9.62,14.08-15.25,22.88-15.25,9.62,0,16.43,5.63,16.43,16.54,0,3.64-.82,7.86-2.46,12.67l-5.4,14.55c-.94,2.58-1.64,5.16-1.64,6.81,0,1.06.35,1.76,1.17,1.76,2.46,0,4.11-1.17,6.69-8.8h10.44c-3.87,14.55-11.97,21.24-28.16,21.24Z"></path>
<path d="M260.46,64.06c-2.82,10.21,2.46,13.73,10.79,13.73,6.81,0,10.79-3.87,13.02-9.27l10.44.7c-3.52,10.91-12.44,20.53-31.68,20.53s-30.51-12.09-30.51-25.93c0-17.36,14.2-38.95,40.83-38.95,16.9,0,26.63,8.45,26.63,18.3,0,11.26-15.14,20.42-39.54,20.88ZM275.71,38.72c-5.28,0-9.86,7.63-12.09,15.37,9.5,0,16.07-6.1,16.07-10.68,0-3.17-1.06-4.69-3.99-4.69Z"></path>
</g>
<rect class="rnrfhgulsr-cls-1" x="-6146.78" y="-6878.55" width="14400" height="14400"></rect>
</g>
</svg>
</a>
<button @click="openMenu = !openMenu" type="button"
:class="(!isHero || scrollY > 60 || openMenu || portfolioView === 'grid') ? 'text-primary' : 'text-white'"
class="flex items-center gap-2 uppercase text-xs tracking-[0.3em] font-heading font-bold outline-none px-2 py-2 cursor-pointer transition-colors duration-300">
<span x-show="!openMenu" class="flex items-center gap-2"><i class="ph ph-list text-base"></i> Menu</span>
<span x-show="openMenu" x-cloak class="flex items-center gap-2"><i class="ph ph-x text-base"></i> Close</span>
</button>
</nav>
<div x-show="openMenu" x-cloak
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
class="fixed inset-0 z-30 bg-primary text-primary-content flex flex-col items-center text-center overflow-y-auto">
<ul class="m-auto space-y-1 md:space-y-3 py-16">
<li>
<a href="https://bene.be/" @click="openMenu = false"
class="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight uppercase no-underline hover:text-accent transition-colors text-accent">
Home
</a>
</li>
<li>
<a href="https://bene.be/portfolio" @click="openMenu = false"
class="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight uppercase no-underline hover:text-accent transition-colors ">
Portfolio
</a>
</li>
<li>
<a href="https://bene.be/services" @click="openMenu = false"
class="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight uppercase no-underline hover:text-accent transition-colors ">
Services
</a>
</li>
<li>
<a href="https://bene.be/blog" @click="openMenu = false"
class="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight uppercase no-underline hover:text-accent transition-colors ">
Blog
</a>
</li>
<li>
<a href="https://bene.be/notes" @click="openMenu = false"
class="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight uppercase no-underline hover:text-accent transition-colors ">
Notes
</a>
</li>
<li>
<a href="https://bene.be/links" @click="openMenu = false"
class="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight uppercase no-underline hover:text-accent transition-colors ">
Links
</a>
</li>
<li>
<a href="https://bene.be/gids/praktische-gids-voor-design-research" @click="openMenu = false"
class="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight uppercase no-underline hover:text-accent transition-colors ">
Gids
</a>
</li>
<li>
<a href="https://bene.be/contact" @click="openMenu = false"
class="font-heading text-4xl md:text-6xl lg:text-7xl font-bold tracking-tight uppercase no-underline hover:text-accent transition-colors ">
Contact
</a>
</li>
</ul>
</div>
<main class="flex-1 pt-32 md:pt-36">
<section class="bg-gradient-to-br from-base-200 via-base-100 to-accent/15 text-base-content">
<div class="max-w-5xl mx-auto px-4 md:px-8 py-24 text-center">
<h1 class="text-5xl md:text-7xl lg:text-8xl font-heading leading-[0.95] tracking-tight mb-6 text-primary">We inspire, create & guide your ideas</h1>
<p class="text-lg text-base-content/70 max-w-2xl mx-auto mb-8">
A creative studio that puts people first using technology and creativity to help your ideas grow.
</p>
<a href="https://bene.be/portfolio" class="btn btn-accent gap-2">See our work <i class="ph ph-arrow-right"></i></a>
</div>
</section>
<section class="bg-primary text-primary-content py-16 md:py-24 overflow-hidden">
<div class="max-w-6xl mx-auto px-4 md:px-8 grid md:grid-cols-2 gap-12 md:gap-16 items-center" x-data="{ activeImage: 0 }">
<div>
<p class="text-[10px] uppercase tracking-[0.3em] font-heading font-bold text-accent mb-4">Publicatie</p>
<h2 class="text-3xl md:text-5xl font-heading italic mb-5">Praktische Gids voor Design Research</h2>
<div class="prose-bene text-primary-content/70 mb-8 max-w-md">Een toegankelijke gids voor iedereen die aan de slag gaat met design research. Van diepte-interviews en observatie tot affinity diagrams en prototypes — dit boek begeleidt je stap voor stap doorheen het volledige onderzoeksproces, met concrete werkbladen en templates bij elke methode.
Geschreven vanuit jarenlange praktijkervaring en bestemd voor zowel studenten als professionals in de creatieve sector.</div>
<a href="https://bene.be/gids/praktische-gids-voor-design-research" class="link link-hover text-accent inline-flex items-center gap-1">Ontdek het boek <i class="ph ph-arrow-right"></i></a>
</div>
<div>
<div class="relative rounded-box overflow-hidden bg-primary-content/5 h-[320px] md:h-[420px] flex items-center justify-center">
<img x-show="activeImage === 0" x-cloak src="https://bene.be/assets/gids/boek/design-research20.jpeg" alt="Praktische Gids voor Design Research" class="max-w-full max-h-full object-contain shadow-2xl">
<img x-show="activeImage === 1" x-cloak src="https://bene.be/assets/gids/boek/FIGUUR-2-Mindscape01-de-opdracht-en-rode-draad-doorheen-deze-gids.png" alt="Praktische Gids voor Design Research" class="max-w-full max-h-full object-contain shadow-2xl">
<img x-show="activeImage === 2" x-cloak src="https://bene.be/assets/gids/boek/cover.jpg" alt="Praktische Gids voor Design Research" class="max-w-full max-h-full object-contain shadow-2xl">
<img x-show="activeImage === 3" x-cloak src="https://bene.be/assets/gids/boek/preview-1_2026-08-30-093732_cqax.jpg" alt="Praktische Gids voor Design Research" class="max-w-full max-h-full object-contain shadow-2xl">
<img x-show="activeImage === 4" x-cloak src="https://bene.be/assets/gids/boek/preview-2_2026-08-30-093734_lgtr.jpg" alt="Praktische Gids voor Design Research" class="max-w-full max-h-full object-contain shadow-2xl">
<img x-show="activeImage === 5" x-cloak src="https://bene.be/assets/gids/boek/preview-3_2026-08-30-093736_qqqx.jpg" alt="Praktische Gids voor Design Research" class="max-w-full max-h-full object-contain shadow-2xl">
<button type="button" @click="activeImage = (activeImage - 1 + 6) % 6" aria-label="Vorige afbeelding"
class="absolute left-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-primary-content/10 hover:bg-primary-content/20 text-primary-content flex items-center justify-center transition-colors cursor-pointer">
<i class="ph ph-caret-left text-lg"></i>
</button>
<button type="button" @click="activeImage = (activeImage + 1) % 6" aria-label="Volgende afbeelding"
class="absolute right-3 top-1/2 -translate-y-1/2 w-10 h-10 rounded-full bg-primary-content/10 hover:bg-primary-content/20 text-primary-content flex items-center justify-center transition-colors cursor-pointer">
<i class="ph ph-caret-right text-lg"></i>
</button>
</div>
<div class="flex justify-center gap-2 mt-5">
<button type="button" @click="activeImage = 0" aria-label="Toon afbeelding 1"
:class="activeImage === 0 ? 'bg-accent' : 'bg-primary-content/30 hover:bg-primary-content/60'"
class="w-2 h-2 rounded-full transition-colors cursor-pointer"></button>
<button type="button" @click="activeImage = 1" aria-label="Toon afbeelding 2"
:class="activeImage === 1 ? 'bg-accent' : 'bg-primary-content/30 hover:bg-primary-content/60'"
class="w-2 h-2 rounded-full transition-colors cursor-pointer"></button>
<button type="button" @click="activeImage = 2" aria-label="Toon afbeelding 3"
:class="activeImage === 2 ? 'bg-accent' : 'bg-primary-content/30 hover:bg-primary-content/60'"
class="w-2 h-2 rounded-full transition-colors cursor-pointer"></button>
<button type="button" @click="activeImage = 3" aria-label="Toon afbeelding 4"
:class="activeImage === 3 ? 'bg-accent' : 'bg-primary-content/30 hover:bg-primary-content/60'"
class="w-2 h-2 rounded-full transition-colors cursor-pointer"></button>
<button type="button" @click="activeImage = 4" aria-label="Toon afbeelding 5"
:class="activeImage === 4 ? 'bg-accent' : 'bg-primary-content/30 hover:bg-primary-content/60'"
class="w-2 h-2 rounded-full transition-colors cursor-pointer"></button>
<button type="button" @click="activeImage = 5" aria-label="Toon afbeelding 6"
:class="activeImage === 5 ? 'bg-accent' : 'bg-primary-content/30 hover:bg-primary-content/60'"
class="w-2 h-2 rounded-full transition-colors cursor-pointer"></button>
</div>
</div>
</div>
</section>
<section class="py-16 md:py-24">
<div class="max-w-6xl mx-auto px-4 md:px-8 mb-16 flex items-center justify-between">
<div class="w-[76px]" aria-hidden="true"></div>
<h2 class="flex-1 text-4xl md:text-5xl font-heading text-primary text-center">Recent work</h2>
<div class="inline-flex items-center gap-1 rounded-full border border-base-300 bg-base-100 p-1 shadow-sm">
<button type="button" @click="portfolioView = 'single'" aria-label="Single view"
:class="portfolioView === 'single' ? 'bg-primary text-primary-content' : 'text-base-content/50 hover:text-primary'"
class="w-9 h-9 rounded-full flex items-center justify-center transition-colors cursor-pointer">
<i class="ph ph-rows text-lg"></i>
</button>
<button type="button" @click="portfolioView = 'grid'" aria-label="Grid view"
:class="portfolioView === 'grid' ? 'bg-primary text-primary-content' : 'text-base-content/50 hover:text-primary'"
class="w-9 h-9 rounded-full flex items-center justify-center transition-colors cursor-pointer">
<i class="ph ph-squares-four text-lg"></i>
</button>
</div>
</div>
<div x-show="portfolioView === 'single'" x-cloak>
<a href="https://bene.be/portfolio/detail_portfolio/eurabo" class="group block w-full no-underline mb-20 md:mb-40">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/5] sm:aspect-[3/2] md:aspect-auto md:h-[85vh]">
<img src="https://bene.be/assets/uploads/portfolio/eurabo/_large/2668/eurabo-van-wrap.webp" alt="Eurabo" loading="lazy" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105">
<div class="absolute inset-0 bg-primary/0 group-hover:bg-primary/10 transition-colors duration-700"></div>
</div>
<div class="max-w-6xl mx-auto px-4 md:px-8 mt-6 md:mt-10">
<div class="grid md:grid-cols-12 gap-4 md:gap-6 items-end">
<div class="md:col-span-9">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-accent mb-2">
E-mail marketing
</p>
<h3 class="text-4xl sm:text-6xl md:text-[9vw] font-heading font-bold tracking-tight text-primary uppercase leading-[0.9] m-0">
Eurabo
</h3>
</div>
<div class="md:col-span-3 md:text-right md:pb-2">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-base-content/50 inline-flex items-center gap-1">
View project <i class="ph ph-arrow-up-right"></i>
</p>
</div>
</div>
<div class="mt-6 md:mt-8 w-16 h-1.5 bg-accent group-hover:w-40 transition-all duration-700 ease-in-out"></div>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/fienco" class="group block w-full no-underline mb-20 md:mb-40">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/5] sm:aspect-[3/2] md:aspect-auto md:h-[85vh]">
<img src="https://bene.be/assets/uploads/portfolio/Fienco/_large/2816/Fienco-Instagram-00.webp" alt="Fienco" loading="lazy" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105">
<div class="absolute inset-0 bg-primary/0 group-hover:bg-primary/10 transition-colors duration-700"></div>
</div>
<div class="max-w-6xl mx-auto px-4 md:px-8 mt-6 md:mt-10">
<div class="grid md:grid-cols-12 gap-4 md:gap-6 items-end">
<div class="md:col-span-9">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-accent mb-2">
Craft CMS
</p>
<h3 class="text-4xl sm:text-6xl md:text-[9vw] font-heading font-bold tracking-tight text-primary uppercase leading-[0.9] m-0">
Fienco
</h3>
</div>
<div class="md:col-span-3 md:text-right md:pb-2">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-base-content/50 inline-flex items-center gap-1">
View project <i class="ph ph-arrow-up-right"></i>
</p>
</div>
</div>
<div class="mt-6 md:mt-8 w-16 h-1.5 bg-accent group-hover:w-40 transition-all duration-700 ease-in-out"></div>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/marie_fleurie" class="group block w-full no-underline mb-20 md:mb-40">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/5] sm:aspect-[3/2] md:aspect-auto md:h-[85vh]">
<img src="https://bene.be/assets/uploads/portfolio/mariefleurie/_large/nele-arne-emma-de-kinder-367-van-1001-high.webp" alt="Marie Fleurie" loading="lazy" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105">
<div class="absolute inset-0 bg-primary/0 group-hover:bg-primary/10 transition-colors duration-700"></div>
</div>
<div class="max-w-6xl mx-auto px-4 md:px-8 mt-6 md:mt-10">
<div class="grid md:grid-cols-12 gap-4 md:gap-6 items-end">
<div class="md:col-span-9">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-accent mb-2">
Logo
</p>
<h3 class="text-4xl sm:text-6xl md:text-[9vw] font-heading font-bold tracking-tight text-primary uppercase leading-[0.9] m-0">
Marie Fleurie
</h3>
</div>
<div class="md:col-span-3 md:text-right md:pb-2">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-base-content/50 inline-flex items-center gap-1">
View project <i class="ph ph-arrow-up-right"></i>
</p>
</div>
</div>
<div class="mt-6 md:mt-8 w-16 h-1.5 bg-accent group-hover:w-40 transition-all duration-700 ease-in-out"></div>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/voedselbanken" class="group block w-full no-underline mb-20 md:mb-40">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/5] sm:aspect-[3/2] md:aspect-auto md:h-[85vh]">
<video class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105" autoplay muted loop playsinline>
<source src="https://bene.be/assets/uploads/portfolio/Voedselbanken/voedselbanken-01.mp4" type="video/mp4">
</video>
<div class="absolute inset-0 bg-primary/0 group-hover:bg-primary/10 transition-colors duration-700"></div>
</div>
<div class="max-w-6xl mx-auto px-4 md:px-8 mt-6 md:mt-10">
<div class="grid md:grid-cols-12 gap-4 md:gap-6 items-end">
<div class="md:col-span-9">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-accent mb-2">
UI/UX/desktop-mobile
</p>
<h3 class="text-4xl sm:text-6xl md:text-[9vw] font-heading font-bold tracking-tight text-primary uppercase leading-[0.9] m-0">
Voedselbanken
</h3>
</div>
<div class="md:col-span-3 md:text-right md:pb-2">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-base-content/50 inline-flex items-center gap-1">
View project <i class="ph ph-arrow-up-right"></i>
</p>
</div>
</div>
<div class="mt-6 md:mt-8 w-16 h-1.5 bg-accent group-hover:w-40 transition-all duration-700 ease-in-out"></div>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/quick_organics" class="group block w-full no-underline mb-20 md:mb-40">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/5] sm:aspect-[3/2] md:aspect-auto md:h-[85vh]">
<img src="https://bene.be/assets/uploads/portfolio/_large/291/Bene-QuickOrganics-03.webp" alt="Quick Organics" loading="lazy" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105">
<div class="absolute inset-0 bg-primary/0 group-hover:bg-primary/10 transition-colors duration-700"></div>
</div>
<div class="max-w-6xl mx-auto px-4 md:px-8 mt-6 md:mt-10">
<div class="grid md:grid-cols-12 gap-4 md:gap-6 items-end">
<div class="md:col-span-9">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-accent mb-2">
Illustration
</p>
<h3 class="text-4xl sm:text-6xl md:text-[9vw] font-heading font-bold tracking-tight text-primary uppercase leading-[0.9] m-0">
Quick Organics
</h3>
</div>
<div class="md:col-span-3 md:text-right md:pb-2">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-base-content/50 inline-flex items-center gap-1">
View project <i class="ph ph-arrow-up-right"></i>
</p>
</div>
</div>
<div class="mt-6 md:mt-8 w-16 h-1.5 bg-accent group-hover:w-40 transition-all duration-700 ease-in-out"></div>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/boetiek_automatiek" class="group block w-full no-underline mb-20 md:mb-40">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/5] sm:aspect-[3/2] md:aspect-auto md:h-[85vh]">
<img src="https://bene.be/assets/uploads/portfolio/_large/404/Bene-Portfolio-BoetiekAutomatiek-Belettering.webp" alt="Boetiek automatiek" loading="lazy" class="w-full h-full object-cover transition-transform duration-[1.5s] ease-out group-hover:scale-105">
<div class="absolute inset-0 bg-primary/0 group-hover:bg-primary/10 transition-colors duration-700"></div>
</div>
<div class="max-w-6xl mx-auto px-4 md:px-8 mt-6 md:mt-10">
<div class="grid md:grid-cols-12 gap-4 md:gap-6 items-end">
<div class="md:col-span-9">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-accent mb-2">
Logo
</p>
<h3 class="text-4xl sm:text-6xl md:text-[9vw] font-heading font-bold tracking-tight text-primary uppercase leading-[0.9] m-0">
Boetiek automatiek
</h3>
</div>
<div class="md:col-span-3 md:text-right md:pb-2">
<p class="text-xs uppercase tracking-[0.3em] font-heading font-bold text-base-content/50 inline-flex items-center gap-1">
View project <i class="ph ph-arrow-up-right"></i>
</p>
</div>
</div>
<div class="mt-6 md:mt-8 w-16 h-1.5 bg-accent group-hover:w-40 transition-all duration-700 ease-in-out"></div>
</div>
</a>
</div>
<div x-show="portfolioView === 'grid'" x-cloak class="max-w-6xl mx-auto px-4 md:px-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-12 mb-16">
<a href="https://bene.be/portfolio/detail_portfolio/eurabo" class="group block no-underline">
<div class="aspect-[4/3] overflow-hidden bg-base-200 mb-4">
<img src="https://bene.be/assets/uploads/portfolio/eurabo/_grid/2668/eurabo-van-wrap.webp" alt="Eurabo" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<h3 class="text-xl md:text-2xl font-heading font-bold tracking-tight text-primary uppercase leading-tight mb-3 group-hover:text-accent transition-colors">
Eurabo
</h3>
<div class="flex flex-wrap gap-1.5">
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
E-mail marketing
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Logo
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Corporate Identity
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Hosting
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Illustration
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Print
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
UI/UX/desktop-mobile
</span>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/fienco" class="group block no-underline">
<div class="aspect-[4/3] overflow-hidden bg-base-200 mb-4">
<img src="https://bene.be/assets/uploads/portfolio/Fienco/_grid/2816/Fienco-Instagram-00.webp" alt="Fienco" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<h3 class="text-xl md:text-2xl font-heading font-bold tracking-tight text-primary uppercase leading-tight mb-3 group-hover:text-accent transition-colors">
Fienco
</h3>
<div class="flex flex-wrap gap-1.5">
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Craft CMS
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Logo
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Corporate Identity
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Hosting
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Print
</span>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/marie_fleurie" class="group block no-underline">
<div class="aspect-[4/3] overflow-hidden bg-base-200 mb-4">
<img src="https://bene.be/assets/uploads/portfolio/mariefleurie/_grid/nele-arne-emma-de-kinder-367-van-1001-high.webp" alt="Marie Fleurie" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<h3 class="text-xl md:text-2xl font-heading font-bold tracking-tight text-primary uppercase leading-tight mb-3 group-hover:text-accent transition-colors">
Marie Fleurie
</h3>
<div class="flex flex-wrap gap-1.5">
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Logo
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Corporate Identity
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Print
</span>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/voedselbanken" class="group block no-underline">
<div class="aspect-[4/3] overflow-hidden bg-base-200 mb-4">
<video class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" autoplay muted loop playsinline>
<source src="https://bene.be/assets/uploads/portfolio/Voedselbanken/voedselbanken-01.mp4" type="video/mp4">
</video>
</div>
<h3 class="text-xl md:text-2xl font-heading font-bold tracking-tight text-primary uppercase leading-tight mb-3 group-hover:text-accent transition-colors">
Voedselbanken
</h3>
<div class="flex flex-wrap gap-1.5">
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
UI/UX/desktop-mobile
</span>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/quick_organics" class="group block no-underline">
<div class="aspect-[4/3] overflow-hidden bg-base-200 mb-4">
<img src="https://bene.be/assets/uploads/portfolio/_grid/291/Bene-QuickOrganics-03.webp" alt="Quick Organics" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<h3 class="text-xl md:text-2xl font-heading font-bold tracking-tight text-primary uppercase leading-tight mb-3 group-hover:text-accent transition-colors">
Quick Organics
</h3>
<div class="flex flex-wrap gap-1.5">
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Illustration
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
UI/UX/desktop-mobile
</span>
</div>
</a>
<a href="https://bene.be/portfolio/detail_portfolio/boetiek_automatiek" class="group block no-underline">
<div class="aspect-[4/3] overflow-hidden bg-base-200 mb-4">
<img src="https://bene.be/assets/uploads/portfolio/_grid/404/Bene-Portfolio-BoetiekAutomatiek-Belettering.webp" alt="Boetiek automatiek" loading="lazy" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700">
</div>
<h3 class="text-xl md:text-2xl font-heading font-bold tracking-tight text-primary uppercase leading-tight mb-3 group-hover:text-accent transition-colors">
Boetiek automatiek
</h3>
<div class="flex flex-wrap gap-1.5">
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Logo
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Corporate Identity
</span>
<span class="text-[9px] uppercase tracking-[0.2em] font-heading font-bold px-2.5 py-1 rounded-full bg-base-200 text-base-content/50">
Print
</span>
</div>
</a>
</div>
</div>
<div class="text-center">
<a href="https://bene.be/portfolio" class="btn btn-sm btn-outline btn-primary rounded-full gap-2 border">View full portfolio <i class="ph ph-arrow-right"></i></a>
</div>
</section>
<section class="bg-base-200 py-16">
<div class="max-w-4xl mx-auto px-4 md:px-8 text-center">
<h2 class="text-4xl md:text-5xl font-heading text-primary mb-4">Our services</h2>
<p class="text-base-content/70 mb-8 max-w-2xl mx-auto">
From webdesign and branding to CMS, SEO and hosting — Bene guides you through the entire process.
</p>
<a href="https://bene.be/services" class="btn btn-primary gap-2">Discover our services <i class="ph ph-arrow-right"></i></a>
</div>
</section>
<section class="py-16 md:py-24 overflow-hidden" x-data>
<div class="max-w-4xl mx-auto px-4 md:px-8 text-center mb-10">
<h2 class="text-4xl md:text-5xl font-heading text-primary mb-4">On my radar</h2>
<div class="hidden sm:flex gap-2 justify-center">
<button type="button" @click="$refs.notesTrack.scrollBy({left: -360, behavior: 'smooth'})" aria-label="Vorige"
class="w-11 h-11 rounded-full border border-base-300 flex items-center justify-center text-primary hover:bg-primary hover:text-primary-content hover:border-primary transition-colors cursor-pointer">
<i class="ph ph-arrow-left text-lg"></i>
</button>
<button type="button" @click="$refs.notesTrack.scrollBy({left: 360, behavior: 'smooth'})" aria-label="Volgende"
class="w-11 h-11 rounded-full border border-base-300 flex items-center justify-center text-primary hover:bg-primary hover:text-primary-content hover:border-primary transition-colors cursor-pointer">
<i class="ph ph-arrow-right text-lg"></i>
</button>
</div>
</div>
<div x-ref="notesTrack" class="scroll-hidden flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-4 px-4 md:px-8">
<a href="https://bene.be/notes/what-we-tell-ai" class="snap-start shrink-0 w-[300px] md:w-[360px] bg-base-200 rounded-box overflow-hidden no-underline block hover:bg-base-300 transition-colors">
<div class="relative w-full aspect-video overflow-hidden bg-base-300">
<img src="https://bene.be/assets/uploads/notes/eu-guidelines-ai-labelling/_grid/AC_186_3x2.webp" alt="What we tell AI" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="p-6">
<p class="text-[10px] uppercase tracking-[0.2em] font-heading font-bold text-accent mb-2">
Link · CreativeMornings </p>
<p class="text-base-content/80 leading-relaxed text-sm">What We Tell AI is an anthropological art project that collects anonymous, handwritten notes about people's relationship with AI, documentin…</p>
</div>
</a>
<a href="https://bene.be/notes/why-its-time-to-forget-the-pecking-order-at-work" class="snap-start shrink-0 w-[300px] md:w-[360px] bg-base-200 rounded-box overflow-hidden no-underline block hover:bg-base-300 transition-colors">
<div class="relative w-full aspect-video overflow-hidden bg-base-300">
<img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fyoutu.be%2FVyn_xLrtZaY%3Fsi%3DNfMRUTLVuoe6epmB?w=400" alt="" loading="lazy" class="w-full h-full object-cover"
onerror="this.remove(); this.parentElement.classList.add('bg-accent'); this.parentElement.querySelector('.thumb-fallback').classList.remove('hidden');">
<div class="thumb-fallback hidden absolute inset-0 flex items-center justify-center">
<i class="ph ph-play-circle text-4xl text-accent-content opacity-70"></i>
</div>
</div>
<div class="p-6">
<p class="text-[10px] uppercase tracking-[0.2em] font-heading font-bold text-accent mb-2">
Video · TED </p>
<p class="text-base-content/80 leading-relaxed text-sm">Organizations are often run according to “the superchicken model,” where the value is placed on star employees who outperform others. And ye…</p>
</div>
</a>
<a href="https://bene.be/notes/kikk-festival-2026" class="snap-start shrink-0 w-[300px] md:w-[360px] bg-base-200 rounded-box overflow-hidden no-underline block hover:bg-base-300 transition-colors">
<div class="relative w-full aspect-video overflow-hidden bg-base-300">
<img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fkikkfestival.be%2F?w=400" alt="" loading="lazy" class="w-full h-full object-cover"
onerror="this.remove(); this.parentElement.classList.add('bg-primary'); this.parentElement.querySelector('.thumb-fallback').classList.remove('hidden');">
<div class="thumb-fallback hidden absolute inset-0 flex items-center justify-center">
<i class="ph ph-link text-4xl text-primary-content opacity-70"></i>
</div>
</div>
<div class="p-6">
<p class="text-[10px] uppercase tracking-[0.2em] font-heading font-bold text-accent mb-2">
Link · KIKK Festival </p>
<p class="text-base-content/80 leading-relaxed text-sm">Van 22 tot 25 oktober strijkt de 15e editie van KIKK neer in Namen: meer dan 40 talks over AI, creative coding, bioart, design en data visua…</p>
</div>
</a>
<a href="https://bene.be/notes/kikk-festival-2025-talks" class="snap-start shrink-0 w-[300px] md:w-[360px] bg-base-200 rounded-box overflow-hidden no-underline block hover:bg-base-300 transition-colors">
<div class="relative w-full aspect-video overflow-hidden bg-base-300">
<img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fyoutube.com%2Fplaylist%3Flist%3DPLbyzWr7ldXrUOJzI1CMCRshRcRG7ZSi3r%26si%3D8UECQR4_JEVULAOR?w=400" alt="" loading="lazy" class="w-full h-full object-cover"
onerror="this.remove(); this.parentElement.classList.add('bg-neutral'); this.parentElement.querySelector('.thumb-fallback').classList.remove('hidden');">
<div class="thumb-fallback hidden absolute inset-0 flex items-center justify-center">
<i class="ph ph-link text-4xl text-neutral-content opacity-70"></i>
</div>
</div>
<div class="p-6">
<p class="text-[10px] uppercase tracking-[0.2em] font-heading font-bold text-accent mb-2">
Link · KIKK Festival </p>
<p class="text-base-content/80 leading-relaxed text-sm">De opgenomen talks van vorig jaar staan intussen online. Goede opwarmer voor de editie van dit jaar, en de moeite om terug te kijken als je …</p>
</div>
</a>
<a href="https://bene.be/notes/dot-one-antwerp-2026" class="snap-start shrink-0 w-[300px] md:w-[360px] bg-base-200 rounded-box overflow-hidden no-underline block hover:bg-base-300 transition-colors">
<div class="relative w-full aspect-video overflow-hidden bg-base-300">
<img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fcraftcms.com%2Fevents%2Fdot-one-antwerp-2026?w=400" alt="" loading="lazy" class="w-full h-full object-cover"
onerror="this.remove(); this.parentElement.classList.add('bg-accent'); this.parentElement.querySelector('.thumb-fallback').classList.remove('hidden');">
<div class="thumb-fallback hidden absolute inset-0 flex items-center justify-center">
<i class="ph ph-link text-4xl text-accent-content opacity-70"></i>
</div>
</div>
<div class="p-6">
<p class="text-[10px] uppercase tracking-[0.2em] font-heading font-bold text-accent mb-2">
Link · Craft CMS </p>
<p class="text-base-content/80 leading-relaxed text-sm">Op 20 oktober 2026 organiseert Craft CMS zelf Dot One in Antwerpen: een dag met een diepgaande Craft 6-presentatie en Q&A, plus talks van he…</p>
</div>
</a>
<a href="https://bene.be/notes/photoshop-innovations-2026" class="snap-start shrink-0 w-[300px] md:w-[360px] bg-base-200 rounded-box overflow-hidden no-underline block hover:bg-base-300 transition-colors">
<div class="relative w-full aspect-video overflow-hidden bg-base-300">
<img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fblog.adobe.com%2Fen%2Fpublish%2F2026%2F08%2F27%2Fnew-photoshop-innovations-bring-you-more-choice-control-at-every-stage-of-your-creative-process?w=400" alt="" loading="lazy" class="w-full h-full object-cover"
onerror="this.remove(); this.parentElement.classList.add('bg-primary'); this.parentElement.querySelector('.thumb-fallback').classList.remove('hidden');">
<div class="thumb-fallback hidden absolute inset-0 flex items-center justify-center">
<i class="ph ph-link text-4xl text-primary-content opacity-70"></i>
</div>
</div>
<div class="p-6">
<p class="text-[10px] uppercase tracking-[0.2em] font-heading font-bold text-accent mb-2">
Link · Adobe </p>
<p class="text-base-content/80 leading-relaxed text-sm">Nieuwe Photoshop-functies draaien om keuze: een Light Adjustment Layer met Camera Raw-niveau lichtcontrole, Instruct Edit met Masks dat AI d…</p>
</div>
</a>
<a href="https://bene.be/notes/the-new-ai-slider-in-photoshop-2026-useful-or-a-total-waste" class="snap-start shrink-0 w-[300px] md:w-[360px] bg-base-200 rounded-box overflow-hidden no-underline block hover:bg-base-300 transition-colors">
<div class="relative w-full aspect-video overflow-hidden bg-base-300">
<img src="https://s0.wp.com/mshots/v1/https%3A%2F%2Fphlearn.com%2Ftutorial%2Fnew-ai-slider-in-photoshop-2026%2F?w=400" alt="" loading="lazy" class="w-full h-full object-cover"
onerror="this.remove(); this.parentElement.classList.add('bg-accent'); this.parentElement.querySelector('.thumb-fallback').classList.remove('hidden');">
<div class="thumb-fallback hidden absolute inset-0 flex items-center justify-center">
<i class="ph ph-article text-4xl text-accent-content opacity-70"></i>
</div>
</div>
<div class="p-6">
<p class="text-[10px] uppercase tracking-[0.2em] font-heading font-bold text-accent mb-2">
Blog post · PHLEARN </p>
<p class="text-base-content/80 leading-relaxed text-sm">Discover Photoshop 2026’s new “Precision Flow” AI slider. We test Adobe’s latest feature to see if it’s worth your credits: how it works, ho…</p>
</div>
</a>
<a href="https://bene.be/notes/dolly-parton" class="snap-start shrink-0 w-[300px] md:w-[360px] bg-base-200 rounded-box overflow-hidden no-underline block hover:bg-base-300 transition-colors">
<div class="relative w-full aspect-video overflow-hidden bg-base-300">
<img src="https://bene.be/assets/uploads/Notes/_grid/3999/20260830-DollyParton.webp" alt="Dolly Parton (1946-2026)" loading="lazy" class="w-full h-full object-cover">
</div>
<div class="p-6">
<p class="text-[10px] uppercase tracking-[0.2em] font-heading font-bold text-accent mb-2">
Quote </p>
<p class="text-base-content/80 leading-relaxed text-sm">“Find out who you are and do it on purpose.”
― Dolly Parton</p>
</div>
</a>
</div>
</section>
<section class="max-w-6xl mx-auto px-4 md:px-8 py-16">
<h2 class="text-4xl md:text-5xl font-heading text-primary mb-12 text-center">Latest from the blog</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-10">
<article>
<a href="https://bene.be/blog/comments/t-shaped-designer" class="group block no-underline">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/3] mb-5">
<img src="https://bene.be/assets/uploads/blog/t-shaped-designer/t-shaped-designer.jpg" alt="T-Shaped Designer" loading="lazy"
class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105">
</div>
<p class="text-sm text-accent font-heading uppercase tracking-wide mb-1">30 Aug 2026</p>
<h3 class="text-2xl font-heading mb-2 text-primary group-hover:text-accent transition-colors">T-Shaped Designer</h3>
<div class="prose-bene text-base-content/70 text-sm"><p>Dit is een fragment uit het slothoofdstuk van mijn boek <a href="https://bene.be/gids/praktische-gids-voor-design-research">Praktische Gids voor Design Research</a>. Dit is het moment waarop je het volledige Double Diamond-proces hebt doorlopen (Discover, Define, Ideate, Prototype), en de vraag rijst: wat heb je nu eigenlijk opgebouwd, buiten je vakmanschap als vormgever?</p></div> </a>
</article>
<article>
<a href="https://bene.be/blog/comments/10-boeken-voor-visuele-ontwerpers" class="group block no-underline">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/3] mb-5">
<img src="https://bene.be/assets/gids/boek/cover.jpg" alt="10 boeken die elke visuele ontwerper zou moeten lezen" loading="lazy"
class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105">
</div>
<p class="text-sm text-accent font-heading uppercase tracking-wide mb-1">29 Jul 2026</p>
<h3 class="text-2xl font-heading mb-2 text-primary group-hover:text-accent transition-colors">10 boeken die elke visuele ontwerper zou moeten lezen</h3>
<div class="prose-bene text-base-content/70 text-sm"><p>Op zoek naar goede leesvoer als grafisch of digitaal ontwerper? Uit het hoofdstuk “Aanbevolen literatuur voor visuele ontwerpers” in de Praktische Gids voor Design Research selecteerden we tien boeken die je onderzoek, je proces én je ontwerpen naar een hoger niveau tillen.</p></div> </a>
</article>
<article>
<a href="https://bene.be/blog/comments/10-years-of-daily-sketching" class="group block no-underline">
<div class="relative w-full overflow-hidden bg-base-200 aspect-[4/3] mb-5">
<img src="https://bene.be/assets/uploads/2012-blog/20120329/sketch02.jpg" alt="10 years of daily sketching" loading="lazy"
class="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105">
</div>
<p class="text-sm text-accent font-heading uppercase tracking-wide mb-1">12 Jul 2026</p>
<h3 class="text-2xl font-heading mb-2 text-primary group-hover:text-accent transition-colors">10 years of daily sketching</h3>
<div class="prose-bene text-base-content/70 text-sm"><p>10 years of daily sketching ft. Zach Lieberman (MIT Media Lab) | Config 2026</p></div> </a>
</article>
</div>
<div class="text-center mt-12">
<a href="https://bene.be/blog" class="btn btn-sm btn-outline btn-primary rounded-full gap-2 border">All blog posts <i class="ph ph-arrow-right"></i></a>
</div>
</section>
</main>
<footer class="bg-base-200 border-t border-base-300 mt-16">
<div class="max-w-6xl mx-auto px-4 md:px-8 py-10">
<div class="flex flex-wrap justify-center gap-4 mb-8">
<a href="https://benev.medium.com" target="_blank" rel="noopener noreferrer"
class="btn btn-sm btn-outline btn-primary rounded-full gap-2 border">
<i class="ph ph-medium-logo text-base"></i> Medium
</a>
<a href="https://dribbble.com/Bene" target="_blank" rel="noopener noreferrer"
class="btn btn-sm btn-outline btn-primary rounded-full gap-2 border">
<i class="ph ph-dribbble-logo text-base"></i> Dribbble
</a>
<a href="https://instagram.com/bene.belgium" target="_blank" rel="noopener noreferrer"
class="btn btn-sm btn-outline btn-primary rounded-full gap-2 border">
<i class="ph ph-instagram-logo text-base"></i> Instagram
</a>
<a href="https://www.linkedin.com/company/bene.be/" target="_blank" rel="noopener noreferrer"
class="btn btn-sm btn-outline btn-primary rounded-full gap-2 border">
<i class="ph ph-linkedin-logo text-base"></i> LinkedIn
</a>
<a href="https://www.behance.net/benev" target="_blank" rel="noopener noreferrer"
class="btn btn-sm btn-outline btn-primary rounded-full gap-2 border">
<i class="ph ph-behance-logo text-base"></i> Behance
</a>
<a href="https://pinterest.com/bene_vdw/" target="_blank" rel="noopener noreferrer"
class="btn btn-sm btn-outline btn-primary rounded-full gap-2 border">
<i class="ph ph-pinterest-logo text-base"></i> Pinterest
</a>
</div>
<div class="flex flex-col md:flex-row justify-between items-center gap-2 text-sm text-base-content/70 border-t border-base-300 pt-6">
<p>© 2000–2026 Bene.be bv · info at bene dot be · <a href="https://craftcms.com" target="_blank" rel="noopener noreferrer" class="link link-hover">Craft CMS</a> 5.10.14 · <a href="https://craftcms.com/partners/benebe" target="_blank" rel="noopener noreferrer" class="link link-hover">Craft CMS Partner</a></p>
<p>
<a href="https://bene.be/legal_notice" class="link link-hover">Legal notice</a>
·
<button type="button" @click="window.dispatchEvent(new CustomEvent('bene-cookie-reopen'))" class="link link-hover cursor-pointer">Cookie settings</button>
·
<a href="https://forms.gle/HCzJbr3Cc64nX61d8" target="_blank" rel="noopener noreferrer" class="link link-hover">Feedback</a>
</p>
</div>
</div>
</footer>
<button @click="window.scrollTo({ top: 0, behavior: 'smooth' })" type="button"
x-show="scrollY > 400" x-cloak
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
aria-label="Back to top"
class="fixed bottom-6 right-6 z-50 w-12 h-12 rounded-full bg-primary text-primary-content shadow-lg flex items-center justify-center hover:bg-accent transition-colors duration-300 cursor-pointer">
<i class="ph ph-arrow-up text-xl"></i>
</button>
<div x-data="beneCookieConsent()" x-init="init()"
x-on:bene-cookie-reopen.window="showBanner = true"
x-show="showBanner" x-cloak
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 translate-y-4"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0 translate-y-4"
class="fixed z-[70] bottom-4 left-4 right-4 sm:right-auto sm:w-[340px] bg-primary text-primary-content rounded-box shadow-xl p-6"
role="dialog" aria-label="Cookie consent">
<button type="button" @click="reject()" aria-label="Dismiss"
class="absolute top-4 right-4 text-primary-content/50 hover:text-primary-content transition-colors cursor-pointer">
<i class="ph ph-x text-lg"></i>
</button>
<h2 class="font-heading font-bold text-lg pr-6 mb-2">This website uses cookies.</h2>
<p class="text-sm text-primary-content/70 mb-5">
We use strictly necessary cookies to run this site, and, with your permission, privacy-friendly analytics and embedded content (like Instagram posts) that may set their own cookies.
<a href="https://bene.be/legal_notice" class="underline hover:text-primary-content">Read more</a>.
</p>
<div class="flex flex-col gap-2">
<button type="button" @click="acceptAll()" class="btn btn-accent rounded-full w-full">Accept all</button>
<button type="button" @click="reject()" class="btn btn-outline rounded-full w-full border-primary-content/30 text-primary-content hover:bg-primary-content/10 hover:border-primary-content/30">Reject non-essential</button>
</div>
</div>
<script>
function beneCookieConsent() {
return {
showBanner: false,
init() {
const consent = this.getConsent();
if (!consent) {
this.showBanner = true;
} else if (consent.analytics) {
if (window.beneLoadAnalytics) window.beneLoadAnalytics();
if (window.beneLoadInstagramEmbeds) window.beneLoadInstagramEmbeds();
}
},
getConsent() {
try {
return JSON.parse(localStorage.getItem('bene-cookie-consent'));
} catch (e) {
return null;
}
},
setConsent(analytics) {
localStorage.setItem('bene-cookie-consent', JSON.stringify({
necessary: true,
analytics: analytics,
timestamp: new Date().toISOString()
}));
this.showBanner = false;
if (analytics) {
if (window.beneLoadAnalytics) window.beneLoadAnalytics();
if (window.beneLoadInstagramEmbeds) window.beneLoadInstagramEmbeds();
}
},
acceptAll() {
this.setConsent(true);
},
reject() {
this.setConsent(false);
}
};
}
</script>
<script>
(function () {
// Adds a small, subtle "report this image" link right under every
// photo credit on the site (running-text photos and portfolio
// galleries), so a rights holder can flag a possible copyright
// issue exactly where the image appears — see /legal_notice.
var feedbackUrl = 'https://forms.gle/HCzJbr3Cc64nX61d8';
var captions = document.querySelectorAll('.prose-bene figure.image figcaption, .js-photo-caption');
captions.forEach(function (caption) {
if (!caption.textContent.trim() || caption.querySelector('.js-rights-report')) return;
var link = document.createElement('a');
link.href = feedbackUrl;
link.target = '_blank';
link.rel = 'noopener noreferrer';
link.className = 'js-rights-report block text-[11px] not-italic normal-case tracking-normal font-normal text-base-content/40 hover:text-accent transition-colors mt-0.5';
link.textContent = 'Rechten niet correct? Laat het weten.';
caption.appendChild(link);
});
})();
</script>
<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","author":{"@id":"#identity"},"copyrightHolder":{"@id":"#identity"},"creator":{"@id":"#creator"},"mainEntityOfPage":"https://bene.be/","url":"https://bene.be/"},{"@id":"#identity","@type":"Organization"},{"@id":"#creator","@type":"Organization"},{"@type":"BreadcrumbList","description":"Breadcrumbs list","itemListElement":[{"@type":"ListItem","item":"https://bene.be/","name":"Homepage","position":1}],"name":"Breadcrumbs"}]}</script></body>
</html>
Shown as plain text. Nothing from bene.be runs in your browser. Underlined links open their own code view, and line numbers give you a link to share.