Koffiebox.com - Homepage Blueprint (Mobile Optimized)<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n espresso: '#2C1A11',\n latte: '#F5F1E6',\n karamel: '#C48A55',\n melkschuim: '#FFFFFF'\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n montserrat: ['Montserrat', 'sans-serif']\n },\n screens: {\n 'xs': '400px'\n }\n }\n }\n }\n <\/script>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n \n <style>\n body {\n background-color: #F5F1E6;\n color: #2C1A11;\n -webkit-tap-highlight-color: transparent; \/* Voorkom blauwe gloed bij tikken op mobiel *\/\n }\n \n \/* Smooth transitions *\/\n .transition-all-300 {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased font-sans flex flex-col min-h-screen\">\n\n \n <header class=\"bg-espresso text-white py-3 sm:py-4 px-4 sm:px-6 sticky top-0 z-50 shadow-md\">\n <div class=\"max-w-6xl mx-auto flex justify-between items-center\">\n \n \n <a href=\"#\" class=\"flex items-center space-x-2 sm:space-x-3 active:scale-95 transition-transform duration-200\">\n <div class=\"border-2 border-white p-1.5 sm:p-2 rounded flex items-center justify-center bg-transparent\">\n <i class=\"fa-solid fa-mug-hot text-lg sm:text-xl text-white\"><\/i>\n <\/div>\n <span class=\"font-montserrat font-extrabold text-xl sm:text-2xl tracking-wider select-none\">\n KOFFIEBOX<span class=\"text-karamel\">.COM<\/span>\n <\/span>\n <\/a>\n \n \n <nav class=\"hidden lg:flex space-x-8 font-montserrat font-semibold\">\n <a href=\"\/?page_id=78\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Producten<\/a>\n <a href=\"#hoe-werkt-het\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Hoe werkt het?<\/a>\n <a href=\"#proefbox\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Onze Box<\/a>\n <a href=\"#over-ons\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Ons Verhaal<\/a>\n <\/nav>\n\n \n <div class=\"flex items-center space-x-3\">\n \n <a href=\"\/?page_id=7\" class=\"text-white hover:text-karamel p-2 relative active:scale-95 transition-all-300\" aria-label=\"Winkelwagen bekijken\">\n <i class=\"fa-solid fa-cart-shopping text-xl sm:text-2xl\"><\/i>\n <\/a>\n\n <a href=\"#proefbox\" class=\"hidden xs:inline-block bg-karamel hover:bg-opacity-90 active:scale-95 text-white font-montserrat font-bold py-2 px-4 sm:px-6 rounded-lg transition-all-300 text-sm sm:text-base shadow-md\">\n Bestel Nu\n <\/a>\n \n \n <button id=\"mobileMenuBtn\" class=\"lg:hidden p-2 text-white focus:outline-none focus:ring-2 focus:ring-karamel focus:ring-offset-2 focus:ring-offset-espresso rounded-lg active:scale-90 transition-transform duration-100\" aria-label=\"Menu openen\">\n <i class=\"fa-solid fa-bars text-2xl\" id=\"menuIcon\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"mobileMenu\" class=\"hidden lg:hidden absolute top-full left-0 w-full bg-espresso border-t border-espresso-light shadow-xl transition-all duration-300 transform origin-top scale-y-0 opacity-0\">\n <nav class=\"flex flex-col p-6 space-y-4 font-montserrat font-semibold text-lg text-center\">\n <a href=\"\/?post_type=product\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Producten<\/a>\n <a href=\"#hoe-werkt-het\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Hoe werkt het?<\/a>\n <a href=\"#proefbox\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Onze Box<\/a>\n <a href=\"#over-ons\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Ons Verhaal<\/a>\n <a href=\"\/?page_id=7\" class=\"mobile-nav-link py-3 text-karamel border-b border-white border-opacity-5 transition-colors duration-200\"><i class=\"fa-solid fa-cart-shopping mr-2\"><\/i>Bekijk Winkelwagen<\/a>\n <a href=\"#proefbox\" class=\"mobile-nav-link bg-karamel text-white py-3.5 rounded-xl shadow-lg hover:bg-opacity-90 active:scale-95 transition-all-300 text-base\">Bestel de Proefbox (\u20ac24,95)<\/a>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <section class=\"py-8 sm:py-16 px-4 sm:px-6 max-w-6xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-12 items-center justify-between min-h-fit lg:min-h-[550px] w-full\">\n \n <div class=\"w-full lg:w-1\/2 flex flex-col justify-center text-center lg:text-left order-2 lg:order-1 mt-6 lg:mt-0\">\n <h1 class=\"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-espresso leading-tight tracking-tight mb-4 sm:mb-6\">\n Ontdek jouw nieuwe favoriete koffie\n <\/h1>\n <p class=\"text-base sm:text-lg md:text-xl text-espresso text-opacity-85 mb-6 sm:mb-8 leading-relaxed max-w-xl mx-auto lg:mx-0\">\n Een smaakvolle ontdekkingsreis op de mat. Ontvang <strong class=\"font-semibold text-espresso\">30 verschillende Nespresso\u00ae-cupjes<\/strong> uit binnen- en buitenland in \u00e9\u00e9n brievenbusbox. \n <\/p>\n <div class=\"flex flex-col xs:flex-row gap-3.5 w-full max-w-md mx-auto lg:mx-0 justify-center lg:justify-start\">\n <a href=\"#proefbox\" class=\"w-full xs:w-auto bg-karamel hover:bg-opacity-90 active:scale-95 text-white font-montserrat font-bold py-3.5 px-6 sm:px-8 rounded-xl text-center text-base sm:text-lg transition-all-300 shadow-lg flex items-center justify-center gap-2\">\n Bestel de Proefbox (\u20ac24,95)\n <\/a>\n <a href=\"#hoe-werkt-het\" class=\"w-full xs:w-auto border-2 border-espresso text-espresso hover:bg-espresso hover:text-white active:scale-95 font-montserrat font-bold py-3.5 px-6 sm:px-8 rounded-xl text-center text-base sm:text-lg transition-all-300 flex items-center justify-center\">\n Hoe werkt het?\n <\/a>\n <\/div>\n \n \n <div class=\"mt-6 sm:mt-8 flex flex-col xs:flex-row justify-center lg:justify-start items-center gap-3 sm:gap-6 text-sm font-semibold text-espresso text-opacity-70\">\n <span class=\"flex items-center\"><i class=\"fa-solid fa-envelope-open-text text-karamel text-base mr-2.5\"><\/i>Past door de brievenbus<\/span>\n <span class=\"flex items-center\"><i class=\"fa-solid fa-check text-karamel text-base mr-2.5\"><\/i>Gratis verzending (NL & BE)<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full lg:w-1\/2 flex justify-center order-1 lg:order-2 px-2 sm:px-0\">\n <div class=\"bg-[#D2B48C] border-4 border-[#8B5A2B] rounded-2xl p-5 sm:p-8 shadow-2xl w-full max-w-[340px] xs:max-w-[400px] relative aspect-[4\/3] flex flex-col justify-between transform rotate-1 hover:rotate-0 transition-transform duration-300 cursor-pointer select-none\" id=\"kraftBox\">\n \n <div class=\"border-2 border-dashed border-[#5C3A21] rounded-xl p-3 sm:p-4 text-center\">\n <i class=\"fa-solid fa-mug-hot text-3xl sm:text-4xl text-[#5C3A21] mb-1 sm:mb-2\"><\/i>\n <h3 class=\"font-montserrat font-extrabold text-xl sm:text-2xl text-[#5C3A21] tracking-widest\">KOFFIEBOX<\/h3>\n <p class=\"text-[10px] text-[#5C3A21] font-bold tracking-wider\">100% AMBACHTELIJKE SELECTIE<\/p>\n <\/div>\n <div class=\"flex justify-between items-end mt-4\">\n <span class=\"text-[10px] text-[#5C3A21] font-mono leading-none\">POSTNL BRIEVENBUSPAKJE<\/span>\n <i class=\"fa-solid fa-qrcode text-4xl sm:text-5xl text-[#5C3A21] active:scale-90 transition-transform duration-100\" id=\"visualQr\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"hoe-werkt-het\" class=\"bg-melkschuim py-12 sm:py-20 px-4 sm:px-6 border-y border-espresso border-opacity-10 w-full\">\n <div class=\"max-w-6xl mx-auto\">\n <h2 class=\"text-2xl sm:text-3xl md:text-4xl font-bold text-center text-espresso mb-3 sm:mb-4\">\n Jouw koffieproeverij in 3 stappen\n <\/h2>\n <p class=\"text-center text-espresso text-opacity-75 text-base sm:text-lg max-w-2xl mx-auto mb-10 sm:mb-16 leading-relaxed\">\n Geen miskopen meer in de supermarkt. Wij maken het ontdekken van nieuwe koffie eenvoudig, leuk en interactief.\n <\/p>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8\">\n \n <div class=\"p-6 sm:p-8 rounded-2xl bg-latte border border-espresso border-opacity-5 text-center shadow-sm flex flex-col items-center\">\n <div class=\"w-12 h-12 sm:w-16 sm:h-16 bg-karamel text-white rounded-full flex items-center justify-center text-xl sm:text-2xl font-bold mb-4 sm:mb-6 shadow-md select-none\">\n 1\n <\/div>\n <h3 class=\"text-lg sm:text-xl font-bold text-espresso mb-2 sm:mb-4\">Ontvang & Ontdek<\/h3>\n <p class=\"text-espresso text-opacity-80 text-sm sm:text-base leading-relaxed max-w-xs md:max-w-none\">\n Wij selecteren 30 verschillende cupjes. Van bekende A-merken tot unieke en exclusieve pareltjes uit Europa.\n <\/p>\n <\/div>\n\n \n <div class=\"p-6 sm:p-8 rounded-2xl bg-latte border border-espresso border-opacity-5 text-center shadow-sm flex flex-col items-center\">\n <div class=\"w-12 h-12 sm:w-16 sm:h-16 bg-karamel text-white rounded-full flex items-center justify-center text-xl sm:text-2xl font-bold mb-4 sm:mb-6 shadow-md select-none\">\n 2\n <\/div>\n <h3 class=\"text-lg sm:text-xl font-bold text-espresso mb-2 sm:mb-4\">Proef & Beoordeel<\/h3>\n <p class=\"text-espresso text-opacity-80 text-sm sm:text-base leading-relaxed max-w-xs md:max-w-none\">\n Gebruik de meegeleverde menukaart en scan de QR-code. Beoordeel elke smaak direct op je telefoon en vind jouw 10-uit-10 koffie.\n <\/p>\n <\/div>\n\n \n <div class=\"p-6 sm:p-8 rounded-2xl bg-latte border border-espresso border-opacity-5 text-center shadow-sm flex flex-col items-center\">\n <div class=\"w-12 h-12 sm:w-16 sm:h-16 bg-karamel text-white rounded-full flex items-center justify-center text-xl sm:text-2xl font-bold mb-4 sm:mb-6 shadow-md select-none\">\n 3\n <\/div>\n <h3 class=\"text-lg sm:text-xl font-bold text-espresso mb-2 sm:mb-4\">Bestel Alleen Je Favoriet<\/h3>\n <p class=\"text-espresso text-opacity-80 text-sm sm:text-base leading-relaxed max-w-xs md:max-w-none\">\n Helemaal verliefd geworden op cupje #14? Bestel met \u00e9\u00e9n klik een voordelige grootverpakking van alleen jouw favoriete smaak.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"proefbox\" class=\"py-12 sm:py-20 px-4 sm:px-6 max-w-4xl mx-auto w-full\">\n <div class=\"bg-melkschuim rounded-3xl border border-espresso border-opacity-10 shadow-xl overflow-hidden grid grid-cols-1 md:grid-cols-2\">\n \n <div class=\"bg-[#F0E6D2] p-6 sm:p-8 flex flex-col justify-center items-center relative min-h-[260px] sm:min-h-[300px]\">\n <span class=\"absolute top-4 left-4 bg-espresso text-white font-montserrat font-bold text-[10px] sm:text-xs py-1.5 px-3 rounded-full uppercase tracking-wider select-none z-10\">\n Bestseller\n <\/span>\n <div class=\"bg-[#D2B48C] border-2 border-[#8B5A2B] rounded-xl p-4 sm:p-6 shadow-lg w-full max-w-[240px] sm:max-w-[280px] aspect-[4\/3] flex flex-col justify-between transform hover:scale-105 transition-transform duration-300\">\n <div class=\"border border-dashed border-[#5C3A21] p-2 text-center rounded-lg\">\n <span class=\"font-montserrat font-extrabold text-[#5C3A21] text-base sm:text-lg tracking-widest\">KOFFIEBOX<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-[#5C3A21]\">\n <span class=\"text-[9px] sm:text-[10px] font-bold\">PROEFBOX - 30 CUPS<\/span>\n <i class=\"fa-solid fa-qrcode text-2xl sm:text-3xl\"><\/i>\n <\/div>\n <\/div>\n \n <div class=\"flex space-x-2.5 mt-5 sm:mt-6\">\n <div class=\"w-5 h-5 rounded-full bg-purple-600 shadow-md border-2 border-white transform hover:scale-110 transition-transform cursor-pointer\"><\/div>\n <div class=\"w-5 h-5 rounded-full bg-red-600 shadow-md border-2 border-white transform hover:scale-110 transition-transform cursor-pointer\"><\/div>\n <div class=\"w-5 h-5 rounded-full bg-amber-500 shadow-md border-2 border-white transform hover:scale-110 transition-transform cursor-pointer\"><\/div>\n <div class=\"w-5 h-5 rounded-full bg-blue-600 shadow-md border-2 border-white transform hover:scale-110 transition-transform cursor-pointer\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"p-6 sm:p-8 flex flex-col justify-between\">\n <div>\n <h2 class=\"text-xl sm:text-2xl md:text-3xl font-bold text-espresso mb-1\">Koffiebox Proefbox<\/h2>\n <p class=\"text-xs sm:text-sm font-semibold text-karamel mb-4 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-mobile-screen-button\"><\/i> Inclusief interactieve digitale menukaart\n <\/p>\n \n <div class=\"flex items-baseline space-x-2 mb-5 sm:mb-6\">\n <span class=\"text-3xl sm:text-4xl font-extrabold text-espresso\">\u20ac24,95<\/span>\n <span class=\"text-xs sm:text-sm text-espresso text-opacity-60\">incl. btw & gratis verzending<\/span>\n <\/div>\n\n <ul class=\"space-y-3 text-espresso text-opacity-85 text-sm sm:text-base mb-6 sm:mb-8\">\n <li class=\"flex items-start\"><i class=\"fa-solid fa-circle-check text-karamel text-base mr-3 mt-0.5\"><\/i><span>30 verschillende koffiecupjes (Nespresso\u00ae-geschikt)<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fa-solid fa-circle-check text-karamel text-base mr-3 mt-0.5\"><\/i><span>Exclusieve smaken uit Europa<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fa-solid fa-circle-check text-karamel text-base mr-3 mt-0.5\"><\/i><span>Handig A4-koffiemenu om smaaknotities te maken<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fa-solid fa-circle-check text-karamel text-base mr-3 mt-0.5\"><\/i><span>Past door de brievenbus (thuisblijven is niet nodig!)<\/span><\/li>\n <\/ul>\n <\/div>\n\n \n <button class=\"w-full bg-karamel hover:bg-opacity-90 active:scale-95 text-white font-montserrat font-bold py-3.5 sm:py-4 rounded-xl text-base sm:text-lg transition-all-300 shadow-md flex items-center justify-center gap-2\" id=\"orderButton\">\n <i class=\"fa-solid fa-cart-shopping\"><\/i> In Winkelmand\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"over-ons\" class=\"bg-melkschuim py-12 sm:py-20 px-4 sm:px-6 border-t border-espresso border-opacity-10 w-full\">\n <div class=\"max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10 sm:gap-12 items-center\">\n \n <div class=\"bg-latte rounded-2xl p-5 sm:p-6 border border-espresso border-opacity-10 aspect-square flex flex-col justify-center items-center shadow-inner relative overflow-hidden max-w-sm mx-auto w-full\">\n \n <div class=\"absolute -top-10 -left-10 w-40 h-40 bg-karamel bg-opacity-10 rounded-full blur-xl\"><\/div>\n <div class=\"absolute -bottom-10 -right-10 w-40 h-40 bg-espresso bg-opacity-5 rounded-full blur-xl\"><\/div>\n \n <i class=\"fa-solid fa-heart text-4xl sm:text-5xl text-karamel mb-4 animate-pulse\"><\/i>\n <h3 class=\"font-montserrat font-bold text-espresso text-lg sm:text-xl mb-1 text-center\">Moeder & Zoon<\/h3>\n <p class=\"text-xs sm:text-sm text-espresso text-opacity-70 text-center max-w-[250px] leading-relaxed\">\n Echt, ambachtelijk en handgemaakt aan de keukentafel.\n <\/p>\n <\/div>\n\n \n <div class=\"text-center md:text-left\">\n <span class=\"font-montserrat font-bold text-xs uppercase tracking-wider text-karamel block mb-1\">Ontstaan aan de keukentafel<\/span>\n <h2 class=\"text-2xl sm:text-3xl font-bold text-espresso mb-4 sm:mb-6\">Ons Verhaal<\/h2>\n <div class=\"space-y-4 text-espresso text-opacity-85 text-sm sm:text-base leading-relaxed text-left\">\n <p>\n Toen zwaar fysiek werk door artrose in haar schouders niet meer ging voor mijn moeder, zochten we samen naar een nieuwe manier om bezig te blijven met onze passie: ondernemen en \u00e9cht goede koffie. \n <\/p>\n <p>\n Nespresso\u00ae-cupjes wegen bijna niets, maar dragen wel een complete wereld aan smaak in zich. Dit lichte werk bleek de perfecte uitkomst voor haar herstel. \n <\/p>\n <p class=\"font-semibold text-espresso\">\n Elke box die u ontvangt, is door ons handmatig, met uiterste zorg en met veel trots samengesteld aan onze keukentafel.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-espresso text-white py-10 sm:py-12 px-4 sm:px-6 border-t border-white border-opacity-10 mt-auto w-full\">\n <div class=\"max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 mb-8 text-center md:text-left\">\n <div>\n <span class=\"font-montserrat font-extrabold text-xl tracking-wider mb-3 block\">KOFFIEBOX<span class=\"text-karamel\">.COM<\/span><\/span>\n <p class=\"text-xs sm:text-sm text-white text-opacity-70 leading-relaxed max-w-sm mx-auto md:mx-0\">\n Het ultieme koffiecadeau dat gewoon door de brievenbus past. Ontdek 30 unieke smaken en bestel alleen na wat u echt lekker vindt.\n <\/p>\n <\/div>\n <div>\n <h4 class=\"font-montserrat font-bold text-xs uppercase tracking-wider text-karamel mb-3 sm:mb-4\">Snelle Links<\/h4>\n <ul class=\"space-y-2 text-xs sm:text-sm text-white text-opacity-70\">\n <li><a href=\"\/?post_type=product\" class=\"hover:text-white transition-colors py-1 block\">Producten<\/a><\/li>\n <li><a href=\"#hoe-werkt-het\" class=\"hover:text-white transition-colors py-1 block\">Hoe werkt het?<\/a><\/li>\n <li><a href=\"#proefbox\" class=\"hover:text-white transition-colors py-1 block\">Onze Proefbox<\/a><\/li>\n <li><a href=\"#over-ons\" class=\"hover:text-white transition-colors py-1 block\">Ons Verhaal<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h4 class=\"font-montserrat font-bold text-xs uppercase tracking-wider text-karamel mb-3 sm:mb-4\">Garantie & Contact<\/h4>\n <p class=\"text-xs sm:text-sm text-white text-opacity-70 leading-relaxed mb-4\">\n Vragen over uw bestelling of interesse in zakelijke afnames? We helpen u graag via onze klantenservice.\n <\/p>\n <span class=\"text-[10px] text-white text-opacity-50 block leading-tight\">Koffiebox.com is op geen enkele wijze gelieerd aan Soci\u00e9t\u00e9 des Produits Nestl\u00e9 S.A.<\/span>\n <\/div>\n <\/div>\n <div class=\"max-w-6xl mx-auto border-t border-white border-opacity-10 pt-6 sm:pt-8 flex flex-col md:flex-row justify-between items-center text-[10px] sm:text-xs text-white text-opacity-50 gap-2 text-center\">\n <p>© 2026 Koffiebox.com. Alle rechten voorbehouden.<\/p>\n <p>Handgemaakt met liefde door Moeder & Zoon<\/p>\n <\/div>\n <\/footer>\n\n \n <div id=\"qrModal\" class=\"fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4 hidden opacity-0 transition-opacity duration-300\">\n <div class=\"bg-latte max-w-md w-full rounded-2xl overflow-hidden shadow-2xl transform scale-90 transition-transform duration-300 relative border border-espresso border-opacity-10\">\n <button id=\"closeModalBtn\" class=\"absolute top-4 right-4 text-espresso text-opacity-60 hover:text-opacity-100 text-xl p-2 focus:outline-none focus:ring-2 focus:ring-karamel rounded-lg\" aria-label=\"Sluiten\">\n <i class=\"fa-solid fa-xmark\"><\/i>\n <\/button>\n <div class=\"p-6 text-center\">\n <i class=\"fa-solid fa-mobile-screen-button text-4xl text-karamel mb-3\"><\/i>\n <h3 class=\"font-montserrat font-bold text-xl text-espresso mb-2\">Interactieve Menukaart<\/h3>\n <p class=\"text-sm text-espresso text-opacity-80 mb-6\">\n Dit is hoe klanten straks aan hun keukentafel eenvoudig de smaken uit hun brievenbusbox beoordelen en hun favorieten direct nabestellen.\n <\/p>\n <div class=\"bg-white rounded-xl p-4 border border-espresso border-opacity-5 text-left space-y-3 max-h-60 overflow-y-auto shadow-inner\">\n <div class=\"flex items-center justify-between border-b border-latte pb-2\">\n <span class=\"font-bold text-sm text-espresso\">#14 Parijse Mildheid<\/span>\n <span class=\"text-xs font-semibold px-2 py-0.5 bg-karamel bg-opacity-10 text-karamel rounded-full\">Proeven<\/span>\n <\/div>\n <div class=\"flex items-center justify-between border-b border-latte pb-2\">\n <span class=\"font-bold text-sm text-espresso\">#03 Espresso Intenso<\/span>\n <div class=\"flex text-amber-500 text-xs\"><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-regular fa-star\"><\/i><\/div>\n <\/div>\n <div class=\"flex items-center justify-between pb-1\">\n <span class=\"font-bold text-sm text-espresso\">#28 Lungo Extra<\/span>\n <button class=\"text-xs bg-karamel text-white font-bold px-2 py-1 rounded-md active:scale-95 transition-transform\">Bestel<\/button>\n <\/div>\n <\/div>\n <button id=\"modalActionBtn\" class=\"mt-6 w-full bg-karamel text-white font-montserrat font-bold py-3 rounded-xl active:scale-95 transition-transform shadow-md\">\n Helemaal Duidelijk!\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n const mobileMenu = document.getElementById('mobileMenu');\n const menuIcon = document.getElementById('menuIcon');\n const mobileLinks = document.querySelectorAll('.mobile-nav-link');\n \n \/\/ Toggle Mobile Menu\n const toggleMenu = () => {\n const isOpen = !mobileMenu.classList.contains('hidden');\n \n if (isOpen) {\n \/\/ Close menu\n mobileMenu.classList.add('opacity-0');\n mobileMenu.classList.add('scale-y-0');\n setTimeout(() => {\n mobileMenu.classList.add('hidden');\n }, 300);\n menuIcon.className = 'fa-solid fa-bars text-2xl';\n } else {\n \/\/ Open menu\n mobileMenu.classList.remove('hidden');\n \/\/ Force reflow\n mobileMenu.offsetHeight;\n mobileMenu.classList.remove('opacity-0');\n mobileMenu.classList.remove('scale-y-0');\n menuIcon.className = 'fa-solid fa-xmark text-2xl';\n }\n };\n \n mobileMenuBtn.addEventListener('click', toggleMenu);\n \n \/\/ Close mobile menu when a link is clicked\n mobileLinks.forEach(link => {\n link.addEventListener('click', () => {\n if (!mobileMenu.classList.contains('hidden')) {\n toggleMenu();\n }\n });\n });\n\n \/\/ Interactive QR code popup (for demonstration)\n const visualQr = document.getElementById('visualQr');\n const kraftBox = document.getElementById('kraftBox');\n const qrModal = document.getElementById('qrModal');\n const closeModalBtn = document.getElementById('closeModalBtn');\n const modalActionBtn = document.getElementById('modalActionBtn');\n\n const openModal = (e) => {\n \/\/ Prevent bubbling if user clicked modal itself or some internal parts\n e.stopPropagation();\n qrModal.classList.remove('hidden');\n setTimeout(() => {\n qrModal.classList.remove('opacity-0');\n qrModal.firstElementChild.classList.remove('scale-90');\n }, 10);\n };\n\n const closeModal = () => {\n qrModal.classList.add('opacity-0');\n qrModal.firstElementChild.classList.add('scale-90');\n setTimeout(() => {\n qrModal.classList.add('hidden');\n }, 300);\n };\n\n \/\/ Trigger modal on QR code click or tapping the box\n if (visualQr) visualQr.addEventListener('click', openModal);\n if (kraftBox) kraftBox.addEventListener('click', openModal);\n if (closeModalBtn) closeModalBtn.addEventListener('click', closeModal);\n if (modalActionBtn) modalActionBtn.addEventListener('click', closeModal);\n \n \/\/ Close modal when clicking outside of it\n qrModal.addEventListener('click', (e) => {\n if (e.target === qrModal) {\n closeModal();\n }\n });\n\n \/\/ WooCommerce Cart Addition (using WordPress Product ID 34)\n const orderButton = document.getElementById('orderButton');\n if (orderButton) {\n orderButton.addEventListener('click', () => {\n const originalText = orderButton.innerHTML;\n orderButton.innerHTML = '<i class=\"fa-solid fa-circle-notch animate-spin\"><\/i> Toevoegen...';\n orderButton.disabled = true;\n \n setTimeout(() => {\n orderButton.innerHTML = '<i class=\"fa-solid fa-check\"><\/i> Toegevoegd!';\n orderButton.classList.remove('bg-karamel');\n orderButton.classList.add('bg-emerald-600');\n \n \/\/ Na 1 seconde direct doorsturen naar de winkelwagenpagina!\n setTimeout(() => {\n window.location.href = window.location.origin + '\/?page_id=7&add-to-cart=34';\n }, 800);\n }, 1000);\n });\n }\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Koffiebox.com – Homepage Blueprint (Mobile Optimized) KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Ontdek jouw nieuwe favoriete koffie Een smaakvolle ontdekkingsreis op de mat. Ontvang 30 verschillende Nespresso\u00ae-cupjes uit binnen- en buitenland in \u00e9\u00e9n brievenbusbox. Bestel de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Homepage - KoffieBox<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/koffiebox.com\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Homepage - KoffieBox\" \/>\n<meta property=\"og:description\" content=\"Koffiebox.com – Homepage Blueprint (Mobile Optimized) KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Ontdek jouw nieuwe favoriete koffie Een smaakvolle ontdekkingsreis op de mat. Ontvang 30 verschillende Nespresso\u00ae-cupjes uit binnen- en buitenland in \u00e9\u00e9n brievenbusbox. Bestel de […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/koffiebox.com\/\" \/>\n<meta property=\"og:site_name\" content=\"KoffieBox\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-08T15:03:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/\",\"url\":\"https:\\\/\\\/koffiebox.com\\\/\",\"name\":\"Homepage - KoffieBox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#website\"},\"datePublished\":\"2026-06-08T12:32:17+00:00\",\"dateModified\":\"2026-06-08T15:03:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/koffiebox.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/koffiebox.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Homepage\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#website\",\"url\":\"https:\\\/\\\/koffiebox.com\\\/\",\"name\":\"KoffieBox\",\"description\":\"H\u00e9t koffiecadeau door de brievenbus.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/koffiebox.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n","yoast_head_json":{"title":"Homepage - KoffieBox","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/koffiebox.com\/","og_locale":"nl_NL","og_type":"article","og_title":"Homepage - KoffieBox","og_description":"Koffiebox.com – Homepage Blueprint (Mobile Optimized) KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Ontdek jouw nieuwe favoriete koffie Een smaakvolle ontdekkingsreis op de mat. Ontvang 30 verschillende Nespresso\u00ae-cupjes uit binnen- en buitenland in \u00e9\u00e9n brievenbusbox. Bestel de […]","og_url":"https:\/\/koffiebox.com\/","og_site_name":"KoffieBox","article_modified_time":"2026-06-08T15:03:57+00:00","twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"4 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/koffiebox.com\/","url":"https:\/\/koffiebox.com\/","name":"Homepage - KoffieBox","isPartOf":{"@id":"https:\/\/koffiebox.com\/#website"},"datePublished":"2026-06-08T12:32:17+00:00","dateModified":"2026-06-08T15:03:57+00:00","breadcrumb":{"@id":"https:\/\/koffiebox.com\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/koffiebox.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/koffiebox.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/koffiebox.com\/"},{"@type":"ListItem","position":2,"name":"Homepage"}]},{"@type":"WebSite","@id":"https:\/\/koffiebox.com\/#website","url":"https:\/\/koffiebox.com\/","name":"KoffieBox","description":"H\u00e9t koffiecadeau door de brievenbus.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/koffiebox.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koffiebox.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":23,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Koffiebox.com - Homepage Blueprint (Mobile Optimized)<\/title>\n \n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n espresso: '#2C1A11',\n latte: '#F5F1E6',\n karamel: '#C48A55',\n melkschuim: '#FFFFFF'\n },\n fontFamily: {\n sans: ['Inter', 'sans-serif'],\n montserrat: ['Montserrat', 'sans-serif']\n },\n screens: {\n 'xs': '400px'\n }\n }\n }\n }\n <\/script>\n \n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Montserrat:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap\" rel=\"stylesheet\">\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\n \n <style>\n body {\n background-color: #F5F1E6;\n color: #2C1A11;\n -webkit-tap-highlight-color: transparent; \/* Voorkom blauwe gloed bij tikken op mobiel *\/\n }\n \n \/* Smooth transitions *\/\n .transition-all-300 {\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n <\/style>\n<\/head>\n<body class=\"antialiased font-sans flex flex-col min-h-screen\">\n\n \n <header class=\"bg-espresso text-white py-3 sm:py-4 px-4 sm:px-6 sticky top-0 z-50 shadow-md\">\n <div class=\"max-w-6xl mx-auto flex justify-between items-center\">\n \n \n <a href=\"#\" class=\"flex items-center space-x-2 sm:space-x-3 active:scale-95 transition-transform duration-200\">\n <div class=\"border-2 border-white p-1.5 sm:p-2 rounded flex items-center justify-center bg-transparent\">\n <i class=\"fa-solid fa-mug-hot text-lg sm:text-xl text-white\"><\/i>\n <\/div>\n <span class=\"font-montserrat font-extrabold text-xl sm:text-2xl tracking-wider select-none\">\n KOFFIEBOX<span class=\"text-karamel\">.COM<\/span>\n <\/span>\n <\/a>\n \n \n <nav class=\"hidden lg:flex space-x-8 font-montserrat font-semibold\">\n <a href=\"\/?page_id=78\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Producten<\/a>\n <a href=\"#hoe-werkt-het\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Hoe werkt het?<\/a>\n <a href=\"#proefbox\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Onze Box<\/a>\n <a href=\"#over-ons\" class=\"hover:text-karamel transition-colors duration-200 py-2\">Ons Verhaal<\/a>\n <\/nav>\n\n \n <div class=\"flex items-center space-x-3\">\n \n <a href=\"\/?page_id=7\" class=\"text-white hover:text-karamel p-2 relative active:scale-95 transition-all-300\" aria-label=\"Winkelwagen bekijken\">\n <i class=\"fa-solid fa-cart-shopping text-xl sm:text-2xl\"><\/i>\n <\/a>\n\n <a href=\"#proefbox\" class=\"hidden xs:inline-block bg-karamel hover:bg-opacity-90 active:scale-95 text-white font-montserrat font-bold py-2 px-4 sm:px-6 rounded-lg transition-all-300 text-sm sm:text-base shadow-md\">\n Bestel Nu\n <\/a>\n \n \n <button id=\"mobileMenuBtn\" class=\"lg:hidden p-2 text-white focus:outline-none focus:ring-2 focus:ring-karamel focus:ring-offset-2 focus:ring-offset-espresso rounded-lg active:scale-90 transition-transform duration-100\" aria-label=\"Menu openen\">\n <i class=\"fa-solid fa-bars text-2xl\" id=\"menuIcon\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n\n \n <div id=\"mobileMenu\" class=\"hidden lg:hidden absolute top-full left-0 w-full bg-espresso border-t border-espresso-light shadow-xl transition-all duration-300 transform origin-top scale-y-0 opacity-0\">\n <nav class=\"flex flex-col p-6 space-y-4 font-montserrat font-semibold text-lg text-center\">\n <a href=\"\/?post_type=product\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Producten<\/a>\n <a href=\"#hoe-werkt-het\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Hoe werkt het?<\/a>\n <a href=\"#proefbox\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Onze Box<\/a>\n <a href=\"#over-ons\" class=\"mobile-nav-link py-3 hover:text-karamel border-b border-white border-opacity-5 transition-colors duration-200\">Ons Verhaal<\/a>\n <a href=\"\/?page_id=7\" class=\"mobile-nav-link py-3 text-karamel border-b border-white border-opacity-5 transition-colors duration-200\"><i class=\"fa-solid fa-cart-shopping mr-2\"><\/i>Bekijk Winkelwagen<\/a>\n <a href=\"#proefbox\" class=\"mobile-nav-link bg-karamel text-white py-3.5 rounded-xl shadow-lg hover:bg-opacity-90 active:scale-95 transition-all-300 text-base\">Bestel de Proefbox (\u20ac24,95)<\/a>\n <\/nav>\n <\/div>\n <\/header>\n\n \n <section class=\"py-8 sm:py-16 px-4 sm:px-6 max-w-6xl mx-auto flex flex-col lg:flex-row gap-10 lg:gap-12 items-center justify-between min-h-fit lg:min-h-[550px] w-full\">\n \n <div class=\"w-full lg:w-1\/2 flex flex-col justify-center text-center lg:text-left order-2 lg:order-1 mt-6 lg:mt-0\">\n <h1 class=\"text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-espresso leading-tight tracking-tight mb-4 sm:mb-6\">\n Ontdek jouw nieuwe favoriete koffie\n <\/h1>\n <p class=\"text-base sm:text-lg md:text-xl text-espresso text-opacity-85 mb-6 sm:mb-8 leading-relaxed max-w-xl mx-auto lg:mx-0\">\n Een smaakvolle ontdekkingsreis op de mat. Ontvang <strong class=\"font-semibold text-espresso\">30 verschillende Nespresso\u00ae-cupjes<\/strong> uit binnen- en buitenland in \u00e9\u00e9n brievenbusbox. \n <\/p>\n <div class=\"flex flex-col xs:flex-row gap-3.5 w-full max-w-md mx-auto lg:mx-0 justify-center lg:justify-start\">\n <a href=\"#proefbox\" class=\"w-full xs:w-auto bg-karamel hover:bg-opacity-90 active:scale-95 text-white font-montserrat font-bold py-3.5 px-6 sm:px-8 rounded-xl text-center text-base sm:text-lg transition-all-300 shadow-lg flex items-center justify-center gap-2\">\n Bestel de Proefbox (\u20ac24,95)\n <\/a>\n <a href=\"#hoe-werkt-het\" class=\"w-full xs:w-auto border-2 border-espresso text-espresso hover:bg-espresso hover:text-white active:scale-95 font-montserrat font-bold py-3.5 px-6 sm:px-8 rounded-xl text-center text-base sm:text-lg transition-all-300 flex items-center justify-center\">\n Hoe werkt het?\n <\/a>\n <\/div>\n \n \n <div class=\"mt-6 sm:mt-8 flex flex-col xs:flex-row justify-center lg:justify-start items-center gap-3 sm:gap-6 text-sm font-semibold text-espresso text-opacity-70\">\n <span class=\"flex items-center\"><i class=\"fa-solid fa-envelope-open-text text-karamel text-base mr-2.5\"><\/i>Past door de brievenbus<\/span>\n <span class=\"flex items-center\"><i class=\"fa-solid fa-check text-karamel text-base mr-2.5\"><\/i>Gratis verzending (NL & BE)<\/span>\n <\/div>\n <\/div>\n\n \n <div class=\"w-full lg:w-1\/2 flex justify-center order-1 lg:order-2 px-2 sm:px-0\">\n <div class=\"bg-[#D2B48C] border-4 border-[#8B5A2B] rounded-2xl p-5 sm:p-8 shadow-2xl w-full max-w-[340px] xs:max-w-[400px] relative aspect-[4\/3] flex flex-col justify-between transform rotate-1 hover:rotate-0 transition-transform duration-300 cursor-pointer select-none\" id=\"kraftBox\">\n \n <div class=\"border-2 border-dashed border-[#5C3A21] rounded-xl p-3 sm:p-4 text-center\">\n <i class=\"fa-solid fa-mug-hot text-3xl sm:text-4xl text-[#5C3A21] mb-1 sm:mb-2\"><\/i>\n <h3 class=\"font-montserrat font-extrabold text-xl sm:text-2xl text-[#5C3A21] tracking-widest\">KOFFIEBOX<\/h3>\n <p class=\"text-[10px] text-[#5C3A21] font-bold tracking-wider\">100% AMBACHTELIJKE SELECTIE<\/p>\n <\/div>\n <div class=\"flex justify-between items-end mt-4\">\n <span class=\"text-[10px] text-[#5C3A21] font-mono leading-none\">POSTNL BRIEVENBUSPAKJE<\/span>\n <i class=\"fa-solid fa-qrcode text-4xl sm:text-5xl text-[#5C3A21] active:scale-90 transition-transform duration-100\" id=\"visualQr\"><\/i>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"hoe-werkt-het\" class=\"bg-melkschuim py-12 sm:py-20 px-4 sm:px-6 border-y border-espresso border-opacity-10 w-full\">\n <div class=\"max-w-6xl mx-auto\">\n <h2 class=\"text-2xl sm:text-3xl md:text-4xl font-bold text-center text-espresso mb-3 sm:mb-4\">\n Jouw koffieproeverij in 3 stappen\n <\/h2>\n <p class=\"text-center text-espresso text-opacity-75 text-base sm:text-lg max-w-2xl mx-auto mb-10 sm:mb-16 leading-relaxed\">\n Geen miskopen meer in de supermarkt. Wij maken het ontdekken van nieuwe koffie eenvoudig, leuk en interactief.\n <\/p>\n\n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8\">\n \n <div class=\"p-6 sm:p-8 rounded-2xl bg-latte border border-espresso border-opacity-5 text-center shadow-sm flex flex-col items-center\">\n <div class=\"w-12 h-12 sm:w-16 sm:h-16 bg-karamel text-white rounded-full flex items-center justify-center text-xl sm:text-2xl font-bold mb-4 sm:mb-6 shadow-md select-none\">\n 1\n <\/div>\n <h3 class=\"text-lg sm:text-xl font-bold text-espresso mb-2 sm:mb-4\">Ontvang & Ontdek<\/h3>\n <p class=\"text-espresso text-opacity-80 text-sm sm:text-base leading-relaxed max-w-xs md:max-w-none\">\n Wij selecteren 30 verschillende cupjes. Van bekende A-merken tot unieke en exclusieve pareltjes uit Europa.\n <\/p>\n <\/div>\n\n \n <div class=\"p-6 sm:p-8 rounded-2xl bg-latte border border-espresso border-opacity-5 text-center shadow-sm flex flex-col items-center\">\n <div class=\"w-12 h-12 sm:w-16 sm:h-16 bg-karamel text-white rounded-full flex items-center justify-center text-xl sm:text-2xl font-bold mb-4 sm:mb-6 shadow-md select-none\">\n 2\n <\/div>\n <h3 class=\"text-lg sm:text-xl font-bold text-espresso mb-2 sm:mb-4\">Proef & Beoordeel<\/h3>\n <p class=\"text-espresso text-opacity-80 text-sm sm:text-base leading-relaxed max-w-xs md:max-w-none\">\n Gebruik de meegeleverde menukaart en scan de QR-code. Beoordeel elke smaak direct op je telefoon en vind jouw 10-uit-10 koffie.\n <\/p>\n <\/div>\n\n \n <div class=\"p-6 sm:p-8 rounded-2xl bg-latte border border-espresso border-opacity-5 text-center shadow-sm flex flex-col items-center\">\n <div class=\"w-12 h-12 sm:w-16 sm:h-16 bg-karamel text-white rounded-full flex items-center justify-center text-xl sm:text-2xl font-bold mb-4 sm:mb-6 shadow-md select-none\">\n 3\n <\/div>\n <h3 class=\"text-lg sm:text-xl font-bold text-espresso mb-2 sm:mb-4\">Bestel Alleen Je Favoriet<\/h3>\n <p class=\"text-espresso text-opacity-80 text-sm sm:text-base leading-relaxed max-w-xs md:max-w-none\">\n Helemaal verliefd geworden op cupje #14? Bestel met \u00e9\u00e9n klik een voordelige grootverpakking van alleen jouw favoriete smaak.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"proefbox\" class=\"py-12 sm:py-20 px-4 sm:px-6 max-w-4xl mx-auto w-full\">\n <div class=\"bg-melkschuim rounded-3xl border border-espresso border-opacity-10 shadow-xl overflow-hidden grid grid-cols-1 md:grid-cols-2\">\n \n <div class=\"bg-[#F0E6D2] p-6 sm:p-8 flex flex-col justify-center items-center relative min-h-[260px] sm:min-h-[300px]\">\n <span class=\"absolute top-4 left-4 bg-espresso text-white font-montserrat font-bold text-[10px] sm:text-xs py-1.5 px-3 rounded-full uppercase tracking-wider select-none z-10\">\n Bestseller\n <\/span>\n <div class=\"bg-[#D2B48C] border-2 border-[#8B5A2B] rounded-xl p-4 sm:p-6 shadow-lg w-full max-w-[240px] sm:max-w-[280px] aspect-[4\/3] flex flex-col justify-between transform hover:scale-105 transition-transform duration-300\">\n <div class=\"border border-dashed border-[#5C3A21] p-2 text-center rounded-lg\">\n <span class=\"font-montserrat font-extrabold text-[#5C3A21] text-base sm:text-lg tracking-widest\">KOFFIEBOX<\/span>\n <\/div>\n <div class=\"flex justify-between items-center text-[#5C3A21]\">\n <span class=\"text-[9px] sm:text-[10px] font-bold\">PROEFBOX - 30 CUPS<\/span>\n <i class=\"fa-solid fa-qrcode text-2xl sm:text-3xl\"><\/i>\n <\/div>\n <\/div>\n \n <div class=\"flex space-x-2.5 mt-5 sm:mt-6\">\n <div class=\"w-5 h-5 rounded-full bg-purple-600 shadow-md border-2 border-white transform hover:scale-110 transition-transform cursor-pointer\"><\/div>\n <div class=\"w-5 h-5 rounded-full bg-red-600 shadow-md border-2 border-white transform hover:scale-110 transition-transform cursor-pointer\"><\/div>\n <div class=\"w-5 h-5 rounded-full bg-amber-500 shadow-md border-2 border-white transform hover:scale-110 transition-transform cursor-pointer\"><\/div>\n <div class=\"w-5 h-5 rounded-full bg-blue-600 shadow-md border-2 border-white transform hover:scale-110 transition-transform cursor-pointer\"><\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"p-6 sm:p-8 flex flex-col justify-between\">\n <div>\n <h2 class=\"text-xl sm:text-2xl md:text-3xl font-bold text-espresso mb-1\">Koffiebox Proefbox<\/h2>\n <p class=\"text-xs sm:text-sm font-semibold text-karamel mb-4 flex items-center gap-1.5\">\n <i class=\"fa-solid fa-mobile-screen-button\"><\/i> Inclusief interactieve digitale menukaart\n <\/p>\n \n <div class=\"flex items-baseline space-x-2 mb-5 sm:mb-6\">\n <span class=\"text-3xl sm:text-4xl font-extrabold text-espresso\">\u20ac24,95<\/span>\n <span class=\"text-xs sm:text-sm text-espresso text-opacity-60\">incl. btw & gratis verzending<\/span>\n <\/div>\n\n <ul class=\"space-y-3 text-espresso text-opacity-85 text-sm sm:text-base mb-6 sm:mb-8\">\n <li class=\"flex items-start\"><i class=\"fa-solid fa-circle-check text-karamel text-base mr-3 mt-0.5\"><\/i><span>30 verschillende koffiecupjes (Nespresso\u00ae-geschikt)<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fa-solid fa-circle-check text-karamel text-base mr-3 mt-0.5\"><\/i><span>Exclusieve smaken uit Europa<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fa-solid fa-circle-check text-karamel text-base mr-3 mt-0.5\"><\/i><span>Handig A4-koffiemenu om smaaknotities te maken<\/span><\/li>\n <li class=\"flex items-start\"><i class=\"fa-solid fa-circle-check text-karamel text-base mr-3 mt-0.5\"><\/i><span>Past door de brievenbus (thuisblijven is niet nodig!)<\/span><\/li>\n <\/ul>\n <\/div>\n\n \n <button class=\"w-full bg-karamel hover:bg-opacity-90 active:scale-95 text-white font-montserrat font-bold py-3.5 sm:py-4 rounded-xl text-base sm:text-lg transition-all-300 shadow-md flex items-center justify-center gap-2\" id=\"orderButton\">\n <i class=\"fa-solid fa-cart-shopping\"><\/i> In Winkelmand\n <\/button>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section id=\"over-ons\" class=\"bg-melkschuim py-12 sm:py-20 px-4 sm:px-6 border-t border-espresso border-opacity-10 w-full\">\n <div class=\"max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10 sm:gap-12 items-center\">\n \n <div class=\"bg-latte rounded-2xl p-5 sm:p-6 border border-espresso border-opacity-10 aspect-square flex flex-col justify-center items-center shadow-inner relative overflow-hidden max-w-sm mx-auto w-full\">\n \n <div class=\"absolute -top-10 -left-10 w-40 h-40 bg-karamel bg-opacity-10 rounded-full blur-xl\"><\/div>\n <div class=\"absolute -bottom-10 -right-10 w-40 h-40 bg-espresso bg-opacity-5 rounded-full blur-xl\"><\/div>\n \n <i class=\"fa-solid fa-heart text-4xl sm:text-5xl text-karamel mb-4 animate-pulse\"><\/i>\n <h3 class=\"font-montserrat font-bold text-espresso text-lg sm:text-xl mb-1 text-center\">Moeder & Zoon<\/h3>\n <p class=\"text-xs sm:text-sm text-espresso text-opacity-70 text-center max-w-[250px] leading-relaxed\">\n Echt, ambachtelijk en handgemaakt aan de keukentafel.\n <\/p>\n <\/div>\n\n \n <div class=\"text-center md:text-left\">\n <span class=\"font-montserrat font-bold text-xs uppercase tracking-wider text-karamel block mb-1\">Ontstaan aan de keukentafel<\/span>\n <h2 class=\"text-2xl sm:text-3xl font-bold text-espresso mb-4 sm:mb-6\">Ons Verhaal<\/h2>\n <div class=\"space-y-4 text-espresso text-opacity-85 text-sm sm:text-base leading-relaxed text-left\">\n <p>\n Toen zwaar fysiek werk door artrose in haar schouders niet meer ging voor mijn moeder, zochten we samen naar een nieuwe manier om bezig te blijven met onze passie: ondernemen en \u00e9cht goede koffie. \n <\/p>\n <p>\n Nespresso\u00ae-cupjes wegen bijna niets, maar dragen wel een complete wereld aan smaak in zich. Dit lichte werk bleek de perfecte uitkomst voor haar herstel. \n <\/p>\n <p class=\"font-semibold text-espresso\">\n Elke box die u ontvangt, is door ons handmatig, met uiterste zorg en met veel trots samengesteld aan onze keukentafel.\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <footer class=\"bg-espresso text-white py-10 sm:py-12 px-4 sm:px-6 border-t border-white border-opacity-10 mt-auto w-full\">\n <div class=\"max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 mb-8 text-center md:text-left\">\n <div>\n <span class=\"font-montserrat font-extrabold text-xl tracking-wider mb-3 block\">KOFFIEBOX<span class=\"text-karamel\">.COM<\/span><\/span>\n <p class=\"text-xs sm:text-sm text-white text-opacity-70 leading-relaxed max-w-sm mx-auto md:mx-0\">\n Het ultieme koffiecadeau dat gewoon door de brievenbus past. Ontdek 30 unieke smaken en bestel alleen na wat u echt lekker vindt.\n <\/p>\n <\/div>\n <div>\n <h4 class=\"font-montserrat font-bold text-xs uppercase tracking-wider text-karamel mb-3 sm:mb-4\">Snelle Links<\/h4>\n <ul class=\"space-y-2 text-xs sm:text-sm text-white text-opacity-70\">\n <li><a href=\"\/?post_type=product\" class=\"hover:text-white transition-colors py-1 block\">Producten<\/a><\/li>\n <li><a href=\"#hoe-werkt-het\" class=\"hover:text-white transition-colors py-1 block\">Hoe werkt het?<\/a><\/li>\n <li><a href=\"#proefbox\" class=\"hover:text-white transition-colors py-1 block\">Onze Proefbox<\/a><\/li>\n <li><a href=\"#over-ons\" class=\"hover:text-white transition-colors py-1 block\">Ons Verhaal<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h4 class=\"font-montserrat font-bold text-xs uppercase tracking-wider text-karamel mb-3 sm:mb-4\">Garantie & Contact<\/h4>\n <p class=\"text-xs sm:text-sm text-white text-opacity-70 leading-relaxed mb-4\">\n Vragen over uw bestelling of interesse in zakelijke afnames? We helpen u graag via onze klantenservice.\n <\/p>\n <span class=\"text-[10px] text-white text-opacity-50 block leading-tight\">Koffiebox.com is op geen enkele wijze gelieerd aan Soci\u00e9t\u00e9 des Produits Nestl\u00e9 S.A.<\/span>\n <\/div>\n <\/div>\n <div class=\"max-w-6xl mx-auto border-t border-white border-opacity-10 pt-6 sm:pt-8 flex flex-col md:flex-row justify-between items-center text-[10px] sm:text-xs text-white text-opacity-50 gap-2 text-center\">\n <p>© 2026 Koffiebox.com. Alle rechten voorbehouden.<\/p>\n <p>Handgemaakt met liefde door Moeder & Zoon<\/p>\n <\/div>\n <\/footer>\n\n \n <div id=\"qrModal\" class=\"fixed inset-0 bg-black bg-opacity-75 z-50 flex items-center justify-center p-4 hidden opacity-0 transition-opacity duration-300\">\n <div class=\"bg-latte max-w-md w-full rounded-2xl overflow-hidden shadow-2xl transform scale-90 transition-transform duration-300 relative border border-espresso border-opacity-10\">\n <button id=\"closeModalBtn\" class=\"absolute top-4 right-4 text-espresso text-opacity-60 hover:text-opacity-100 text-xl p-2 focus:outline-none focus:ring-2 focus:ring-karamel rounded-lg\" aria-label=\"Sluiten\">\n <i class=\"fa-solid fa-xmark\"><\/i>\n <\/button>\n <div class=\"p-6 text-center\">\n <i class=\"fa-solid fa-mobile-screen-button text-4xl text-karamel mb-3\"><\/i>\n <h3 class=\"font-montserrat font-bold text-xl text-espresso mb-2\">Interactieve Menukaart<\/h3>\n <p class=\"text-sm text-espresso text-opacity-80 mb-6\">\n Dit is hoe klanten straks aan hun keukentafel eenvoudig de smaken uit hun brievenbusbox beoordelen en hun favorieten direct nabestellen.\n <\/p>\n <div class=\"bg-white rounded-xl p-4 border border-espresso border-opacity-5 text-left space-y-3 max-h-60 overflow-y-auto shadow-inner\">\n <div class=\"flex items-center justify-between border-b border-latte pb-2\">\n <span class=\"font-bold text-sm text-espresso\">#14 Parijse Mildheid<\/span>\n <span class=\"text-xs font-semibold px-2 py-0.5 bg-karamel bg-opacity-10 text-karamel rounded-full\">Proeven<\/span>\n <\/div>\n <div class=\"flex items-center justify-between border-b border-latte pb-2\">\n <span class=\"font-bold text-sm text-espresso\">#03 Espresso Intenso<\/span>\n <div class=\"flex text-amber-500 text-xs\"><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-regular fa-star\"><\/i><\/div>\n <\/div>\n <div class=\"flex items-center justify-between pb-1\">\n <span class=\"font-bold text-sm text-espresso\">#28 Lungo Extra<\/span>\n <button class=\"text-xs bg-karamel text-white font-bold px-2 py-1 rounded-md active:scale-95 transition-transform\">Bestel<\/button>\n <\/div>\n <\/div>\n <button id=\"modalActionBtn\" class=\"mt-6 w-full bg-karamel text-white font-montserrat font-bold py-3 rounded-xl active:scale-95 transition-transform shadow-md\">\n Helemaal Duidelijk!\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <script>\n document.addEventListener('DOMContentLoaded', () => {\n const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n const mobileMenu = document.getElementById('mobileMenu');\n const menuIcon = document.getElementById('menuIcon');\n const mobileLinks = document.querySelectorAll('.mobile-nav-link');\n \n \/\/ Toggle Mobile Menu\n const toggleMenu = () => {\n const isOpen = !mobileMenu.classList.contains('hidden');\n \n if (isOpen) {\n \/\/ Close menu\n mobileMenu.classList.add('opacity-0');\n mobileMenu.classList.add('scale-y-0');\n setTimeout(() => {\n mobileMenu.classList.add('hidden');\n }, 300);\n menuIcon.className = 'fa-solid fa-bars text-2xl';\n } else {\n \/\/ Open menu\n mobileMenu.classList.remove('hidden');\n \/\/ Force reflow\n mobileMenu.offsetHeight;\n mobileMenu.classList.remove('opacity-0');\n mobileMenu.classList.remove('scale-y-0');\n menuIcon.className = 'fa-solid fa-xmark text-2xl';\n }\n };\n \n mobileMenuBtn.addEventListener('click', toggleMenu);\n \n \/\/ Close mobile menu when a link is clicked\n mobileLinks.forEach(link => {\n link.addEventListener('click', () => {\n if (!mobileMenu.classList.contains('hidden')) {\n toggleMenu();\n }\n });\n });\n\n \/\/ Interactive QR code popup (for demonstration)\n const visualQr = document.getElementById('visualQr');\n const kraftBox = document.getElementById('kraftBox');\n const qrModal = document.getElementById('qrModal');\n const closeModalBtn = document.getElementById('closeModalBtn');\n const modalActionBtn = document.getElementById('modalActionBtn');\n\n const openModal = (e) => {\n \/\/ Prevent bubbling if user clicked modal itself or some internal parts\n e.stopPropagation();\n qrModal.classList.remove('hidden');\n setTimeout(() => {\n qrModal.classList.remove('opacity-0');\n qrModal.firstElementChild.classList.remove('scale-90');\n }, 10);\n };\n\n const closeModal = () => {\n qrModal.classList.add('opacity-0');\n qrModal.firstElementChild.classList.add('scale-90');\n setTimeout(() => {\n qrModal.classList.add('hidden');\n }, 300);\n };\n\n \/\/ Trigger modal on QR code click or tapping the box\n if (visualQr) visualQr.addEventListener('click', openModal);\n if (kraftBox) kraftBox.addEventListener('click', openModal);\n if (closeModalBtn) closeModalBtn.addEventListener('click', closeModal);\n if (modalActionBtn) modalActionBtn.addEventListener('click', closeModal);\n \n \/\/ Close modal when clicking outside of it\n qrModal.addEventListener('click', (e) => {\n if (e.target === qrModal) {\n closeModal();\n }\n });\n\n \/\/ WooCommerce Cart Addition (using WordPress Product ID 34)\n const orderButton = document.getElementById('orderButton');\n if (orderButton) {\n orderButton.addEventListener('click', () => {\n const originalText = orderButton.innerHTML;\n orderButton.innerHTML = '<i class=\"fa-solid fa-circle-notch animate-spin\"><\/i> Toevoegen...';\n orderButton.disabled = true;\n \n setTimeout(() => {\n orderButton.innerHTML = '<i class=\"fa-solid fa-check\"><\/i> Toegevoegd!';\n orderButton.classList.remove('bg-karamel');\n orderButton.classList.add('bg-emerald-600');\n \n \/\/ Na 1 seconde direct doorsturen naar de winkelwagenpagina!\n setTimeout(() => {\n window.location.href = window.location.origin + '\/?page_id=7&add-to-cart=34';\n }, 800);\n }, 1000);\n });\n }\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Koffiebox.com – Homepage Blueprint (Mobile Optimized) KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Ontdek jouw nieuwe favoriete koffie Een smaakvolle ontdekkingsreis op de mat. Ontvang 30 verschillende Nespresso\u00ae-cupjes uit binnen- en buitenland in \u00e9\u00e9n brievenbusbox. Bestel de […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Homepage - KoffieBox<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/koffiebox.com\/\" \/>\n<meta property=\"og:locale\" content=\"nl_NL\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Homepage - KoffieBox\" \/>\n<meta property=\"og:description\" content=\"Koffiebox.com – Homepage Blueprint (Mobile Optimized) KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Ontdek jouw nieuwe favoriete koffie Een smaakvolle ontdekkingsreis op de mat. Ontvang 30 verschillende Nespresso\u00ae-cupjes uit binnen- en buitenland in \u00e9\u00e9n brievenbusbox. Bestel de […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/koffiebox.com\/\" \/>\n<meta property=\"og:site_name\" content=\"KoffieBox\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-08T15:03:57+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschatte leestijd\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/\",\"url\":\"https:\\\/\\\/koffiebox.com\\\/\",\"name\":\"Homepage - KoffieBox\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#website\"},\"datePublished\":\"2026-06-08T12:32:17+00:00\",\"dateModified\":\"2026-06-08T15:03:57+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#breadcrumb\"},\"inLanguage\":\"nl-NL\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/koffiebox.com\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/koffiebox.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Homepage\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/koffiebox.com\\\/#website\",\"url\":\"https:\\\/\\\/koffiebox.com\\\/\",\"name\":\"KoffieBox\",\"description\":\"H\u00e9t koffiecadeau door de brievenbus.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/koffiebox.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"nl-NL\"}]}<\/script>\n","yoast_head_json":{"title":"Homepage - KoffieBox","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/koffiebox.com\/","og_locale":"nl_NL","og_type":"article","og_title":"Homepage - KoffieBox","og_description":"Koffiebox.com – Homepage Blueprint (Mobile Optimized) KOFFIEBOX.COM Producten Hoe werkt het? Onze Box Ons Verhaal Bestel Nu Producten Hoe werkt het? Onze Box Ons Verhaal Bekijk Winkelwagen Bestel de Proefbox (\u20ac24,95) Ontdek jouw nieuwe favoriete koffie Een smaakvolle ontdekkingsreis op de mat. Ontvang 30 verschillende Nespresso\u00ae-cupjes uit binnen- en buitenland in \u00e9\u00e9n brievenbusbox. Bestel de […]","og_url":"https:\/\/koffiebox.com\/","og_site_name":"KoffieBox","article_modified_time":"2026-06-08T15:03:57+00:00","twitter_card":"summary_large_image","twitter_misc":{"Geschatte leestijd":"4 minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/koffiebox.com\/","url":"https:\/\/koffiebox.com\/","name":"Homepage - KoffieBox","isPartOf":{"@id":"https:\/\/koffiebox.com\/#website"},"datePublished":"2026-06-08T12:32:17+00:00","dateModified":"2026-06-08T15:03:57+00:00","breadcrumb":{"@id":"https:\/\/koffiebox.com\/#breadcrumb"},"inLanguage":"nl-NL","potentialAction":[{"@type":"ReadAction","target":["https:\/\/koffiebox.com\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/koffiebox.com\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/koffiebox.com\/"},{"@type":"ListItem","position":2,"name":"Homepage"}]},{"@type":"WebSite","@id":"https:\/\/koffiebox.com\/#website","url":"https:\/\/koffiebox.com\/","name":"KoffieBox","description":"H\u00e9t koffiecadeau door de brievenbus.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/koffiebox.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"nl-NL"}]}},"_links":{"self":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/koffiebox.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=21"}],"version-history":[{"count":23,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":95,"href":"https:\/\/koffiebox.com\/index.php?rest_route=\/wp\/v2\/pages\/21\/revisions\/95"}],"wp:attachment":[{"href":"https:\/\/koffiebox.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}