Add accurate photorealistic 3D print product & category photos and rewrite all copy to professional maker-focused texts

This commit is contained in:
2026-10-31 17:49:33 +01:00
parent d55cb97bfd
commit 7964bbd9ec
21 changed files with 330 additions and 348 deletions
+82 -82
View File
@@ -3,13 +3,13 @@
<head>
<meta charset="utf-8">
<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!')">
<title>@yield('title', 'Jouwdriedee.nl | 3D Prints, Fidget Toys, Pokémon & Custom Prints')</title>
<meta name="description" content="@yield('meta_description', 'Jouwdriedee.nl - Hoogwaardige 3D prints, soepele fidget toys, Pokémon planters en popculture figuren. Upload ook jouw eigen STL bestand!')">
<!-- 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">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
@@ -24,66 +24,66 @@
</head>
<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 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">
<!-- Top Announcement Bar (Strak & Duidelijk) -->
<div class="bg-slate-900 text-white text-xs py-2 px-3 sm:px-4 font-bold border-b border-slate-800">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<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 class="flex items-center space-x-2 mx-auto sm:mx-0 text-center sm:text-left text-slate-300">
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
<span>Nederlandse 3D Printstudio • Haarscherpe afwerking op Bambu Lab printers</span>
</div>
<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>
<div class="hidden md:flex items-center space-x-5 text-[11px] text-slate-300">
<span class="flex items-center space-x-1">
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i>
<span>Gratis verzending vanaf € 50,-</span>
</span>
<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>Binnen 2-3 werkdagen in huis</span>
<span class="flex items-center space-x-1">
<i data-lucide="clock" class="w-3.5 h-3.5 text-sky-400"></i>
<span>Verzending binnen 2-3 werkdagen</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-xs">
<header class="sticky top-0 z-40 bg-white/95 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-16 sm:h-20">
<!-- 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 class="w-10 h-10 sm:w-11 sm:h-11 rounded-2xl bg-gradient-to-tr from-amber-400 via-rose-400 to-indigo-500 flex items-center justify-center text-white shadow-sm group-hover:scale-105 transition transform">
<i data-lucide="layers" class="w-5 h-5 sm:w-6 sm:h-6 stroke-[2.2]"></i>
</div>
<div class="flex flex-col">
<div class="flex items-baseline space-x-1">
<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-[10px] font-bold text-amber-600 hidden sm:inline">🧸 3D Prints, Fidgets & Pokémon</span>
<span class="text-[10px] font-bold text-slate-500 hidden sm:inline">3D Prints, Fidgets & Collectibles</span>
</div>
</a>
<!-- 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 🏠
<nav class="hidden lg:flex items-center space-x-1 text-sm font-bold text-slate-700">
<a href="{{ route('home') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('home') ? 'bg-slate-100 text-slate-900 font-extrabold' : 'hover:bg-slate-50 text-slate-700' }}">
Home
</a>
<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 href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-50 text-slate-700">
Fidget Toys
</a>
<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 href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-50 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 href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-50 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 href="{{ route('custom.request') }}" class="px-3.5 py-2 rounded-xl transition bg-rose-50 text-rose-600 hover:bg-rose-100 font-extrabold flex items-center space-x-1.5">
<i data-lucide="upload-cloud" class="w-3.5 h-3.5"></i>
<span>Eigen STL Printen</span>
</a>
<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>
<span>MakerWorld</span>
</a>
</nav>
</div>
@@ -91,14 +91,14 @@
<!-- Right Action Bar -->
<div class="flex items-center space-x-2 sm:space-x-3">
<!-- Search Bar in Header (Desktop) -->
<!-- Search Bar in Header -->
<form action="{{ route('catalog') }}" method="GET" class="hidden md:flex items-center relative">
<input
type="text"
name="q"
value="{{ request('q') }}"
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"
placeholder="Zoek print, model..."
class="w-44 lg:w-56 bg-slate-100/90 border border-slate-200/80 rounded-xl pl-8 pr-3 py-2 text-xs font-semibold text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-rose-400 transition"
>
<i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 pointer-events-none"></i>
</form>
@@ -108,11 +108,11 @@
$cartItems = is_array(session('cart')) ? session('cart') : [];
$cartCount = array_sum(array_column($cartItems, 'quantity'));
@endphp
<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="hidden sm:inline font-bold">Mandje</span>
<a href="{{ route('cart.index') }}" class="playful-btn relative px-3.5 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs flex items-center space-x-1.5 shadow-xs group">
<i data-lucide="shopping-bag" class="w-4 h-4 text-slate-900"></i>
<span class="hidden sm:inline font-bold">Winkelwagen</span>
@if($cartCount > 0)
<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">
<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">
{{ $cartCount }}
</span>
@endif
@@ -120,46 +120,46 @@
<!-- Mobile Menu Trigger -->
<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>
<i data-lucide="menu" class="w-5 h-5"></i>
</button>
</div>
</div>
</div>
<!-- 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">
<!-- Mobile Menu Drawer -->
<div x-show="mobileMenuOpen" x-cloak class="lg:hidden border-t border-slate-200 bg-white 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 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"
placeholder="Zoek model of categorie..."
class="w-full bg-slate-100 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs font-semibold placeholder-slate-400"
>
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3"></i>
</form>
<div class="flex flex-col space-y-1.5 font-bold text-sm">
<div class="flex flex-col space-y-1 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>
<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>Fidget Toys & Sensory</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>
<span>Pokémon 3D Prints</span>
<span class="text-xs bg-amber-50 px-2 py-0.5 rounded-md font-bold">Favoriet</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>
<span>Film, Gaming & Collectibles</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">
<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-xs">
<span>Eigen 3D Model Bestellen (Upload STL)</span>
<span>🚀</span>
<i data-lucide="upload" class="w-4 h-4"></i>
</a>
<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>
<span>MakerWorld Importer (Beheer)</span>
</a>
</div>
</div>
@@ -170,10 +170,10 @@
<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>
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
<span>{{ session('success') }}</span>
</div>
<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>
<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">Winkelwagen &rarr;</a>
</div>
</div>
@endif
@@ -181,7 +181,7 @@
@if(session('error'))
<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>
<i data-lucide="alert-circle" class="w-4 h-4 text-rose-600"></i>
<span>{{ session('error') }}</span>
</div>
</div>
@@ -192,74 +192,74 @@
@yield('content')
</main>
<!-- Refined Friendly Footer -->
<footer class="bg-slate-900 text-white border-t-2 border-amber-400 pt-12 pb-10 mt-16">
<!-- Footer (Zakelijk en Betrouwbaar) -->
<footer class="bg-slate-900 text-white border-t border-slate-800 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 & 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 class="w-8 h-8 rounded-xl bg-gradient-to-tr from-amber-400 to-rose-400 flex items-center justify-center text-white font-black text-xs">
3D
</div>
<span class="font-heading text-xl font-black text-white tracking-tight">Jouw<span class="text-rose-400">driedee</span>.nl</span>
<span class="font-heading text-lg 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 originele fidget toys, Pokémon creaties, popculture figuren en custom 3D prints op maat!
Gespecialiseerd in het 3D printen van gedetailleerde modellen, soepel bewegende fidget toys en iconische popculture figuren. Gemaakt met hoogwaardige filamenten op hypermoderne FDM-printers.
</p>
<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">
<div class="inline-flex items-center space-x-1.5 text-[11px] font-bold text-emerald-400 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>
<span>Printers gekalibreerd & actief</span>
</div>
</div>
<!-- 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>
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-amber-300">Collectie</h3>
<ul class="space-y-1.5 text-xs text-slate-300 font-semibold">
<li><a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="hover:text-white transition">Fidget Toys & Slugs</a></li>
<li><a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="hover:text-white transition">Pokémon 3D Prints</a></li>
<li><a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="hover:text-white transition">Film, Gaming & Collectibles</a></li>
<li><a href="{{ route('custom.request') }}" class="hover:text-white transition text-rose-300">Eigen STL Model Printen</a></li>
</ul>
</div>
<!-- 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>
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-sky-300">Materialen & Kwaliteit</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>
<span><strong>Bio-PLA+</strong>: Biologisch & geurloos</span>
</li>
<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>
<span><strong>PETG Tough</strong>: Slagvast & waterdicht</span>
</li>
<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>
<span><strong>TPU 95A</strong>: Buigzaam rubber</span>
</li>
<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>
<span><strong>Silk Glans</strong>: Prachtige reflectie</span>
</li>
</ul>
</div>
<!-- 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>
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-rose-300">Bestelling & Verzending</h3>
<p class="text-xs text-slate-300 font-medium">Heb je een vraag over een print of wil je een model op afwijkend formaat laten printen?</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>
<i data-lucide="mail" class="w-3.5 h-3.5 text-amber-400"></i>
<span>info@jouwdriedee.nl</span>
</div>
<div class="flex items-center space-x-1.5 text-slate-200">
<span>📦</span>
<span>Verzending binnen 2-3 werkdagen</span>
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i>
<span>Verzending in heel NL & België</span>
</div>
</div>
</div>
@@ -267,11 +267,11 @@
</div>
<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>
<p>&copy; {{ date('Y') }} Jouwdriedee.nl. Alle 3D prints worden op bestelling vervaardigd.</p>
<div class="flex items-center space-x-3">
<span>💳 iDEAL & Bancontact</span>
<span>iDEAL & Bancontact</span>
<span>•</span>
<span>🚚 PostNL Track & Trace</span>
<span>PostNL Track & Trace</span>
</div>
</div>
</div>