326 lines
20 KiB
PHP
326 lines
20 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', setting('site_name', 'Jouwdriedee.nl') . ' | ' . setting('site_tagline', 'Kleurrijke 3D Prints, Fidget Toys & Collectibles'))
|
|
|
|
@section('content')
|
|
<!-- Hero Section (Fris, Subtiel, Modern & Ruimtelijk) -->
|
|
<section class="relative overflow-hidden pt-10 pb-16 sm:pt-16 sm:pb-24 border-b border-slate-100 bg-gradient-to-b from-slate-50/60 to-white">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
|
|
|
|
<!-- Left Hero Content -->
|
|
<div class="lg:col-span-7 space-y-6 text-center lg:text-left">
|
|
|
|
<div class="inline-flex items-center space-x-2 px-3 py-1 rounded-full bg-white border border-slate-200/80 text-slate-700 text-xs font-medium shadow-2xs">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
<span>{{ setting('hero_badge', 'Nederlandse 3D Printstudio • Bambu Lab Precisie') }}</span>
|
|
</div>
|
|
|
|
<h1 class="font-heading text-4xl sm:text-6xl font-extrabold tracking-tight text-slate-900 leading-[1.08]">
|
|
{!! nl2br(e(setting('hero_title', 'Kleurrijke 3D prints, fidget toys & collectibles.'))) !!}
|
|
</h1>
|
|
|
|
<p class="text-base sm:text-lg text-slate-500 max-w-xl mx-auto lg:mx-0 font-normal leading-relaxed">
|
|
{{ setting('hero_subtitle', '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>
|
|
|
|
<!-- Clean Minimal CTAs -->
|
|
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 pt-1">
|
|
<a href="{{ setting('hero_primary_btn_url', route('catalog')) }}" class="w-full sm:w-auto px-6 py-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-sm flex items-center justify-center space-x-2 transition shadow-xs">
|
|
<span>{{ setting('hero_primary_btn_text', 'Bekijk de Collectie') }}</span>
|
|
<i data-lucide="arrow-right" class="w-4 h-4"></i>
|
|
</a>
|
|
<a href="{{ setting('hero_secondary_btn_url', route('catalog', ['category' => 'fidget-toys'])) }}" class="w-full sm:w-auto px-5 py-3 rounded-xl text-slate-700 hover:text-slate-900 hover:bg-slate-100 font-medium text-sm flex items-center justify-center space-x-2 transition">
|
|
<span>{{ setting('hero_secondary_btn_text', 'Fidget Toys & Slugs') }}</span>
|
|
<i data-lucide="sparkles" class="w-4 h-4 text-slate-400"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Sleek Micro Spec Badges -->
|
|
<div class="pt-6 border-t border-slate-200/60 grid grid-cols-3 gap-4 max-w-md mx-auto lg:mx-0 text-left">
|
|
<div>
|
|
<div class="text-base sm:text-lg font-bold text-slate-900">
|
|
{{ setting('hero_stat_1_val', '0.12 mm') }}
|
|
</div>
|
|
<div class="text-[11px] text-slate-400 font-normal mt-0.5">
|
|
{{ setting('hero_stat_1_lbl', 'Minimale laaghoogte') }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-base sm:text-lg font-bold text-slate-900">
|
|
{{ setting('hero_stat_2_val', 'Bambu Lab') }}
|
|
</div>
|
|
<div class="text-[11px] text-slate-400 font-normal mt-0.5">
|
|
{{ setting('hero_stat_2_lbl', 'X1-Carbon Precisie') }}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-base sm:text-lg font-bold text-slate-900">
|
|
{{ setting('hero_stat_3_val', '2-3 Dagen') }}
|
|
</div>
|
|
<div class="text-[11px] text-slate-400 font-normal mt-0.5">
|
|
{{ setting('hero_stat_3_lbl', 'Verzending via PostNL') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Right Hero Card: Frameless Editorial Showcase -->
|
|
<div class="lg:col-span-5 relative">
|
|
<div class="relative rounded-3xl overflow-hidden bg-slate-100 shadow-xl shadow-slate-900/5 aspect-4/3 sm:aspect-square group border border-slate-200/60">
|
|
<img
|
|
src="/images/products/crystal-dragon.jpg"
|
|
alt="Articulated Kristaldraak 3D Print"
|
|
class="w-full h-full object-cover object-center group-hover:scale-102 transition-transform duration-700 ease-out"
|
|
>
|
|
|
|
<!-- Minimalist Floating Pill -->
|
|
<div class="absolute bottom-4 left-4 right-4 p-3 rounded-2xl bg-white/90 backdrop-blur-md border border-white/40 shadow-sm flex items-center justify-between">
|
|
<div>
|
|
<span class="text-[10px] font-semibold uppercase tracking-wider text-slate-400 block">Uitgelicht</span>
|
|
<h3 class="font-heading font-bold text-slate-900 text-xs sm:text-sm">Articulated Kristaldraak</h3>
|
|
</div>
|
|
<div class="text-right">
|
|
<span class="text-[10px] text-slate-400 block">Vanaf</span>
|
|
<span class="font-heading font-bold text-slate-900 text-xs sm:text-sm">€ 17,95</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="absolute top-4 right-4 bg-slate-900/80 backdrop-blur-md text-white text-[11px] font-medium px-3 py-1 rounded-full shadow-xs">
|
|
{{ setting('hero_card_badge', 'Meest gekozen print') }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 3 Categorieën Strip (Schoon, Modern & Subtiel) -->
|
|
<section class="py-16 sm:py-20 bg-white">
|
|
<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-10 gap-3">
|
|
<div>
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">
|
|
{{ setting('categories_tag', 'Collecties') }}
|
|
</span>
|
|
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">
|
|
{{ setting('categories_title', 'Ontdek per categorie') }}
|
|
</h2>
|
|
<p class="text-xs sm:text-sm text-slate-500 mt-1 max-w-lg">
|
|
{{ setting('categories_subtitle', 'Selecteer een categorie voor alle beschikbare modellen, formaten en kleurstalen.') }}
|
|
</p>
|
|
</div>
|
|
<a href="{{ route('catalog') }}" class="text-xs font-semibold text-slate-700 hover:text-slate-900 flex items-center space-x-1.5 self-start sm:self-auto transition">
|
|
<span>Alles bekijken</span>
|
|
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 sm:gap-8">
|
|
<!-- 1. Fidget Toys -->
|
|
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="group block">
|
|
<div class="aspect-4/3 rounded-2xl overflow-hidden bg-slate-100 border border-slate-200/60 transition-all duration-300 group-hover:border-slate-300 group-hover:shadow-md">
|
|
<img src="/images/categories/fidget-toys.jpg" alt="Fidget Toys 3D Prints" class="w-full h-full object-cover group-hover:scale-103 transition-transform duration-500">
|
|
</div>
|
|
<div class="pt-3.5 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Fidget Toys & Sensory</h3>
|
|
<i data-lucide="arrow-up-right" class="w-4 h-4 text-slate-400 group-hover:text-slate-900 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition"></i>
|
|
</div>
|
|
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Kristaldraken, wriemel-slakken en compacte cubes met soepele scharnieren.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 2. Pokémon -->
|
|
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="group block">
|
|
<div class="aspect-4/3 rounded-2xl overflow-hidden bg-slate-100 border border-slate-200/60 transition-all duration-300 group-hover:border-slate-300 group-hover:shadow-md">
|
|
<img src="/images/categories/pokemon-3d.jpg" alt="Pokémon 3D Prints" class="w-full h-full object-cover group-hover:scale-103 transition-transform duration-500">
|
|
</div>
|
|
<div class="pt-3.5 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Pokémon 3D Prints</h3>
|
|
<i data-lucide="arrow-up-right" class="w-4 h-4 text-slate-400 group-hover:text-slate-900 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition"></i>
|
|
</div>
|
|
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Pikachu planters, beweegbare Charizard, Pokéballs en Gengar figuren.</p>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- 3. Film & Gaming -->
|
|
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="group block">
|
|
<div class="aspect-4/3 rounded-2xl overflow-hidden bg-slate-100 border border-slate-200/60 transition-all duration-300 group-hover:border-slate-300 group-hover:shadow-md">
|
|
<img src="/images/categories/film-popculture.jpg" alt="Film & Gaming 3D Prints" class="w-full h-full object-cover group-hover:scale-103 transition-transform duration-500">
|
|
</div>
|
|
<div class="pt-3.5 space-y-1">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-heading font-semibold text-base text-slate-900 group-hover:text-sky-600 transition">Film, Gaming & Props</h3>
|
|
<i data-lucide="arrow-up-right" class="w-4 h-4 text-slate-400 group-hover:text-slate-900 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition"></i>
|
|
</div>
|
|
<p class="text-xs text-slate-500 line-clamp-1 font-normal">Lightsaber displays, Mjolnir desk organizers en iconische filmfiguren.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Uitgelichte Prints Showcase (Crisp & Modern Grid) -->
|
|
<section class="py-16 sm:py-20 bg-slate-50/50 border-t border-slate-100">
|
|
<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-10 gap-3">
|
|
<div>
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">
|
|
{{ setting('featured_tag', 'Selectie') }}
|
|
</span>
|
|
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">
|
|
{{ setting('featured_title', 'Populaire modellen') }}
|
|
</h2>
|
|
<p class="text-xs sm:text-sm text-slate-500 mt-1">
|
|
{{ setting('featured_subtitle', 'Elk item wordt op bestelling geprint in jouw gewenste kleur en met de hand nagekeken.') }}
|
|
</p>
|
|
</div>
|
|
<a href="{{ route('catalog') }}" class="px-4 py-2 rounded-lg bg-white border border-slate-200 text-slate-700 text-xs font-medium 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>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 sm:gap-6">
|
|
@foreach($featuredProducts as $product)
|
|
<div class="group flex flex-col justify-between bg-white rounded-2xl p-3 border border-slate-200/60 card-hover">
|
|
|
|
<div>
|
|
<!-- Product Photo Frame -->
|
|
<div class="relative aspect-square rounded-xl overflow-hidden bg-slate-50">
|
|
<img
|
|
src="{{ $product->image_url }}"
|
|
alt="{{ $product->name }}"
|
|
class="w-full h-full object-cover object-center group-hover:scale-103 transition-transform duration-500 ease-out"
|
|
loading="lazy"
|
|
>
|
|
@if($product->category)
|
|
<div class="absolute top-2 left-2">
|
|
<span class="px-2 py-0.5 rounded-md bg-white/90 backdrop-blur-xs text-slate-700 text-[10px] font-medium border border-slate-200/50 shadow-2xs">
|
|
{{ $product->category->name }}
|
|
</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- Product Info -->
|
|
<div class="pt-3 pb-1">
|
|
<h3 class="font-heading text-xs sm:text-sm font-semibold text-slate-900 group-hover:text-sky-600 transition line-clamp-1">
|
|
<a href="{{ route('product.show', $product->slug) }}">
|
|
{{ $product->name }}
|
|
</a>
|
|
</h3>
|
|
<p class="text-[11px] text-slate-400 mt-0.5 line-clamp-1 font-normal">
|
|
{{ $product->short_description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer: Price & Direct Link -->
|
|
<div class="pt-2 border-t border-slate-100 flex items-center justify-between mt-2">
|
|
<div>
|
|
<span class="text-[10px] text-slate-400 block font-normal leading-none">Vanaf</span>
|
|
<span class="font-heading text-sm font-bold text-slate-900">
|
|
{{ $product->formatted_price }}
|
|
</span>
|
|
</div>
|
|
|
|
<a href="{{ route('product.show', $product->slug) }}" class="px-2.5 py-1.5 rounded-lg bg-slate-900 hover:bg-slate-800 text-white text-[11px] font-medium transition flex items-center space-x-1 cursor-pointer">
|
|
<span>Kies kleur</span>
|
|
<i data-lucide="chevron-right" class="w-3 h-3"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Subtiele USP's (Puur, Wit & Ruimtelijk) -->
|
|
<section class="py-16 sm:py-20 bg-white border-t border-slate-100">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
|
|
<div class="text-center max-w-xl mx-auto mb-14">
|
|
<span class="text-xs font-semibold uppercase tracking-wider text-slate-400">
|
|
{{ setting('usp_tag', 'Waarom Jouwdriedee.nl?') }}
|
|
</span>
|
|
<h2 class="font-heading text-2xl sm:text-3xl font-bold text-slate-900 tracking-tight mt-1">
|
|
{{ setting('usp_title', 'Kwaliteit en passie in elke printlaag') }}
|
|
</h2>
|
|
<p class="text-xs sm:text-sm text-slate-500 mt-2 font-normal leading-relaxed">
|
|
{{ setting('usp_subtitle', '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-8">
|
|
<!-- USP 1 -->
|
|
<div class="space-y-2">
|
|
<div class="w-9 h-9 rounded-lg bg-slate-100 text-slate-800 flex items-center justify-center font-medium">
|
|
<i data-lucide="printer" class="w-4 h-4"></i>
|
|
</div>
|
|
<h3 class="font-heading font-semibold text-slate-900 text-sm">
|
|
{{ setting('usp_1_title', 'Bambu Lab Precisie') }}
|
|
</h3>
|
|
<p class="text-xs text-slate-500 leading-relaxed font-normal">
|
|
{{ setting('usp_1_desc', 'Haarscherpe lagen vanaf 0.12mm. Vaste toleranties waardoor scharnieren moeiteloos bewegen.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- USP 2 -->
|
|
<div class="space-y-2">
|
|
<div class="w-9 h-9 rounded-lg bg-slate-100 text-slate-800 flex items-center justify-center font-medium">
|
|
<i data-lucide="palette" class="w-4 h-4"></i>
|
|
</div>
|
|
<h3 class="font-heading font-semibold text-slate-900 text-sm">
|
|
{{ setting('usp_2_title', '16+ Kleurvariaties') }}
|
|
</h3>
|
|
<p class="text-xs text-slate-500 leading-relaxed font-normal">
|
|
{{ setting('usp_2_desc', 'Van glanzend Silk Goud en Galaxy Zwart tot mat pastel en glow-in-the-dark filament.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- USP 3 -->
|
|
<div class="space-y-2">
|
|
<div class="w-9 h-9 rounded-lg bg-slate-100 text-slate-800 flex items-center justify-center font-medium">
|
|
<i data-lucide="shield-check" class="w-4 h-4"></i>
|
|
</div>
|
|
<h3 class="font-heading font-semibold text-slate-900 text-sm">
|
|
{{ setting('usp_3_title', 'Veilig & Duurzaam PLA+') }}
|
|
</h3>
|
|
<p class="text-xs text-slate-500 leading-relaxed font-normal">
|
|
{{ setting('usp_3_desc', 'Gemaakt van hernieuwbare plantaardige zetmelen. Geurloos, gifvrij en stevig in gebruik.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- USP 4 -->
|
|
<div class="space-y-2">
|
|
<div class="w-9 h-9 rounded-lg bg-slate-100 text-slate-800 flex items-center justify-center font-medium">
|
|
<i data-lucide="truck" class="w-4 h-4"></i>
|
|
</div>
|
|
<h3 class="font-heading font-semibold text-slate-900 text-sm">
|
|
{{ setting('usp_4_title', 'Snelle Verzending') }}
|
|
</h3>
|
|
<p class="text-xs text-slate-500 leading-relaxed font-normal">
|
|
{{ setting('usp_4_desc', 'Met zorg verpakt in beschermend materiaal. Binnen 2-3 werkdagen verzonden via PostNL.') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-12 text-center">
|
|
<a href="{{ route('catalog') }}" class="inline-flex items-center space-x-2 px-5 py-2.5 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-900 font-medium text-xs transition">
|
|
<span>{{ setting('usp_btn_text', 'Bekijk alle 3D prints in de winkel') }}</span>
|
|
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
@endsection
|