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
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