Fix HTTPS asset loading behind proxy and redesign layout to playful toy-like 3D print webshop

This commit is contained in:
2026-10-31 15:52:08 +01:00
parent 69f1800fcd
commit fdf768b352
8 changed files with 533 additions and 433 deletions
+138 -115
View File
@@ -1,78 +1,91 @@
<!DOCTYPE html>
<html lang="nl" class="h-full bg-slate-50 text-slate-900 antialiased">
<html lang="nl" class="h-full antialiased">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>@yield('title', 'Jouwdriedee.nl | Dé 3D Print Webshop & Printservice')</title>
<meta name="description" content="@yield('meta_description', 'Jouwdriedee.nl - Jouw ideeën tastbaar gemaakt in 3D. Unieke decoratie, tech gadgets en custom 3D printservice.')">
<title>@yield('title', 'Jouwdriedee.nl 🎨 Dé Speelse 3D Print Webshop')</title>
<meta name="description" content="@yield('meta_description', 'Jouwdriedee.nl - Vrolijke 3D prints, tof speelgoed, hippe gadgets en op maat gemaakte 3D creaties direct uit de printer!')">
<!-- Google Fonts -->
<!-- Playful Google Fonts: Fredoka & Nunito -->
<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=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
<style>
body { font-family: 'Plus Jakarta Sans', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }
body {
font-family: 'Nunito', system-ui, sans-serif;
}
h1, h2, h3, h4, .font-heading {
font-family: 'Fredoka', ui-rounded, 'Nunito', sans-serif;
}
</style>
</head>
<body class="min-h-full flex flex-col bg-slate-50 text-slate-800" x-data="{ mobileMenuOpen: false }">
<body class="min-h-full flex flex-col bg-[#FFFDF7] text-slate-900 selection:bg-amber-300 selection:text-slate-900" x-data="{ mobileMenuOpen: false }">
<!-- Top Announcement Bar -->
<div class="bg-indigo-950 text-indigo-200 text-xs py-2 px-4 text-center font-medium border-b border-indigo-900/60">
<!-- Top Playful Announcement Bar -->
<div class="bg-amber-400 border-b-2 border-slate-900 text-slate-950 text-xs py-2 px-4 font-black">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<span class="hidden sm:inline">🚀 <strong>Nieuw:</strong> Upload nu ook jouw eigen 3D CAD/STL bestanden voor maatwerk prints!</span>
<span class="sm:hidden mx-auto font-semibold">✨ Gratis verzending vanaf € 50,-</span>
<div class="hidden sm:flex items-center space-x-6 text-[11px] text-indigo-300">
<span class="flex items-center space-x-1.5">
<i data-lucide="shield-check" class="w-3.5 h-3.5 text-emerald-400"></i>
<span>Premium PLA+, PETG & TPU</span>
<div class="flex items-center space-x-2">
<span class="inline-block animate-bounce">🎉</span>
<span class="tracking-wide">Hoera! Jouw favoriete 3D prints & speelgoed vers uit onze printers!</span>
</div>
<div class="hidden md:flex items-center space-x-6 text-[12px]">
<span class="flex items-center space-x-1.5 bg-amber-300/80 px-2.5 py-0.5 rounded-full border border-slate-900">
<span>✨</span>
<span>Gratis verzending vanaf € 50,-</span>
</span>
<span class="flex items-center space-x-1.5">
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i>
<span>Verzending binnen 2-3 werkdagen</span>
<span>🚀</span>
<span>Snel verzonden via PostNL</span>
</span>
<span class="flex items-center space-x-1.5">
<span>🌈</span>
<span>Biologisch PLA & veilige materialen</span>
</span>
</div>
</div>
</div>
<!-- Main Navigation Header -->
<header class="sticky top-0 z-40 bg-white/90 backdrop-blur-md border-b border-slate-200/80 shadow-2xs">
<header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b-2 border-slate-900 shadow-sm">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<!-- Logo & Brand -->
<div class="flex items-center space-x-8">
<!-- Logo & Brand (Fun Toy Mascot Box) -->
<div class="flex items-center space-x-6">
<a href="{{ route('home') }}" class="flex items-center space-x-3 group">
<div class="w-11 h-11 rounded-2xl bg-gradient-to-tr from-indigo-600 via-indigo-500 to-sky-400 flex items-center justify-center text-white shadow-md shadow-indigo-500/25 group-hover:scale-105 transition-transform">
<i data-lucide="box" class="w-6 h-6 stroke-[2.2]"></i>
<div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-400 via-rose-400 to-indigo-500 border-2 border-slate-900 toy-shadow-sm flex items-center justify-center text-white group-hover:scale-105 group-hover:-rotate-3 transition transform">
<i data-lucide="sparkles" class="w-7 h-7 text-white stroke-[2.5]"></i>
</div>
<div class="flex flex-col">
<div class="flex items-center space-x-1">
<span class="text-xl font-extrabold tracking-tight text-slate-900">Jouw<span class="text-indigo-600">driedee</span></span>
<span class="text-xs font-bold text-sky-500 font-mono">.nl</span>
<div class="flex items-baseline space-x-1">
<span class="font-heading text-2xl font-black tracking-tight text-slate-900">Jouw<span class="text-rose-500">driedee</span></span>
<span class="text-xs font-black bg-indigo-500 text-white px-1.5 py-0.5 rounded-lg border border-slate-900">.NL</span>
</div>
<span class="text-[10px] tracking-wider uppercase font-semibold text-slate-400">3D Print Studio & Shop</span>
<span class="text-[11px] font-extrabold text-amber-600 flex items-center space-x-1">
<span>🧸</span>
<span>De vrolijkste 3D print webshop</span>
</span>
</div>
</a>
<!-- Desktop Nav Links -->
<nav class="hidden md:flex items-center space-x-1 text-sm font-semibold">
<a href="{{ route('home') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('home') ? 'bg-indigo-50 text-indigo-600 font-bold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/70' }}">
Home
<!-- Desktop Nav Links (Chunky Rounded Toy Pills) -->
<nav class="hidden lg:flex items-center space-x-2 text-sm font-extrabold">
<a href="{{ route('home') }}" class="px-4 py-2 rounded-2xl transition border-2 {{ request()->routeIs('home') ? 'bg-amber-300 border-slate-900 toy-shadow-sm text-slate-950 font-black' : 'border-transparent text-slate-700 hover:border-slate-900 hover:bg-slate-100/80' }}">
Home 🏠
</a>
<a href="{{ route('catalog') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('catalog*') ? 'bg-indigo-50 text-indigo-600 font-bold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/70' }}">
Catalogus
<a href="{{ route('catalog') }}" class="px-4 py-2 rounded-2xl transition border-2 {{ request()->routeIs('catalog*') ? 'bg-sky-200 border-slate-900 toy-shadow-sm text-slate-950 font-black' : 'border-transparent text-slate-700 hover:border-slate-900 hover:bg-slate-100/80' }}">
Alle Prints 🎁
</a>
<a href="{{ route('custom.request') }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ request()->routeIs('custom.request') ? 'bg-indigo-50 text-indigo-600 font-bold' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/70' }}">
<i data-lucide="printer" class="w-4 h-4 text-indigo-500"></i>
<span>Eigen STL Printen</span>
<a href="{{ route('custom.request') }}" class="px-4 py-2 rounded-2xl transition border-2 flex items-center space-x-1.5 {{ request()->routeIs('custom.request') ? 'bg-emerald-200 border-slate-900 toy-shadow-sm text-slate-950 font-black' : 'border-transparent text-slate-700 hover:border-slate-900 hover:bg-slate-100/80' }}">
<span>Eigen Model Printen</span>
<span>🚀</span>
</a>
<a href="{{ route('admin.makerworld.index') }}" class="px-3.5 py-2 rounded-xl transition flex items-center space-x-1.5 {{ request()->routeIs('admin.makerworld*') ? 'bg-indigo-600 text-white font-bold shadow-sm' : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/70' }}">
<i data-lucide="layers" class="w-4 h-4 {{ request()->routeIs('admin.makerworld*') ? 'text-white' : 'text-indigo-600' }}"></i>
<span>MakerWorld Importer</span>
<a href="{{ route('admin.makerworld.index') }}" class="px-4 py-2 rounded-2xl transition border-2 border-slate-900 bg-rose-500 text-white font-black toy-shadow-sm hover:bg-rose-600 flex items-center space-x-1.5">
<i data-lucide="layers" class="w-4 h-4"></i>
<span>MakerWorld Importer ✨</span>
</a>
</nav>
</div>
@@ -81,34 +94,34 @@
<div class="flex items-center space-x-3">
<!-- Search Bar in Header -->
<form action="{{ route('catalog') }}" method="GET" class="hidden lg:flex items-center relative">
<form action="{{ route('catalog') }}" method="GET" class="hidden md:flex items-center relative">
<input
type="text"
name="q"
value="{{ request('q') }}"
placeholder="Zoek een print, houder, vaas..."
class="w-64 bg-slate-100 border border-slate-200/80 rounded-xl pl-9 pr-3.5 py-2 text-xs font-medium placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 transition"
placeholder="Zoek speelgoed, gadgets, vazen..."
class="w-60 bg-amber-50/60 border-2 border-slate-900 rounded-2xl pl-9 pr-3.5 py-2 text-xs font-bold text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-amber-400 transition"
>
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3 pointer-events-none"></i>
<i data-lucide="search" class="w-4 h-4 text-slate-500 absolute left-3 pointer-events-none"></i>
</form>
<!-- Cart Button with Counter -->
<!-- Chunky Toy Cart Button -->
@php
$cartItems = is_array(session('cart')) ? session('cart') : [];
$cartCount = array_sum(array_column($cartItems, 'quantity'));
@endphp
<a href="{{ route('cart.index') }}" class="relative p-2.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 text-slate-700 transition flex items-center space-x-2 shadow-2xs group">
<i data-lucide="shopping-bag" class="w-5 h-5 text-slate-600 group-hover:text-indigo-600 transition"></i>
<span class="text-xs font-bold hidden sm:inline">Winkelwagen</span>
<a href="{{ route('cart.index') }}" class="toy-btn relative px-4 py-2 rounded-2xl border-2 border-slate-900 bg-amber-300 hover:bg-amber-400 text-slate-950 toy-shadow flex items-center space-x-2 font-black group">
<span class="text-base group-hover:scale-110 transition-transform">🛒</span>
<span class="text-xs hidden sm:inline">Mandje</span>
@if($cartCount > 0)
<span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-black text-white bg-indigo-600 rounded-full animate-pulse">
<span class="inline-flex items-center justify-center px-2 py-0.5 text-xs font-black text-white bg-rose-500 border border-slate-900 rounded-full animate-bounce">
{{ $cartCount }}
</span>
@endif
</a>
<!-- Mobile Menu Trigger -->
<button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="md:hidden p-2.5 rounded-xl border border-slate-200 bg-white text-slate-700 hover:bg-slate-50">
<button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="lg:hidden p-2.5 rounded-2xl border-2 border-slate-900 bg-white text-slate-900 hover:bg-slate-50">
<i data-lucide="menu" class="w-5 h-5"></i>
</button>
</div>
@@ -116,53 +129,49 @@
</div>
<!-- Mobile Menu Dropdown -->
<div x-show="mobileMenuOpen" x-cloak class="md:hidden border-t border-slate-200 bg-white px-4 pt-3 pb-6 space-y-3 shadow-lg">
<div x-show="mobileMenuOpen" x-cloak class="lg:hidden border-t-2 border-slate-900 bg-[#FFFDF7] px-4 pt-4 pb-6 space-y-3">
<form action="{{ route('catalog') }}" method="GET" class="flex items-center relative mb-3">
<input
type="text"
name="q"
value="{{ request('q') }}"
placeholder="Zoek een print, houder..."
class="w-full bg-slate-100 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs placeholder-slate-400"
placeholder="Zoek speelgoed, vazen..."
class="w-full bg-white border-2 border-slate-900 rounded-2xl pl-9 pr-3.5 py-2.5 text-xs font-bold placeholder-slate-400"
>
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3"></i>
<i data-lucide="search" class="w-4 h-4 text-slate-500 absolute left-3"></i>
</form>
<div class="flex flex-col space-y-1">
<a href="{{ route('home') }}" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-700 hover:bg-slate-50">Home</a>
<a href="{{ route('catalog') }}" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-700 hover:bg-slate-50">Alle 3D Prints & Catalogus</a>
<a href="{{ route('custom.request') }}" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-indigo-600 bg-indigo-50/70 font-bold flex items-center space-x-2">
<i data-lucide="printer" class="w-4 h-4"></i>
<span>Eigen 3D Model Printen (Upload)</span>
<div class="flex flex-col space-y-2 font-black">
<a href="{{ route('home') }}" class="px-4 py-2.5 rounded-2xl border-2 border-slate-900 bg-amber-300 text-sm">Home 🏠</a>
<a href="{{ route('catalog') }}" class="px-4 py-2.5 rounded-2xl border-2 border-slate-900 bg-sky-200 text-sm">Alle 3D Prints 🎁</a>
<a href="{{ route('custom.request') }}" class="px-4 py-2.5 rounded-2xl border-2 border-slate-900 bg-emerald-200 text-sm flex items-center space-x-2">
<span>Eigen Model Printen</span>
<span>🚀</span>
</a>
<a href="{{ route('admin.makerworld.index') }}" class="px-3.5 py-2.5 rounded-xl text-sm font-semibold text-slate-700 hover:bg-slate-50 flex items-center space-x-2">
<i data-lucide="layers" class="w-4 h-4 text-indigo-600"></i>
<span>MakerWorld Importer (Beheer)</span>
<a href="{{ route('admin.makerworld.index') }}" class="px-4 py-2.5 rounded-2xl border-2 border-slate-900 bg-rose-500 text-white text-sm flex items-center space-x-2">
<i data-lucide="layers" class="w-4 h-4"></i>
<span>MakerWorld Importer ✨</span>
</a>
</div>
</div>
</header>
<!-- Global Toast / Alerts -->
<!-- Global Flash Alerts -->
@if(session('success'))
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-900 text-sm font-semibold flex items-center justify-between shadow-xs">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-5">
<div class="p-4 rounded-3xl bg-emerald-300 border-2 border-slate-900 toy-shadow text-slate-950 text-sm font-extrabold flex items-center justify-between">
<div class="flex items-center space-x-3">
<div class="w-7 h-7 rounded-lg bg-emerald-600 text-white flex items-center justify-center">
<i data-lucide="check" class="w-4 h-4 stroke-[3]"></i>
</div>
<span class="text-xl">🎉</span>
<span>{{ session('success') }}</span>
</div>
<a href="{{ route('cart.index') }}" class="text-xs font-bold underline hover:text-emerald-950">Naar winkelwagen &rarr;</a>
<a href="{{ route('cart.index') }}" class="px-3 py-1 bg-white border-2 border-slate-900 rounded-xl text-xs font-black hover:bg-slate-100 transition">Naar winkelwagen &rarr;</a>
</div>
</div>
@endif
@if(session('error'))
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-900 text-sm font-semibold flex items-center space-x-3 shadow-xs">
<div class="w-7 h-7 rounded-lg bg-rose-600 text-white flex items-center justify-center">
<i data-lucide="alert-circle" class="w-4 h-4 stroke-[3]"></i>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-5">
<div class="p-4 rounded-3xl bg-rose-300 border-2 border-slate-900 toy-shadow text-slate-950 text-sm font-extrabold flex items-center space-x-3">
<span class="text-xl">⚠️</span>
<span>{{ session('error') }}</span>
</div>
</div>
@@ -173,75 +182,90 @@
@yield('content')
</main>
<!-- Footer -->
<footer class="bg-slate-900 text-slate-300 border-t border-slate-800 pt-16 pb-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-10 pb-12 border-b border-slate-800/80">
<!-- Playful Friendly Footer -->
<footer class="bg-slate-900 text-white border-t-4 border-amber-400 pt-16 pb-12 mt-16 relative overflow-hidden">
<!-- Playful Background Dots -->
<div class="absolute inset-0 opacity-5 pointer-events-none" style="background-image: radial-gradient(#ffffff 2px, transparent 2px); background-size: 24px 24px;"></div>
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-10 pb-12 border-b border-slate-800">
<!-- Col 1: Brand -->
<!-- Col 1: Brand & Cheerful Info -->
<div class="space-y-4 md:col-span-1">
<div class="flex items-center space-x-3">
<div class="w-10 h-10 rounded-xl bg-indigo-600 flex items-center justify-center text-white">
<i data-lucide="box" class="w-5 h-5"></i>
<div class="w-10 h-10 rounded-2xl bg-amber-400 border-2 border-white flex items-center justify-center text-slate-950 font-black">
✨
</div>
<span class="text-xl font-black text-white tracking-tight">Jouw<span class="text-indigo-400">driedee</span>.nl</span>
<span class="font-heading text-2xl font-black text-white tracking-tight">Jouw<span class="text-rose-400">driedee</span>.nl</span>
</div>
<p class="text-xs text-slate-400 leading-relaxed">
Van unieke interieurdecoratie en handige bureaugadgets tot industriële prototypes op maat. Geprint met professionele precisie op hypermoderne FDM- en SLA-printers.
<p class="text-xs text-slate-300 leading-relaxed font-medium">
Dé vrolijke 3D print webshop voor origineel speelgoed, kleurrijke interieurdecoratie, handige bureaugadgets en maatwerk prints!
</p>
<div class="flex items-center space-x-2 text-xs font-mono text-emerald-400 pt-1">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span>
<span>Printers online & gereed</span>
<div class="inline-flex items-center space-x-2 text-xs font-black text-emerald-300 bg-emerald-950/80 px-3 py-1.5 rounded-full border border-emerald-500/30">
<span class="w-2.5 h-2.5 rounded-full bg-emerald-400 animate-pulse"></span>
<span>Printers draaien op volle toeren! 🖨️</span>
</div>
</div>
<!-- Col 2: Snelle links -->
<div class="space-y-3">
<h3 class="text-xs font-bold uppercase tracking-wider text-white">Winkel & Producten</h3>
<ul class="space-y-2 text-xs text-slate-400">
<li><a href="{{ route('catalog') }}" class="hover:text-white transition">Alle 3D Prints</a></li>
<li><a href="{{ route('catalog', ['category' => 'home-interieur']) }}" class="hover:text-white transition">Home & Interieur</a></li>
<li><a href="{{ route('catalog', ['category' => 'bureau-tech']) }}" class="hover:text-white transition">Bureau & Tech</a></li>
<li><a href="{{ route('catalog', ['category' => 'gadgets-speelgoed']) }}" class="hover:text-white transition">Gadgets & Speelgoed</a></li>
<li><a href="{{ route('custom.request') }}" class="text-indigo-400 font-semibold hover:underline">Custom STL Uploaden</a></li>
<h3 class="font-heading text-sm font-black uppercase tracking-wider text-amber-300">🧸 Speelgoed & Prints</h3>
<ul class="space-y-2 text-xs text-slate-300 font-bold">
<li><a href="{{ route('catalog') }}" class="hover:text-amber-300 transition flex items-center space-x-1.5"><span>👉</span><span>Alle 3D Prints</span></a></li>
<li><a href="{{ route('catalog', ['category' => 'gadgets-speelgoed']) }}" class="hover:text-amber-300 transition flex items-center space-x-1.5"><span>🎮</span><span>Gadgets & Speelgoed</span></a></li>
<li><a href="{{ route('catalog', ['category' => 'home-interieur']) }}" class="hover:text-amber-300 transition flex items-center space-x-1.5"><span>🪴</span><span>Home & Vrolijke Vazen</span></a></li>
<li><a href="{{ route('catalog', ['category' => 'bureau-tech']) }}" class="hover:text-amber-300 transition flex items-center space-x-1.5"><span>💻</span><span>Bureau & Tech Accessoires</span></a></li>
<li><a href="{{ route('custom.request') }}" class="hover:text-amber-300 transition flex items-center space-x-1.5 text-rose-300"><span>🚀</span><span>Eigen CAD/STL Uploaden</span></a></li>
</ul>
</div>
<!-- Col 3: Materialen Kennisbank -->
<!-- Col 3: Veilige en Vrolijke Materialen -->
<div class="space-y-3">
<h3 class="text-xs font-bold uppercase tracking-wider text-white">3D Print Materialen</h3>
<ul class="space-y-2 text-xs text-slate-400">
<li class="flex items-center space-x-1.5"><span class="w-1.5 h-1.5 rounded-full bg-emerald-400"></span><span><strong>PLA+</strong>: Biologisch & strak</span></li>
<li class="flex items-center space-x-1.5"><span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span><span><strong>PETG</strong>: Hitte- & slagvast</span></li>
<li class="flex items-center space-x-1.5"><span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span><span><strong>TPU</strong>: Flexibel rubber</span></li>
<li class="flex items-center space-x-1.5"><span class="w-1.5 h-1.5 rounded-full bg-purple-400"></span><span><strong>Resin</strong>: Ultra-fijne details</span></li>
<h3 class="font-heading text-sm font-black uppercase tracking-wider text-sky-300">🌈 Onze Materialen</h3>
<ul class="space-y-2 text-xs text-slate-300 font-medium">
<li class="flex items-center space-x-2">
<span class="w-2.5 h-2.5 rounded-full bg-emerald-400"></span>
<span><strong>Bio-PLA+</strong>: Plantaardig & kindvriendelijk</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-2.5 h-2.5 rounded-full bg-sky-400"></span>
<span><strong>PETG</strong>: Extra sterk & waterdicht</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
<span><strong>Flex-TPU</strong>: Buigzaam en rubberachtig</span>
</li>
<li class="flex items-center space-x-2">
<span class="w-2.5 h-2.5 rounded-full bg-purple-400"></span>
<span><strong>Silk & Rainbow</strong>: Prachtige glanskleuren</span>
</li>
</ul>
</div>
<!-- Col 4: Contact & Zekerheden -->
<!-- Col 4: Contact & Klantenservice -->
<div class="space-y-3">
<h3 class="text-xs font-bold uppercase tracking-wider text-white">Contact & Klantenservice</h3>
<p class="text-xs text-slate-400">Heb je een speciale printopdracht of grote batch nodig?</p>
<div class="p-3.5 rounded-xl bg-slate-800/80 border border-slate-700/60 text-xs space-y-1.5">
<div class="flex items-center space-x-2 text-slate-300">
<i data-lucide="mail" class="w-3.5 h-3.5 text-indigo-400"></i>
<h3 class="font-heading text-sm font-black uppercase tracking-wider text-rose-300">💌 Vragen of Ideeën?</h3>
<p class="text-xs text-slate-300 font-medium">Wil je een speciale kleur, grotere afmetingen of een print op maat?</p>
<div class="p-4 rounded-2xl bg-slate-800 border-2 border-slate-700 text-xs space-y-2 font-bold">
<div class="flex items-center space-x-2 text-slate-200">
<span>📧</span>
<span>info@jouwdriedee.nl</span>
</div>
<div class="flex items-center space-x-2 text-slate-300">
<i data-lucide="map-pin" class="w-3.5 h-3.5 text-indigo-400"></i>
<span>Nederland (Verzending NL & BE)</span>
<div class="flex items-center space-x-2 text-slate-200">
<span>🇳🇱</span>
<span>Verzending in heel NL & België</span>
</div>
</div>
</div>
</div>
<div class="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500 gap-4">
<p>&copy; {{ date('Y') }} Jouwdriedee.nl. Alle rechten voorbehouden.</p>
<div class="pt-8 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-400 font-bold gap-4">
<p>&copy; {{ date('Y') }} Jouwdriedee.nl. Met ❤️ geprint in Nederland.</p>
<div class="flex items-center space-x-4">
<span>Veilig betalen met iDEAL & Bancontact</span>
<span>💳 Veilig betalen met iDEAL & Bancontact</span>
<span>•</span>
<span>Coolify Docker Deployed</span>
<span>📦 PostNL Track & Trace</span>
</div>
</div>
</div>
@@ -249,4 +273,3 @@
</body>
</html>