NiekRabelink/jouwdriedee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: flat light colorful shop redesign with catchy 3D logo and pure catalog storefront

Browse Source
This commit is contained in:
Niek Rabelink
2026-10-31 20:13:43 +01:00
parent 7964bbd9ec
commit 0433f8d6bf
7 changed files with 318 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files
database/seeders/DatabaseSeeder.php
+1 -10
View File
@@ -93,16 +93,7 @@ class DatabaseSeeder extends Seeder
'sort_order' => 3,
]);
$catCustom = Category::updateOrCreate(['slug' => 'eigen-model'], [
'name' => 'Eigen 3D Bestand Printen',
'slug' => 'eigen-model',
'description' => 'Upload direct jouw .STL of .3MF bestand en bestel jouw model op maat in gewenste schaal en kleur.',
'icon' => 'printer',
'is_featured' => true,
'sort_order' => 4,
]);
Category::whereNotIn('slug', ['fidget-toys', 'pokemon-3d', 'film-popculture', 'eigen-model'])->delete();
Category::whereNotIn('slug', ['fidget-toys', 'pokemon-3d', 'film-popculture'])->delete();
// 4. Producten met accurate lokale foto's & strakke teksten
Product::truncate();
public/images/logo-icon.svg
+69
View File
@@ -0,0 +1,69 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" fill="none">
<defs>
<!-- Top Slice Gradients -->
<linearGradient id="icoTopFace" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#38BDF8" />
<stop offset="100%" stop-color="#0284C7" />
</linearGradient>
<linearGradient id="icoTopRight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0284C7" />
<stop offset="100%" stop-color="#0369A1" />
</linearGradient>
<linearGradient id="icoTopLeft" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0EA5E9" />
<stop offset="100%" stop-color="#0284C7" />
</linearGradient>
<!-- Mid Slice Gradients -->
<linearGradient id="icoMidFace" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#F43F5E" />
<stop offset="100%" stop-color="#E11D48" />
</linearGradient>
<linearGradient id="icoMidRight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#E11D48" />
<stop offset="100%" stop-color="#BE123C" />
</linearGradient>
<linearGradient id="icoMidLeft" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FB7185" />
<stop offset="100%" stop-color="#E11D48" />
</linearGradient>
<!-- Bot Slice Gradients -->
<linearGradient id="icoBotFace" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FBBF24" />
<stop offset="100%" stop-color="#F59E0B" />
</linearGradient>
<linearGradient id="icoBotRight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#F59E0B" />
<stop offset="100%" stop-color="#D97706" />
</linearGradient>
<linearGradient id="icoBotLeft" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FCD34D" />
<stop offset="100%" stop-color="#F59E0B" />
</linearGradient>
</defs>
<g transform="translate(4, 2)">
<!-- Bottom Layer (Amber) -->
<g transform="translate(0, 22)">
<polygon points="22,6 40,16 22,26 4,16" fill="url(#icoBotFace)" opacity="0.9" />
<polygon points="4,16 22,26 22,34 4,24" fill="url(#icoBotLeft)" />
<polygon points="22,26 40,16 40,24 22,34" fill="url(#icoBotRight)" />
</g>
<!-- Middle Layer (Rose Pink) -->
<g transform="translate(0, 11)">
<polygon points="22,6 40,16 22,26 4,16" fill="url(#icoMidFace)" opacity="0.95" />
<polygon points="4,16 22,26 22,34 4,24" fill="url(#icoMidLeft)" />
<polygon points="22,26 40,16 40,24 22,34" fill="url(#icoMidRight)" />
</g>
<!-- Top Layer (Cyan / Sky) -->
<g transform="translate(0, 0)">
<polygon points="22,6 40,16 22,26 4,16" fill="url(#icoTopFace)" />
<polygon points="4,16 22,26 22,34 4,24" fill="url(#icoTopLeft)" />
<polygon points="22,26 40,16 40,24 22,34" fill="url(#icoTopRight)" />
<circle cx="22" cy="16" r="3" fill="#FFFFFF" opacity="0.95" />
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

