285 lines
18 KiB
PHP
285 lines
18 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Jouwdriedee.nl ✨ Dé 3D Print Webshop voor Fidget Toys & Pokémon')
|
|
|
|
@section('content')
|
|
<!-- Hero Section (Vrolijk, Modern & Niet Lomp) -->
|
|
<section class="relative overflow-hidden bg-gradient-to-b from-amber-50/70 via-rose-50/40 to-[#FFFDF9] pt-8 pb-14 sm:pt-14 sm:pb-20 border-b border-slate-200/60">
|
|
|
|
<!-- Subtiele pastel bollen -->
|
|
<div class="absolute top-6 left-6 w-32 h-32 bg-amber-200/40 rounded-full blur-2xl pointer-events-none"></div>
|
|
<div class="absolute top-1/2 right-8 w-48 h-48 bg-rose-200/30 rounded-full blur-3xl pointer-events-none"></div>
|
|
<div class="absolute bottom-4 left-1/3 w-40 h-40 bg-sky-200/30 rounded-full blur-2xl pointer-events-none"></div>
|
|
|
|
<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">
|
|
|
|
<!-- Pill Badge -->
|
|
<div class="inline-flex items-center space-x-2 px-3.5 py-1.5 rounded-full bg-white/90 border border-amber-200 shadow-2xs text-slate-800 text-xs font-black">
|
|
<span class="animate-pulse text-sm">✨</span>
|
|
<span class="tracking-wide">Dé gezelligste 3D print webshop van Nederland!</span>
|
|
</div>
|
|
|
|
<h1 class="font-heading text-3xl sm:text-5xl lg:text-6xl font-black tracking-tight text-slate-900 leading-[1.18]">
|
|
Vrolijke 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 & Pokémon!</span> 🌀⚡
|
|
</h1>
|
|
|
|
<p class="text-sm sm:text-base text-slate-600 max-w-xl mx-auto lg:mx-0 font-medium leading-relaxed">
|
|
Op zoek naar een soepel bewegende kristaldraak, een toffe Pikachu plantenbak of film collectibles? Kies je favoriete printkleur of bestel direct jouw eigen 3D model!
|
|
</p>
|
|
|
|
<!-- Action CTA's (Modern, Smooth & Touch Friendly) -->
|
|
<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-gradient-to-r from-amber-400 via-rose-400 to-rose-500 hover:opacity-95 text-slate-950 font-black text-sm flex items-center justify-center space-x-2 shadow-md shadow-rose-500/20">
|
|
<span>Ontdek Alle Prints 🎁</span>
|
|
<i data-lucide="arrow-right" class="w-4 h-4 stroke-[2.5]"></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-extrabold text-sm flex items-center justify-center space-x-2 shadow-xs">
|
|
<span>Eigen Model Bestellen 🚀</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- USP badges -->
|
|
<div class="pt-4 grid grid-cols-3 gap-2 sm:gap-3 max-w-md mx-auto lg:mx-0">
|
|
<div class="p-2.5 sm:p-3 bg-white/90 border border-slate-100 rounded-2xl shadow-xs text-center">
|
|
<div class="text-base sm:text-xl font-black text-rose-500 font-heading">100% Bio</div>
|
|
<div class="text-[10px] sm:text-[11px] font-bold text-slate-500">Kindvriendelijk PLA</div>
|
|
</div>
|
|
<div class="p-2.5 sm:p-3 bg-white/90 border border-slate-100 rounded-2xl shadow-xs text-center">
|
|
<div class="text-base sm:text-xl font-black text-amber-500 font-heading">9+ Kleuren</div>
|
|
<div class="text-[10px] sm:text-[11px] font-bold text-slate-500">Zijdeglans & Mat</div>
|
|
</div>
|
|
<div class="p-2.5 sm:p-3 bg-white/90 border border-slate-100 rounded-2xl shadow-xs text-center">
|
|
<div class="text-base sm:text-xl font-black text-indigo-500 font-heading">PostNL</div>
|
|
<div class="text-[10px] sm:text-[11px] font-bold text-slate-500">2-3 Dagen in huis</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right Hero Card / Showcase (Verfijnd & Speels) -->
|
|
<div class="lg:col-span-5 relative">
|
|
<div class="relative rounded-3xl bg-white p-3 sm:p-4 border border-slate-100 shadow-xl shadow-slate-200/50">
|
|
|
|
<div class="absolute -top-3 -right-2 bg-gradient-to-r from-rose-500 to-amber-500 text-white font-black text-[11px] px-3 py-1 rounded-full shadow-md z-10 flex items-center space-x-1">
|
|
<span>🔥</span>
|
|
<span>Favoriet</span>
|
|
</div>
|
|
|
|
<div class="relative h-64 sm:h-80 rounded-2xl overflow-hidden bg-slate-100">
|
|
<img
|
|
src="https://images.unsplash.com/photo-1563089145-599997674d42?auto=format&fit=crop&w=1000&q=80"
|
|
alt="3D Kristaldraak"
|
|
class="w-full h-full object-cover object-center hover:scale-105 transition-transform duration-500"
|
|
>
|
|
|
|
<div class="absolute bottom-2.5 left-2.5 right-2.5 p-3 rounded-xl bg-white/95 backdrop-blur-xs border border-slate-100 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<span class="text-[10px] font-black uppercase text-amber-600 flex items-center space-x-1">
|
|
<span>🌀</span>
|
|
<span>Fidget & Sensory</span>
|
|
</span>
|
|
<h3 class="font-heading font-black text-slate-900 text-xs sm:text-sm">Articulated Kristaldraak</h3>
|
|
</div>
|
|
<div class="bg-amber-100 text-amber-900 px-2.5 py-1 rounded-lg font-heading font-black text-xs sm:text-sm">
|
|
€ 17,95
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-3 flex items-center justify-between text-[11px] font-bold text-slate-500 px-1">
|
|
<span class="flex items-center space-x-1">
|
|
<span>🎨</span>
|
|
<span>Kies jouw gewenste kleur</span>
|
|
</span>
|
|
<span class="flex items-center space-x-1">
|
|
<span>🌱</span>
|
|
<span>100% Veilig Bio-materiaal</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Categorieën Grid (4 Duidelijke en Toegankelijke Blokken) -->
|
|
<section class="py-10 sm:py-14 bg-white border-b border-slate-200/60">
|
|
<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-6 gap-2">
|
|
<div>
|
|
<span class="text-xs font-black uppercase tracking-wider text-rose-500 flex items-center space-x-1">
|
|
<span>🧸</span>
|
|
<span>Direct naar categorie</span>
|
|
</span>
|
|
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Kies jouw favoriete thema</h2>
|
|
</div>
|
|
<a href="{{ route('catalog') }}" class="text-xs font-bold text-rose-600 hover:text-rose-700 flex items-center space-x-1 self-start sm:self-auto">
|
|
<span>Bekijk alle 3D prints</span>
|
|
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-5">
|
|
<!-- 1. Fidget Toys -->
|
|
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="playful-card p-4 sm:p-5 rounded-3xl bg-gradient-to-br from-indigo-50/80 to-purple-50/80 border border-indigo-100 hover:border-indigo-300 text-left flex flex-col justify-between group shadow-xs">
|
|
<div class="w-12 h-12 rounded-2xl bg-white shadow-xs flex items-center justify-center mb-3 text-2xl group-hover:scale-110 transition transform">
|
|
🌀
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] font-extrabold text-indigo-500 uppercase tracking-wider block">Beweegbaar & ASMR</span>
|
|
<h3 class="font-heading text-base font-black text-slate-900 group-hover:text-indigo-600 transition">Fidget Toys</h3>
|
|
<p class="text-[11px] text-slate-500 mt-0.5 line-clamp-1">Draken, slakken, cubes & spinners</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 2. Pokémon -->
|
|
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="playful-card p-4 sm:p-5 rounded-3xl bg-gradient-to-br from-amber-50/80 to-yellow-50/80 border border-amber-100 hover:border-amber-300 text-left flex flex-col justify-between group shadow-xs">
|
|
<div class="w-12 h-12 rounded-2xl bg-white shadow-xs flex items-center justify-center mb-3 text-2xl group-hover:scale-110 transition transform">
|
|
⚡
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] font-extrabold text-amber-600 uppercase tracking-wider block">Gotta Print 'Em All</span>
|
|
<h3 class="font-heading text-base font-black text-slate-900 group-hover:text-amber-600 transition">Pokémon Prints</h3>
|
|
<p class="text-[11px] text-slate-500 mt-0.5 line-clamp-1">Pikachu, Charizard, Pokéball & Gengar</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 3. Film & Popculture -->
|
|
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="playful-card p-4 sm:p-5 rounded-3xl bg-gradient-to-br from-rose-50/80 to-pink-50/80 border border-rose-100 hover:border-rose-300 text-left flex flex-col justify-between group shadow-xs">
|
|
<div class="w-12 h-12 rounded-2xl bg-white shadow-xs flex items-center justify-center mb-3 text-2xl group-hover:scale-110 transition transform">
|
|
🎬
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] font-extrabold text-rose-500 uppercase tracking-wider block">Iconische Items</span>
|
|
<h3 class="font-heading text-base font-black text-slate-900 group-hover:text-rose-600 transition">Film & Gaming</h3>
|
|
<p class="text-[11px] text-slate-500 mt-0.5 line-clamp-1">Star Wars Grogu, Thor Mjolnir & meer</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 4. Eigen Model Bestellen -->
|
|
<a href="{{ route('custom.request') }}" class="playful-card p-4 sm:p-5 rounded-3xl bg-gradient-to-br from-emerald-50/80 to-teal-50/80 border border-emerald-100 hover:border-emerald-300 text-left flex flex-col justify-between group shadow-xs">
|
|
<div class="w-12 h-12 rounded-2xl bg-white shadow-xs flex items-center justify-center mb-3 text-2xl group-hover:scale-110 transition transform">
|
|
🚀
|
|
</div>
|
|
<div>
|
|
<span class="text-[10px] font-extrabold text-emerald-600 uppercase tracking-wider block">Direct Online</span>
|
|
<h3 class="font-heading text-base font-black text-slate-900 group-hover:text-emerald-600 transition">Eigen Model Printen</h3>
|
|
<p class="text-[11px] text-slate-500 mt-0.5 line-clamp-1">Upload STL / 3MF en bestel direct</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Uitgelichte Prints Showcase (Mobile-First 2-koloms / Desktop 3-koloms) -->
|
|
<section class="py-12 sm:py-16 bg-[#FFFDF9]">
|
|
<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>
|
|
<span class="text-xs font-black uppercase tracking-wider text-amber-600 flex items-center space-x-1">
|
|
<span>🌟</span>
|
|
<span>Populairste Prints</span>
|
|
</span>
|
|
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Direct te bestellen in jouw kleur</h2>
|
|
<p class="text-xs text-slate-500 mt-1">Kies je favoriet, selecteer je lievelingskleur en wij starten de printer!</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">
|
|
<span>Alle prints bekijken</span>
|
|
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 2 Kolommen op 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-100 shadow-xs hover:shadow-lg overflow-hidden flex flex-col justify-between group">
|
|
|
|
<!-- Afbeelding & Badges -->
|
|
<div class="relative h-40 sm:h-60 overflow-hidden bg-slate-100">
|
|
<img
|
|
src="{{ $product->image_url }}"
|
|
alt="{{ $product->name }}"
|
|
class="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-500"
|
|
loading="lazy"
|
|
>
|
|
@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-lg bg-white/90 backdrop-blur-xs text-slate-900 text-[9px] sm:text-[10px] font-black shadow-2xs">
|
|
{{ $product->category->name }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
|
|
@if($product->print_time_hours)
|
|
<div class="hidden sm:flex absolute bottom-2.5 left-2.5 px-2 py-0.5 rounded-md bg-slate-900/80 backdrop-blur-xs text-white text-[10px] font-bold items-center space-x-1">
|
|
<span>⏱️</span>
|
|
<span>{{ $product->print_time_hours }}u</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Inhoud -->
|
|
<div class="p-3 sm:p-5 flex-1 flex flex-col justify-between space-y-3">
|
|
<div>
|
|
<h3 class="font-heading text-xs sm:text-base font-black text-slate-900 group-hover:text-rose-600 transition tracking-tight line-clamp-2">
|
|
<a href="{{ route('product.show', $product->slug) }}">
|
|
{{ $product->name }}
|
|
</a>
|
|
</h3>
|
|
<p class="hidden sm:block text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed">
|
|
{{ $product->short_description }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- 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-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-2.5 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-black transition flex items-center space-x-1 shadow-2xs">
|
|
<span>Kleur 🎨</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Direct Eigen Model Bestellen Banner (Sleek & Duidelijk) -->
|
|
<section class="py-12 sm:py-16 bg-gradient-to-r from-rose-500 via-amber-500 to-indigo-600 text-white relative overflow-hidden">
|
|
<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-white/10 backdrop-blur-md border border-white/20 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-white/20 text-white text-xs font-black inline-flex items-center space-x-1.5">
|
|
<span>💡</span>
|
|
<span>Zelf een gaaf model gevonden op MakerWorld of Printables?</span>
|
|
</span>
|
|
<h2 class="font-heading text-2xl sm:text-4xl font-black tracking-tight">
|
|
Bestel direct jouw eigen 3D bestand online! 🚀
|
|
</h2>
|
|
<p class="text-xs sm:text-sm text-white/90 leading-relaxed font-medium">
|
|
Upload jouw .STL, .3MF of .STEP bestand (of plak een MakerWorld link). Kies je formaat, materiaal en lievelingskleur en stop hem direct in je winkelmandje!
|
|
</p>
|
|
</div>
|
|
<a href="{{ route('custom.request') }}" class="playful-btn px-8 py-4 rounded-2xl bg-white text-slate-950 hover:bg-slate-50 font-black text-xs uppercase tracking-wider transition shadow-lg flex items-center space-x-2 flex-shrink-0">
|
|
<i data-lucide="upload-cloud" class="w-4 h-4 text-rose-500"></i>
|
|
<span>Direct Eigen Model Bestellen ✨</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
@endsection
|