Refine design (less clunky, fully mobile-friendly), seed only Fidget Toys, Pokemon & Film popculture, and add direct custom model ordering

This commit is contained in:
2026-10-31 16:45:39 +01:00
parent fdf768b352
commit d55cb97bfd
12 changed files with 1185 additions and 711 deletions
+136 -130
View File
@@ -2,11 +2,11 @@
<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é 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!')">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<title>@yield('title', 'Jouwdriedee.nl ✨ Dé 3D Print Webshop | Fidget Toys, Pokémon & Eigen Modellen')</title>
<meta name="description" content="@yield('meta_description', 'Jouwdriedee.nl - Vrolijke 3D prints, toffe fidget toys, Pokémon figuren en film artikelen. Bestel ook direct jouw eigen 3D model!')">
<!-- Playful Google Fonts: Fredoka & Nunito -->
<!-- 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=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
@@ -22,134 +22,144 @@
}
</style>
</head>
<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 }">
<body class="min-h-full flex flex-col bg-[#FFFDF9] text-slate-800 selection:bg-amber-300 selection:text-slate-900" x-data="{ mobileMenuOpen: false }">
<!-- 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">
<!-- Top Announcement Bar (Vrolijk & Subtiel) -->
<div class="bg-gradient-to-r from-amber-400 via-rose-400 to-indigo-500 text-slate-950 text-xs py-2 px-3 sm:px-4 font-black">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<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 class="flex items-center space-x-1.5 mx-auto sm:mx-0 text-center sm:text-left">
<span class="inline-block animate-bounce">✨</span>
<span>Fidget toys, Pokémon figuren & film gadgets vers 3D geprint!</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>
<div class="hidden md:flex items-center space-x-5 text-[11px] font-bold text-slate-900">
<span class="flex items-center space-x-1 bg-white/70 backdrop-blur-xs px-2.5 py-0.5 rounded-full shadow-2xs">
<span>📦</span>
<span>Gratis verzending vanaf € 50,-</span>
</span>
<span class="flex items-center space-x-1.5">
<span class="flex items-center space-x-1 bg-white/70 backdrop-blur-xs px-2.5 py-0.5 rounded-full shadow-2xs">
<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>Binnen 2-3 werkdagen in huis</span>
</span>
</div>
</div>
</div>
<!-- Main Navigation Header -->
<header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b-2 border-slate-900 shadow-sm">
<header class="sticky top-0 z-40 bg-white/90 backdrop-blur-md border-b border-slate-200/80 shadow-xs">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-20">
<div class="flex items-center justify-between h-16 sm:h-20">
<!-- 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-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>
<!-- Logo & Brand -->
<div class="flex items-center space-x-4 sm:space-x-8">
<a href="{{ route('home') }}" class="flex items-center space-x-2.5 group">
<div class="w-10 h-10 sm:w-11 sm:h-11 rounded-2xl bg-gradient-to-br from-amber-400 via-rose-400 to-indigo-500 flex items-center justify-center text-white shadow-md shadow-rose-500/20 group-hover:scale-105 group-hover:-rotate-3 transition transform">
<i data-lucide="sparkles" class="w-5 h-5 sm:w-6 sm:h-6 stroke-[2.5]"></i>
</div>
<div class="flex flex-col">
<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>
<span class="font-heading text-xl sm:text-2xl font-black tracking-tight text-slate-900">Jouw<span class="text-rose-500">driedee</span></span>
<span class="text-[10px] font-black bg-indigo-500 text-white px-1.5 py-0.2 rounded-md">.NL</span>
</div>
<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>
<span class="text-[10px] font-bold text-amber-600 hidden sm:inline">🧸 3D Prints, Fidgets & Pokémon</span>
</div>
</a>
<!-- 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' }}">
<!-- Desktop Nav Links -->
<nav class="hidden lg:flex items-center space-x-1 text-sm font-extrabold text-slate-700">
<a href="{{ route('home') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('home') ? 'bg-amber-100 text-amber-900 font-black' : 'hover:bg-slate-100 text-slate-700' }}">
Home 🏠
</a>
<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 href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-100 text-slate-700">
Fidget Toys 🌀
</a>
<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>
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-100 text-slate-700">
Pokémon ⚡
</a>
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-100 text-slate-700">
Film & Gaming 🎬
</a>
<a href="{{ route('custom.request') }}" class="px-3.5 py-2 rounded-xl transition bg-rose-50 text-rose-600 hover:bg-rose-100 font-black flex items-center space-x-1">
<span>Eigen Model Bestellen</span>
<span>🚀</span>
</a>
<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 href="{{ route('admin.makerworld.index') }}" class="px-3 py-1.5 rounded-xl transition bg-slate-900 text-white text-xs font-bold hover:bg-slate-800 ml-2">
<span>MakerWorld Importer</span>
</a>
</nav>
</div>
<!-- Right Action Bar -->
<div class="flex items-center space-x-3">
<div class="flex items-center space-x-2 sm:space-x-3">
<!-- Search Bar in Header -->
<!-- Search Bar in Header (Desktop) -->
<form action="{{ route('catalog') }}" method="GET" class="hidden md:flex items-center relative">
<input
type="text"
name="q"
value="{{ request('q') }}"
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"
placeholder="Zoek fidget, Pokémon..."
class="w-48 lg:w-56 bg-slate-100/80 border border-slate-200 rounded-xl pl-8 pr-3 py-2 text-xs font-bold text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-rose-400 transition"
>
<i data-lucide="search" class="w-4 h-4 text-slate-500 absolute left-3 pointer-events-none"></i>
<i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 pointer-events-none"></i>
</form>
<!-- Chunky Toy Cart Button -->
<!-- Cart Button with Counter -->
@php
$cartItems = is_array(session('cart')) ? session('cart') : [];
$cartCount = array_sum(array_column($cartItems, 'quantity'));
@endphp
<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">
<a href="{{ route('cart.index') }}" class="playful-btn relative px-3 sm:px-4 py-2 rounded-2xl bg-gradient-to-r from-amber-300 to-amber-400 hover:from-amber-400 hover:to-amber-500 text-slate-950 font-black text-xs flex items-center space-x-1.5 shadow-sm shadow-amber-500/20 group">
<span class="text-base group-hover:scale-110 transition-transform">🛒</span>
<span class="text-xs hidden sm:inline">Mandje</span>
<span class="hidden sm:inline font-bold">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-rose-500 border border-slate-900 rounded-full animate-bounce">
<span class="inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-black text-white bg-rose-500 rounded-full animate-bounce">
{{ $cartCount }}
</span>
@endif
</a>
<!-- Mobile Menu Trigger -->
<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 @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 transition">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</div>
</div>
<!-- Mobile Menu Dropdown -->
<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">
<!-- Mobile Menu Drawer (100% Touch Friendly) -->
<div x-show="mobileMenuOpen" x-cloak class="lg:hidden border-t border-slate-200 bg-white/98 backdrop-blur-md px-4 pt-3 pb-6 space-y-3 shadow-lg">
<form action="{{ route('catalog') }}" method="GET" class="flex items-center relative mb-2">
<input
type="text"
name="q"
value="{{ request('q') }}"
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"
placeholder="Zoek fidgets, Pokémon, figuren..."
class="w-full bg-slate-100 border border-slate-200 rounded-xl 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-500 absolute left-3"></i>
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3"></i>
</form>
<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>
<div class="flex flex-col space-y-1.5 font-bold text-sm">
<a href="{{ route('home') }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between">
<span>Home 🏠</span>
</a>
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-indigo-600">
<span>Fidget Toys & Slugs 🌀</span>
<span class="text-xs bg-indigo-50 px-2 py-0.5 rounded-md font-bold">Populier</span>
</a>
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-amber-600">
<span>Pokémon 3D Prints ⚡</span>
<span class="text-xs bg-amber-50 px-2 py-0.5 rounded-md font-bold">Trending</span>
</a>
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-rose-600">
<span>Film, Gaming & Popculture 🎬</span>
</a>
<a href="{{ route('custom.request') }}" class="px-3.5 py-3 rounded-2xl bg-gradient-to-r from-rose-500 to-indigo-600 text-white font-black flex items-center justify-between shadow-sm shadow-rose-500/20">
<span>Eigen 3D Model Bestellen (Upload STL)</span>
<span>🚀</span>
</a>
<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 href="{{ route('admin.makerworld.index') }}" class="px-3.5 py-2 text-xs font-bold text-slate-500 hover:text-slate-800 flex items-center space-x-1.5 pt-2 border-t border-slate-100">
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
<span>MakerWorld Importer Beheer</span>
</a>
</div>
</div>
@@ -157,21 +167,21 @@
<!-- Global Flash Alerts -->
@if(session('success'))
<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">
<span class="text-xl">🎉</span>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="p-3.5 sm:p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-900 text-xs sm:text-sm font-bold flex items-center justify-between shadow-xs">
<div class="flex items-center space-x-2">
<span class="text-lg">🎉</span>
<span>{{ session('success') }}</span>
</div>
<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>
<a href="{{ route('cart.index') }}" class="px-3 py-1 bg-white border border-emerald-300 rounded-xl text-xs font-black text-emerald-800 hover:bg-emerald-100 transition">Winkelmandje &rarr;</a>
</div>
</div>
@endif
@if(session('error'))
<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>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
<div class="p-3.5 sm:p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-900 text-xs sm:text-sm font-bold flex items-center space-x-2 shadow-xs">
<span class="text-lg">⚠️</span>
<span>{{ session('error') }}</span>
</div>
</div>
@@ -182,90 +192,86 @@
@yield('content')
</main>
<!-- 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">
<!-- Refined Friendly Footer -->
<footer class="bg-slate-900 text-white border-t-2 border-amber-400 pt-12 pb-10 mt-16">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 pb-10 border-b border-slate-800">
<!-- 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-2xl bg-amber-400 border-2 border-white flex items-center justify-center text-slate-950 font-black">
<!-- Col 1: Brand & Info -->
<div class="space-y-3 sm:col-span-1">
<div class="flex items-center space-x-2.5">
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-amber-400 to-rose-400 flex items-center justify-center text-white font-black text-sm">
✨
</div>
<span class="font-heading text-2xl font-black text-white tracking-tight">Jouw<span class="text-rose-400">driedee</span>.nl</span>
<span class="font-heading text-xl font-black text-white tracking-tight">Jouw<span class="text-rose-400">driedee</span>.nl</span>
</div>
<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!
Dé vrolijke 3D print webshop voor originele fidget toys, Pokémon creaties, popculture figuren en custom 3D prints op maat!
</p>
<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 class="inline-flex items-center space-x-1.5 text-[11px] font-bold text-emerald-300 bg-emerald-950/60 px-2.5 py-1 rounded-full border border-emerald-500/30">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
<span>Printers online en print-klaar 🖨️</span>
</div>
</div>
<!-- Col 2: Snelle links -->
<div class="space-y-3">
<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>
<!-- Col 2: Categorieën -->
<div class="space-y-2">
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-amber-300">🧸 Onze Collectie</h3>
<ul class="space-y-1.5 text-xs text-slate-300 font-bold">
<li><a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="hover:text-amber-300 transition flex items-center space-x-1"><span>🌀</span><span>Fidget Toys & Slugs</span></a></li>
<li><a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="hover:text-amber-300 transition flex items-center space-x-1"><span>⚡</span><span>Pokémon 3D Prints</span></a></li>
<li><a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="hover:text-amber-300 transition flex items-center space-x-1"><span>🎬</span><span>Film & Gaming Items</span></a></li>
<li><a href="{{ route('custom.request') }}" class="hover:text-amber-300 transition flex items-center space-x-1 text-rose-300 font-black"><span>🚀</span><span>Eigen STL Bestand Bestellen</span></a></li>
</ul>
</div>
<!-- Col 3: Veilige en Vrolijke Materialen -->
<div class="space-y-3">
<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>
<!-- Col 3: Veilige Materialen -->
<div class="space-y-2">
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-sky-300">🌈 Kwaliteit & Materialen</h3>
<ul class="space-y-1.5 text-xs text-slate-300 font-medium">
<li class="flex items-center space-x-1.5">
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
<span><strong>Bio-PLA+</strong> (Veilig voor kinderen)</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 class="flex items-center space-x-1.5">
<span class="w-2 h-2 rounded-full bg-sky-400"></span>
<span><strong>PETG Tough</strong> (Slagvast)</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 class="flex items-center space-x-1.5">
<span class="w-2 h-2 rounded-full bg-amber-400"></span>
<span><strong>TPU Flex</strong> (Rubberachtig buigzaam)</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 class="flex items-center space-x-1.5">
<span class="w-2 h-2 rounded-full bg-purple-400"></span>
<span><strong>Silk Regenboog</strong> (Glanzend effect)</span>
</li>
</ul>
</div>
<!-- Col 4: Contact & Klantenservice -->
<div class="space-y-3">
<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">
<!-- Col 4: Contact -->
<div class="space-y-2">
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-rose-300">💌 Service & Bezorging</h3>
<p class="text-xs text-slate-300 font-medium">Heb je een speciale wens of custom print verzoek?</p>
<div class="p-3 rounded-2xl bg-slate-800/80 border border-slate-700 text-xs space-y-1 font-bold">
<div class="flex items-center space-x-1.5 text-slate-200">
<span>📧</span>
<span>info@jouwdriedee.nl</span>
</div>
<div class="flex items-center space-x-2 text-slate-200">
<span>🇳🇱</span>
<span>Verzending in heel NL & België</span>
<div class="flex items-center space-x-1.5 text-slate-200">
<span>📦</span>
<span>Verzending binnen 2-3 werkdagen</span>
</div>
</div>
</div>
</div>
<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>
<div class="pt-6 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-400 font-bold gap-3 text-center sm:text-left">
<p>&copy; {{ date('Y') }} Jouwdriedee.nl. Alles vers 3D geprint in Nederland.</p>
<div class="flex items-center space-x-3">
<span>💳 iDEAL & Bancontact</span>
<span>•</span>
<span>📦 PostNL Track & Trace</span>
<span>🚚 PostNL Track & Trace</span>
</div>
</div>
</div>