public/images/logo.svg
+104
View File
@@ -0,0 +1,104 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 56" fill="none">
<defs>
<!-- Top Slice Gradients -->
<linearGradient id="topFace" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#38BDF8" />
<stop offset="100%" stop-color="#0284C7" />
</linearGradient>
<linearGradient id="topRight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0284C7" />
<stop offset="100%" stop-color="#0369A1" />
</linearGradient>
<linearGradient id="topLeft" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#0EA5E9" />
<stop offset="100%" stop-color="#0284C7" />
</linearGradient>
<!-- Mid Slice Gradients -->
<linearGradient id="midFace" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#F43F5E" />
<stop offset="100%" stop-color="#E11D48" />
</linearGradient>
<linearGradient id="midRight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#E11D48" />
<stop offset="100%" stop-color="#BE123C" />
</linearGradient>
<linearGradient id="midLeft" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FB7185" />
<stop offset="100%" stop-color="#E11D48" />
</linearGradient>
<!-- Bot Slice Gradients -->
<linearGradient id="botFace" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FBBF24" />
<stop offset="100%" stop-color="#F59E0B" />
</linearGradient>
<linearGradient id="botRight" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#F59E0B" />
<stop offset="100%" stop-color="#D97706" />
</linearGradient>
<linearGradient id="botLeft" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FCD34D" />
<stop offset="100%" stop-color="#F59E0B" />
</linearGradient>
<!-- Wordmark Gradient -->
<linearGradient id="wordmarkGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#F43F5E" />
<stop offset="50%" stop-color="#8B5CF6" />
<stop offset="100%" stop-color="#06B6D4" />
</linearGradient>
<linearGradient id="badgeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#6366F1" />
<stop offset="100%" stop-color="#4F46E5" />
</linearGradient>
</defs>
<!-- 3D Layered Isometric Cube Mark -->
<g transform="translate(6, 4)">
<!-- Bottom Layer (Amber) -->
<g transform="translate(0, 22)">
<!-- Top surface of bottom layer -->
<polygon points="22,6 40,16 22,26 4,16" fill="url(#botFace)" opacity="0.9" />
<!-- Left side of bottom layer -->
<polygon points="4,16 22,26 22,34 4,24" fill="url(#botLeft)" />
<!-- Right side of bottom layer -->
<polygon points="22,26 40,16 40,24 22,34" fill="url(#botRight)" />
</g>
<!-- Middle Layer (Rose Pink) -->
<g transform="translate(0, 11)">
<!-- Top surface of middle layer -->
<polygon points="22,6 40,16 22,26 4,16" fill="url(#midFace)" opacity="0.95" />
<!-- Left side of middle layer -->
<polygon points="4,16 22,26 22,34 4,24" fill="url(#midLeft)" />
<!-- Right side of middle layer -->
<polygon points="22,26 40,16 40,24 22,34" fill="url(#midRight)" />
</g>
<!-- Top Layer (Cyan / Sky) -->
<g transform="translate(0, 0)">
<!-- Top surface of top layer -->
<polygon points="22,6 40,16 22,26 4,16" fill="url(#topFace)" />
<!-- Left side of top layer -->
<polygon points="4,16 22,26 22,34 4,24" fill="url(#topLeft)" />
<!-- Right side of top layer -->
<polygon points="22,26 40,16 40,24 22,34" fill="url(#topRight)" />
<!-- Accent Sparkle/Nozzle Dot on Top Face -->
<circle cx="22" cy="16" r="3" fill="#FFFFFF" opacity="0.9" />
</g>
</g>
<!-- Wordmark Text -->
<g transform="translate(62, 38)">
<!-- "Jouw" in Bold Slate -->
<text x="0" y="0" font-family="'Fredoka', system-ui, sans-serif" font-weight="700" font-size="28" fill="#0F172A" letter-spacing="-0.5">Jouw</text>
<!-- "driedee" in Vibrant Gradient -->
<text x="74" y="0" font-family="'Fredoka', system-ui, sans-serif" font-weight="700" font-size="28" fill="url(#wordmarkGrad)" letter-spacing="-0.5">driedee</text>
<!-- ".nl" Badge -->
<rect x="168" y="-21" width="28" height="16" rx="5" fill="url(#badgeGrad)" />
<text x="173" y="-9" font-family="'Nunito', system-ui, sans-serif" font-weight="800" font-size="10" fill="#FFFFFF" letter-spacing="0.5">.NL</text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

