feat: flat light colorful shop redesign with catchy 3D logo and pure catalog storefront
This commit is contained in:
@@ -93,16 +93,7 @@ class DatabaseSeeder extends Seeder
|
|||||||
'sort_order' => 3,
|
'sort_order' => 3,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$catCustom = Category::updateOrCreate(['slug' => 'eigen-model'], [
|
Category::whereNotIn('slug', ['fidget-toys', 'pokemon-3d', 'film-popculture'])->delete();
|
||||||
'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();
|
|
||||||
|
|
||||||
// 4. Producten met accurate lokale foto's & strakke teksten
|
// 4. Producten met accurate lokale foto's & strakke teksten
|
||||||
Product::truncate();
|
Product::truncate();
|
||||||
|
|||||||
@@ -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>
|
||||||
|
After Width: | Height: | Size: 2.9 KiB |
@@ -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>
|
||||||
|
After Width: | Height: | Size: 4.5 KiB |
@@ -3,13 +3,14 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
|
<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>
|
<title>@yield('title', 'Jouwdriedee.nl | Kleurrijke 3D Prints, Fidget Toys & Collectibles')</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!')">
|
<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 -->
|
<!-- Google Fonts: Fredoka & Nunito -->
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<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'])
|
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||||
|
|
||||||
@@ -22,9 +23,9 @@
|
|||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</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="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="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">
|
<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="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">
|
<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">
|
<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">
|
<a href="{{ route('home') }}" class="flex items-center group py-1">
|
||||||
<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">
|
<img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-9 sm:h-11 w-auto transition-transform duration-200 group-hover:scale-105">
|
||||||
<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>
|
</a>
|
||||||
|
|
||||||
<!-- Desktop Nav Links -->
|
<!-- Desktop Nav Links -->
|
||||||
<nav class="hidden lg:flex items-center space-x-1 text-sm font-bold 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-slate-100 text-slate-900 font-extrabold' : 'hover:bg-slate-50 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
|
Home
|
||||||
</a>
|
</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
|
Fidget Toys
|
||||||
</a>
|
</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
|
Pokémon
|
||||||
</a>
|
</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
|
Film & Gaming
|
||||||
</a>
|
</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">
|
<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' }}">
|
||||||
<i data-lucide="upload-cloud" class="w-3.5 h-3.5"></i>
|
Alle Prints
|
||||||
<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>
|
</a>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
@@ -98,7 +86,7 @@
|
|||||||
name="q"
|
name="q"
|
||||||
value="{{ request('q') }}"
|
value="{{ request('q') }}"
|
||||||
placeholder="Zoek print, model..."
|
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>
|
<i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 pointer-events-none"></i>
|
||||||
</form>
|
</form>
|
||||||
@@ -108,9 +96,9 @@
|
|||||||
$cartItems = is_array(session('cart')) ? session('cart') : [];
|
$cartItems = is_array(session('cart')) ? session('cart') : [];
|
||||||
$cartCount = array_sum(array_column($cartItems, 'quantity'));
|
$cartCount = array_sum(array_column($cartItems, 'quantity'));
|
||||||
@endphp
|
@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>
|
<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)
|
@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">
|
<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 }}
|
{{ $cartCount }}
|
||||||
@@ -133,33 +121,28 @@
|
|||||||
type="text"
|
type="text"
|
||||||
name="q"
|
name="q"
|
||||||
value="{{ request('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"
|
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>
|
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3"></i>
|
||||||
</form>
|
</form>
|
||||||
<div class="flex flex-col space-y-1 font-bold text-sm">
|
<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">
|
<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>
|
<span>Home</span>
|
||||||
</a>
|
</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>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>
|
||||||
<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>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>
|
||||||
<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>
|
<span>Film, Gaming & Collectibles</span>
|
||||||
</a>
|
</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">
|
<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>Eigen 3D Model Bestellen (Upload STL)</span>
|
<span>Alle Prints Bekijken</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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -192,7 +175,7 @@
|
|||||||
@yield('content')
|
@yield('content')
|
||||||
</main>
|
</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">
|
<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="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">
|
<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 -->
|
<!-- Col 1: Brand & Info -->
|
||||||
<div class="space-y-3 sm:col-span-1">
|
<div class="space-y-3 sm:col-span-1">
|
||||||
<div class="flex items-center space-x-2.5">
|
<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">
|
<img src="/images/logo.svg" alt="Jouwdriedee.nl" class="h-8 w-auto brightness-200 invert">
|
||||||
3D
|
|
||||||
</div>
|
|
||||||
<span class="font-heading text-lg font-black text-white tracking-tight">Jouw<span class="text-rose-400">driedee</span>.nl</span>
|
|
||||||
</div>
|
</div>
|
||||||
<p class="text-xs text-slate-300 leading-relaxed font-medium">
|
<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.
|
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' => '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' => '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('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>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Col 3: Veilige Materialen -->
|
<!-- Col 3: Materialen & Kwaliteit -->
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-sky-300">Materialen & Kwaliteit</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">
|
<ul class="space-y-1.5 text-xs text-slate-300 font-medium">
|
||||||
@@ -235,15 +215,15 @@
|
|||||||
</li>
|
</li>
|
||||||
<li class="flex items-center space-x-1.5">
|
<li class="flex items-center space-x-1.5">
|
||||||
<span class="w-2 h-2 rounded-full bg-sky-400"></span>
|
<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>
|
||||||
<li class="flex items-center space-x-1.5">
|
<li class="flex items-center space-x-1.5">
|
||||||
<span class="w-2 h-2 rounded-full bg-amber-400"></span>
|
<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>
|
||||||
<li class="flex items-center space-x-1.5">
|
<li class="flex items-center space-x-1.5">
|
||||||
<span class="w-2 h-2 rounded-full bg-purple-400"></span>
|
<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>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@@ -251,7 +231,7 @@
|
|||||||
<!-- Col 4: Contact -->
|
<!-- Col 4: Contact -->
|
||||||
<div class="space-y-2">
|
<div class="space-y-2">
|
||||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-rose-300">Bestelling & Verzending</h3>
|
<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="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">
|
<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>
|
<i data-lucide="mail" class="w-3.5 h-3.5 text-amber-400"></i>
|
||||||
@@ -259,7 +239,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex items-center space-x-1.5 text-slate-200">
|
<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>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,39 +1,39 @@
|
|||||||
@extends('layouts.app')
|
@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')
|
@section('content')
|
||||||
<!-- Hero Section (Professioneel, Helder & Sfeervol) -->
|
<!-- Hero Section (Helder, Kleurrijk & Fris) -->
|
||||||
<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">
|
<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="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">
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-center">
|
||||||
|
|
||||||
<!-- Left Hero Content -->
|
<!-- Left Hero Content -->
|
||||||
<div class="lg:col-span-7 space-y-4 sm:space-y-6 text-center lg:text-left">
|
<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 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>
|
</div>
|
||||||
|
|
||||||
<h1 class="font-heading text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 leading-[1.15]">
|
<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>
|
<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>
|
</h1>
|
||||||
|
|
||||||
<p class="text-sm sm:text-base text-slate-600 max-w-xl mx-auto lg:mx-0 font-normal leading-relaxed">
|
<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>
|
</p>
|
||||||
|
|
||||||
<!-- Action CTA's -->
|
<!-- Action CTA's -->
|
||||||
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 pt-2">
|
<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>
|
<span>Bekijk de Collectie</span>
|
||||||
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||||
</a>
|
</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">
|
<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">
|
||||||
<i data-lucide="upload-cloud" class="w-4 h-4 text-rose-500"></i>
|
<span>Fidget Toys & Slugs</span>
|
||||||
<span>Eigen 3D Model Printen</span>
|
<i data-lucide="sparkles" class="w-4 h-4 text-violet-600"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -57,7 +57,7 @@
|
|||||||
|
|
||||||
<!-- Right Hero Card / Werkelijke 3D Print Productfoto -->
|
<!-- Right Hero Card / Werkelijke 3D Print Productfoto -->
|
||||||
<div class="lg:col-span-5 relative">
|
<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">
|
<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
|
Meest gekozen print
|
||||||
@@ -98,7 +98,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</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">
|
<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="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">
|
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-8 gap-2">
|
||||||
@@ -113,52 +113,52 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</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 -->
|
<!-- 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">
|
<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-44 overflow-hidden bg-slate-100">
|
<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">
|
<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>
|
||||||
<div class="p-4 sm:p-5">
|
<div class="p-5">
|
||||||
<span class="text-[10px] font-bold text-indigo-600 uppercase tracking-wider block">Beweegbare Scharnieren</span>
|
<span class="text-[10px] font-bold text-violet-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>
|
<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 line-clamp-2 leading-relaxed">Kristaldraken, wriemel-slakken en compacte folding cubes met soepel klikgeluid.</p>
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- 2. Pokémon -->
|
<!-- 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">
|
<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-44 overflow-hidden bg-slate-100">
|
<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">
|
<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>
|
||||||
<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>
|
<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>
|
<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 line-clamp-2 leading-relaxed">Low-poly Pikachu planters, beweegbare Charizard, sluitende Pokéballs en Gengar.</p>
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<!-- 3. Film & Popculture -->
|
<!-- 3. Film & Gaming -->
|
||||||
<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">
|
<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-44 overflow-hidden bg-slate-100">
|
<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">
|
<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>
|
||||||
<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>
|
<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>
|
<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 line-clamp-2 leading-relaxed">Lightsaber standaarden, Thor Mjolnir bureau-organizers en gedetailleerde Grogu busts.</p>
|
<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>
|
|
||||||
|
|
||||||
<!-- 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>
|
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -166,7 +166,7 @@
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Uitgelichte Prints Showcase -->
|
<!-- 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="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 class="flex flex-col sm:flex-row sm:items-end justify-between mb-8 gap-3">
|
||||||
<div>
|
<div>
|
||||||
@@ -174,7 +174,7 @@
|
|||||||
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Populaire modellen</h2>
|
<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>
|
<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>
|
</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>
|
<span>Volledige catalogus</span>
|
||||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||||
</a>
|
</a>
|
||||||
@@ -183,7 +183,7 @@
|
|||||||
<!-- 2 Kolommen mobiel, 3 op desktop -->
|
<!-- 2 Kolommen mobiel, 3 op desktop -->
|
||||||
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-6">
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-3 sm:gap-6">
|
||||||
@foreach($featuredProducts as $product)
|
@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 -->
|
<!-- Afbeelding & Categorie Badge -->
|
||||||
<div class="relative h-44 sm:h-60 overflow-hidden bg-slate-100">
|
<div class="relative h-44 sm:h-60 overflow-hidden bg-slate-100">
|
||||||
@@ -195,7 +195,7 @@
|
|||||||
>
|
>
|
||||||
@if($product->category)
|
@if($product->category)
|
||||||
<div class="absolute top-2 left-2 sm:top-3 sm:left-3">
|
<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 }}
|
{{ $product->category->name }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -225,14 +225,14 @@
|
|||||||
<!-- Footer met prijs & actieknop -->
|
<!-- Footer met prijs & actieknop -->
|
||||||
<div class="pt-2 sm:pt-3 border-t border-slate-100 flex items-center justify-between">
|
<div class="pt-2 sm:pt-3 border-t border-slate-100 flex items-center justify-between">
|
||||||
<div>
|
<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">
|
<span class="font-heading text-sm sm:text-lg font-black text-slate-900">
|
||||||
{{ $product->formatted_price }}
|
{{ $product->formatted_price }}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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">
|
<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>Configuratie</span>
|
<span>Kies Kleur</span>
|
||||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@@ -244,27 +244,65 @@
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Direct Eigen Model Bestellen Banner -->
|
<!-- Heldere, Kleurrijke Kwaliteits & Voordelen Banner (Vervangt oude STL upload blok) -->
|
||||||
<section class="py-12 sm:py-16 bg-slate-900 text-white relative overflow-hidden border-t border-slate-800">
|
<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 relative">
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<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">
|
<div class="text-center max-w-2xl mx-auto mb-10">
|
||||||
<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">
|
<span class="text-xs font-bold uppercase tracking-wider text-rose-500">Waarom Jouwdriedee.nl?</span>
|
||||||
<i data-lucide="file-code" class="w-3.5 h-3.5 text-rose-400"></i>
|
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight mt-1">
|
||||||
<span>Eigen CAD / STL bestand laten printen</span>
|
Kwaliteit en passie in elke printlaag
|
||||||
</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>
|
</h2>
|
||||||
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed font-normal">
|
<p class="text-xs sm:text-sm text-slate-500 mt-2 leading-relaxed">
|
||||||
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.
|
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>
|
</p>
|
||||||
</div>
|
</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>
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||||
<span>Direct Model Uploaden & Bestellen</span>
|
<!-- 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>
|
||||||
|
|
||||||
|
<!-- 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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@endsection
|
@endsection
|
||||||
|
|||||||
@@ -124,20 +124,6 @@
|
|||||||
{!! nl2br($product->description) !!}
|
{!! nl2br($product->description) !!}
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Rechterkant: Interactive Configurator & Bestelmodule -->
|
<!-- Rechterkant: Interactive Configurator & Bestelmodule -->
|
||||||
|
|||||||
@@ -159,8 +159,6 @@ class MakerWorldImporterTest extends TestCase
|
|||||||
$detailResponse = $this->get(route('product.show', $product->slug));
|
$detailResponse = $this->get(route('product.show', $product->slug));
|
||||||
$detailResponse->assertStatus(200);
|
$detailResponse->assertStatus(200);
|
||||||
$detailResponse->assertSee('Gekalibreerde Kubus Jouwdriedee');
|
$detailResponse->assertSee('Gekalibreerde Kubus Jouwdriedee');
|
||||||
$detailResponse->assertSee('MakerWorld Model');
|
|
||||||
$detailResponse->assertSee('DesignerBob');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function test_it_can_batch_import_multiple_models(): void
|
public function test_it_can_batch_import_multiple_models(): void
|
||||||
|
|||||||
Reference in New Issue
Block a user