Add accurate photorealistic 3D print product & category photos and rewrite all copy to professional maker-focused texts
This commit is contained in:
@@ -1,104 +1,94 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Jouwdriedee.nl ✨ Dé 3D Print Webshop voor Fidget Toys & Pokémon')
|
||||
@section('title', 'Jouwdriedee.nl | 3D Prints, Fidget Toys, Pokémon & Custom Printservice')
|
||||
|
||||
@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>
|
||||
|
||||
<!-- 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">
|
||||
<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 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">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
|
||||
<span>Precisie 3D Printstudio in 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 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">
|
||||
<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-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 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.
|
||||
</p>
|
||||
|
||||
<!-- Action CTA's (Modern, Smooth & Touch Friendly) -->
|
||||
<!-- 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-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 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">
|
||||
<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-extrabold text-sm flex items-center justify-center space-x-2 shadow-xs">
|
||||
<span>Eigen Model Bestellen 🚀</span>
|
||||
<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>
|
||||
</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>
|
||||
<!-- Technische specificaties / Kwaliteitsbadges -->
|
||||
<div class="pt-4 grid grid-cols-3 gap-2 sm:gap-4 max-w-md mx-auto lg:mx-0">
|
||||
<div class="p-3 bg-white border border-slate-200/80 rounded-2xl shadow-2xs text-center">
|
||||
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">0.12 mm</div>
|
||||
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">Minimale laaghoogte</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 class="p-3 bg-white border border-slate-200/80 rounded-2xl shadow-2xs text-center">
|
||||
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">Bambu Lab</div>
|
||||
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">X1-Carbon Precisie</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 class="p-3 bg-white border border-slate-200/80 rounded-2xl shadow-2xs text-center">
|
||||
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">2-3 Dagen</div>
|
||||
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">Verzending via PostNL</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Right Hero Card / Showcase (Verfijnd & Speels) -->
|
||||
<!-- 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-100 shadow-xl shadow-slate-200/50">
|
||||
<div class="relative rounded-3xl bg-white p-3 sm:p-4 border border-slate-200 shadow-xl shadow-slate-200/60">
|
||||
|
||||
<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 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
|
||||
</div>
|
||||
|
||||
<div class="relative h-64 sm:h-80 rounded-2xl overflow-hidden bg-slate-100">
|
||||
<div class="relative h-64 sm:h-84 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"
|
||||
src="/images/products/crystal-dragon.jpg"
|
||||
alt="Articulated Kristaldraak 3D Print"
|
||||
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>
|
||||
<span class="text-[10px] font-bold uppercase tracking-wider text-rose-500 block">Fidget & Sensory</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 class="text-right">
|
||||
<span class="text-[10px] text-slate-400 block font-semibold">Vanaf</span>
|
||||
<span class="font-heading font-black text-slate-900 text-xs sm:text-sm">€ 17,95</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 flex items-center justify-between text-[11px] font-bold text-slate-500 px-1">
|
||||
<div class="mt-3 flex items-center justify-between text-[11px] text-slate-500 font-semibold px-1">
|
||||
<span class="flex items-center space-x-1">
|
||||
<span>🎨</span>
|
||||
<span>Kies jouw gewenste kleur</span>
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
||||
<span>Print-in-place scharnieren</span>
|
||||
</span>
|
||||
<span class="flex items-center space-x-1">
|
||||
<span>🌱</span>
|
||||
<span>100% Veilig Bio-materiaal</span>
|
||||
<span>Kleur naar keuze selecteerbaar</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -108,100 +98,95 @@
|
||||
</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">
|
||||
<!-- Categorieën Grid met Echte Foto's -->
|
||||
<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-6 gap-2">
|
||||
<div class="flex flex-col sm:flex-row sm:items-end justify-between mb-8 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>
|
||||
<span class="text-xs font-bold uppercase tracking-wider text-rose-500">Collecties</span>
|
||||
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">Ontdek per categorie</h2>
|
||||
<p class="text-xs text-slate-500 mt-1">Selecteer een categorie voor alle beschikbare modellen, formaten en kleurstalen.</p>
|
||||
</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>
|
||||
<span>Alle prints bekijken</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">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6">
|
||||
<!-- 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">
|
||||
🌀
|
||||
<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">
|
||||
<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>
|
||||
<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 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>
|
||||
</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">
|
||||
⚡
|
||||
<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">
|
||||
<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>
|
||||
<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 class="p-4 sm: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>
|
||||
</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">
|
||||
🎬
|
||||
<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">
|
||||
<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>
|
||||
<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 class="p-4 sm: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 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">
|
||||
🚀
|
||||
<!-- 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>
|
||||
<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 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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Uitgelichte Prints Showcase (Mobile-First 2-koloms / Desktop 3-koloms) -->
|
||||
<!-- Uitgelichte Prints Showcase -->
|
||||
<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>
|
||||
<span class="text-xs font-bold uppercase tracking-wider text-rose-500">Selectie</span>
|
||||
<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">
|
||||
<span>Alle prints bekijken</span>
|
||||
<span>Volledige catalogus</span>
|
||||
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- 2 Kolommen op 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">
|
||||
@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">
|
||||
<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">
|
||||
|
||||
<!-- Afbeelding & Badges -->
|
||||
<div class="relative h-40 sm:h-60 overflow-hidden bg-slate-100">
|
||||
<!-- Afbeelding & Categorie Badge -->
|
||||
<div class="relative h-44 sm:h-60 overflow-hidden bg-slate-100">
|
||||
<img
|
||||
src="{{ $product->image_url }}"
|
||||
alt="{{ $product->name }}"
|
||||
@@ -210,22 +195,22 @@
|
||||
>
|
||||
@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">
|
||||
<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">
|
||||
{{ $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 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-medium items-center space-x-1">
|
||||
<i data-lucide="clock" class="w-3 h-3 text-sky-400"></i>
|
||||
<span>{{ $product->print_time_hours }}u printtijd</span>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Inhoud -->
|
||||
<div class="p-3 sm:p-5 flex-1 flex flex-col justify-between space-y-3">
|
||||
<div class="p-3.5 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) }}">
|
||||
@@ -240,14 +225,15 @@
|
||||
<!-- 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="text-[9px] sm:text-[10px] text-slate-400 font-semibold 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 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>
|
||||
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -258,25 +244,25 @@
|
||||
</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">
|
||||
<!-- 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-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="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-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 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">
|
||||
Bestel direct jouw eigen 3D bestand online! 🚀
|
||||
<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-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 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>
|
||||
</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 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>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user