resources/views/layouts/app.blade.php
+38 -58
View File
@@ -3,13 +3,14 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
<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!')">
<title>@yield('title', 'Jouwdriedee.nl | Kleurrijke 3D Prints, Fidget Toys & Collectibles')</title>
<meta name="description" content="@yield('meta_description', 'Jouwdriedee.nl - Kleurrijke en gedetailleerde 3D prints, soepele fidget toys, Pokémon planters en toffe collectibles. Met zorg en precisie geprint in Nederland!')">
<link rel="icon" type="image/svg+xml" href="/images/logo-icon.svg">
<!-- 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@500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
@vite(['resources/css/app.css', 'resources/js/app.js'])
@@ -22,9 +23,9 @@
}
</style>
</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 }">
<body class="min-h-full flex flex-col bg-[#FBFBFA] text-slate-800 selection:bg-amber-300 selection:text-slate-900" x-data="{ mobileMenuOpen: false }">
<!-- Top Announcement Bar (Strak & Duidelijk) -->
<!-- Top Announcement Bar (Helder & Fris) -->
<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-2 mx-auto sm:mx-0 text-center sm:text-left text-slate-300">
@@ -49,41 +50,28 @@
<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 -->
<!-- Catchy Brand Logo -->
<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-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-slate-500 hidden sm:inline">3D Prints, Fidgets & Collectibles</span>
</div>
<a href="{{ route('home') }}" class="flex items-center group py-1">
<img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-9 sm:h-11 w-auto transition-transform duration-200 group-hover:scale-105">
</a>
<!-- Desktop Nav Links -->
<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' }}">
<nav class="hidden lg:flex items-center space-x-1.5 text-sm font-bold text-slate-700">
<a href="{{ route('home') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('home') ? 'bg-amber-100 text-amber-950 font-black' : 'hover:bg-slate-100 text-slate-700' }}">
Home
</a>
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-50 text-slate-700">
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2 rounded-xl transition {{ request('category') === 'fidget-toys' ? 'bg-violet-100 text-violet-900 font-black' : 'hover:bg-violet-50 hover:text-violet-700 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-50 text-slate-700">
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2 rounded-xl transition {{ request('category') === 'pokemon-3d' ? 'bg-amber-100 text-amber-900 font-black' : 'hover:bg-amber-50 hover:text-amber-700 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-50 text-slate-700">
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2 rounded-xl transition {{ request('category') === 'film-popculture' ? 'bg-rose-100 text-rose-900 font-black' : 'hover:bg-rose-50 hover:text-rose-700 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-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</span>
<a href="{{ route('catalog') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('catalog') && !request('category') ? 'bg-slate-200 text-slate-900 font-black' : 'hover:bg-slate-100 text-slate-700' }}">
Alle Prints
</a>
</nav>
</div>
@@ -98,7 +86,7 @@
name="q"
value="{{ request('q') }}"
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"
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-2 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,9 +96,9 @@
$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.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">
<a href="{{ route('cart.index') }}" class="px-4 py-2 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs flex items-center space-x-2 transition shadow-xs">
<i data-lucide="shopping-bag" class="w-4 h-4 text-slate-900"></i>
<span class="hidden sm:inline font-bold">Winkelwagen</span>
<span class="hidden sm:inline">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">
{{ $cartCount }}
@@ -133,33 +121,28 @@
type="text"
name="q"
value="{{ request('q') }}"
placeholder="Zoek model of categorie..."
placeholder="Zoek print, model..."
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 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">
<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 {{ request()->routeIs('home') ? 'bg-amber-50 text-amber-950 font-black' : '' }}">
<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">
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-violet-50 flex items-center justify-between text-violet-700">
<span>Fidget Toys & Sensory</span>
<span class="text-xs bg-indigo-50 px-2 py-0.5 rounded-md font-bold">Populier</span>
<span class="text-xs bg-violet-100 px-2 py-0.5 rounded-md font-bold">Bestsellers</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">
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-amber-50 flex items-center justify-between text-amber-700">
<span>Pokémon 3D Prints</span>
<span class="text-xs bg-amber-50 px-2 py-0.5 rounded-md font-bold">Favoriet</span>
<span class="text-xs bg-amber-100 px-2 py-0.5 rounded-md font-bold">Populair</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">
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-rose-50 flex items-center justify-between text-rose-700">
<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-xs">
<span>Eigen 3D Model Bestellen (Upload STL)</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>
<a href="{{ route('catalog') }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-slate-700">
<span>Alle Prints Bekijken</span>
</a>
</div>
</div>
@@ -192,7 +175,7 @@
@yield('content')
</main>
<!-- Footer (Zakelijk en Betrouwbaar) -->
<!-- Footer (Licht, Helder 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">
@@ -200,10 +183,7 @@
<!-- 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-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-lg font-black text-white tracking-tight">Jouw<span class="text-rose-400">driedee</span>.nl</span>
<img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-8 w-auto brightness-200 invert">
</div>
<p class="text-xs text-slate-300 leading-relaxed font-medium">
Gespecialiseerd in het 3D printen van gedetailleerde modellen, soepel bewegende fidget toys en iconische popculture figuren. Gemaakt met hoogwaardige filamenten op hypermoderne FDM-printers.
@@ -221,11 +201,11 @@
<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>
<li><a href="{{ route('catalog') }}" class="hover:text-white transition">Alle Prints Bekijken</a></li>
</ul>
</div>
<!-- Col 3: Veilige Materialen -->
<!-- Col 3: Materialen & Kwaliteit -->
<div class="space-y-2">
<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">
@@ -235,15 +215,15 @@
</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 & waterdicht</span>
<span><strong>PETG Tough</strong>: Slagvast & stevig</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 95A</strong>: Buigzaam rubber</span>
<span><strong>TPU 95A</strong>: Flexibel 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 Glans</strong>: Prachtige reflectie</span>
<span><strong>Silk Glans</strong>: Prachtige glans</span>
</li>
</ul>
</div>
@@ -251,7 +231,7 @@
<!-- Col 4: Contact -->
<div class="space-y-2">
<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>
<p class="text-xs text-slate-300 font-medium">Heb je een vraag over een print of levertijd van jouw bestelling?</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">
<i data-lucide="mail" class="w-3.5 h-3.5 text-amber-400"></i>
@@ -259,7 +239,7 @@
</div>
<div class="flex items-center space-x-1.5 text-slate-200">
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i>
<span>Verzending in heel NL & België</span>
<span>Snelle verzending via PostNL</span>
</div>
</div>
</div>
resources/views/shop/index.blade.php
+106 -68
View File
@@ -1,39 +1,39 @@
@extends('layouts.app')
@section('title', 'Jouwdriedee.nl | 3D Prints, Fidget Toys, Pokémon & Custom Printservice')
@section('title', 'Jouwdriedee.nl | Kleurrijke 3D Prints, Fidget Toys & Collectibles')
@section('content')
<!-- Hero Section (Professioneel, Helder & Sfeervol) -->
<section class="relative overflow-hidden bg-gradient-to-b from-amber-50/60 via-slate-50 to-[#FFFDF9] pt-8 pb-14 sm:pt-14 sm:pb-20 border-b border-slate-200/70">
<!-- Hero Section (Helder, Kleurrijk & Fris) -->
<section class="relative overflow-hidden bg-gradient-to-b from-amber-50/50 via-white to-[#FBFBFA] pt-8 pb-12 sm:pt-14 sm:pb-18 border-b border-slate-200/70">
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
<!-- Left Hero Content -->
<div class="lg:col-span-7 space-y-4 sm:space-y-6 text-center lg:text-left">
<div class="inline-flex items-center space-x-2 px-3.5 py-1.5 rounded-full bg-white border border-slate-200 shadow-2xs text-slate-800 text-xs font-bold">
<div class="inline-flex items-center space-x-2 px-3.5 py-1.5 rounded-full bg-white border border-slate-200/80 shadow-2xs text-slate-800 text-xs font-bold">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span>Precisie 3D Printstudio in Nederland</span>
<span>Nederlandse 3D Printstudio • Bambu Lab Precisie</span>
</div>
<h1 class="font-heading text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 leading-[1.15]">
Gedetailleerde 3D prints, <br class="hidden sm:inline">
Kleurrijke 3D prints, <br class="hidden sm:inline">
<span class="bg-clip-text text-transparent bg-gradient-to-r from-rose-500 via-amber-500 to-indigo-600">fidget toys & collectibles.</span>
</h1>
<p class="text-sm sm:text-base text-slate-600 max-w-xl mx-auto lg:mx-0 font-normal leading-relaxed">
Van soepel bewegende kristaldraken en geometrische Pokémon planters tot filmprops op schaal. Haarscherp geprint in hoogwaardig Bio-PLA, PETG of flexibel TPU — of upload direct jouw eigen 3D bestand.
Van soepel bewegende kristaldraken en geometrische Pokémon planters tot filmprops op schaal. Haarscherp geprint in hoogwaardig Bio-PLA+, stevig PETG of flexibel TPU in jouw favoriete kleur!
</p>
<!-- Action CTA's -->
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 pt-2">
<a href="{{ route('catalog') }}" class="playful-btn w-full sm:w-auto px-7 py-3.5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-sm flex items-center justify-center space-x-2 shadow-xs">
<a href="{{ route('catalog') }}" class="w-full sm:w-auto px-7 py-3.5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-sm flex items-center justify-center space-x-2 transition shadow-xs">
<span>Bekijk de Collectie</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
<a href="{{ route('custom.request') }}" class="playful-btn w-full sm:w-auto px-7 py-3.5 rounded-2xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-800 font-bold text-sm flex items-center justify-center space-x-2 shadow-2xs">
<i data-lucide="upload-cloud" class="w-4 h-4 text-rose-500"></i>
<span>Eigen 3D Model Printen</span>
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="w-full sm:w-auto px-6 py-3.5 rounded-2xl bg-violet-100 hover:bg-violet-200 text-violet-900 font-bold text-sm flex items-center justify-center space-x-2 transition">
<span>Fidget Toys & Slugs</span>
<i data-lucide="sparkles" class="w-4 h-4 text-violet-600"></i>
</a>
</div>
@@ -57,7 +57,7 @@
<!-- Right Hero Card / Werkelijke 3D Print Productfoto -->
<div class="lg:col-span-5 relative">
<div class="relative rounded-3xl bg-white p-3 sm:p-4 border border-slate-200 shadow-xl shadow-slate-200/60">
<div class="relative rounded-3xl bg-white p-3 sm:p-4 border border-slate-200/90 shadow-lg">
<div class="absolute top-6 right-6 bg-slate-900/90 backdrop-blur-xs text-white font-bold text-[10px] sm:text-xs px-3 py-1 rounded-full shadow-sm z-10">
Meest gekozen print
@@ -98,7 +98,7 @@
</div>
</section>
<!-- Categorieën Grid met Echte Foto's -->
<!-- 3 Categorieën Grid (Plat, Helder & Speels) -->
<section class="py-12 sm:py-16 bg-white border-b border-slate-200/70">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-8 gap-2">
@@ -113,52 +113,52 @@
</a>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 1. Fidget Toys -->
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="playful-card rounded-3xl bg-slate-50 border border-slate-200/80 overflow-hidden group shadow-2xs hover:shadow-lg flex flex-col justify-between">
<div class="h-44 overflow-hidden bg-slate-100">
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="rounded-3xl bg-[#FAF7FD] border border-violet-100 hover:border-violet-200 transition-all duration-300 overflow-hidden group shadow-2xs hover:shadow-md flex flex-col justify-between">
<div class="h-48 overflow-hidden bg-violet-50">
<img src="/images/categories/fidget-toys.jpg" alt="Fidget Toys 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="p-4 sm:p-5">
<span class="text-[10px] font-bold text-indigo-600 uppercase tracking-wider block">Beweegbare Scharnieren</span>
<h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Fidget Toys & Sensory</h3>
<p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">Kristaldraken, wriemel-slakken en compacte folding cubes met soepel klikgeluid.</p>
<div class="p-5">
<span class="text-[10px] font-bold text-violet-600 uppercase tracking-wider block">Beweegbare Scharnieren</span>
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-violet-700 transition">Fidget Toys & Sensory</h3>
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed">Kristaldraken, wriemel-slakken en compacte folding cubes met soepel klikgeluid.</p>
<div class="mt-4 flex items-center text-xs font-black text-violet-600 group-hover:translate-x-1 transition-transform">
<span>Bekijk collectie</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-1"></i>
</div>
</div>
</a>
<!-- 2. Pokémon -->
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="playful-card rounded-3xl bg-slate-50 border border-slate-200/80 overflow-hidden group shadow-2xs hover:shadow-lg flex flex-col justify-between">
<div class="h-44 overflow-hidden bg-slate-100">
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="rounded-3xl bg-[#FFFBF0] border border-amber-100 hover:border-amber-200 transition-all duration-300 overflow-hidden group shadow-2xs hover:shadow-md flex flex-col justify-between">
<div class="h-48 overflow-hidden bg-amber-50">
<img src="/images/categories/pokemon-3d.jpg" alt="Pokémon 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="p-4 sm:p-5">
<div class="p-5">
<span class="text-[10px] font-bold text-amber-600 uppercase tracking-wider block">Gedetailleerde Figuren</span>
<h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Pokémon 3D Prints</h3>
<p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">Low-poly Pikachu planters, beweegbare Charizard, sluitende Pokéballs en Gengar.</p>
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-amber-700 transition">Pokémon 3D Prints</h3>
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed">Low-poly Pikachu planters, beweegbare Charizard, sluitende Pokéballs en Gengar.</p>
<div class="mt-4 flex items-center text-xs font-black text-amber-700 group-hover:translate-x-1 transition-transform">
<span>Bekijk collectie</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-1"></i>
</div>
</div>
</a>
<!-- 3. Film & Popculture -->
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="playful-card rounded-3xl bg-slate-50 border border-slate-200/80 overflow-hidden group shadow-2xs hover:shadow-lg flex flex-col justify-between">
<div class="h-44 overflow-hidden bg-slate-100">
<!-- 3. Film & Gaming -->
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="rounded-3xl bg-[#FFF5F5] border border-rose-100 hover:border-rose-200 transition-all duration-300 overflow-hidden group shadow-2xs hover:shadow-md flex flex-col justify-between">
<div class="h-48 overflow-hidden bg-rose-50">
<img src="/images/categories/film-popculture.jpg" alt="Film & Gaming 3D Prints" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="p-4 sm:p-5">
<div class="p-5">
<span class="text-[10px] font-bold text-rose-500 uppercase tracking-wider block">Collectibles & Display</span>
<h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Film, Gaming & Props</h3>
<p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">Lightsaber standaarden, Thor Mjolnir bureau-organizers en gedetailleerde Grogu busts.</p>
</div>
</a>
<!-- 4. Eigen 3D Bestand Printen -->
<a href="{{ route('custom.request') }}" class="playful-card rounded-3xl bg-slate-50 border border-slate-200/80 overflow-hidden group shadow-2xs hover:shadow-lg flex flex-col justify-between">
<div class="h-44 overflow-hidden bg-slate-100">
<img src="/images/categories/eigen-model.jpg" alt="Eigen STL Model Printen" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
</div>
<div class="p-4 sm:p-5">
<span class="text-[10px] font-bold text-emerald-600 uppercase tracking-wider block">Direct Online Bestellen</span>
<h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Eigen 3D Model Printen</h3>
<p class="text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">Upload direct jouw STL of 3MF bestand en kies schaal, materiaal en filamentkleur.</p>
<h3 class="font-heading text-lg font-black text-slate-900 group-hover:text-rose-600 transition">Film, Gaming & Props</h3>
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed">Lightsaber standaarden, Thor Mjolnir bureau-organizers en gedetailleerde Grogu figuren.</p>
<div class="mt-4 flex items-center text-xs font-black text-rose-600 group-hover:translate-x-1 transition-transform">
<span>Bekijk collectie</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5 ml-1"></i>
</div>
</div>
</a>
</div>
@@ -166,7 +166,7 @@
</section>
<!-- Uitgelichte Prints Showcase -->
<section class="py-12 sm:py-16 bg-[#FFFDF9]">
<section class="py-12 sm:py-16 bg-[#FBFBFA]">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-8 gap-3">
<div>
@@ -174,7 +174,7 @@
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Populaire modellen</h2>
<p class="text-xs text-slate-500 mt-1">Elk item wordt op bestelling geprint in jouw gewenste kleur en met de hand nagekeken.</p>
</div>
<a href="{{ route('catalog') }}" class="playful-btn px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-800 text-xs font-bold transition flex items-center space-x-1.5 self-start sm:self-auto shadow-2xs">
<a href="{{ route('catalog') }}" class="px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-800 text-xs font-bold hover:bg-slate-50 transition flex items-center space-x-1.5 self-start sm:self-auto shadow-2xs">
<span>Volledige catalogus</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a>
@@ -183,7 +183,7 @@
<!-- 2 Kolommen mobiel, 3 op desktop -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-6">
@foreach($featuredProducts as $product)
<div class="playful-card rounded-2xl sm:rounded-3xl bg-white border border-slate-200/80 shadow-xs hover:shadow-lg overflow-hidden flex flex-col justify-between group">
<div class="rounded-2xl sm:rounded-3xl bg-white border border-slate-200/80 shadow-2xs hover:shadow-md transition-all duration-200 overflow-hidden flex flex-col justify-between group">
<!-- Afbeelding & Categorie Badge -->
<div class="relative h-44 sm:h-60 overflow-hidden bg-slate-100">
@@ -195,7 +195,7 @@
>
@if($product->category)
<div class="absolute top-2 left-2 sm:top-3 sm:left-3">
<span class="px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md bg-white/90 backdrop-blur-xs text-slate-900 text-[9px] sm:text-[10px] font-bold shadow-2xs">
<span class="px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md bg-white/90 backdrop-blur-xs text-slate-900 text-[9px] sm:text-[10px] font-black shadow-2xs">
{{ $product->category->name }}
</span>
</div>
@@ -225,14 +225,14 @@
<!-- Footer met prijs & actieknop -->
<div class="pt-2 sm:pt-3 border-t border-slate-100 flex items-center justify-between">
<div>
<span class="text-[9px] sm:text-[10px] text-slate-400 font-semibold uppercase block">Vanaf</span>
<span class="text-[9px] sm:text-[10px] text-slate-400 font-bold uppercase block">Vanaf</span>
<span class="font-heading text-sm sm:text-lg font-black text-slate-900">
{{ $product->formatted_price }}
</span>
</div>
<a href="{{ route('product.show', $product->slug) }}" class="playful-btn px-3 sm:px-3.5 py-1.5 sm:py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-[10px] sm:text-xs font-bold transition flex items-center space-x-1 shadow-2xs">
<span>Configuratie</span>
<a href="{{ route('product.show', $product->slug) }}" class="px-3 sm:px-3.5 py-1.5 sm:py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 text-[10px] sm:text-xs font-bold transition flex items-center space-x-1">
<span>Kies Kleur</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i>
</a>
</div>
@@ -244,27 +244,65 @@
</div>
</section>
<!-- Direct Eigen Model Bestellen Banner -->
<section class="py-12 sm:py-16 bg-slate-900 text-white relative overflow-hidden border-t border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
<div class="p-6 sm:p-10 rounded-3xl bg-slate-800/80 border border-slate-700/80 flex flex-col lg:flex-row items-center justify-between gap-6 sm:gap-8">
<div class="space-y-3 text-center lg:text-left max-w-2xl">
<span class="px-3 py-1 rounded-full bg-slate-700 text-slate-200 text-xs font-bold inline-flex items-center space-x-1.5">
<i data-lucide="file-code" class="w-3.5 h-3.5 text-rose-400"></i>
<span>Eigen CAD / STL bestand laten printen</span>
</span>
<h2 class="font-heading text-2xl sm:text-4xl font-black tracking-tight text-white">
Upload jouw eigen 3D bestand & bestel direct online
</h2>
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed font-normal">
Heb je een .STL of .3MF bestand gedownload van MakerWorld of Printables? Upload het bestand, selecteer gewenste afmetingen en kies het materiaal. Wij zorgen voor een strakke slice en nette nabewerking.
</p>
<!-- Heldere, Kleurrijke Kwaliteits & Voordelen Banner (Vervangt oude STL upload blok) -->
<section class="py-12 sm:py-16 bg-white border-t border-slate-200/80">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-10">
<span class="text-xs font-bold uppercase tracking-wider text-rose-500">Waarom Jouwdriedee.nl?</span>
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight mt-1">
Kwaliteit en passie in elke printlaag
</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-2 leading-relaxed">
Geen vage levertijden of ruwe prints. Elk model wordt in eigen werkplaats gekalibreerd, geprint en gecontroleerd voordat het veilig verpakt op de post gaat.
</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
<!-- Feature 1 -->
<div class="p-5 rounded-3xl bg-[#FAF7FD] border border-violet-100 text-left space-y-2">
<div class="w-10 h-10 rounded-2xl bg-violet-200/60 text-violet-700 flex items-center justify-center font-black">
<i data-lucide="printer" class="w-5 h-5"></i>
</div>
<h3 class="font-heading font-black text-slate-900 text-sm">Bambu Lab Precisie</h3>
<p class="text-xs text-slate-500 leading-relaxed font-medium">Haarscherpe lagen vanaf 0.12mm. Vaste toleranties waardoor scharnieren moeiteloos bewegen.</p>
</div>
<a href="{{ route('custom.request') }}" class="playful-btn px-8 py-4 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs uppercase tracking-wider transition shadow-md flex items-center space-x-2 flex-shrink-0">
<i data-lucide="upload-cloud" class="w-4 h-4"></i>
<span>Direct Model Uploaden & Bestellen</span>
<!-- Feature 2 -->
<div class="p-5 rounded-3xl bg-[#FFFBF0] border border-amber-100 text-left space-y-2">
<div class="w-10 h-10 rounded-2xl bg-amber-200/60 text-amber-800 flex items-center justify-center font-black">
<i data-lucide="palette" class="w-5 h-5"></i>
</div>
<h3 class="font-heading font-black text-slate-900 text-sm">16+ Kleurvariaties</h3>
<p class="text-xs text-slate-500 leading-relaxed font-medium">Van glanzend Silk Goud en Galaxy Zwart tot mat pastel en glow-in-the-dark filament.</p>
</div>
<!-- Feature 3 -->
<div class="p-5 rounded-3xl bg-[#F0FDF4] border border-emerald-100 text-left space-y-2">
<div class="w-10 h-10 rounded-2xl bg-emerald-200/60 text-emerald-800 flex items-center justify-center font-black">
<i data-lucide="shield-check" class="w-5 h-5"></i>
</div>
<h3 class="font-heading font-black text-slate-900 text-sm">Veilig & Duurzaam PLA+</h3>
<p class="text-xs text-slate-500 leading-relaxed font-medium">Gemaakt van hernieuwbare plantaardige zetmelen. Geurloos, gifvrij en stevig in gebruik.</p>
</div>
<!-- Feature 4 -->
<div class="p-5 rounded-3xl bg-[#EFF6FF] border border-sky-100 text-left space-y-2">
<div class="w-10 h-10 rounded-2xl bg-sky-200/60 text-sky-800 flex items-center justify-center font-black">
<i data-lucide="truck" class="w-5 h-5"></i>
</div>
<h3 class="font-heading font-black text-slate-900 text-sm">Snelle Verzending</h3>
<p class="text-xs text-slate-500 leading-relaxed font-medium">Met zorg verpakt in beschermend materiaal. Binnen 2-3 werkdagen verzonden via PostNL.</p>
</div>
</div>
<div class="mt-8 text-center">
<a href="{{ route('catalog') }}" class="inline-flex items-center space-x-2 px-6 py-3 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs transition shadow-xs">
<span>Bekijk alle 3D prints in de winkel</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>
</div>
</section>
@endsection
resources/views/shop/show.blade.php
-14
View File
@@ -124,20 +124,6 @@
{!! nl2br($product->description) !!}
</div>
</div>
@if($product->makerworld_id)
<!-- MakerWorld Model Attributie -->
<div class="p-4 rounded-2xl bg-indigo-50 border border-indigo-100 text-xs text-slate-700 flex items-center justify-between font-bold">
<div class="flex items-center space-x-2">
<span class="px-2.5 py-0.5 rounded-lg bg-indigo-100 text-indigo-700 font-black text-[10px]">MakerWorld Model</span>
<span>Ontworpen door <strong>{{ $product->makerworld_author ?? 'MakerWorld Creator' }}</strong></span>
</div>
<a href="{{ $product->makerworld_url ?? 'https://makerworld.com/nl/models/' . $product->makerworld_id }}" target="_blank" class="text-indigo-600 hover:text-indigo-800 underline inline-flex items-center space-x-1">
<span>Origineel bekijken</span>
<i data-lucide="external-link" class="w-3 h-3"></i>
</a>
</div>
@endif
</div>
<!-- Rechterkant: Interactive Configurator & Bestelmodule -->
tests/Feature/MakerWorldImporterTest.php
-2
View File
@@ -159,8 +159,6 @@ class MakerWorldImporterTest extends TestCase
$detailResponse = $this->get(route('product.show', $product->slug));
$detailResponse->assertStatus(200);
$detailResponse->assertSee('Gekalibreerde Kubus Jouwdriedee');
$detailResponse->assertSee('MakerWorld Model');
$detailResponse->assertSee('DesignerBob');
}
public function test_it_can_batch_import_multiple_models(): void