NiekRabelink/jouwdriedee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: complete admin CMS for customizable layout, texts, products, categories and orders

Browse Source
This commit is contained in:
Niek Rabelink
2026-10-31 21:18:01 +01:00
parent 957661a186
commit f8c002366b
21 changed files with 2076 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/shop/index.blade.php
+78 -37
View File
@@ -1,9 +1,9 @@
@extends('layouts.app')
@section('title', 'Jouwdriedee.nl | Kleurrijke 3D Prints, Fidget Toys & Collectibles')
@section('title', setting('site_name', 'Jouwdriedee.nl') . ' | ' . setting('site_tagline', 'Kleurrijke 3D Prints, Fidget Toys & Collectibles'))
@section('content')
<!-- Hero Section (Helder, Kleurrijk & Fris) -->
<!-- Hero Section (Helder, Kleurrijk, Aanpasbaar via Admin) -->
<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">
@@ -13,26 +13,25 @@
<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>Nederlandse 3D Printstudio • Bambu Lab Precisie</span>
<span>{{ setting('hero_badge', '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]">
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>
{!! nl2br(e(setting('hero_title', 'Kleurrijke 3D prints, fidget toys & collectibles.'))) !!}
</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+, stevig PETG of flexibel TPU in jouw favoriete kleur!
{{ 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>
<!-- 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="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>
<a href="{{ setting('hero_primary_btn_url', 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>{{ setting('hero_primary_btn_text', 'Bekijk de Collectie') }}</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
<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>
<a href="{{ setting('hero_secondary_btn_url', 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>{{ setting('hero_secondary_btn_text', 'Fidget Toys & Slugs') }}</span>
<i data-lucide="sparkles" class="w-4 h-4 text-violet-600"></i>
</a>
</div>
@@ -40,16 +39,28 @@
<!-- 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 class="text-base sm:text-xl font-black text-slate-900 font-heading">
{{ setting('hero_stat_1_val', '0.12 mm') }}
</div>
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">
{{ setting('hero_stat_1_lbl', 'Minimale laaghoogte') }}
</div>
</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 class="text-base sm:text-xl font-black text-slate-900 font-heading">
{{ setting('hero_stat_2_val', 'Bambu Lab') }}
</div>
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">
{{ setting('hero_stat_2_lbl', 'X1-Carbon Precisie') }}
</div>
</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 class="text-base sm:text-xl font-black text-slate-900 font-heading">
{{ setting('hero_stat_3_val', '2-3 Dagen') }}
</div>
<div class="text-[10px] sm:text-[11px] font-semibold text-slate-500 mt-0.5">
{{ setting('hero_stat_3_lbl', 'Verzending via PostNL') }}
</div>
</div>
</div>
@@ -60,7 +71,7 @@
<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
{{ setting('hero_card_badge', 'Meest gekozen print') }}
</div>
<div class="relative h-64 sm:h-84 rounded-2xl overflow-hidden bg-slate-100">
@@ -98,14 +109,20 @@
</div>
</section>
<!-- 3 Categorieën Grid (Plat, Helder & Speels) -->
<!-- 3 Categorieën Grid (Plat, Helder & Aanpasbaar) -->
<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">
<div>
<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>
<span class="text-xs font-bold uppercase tracking-wider text-rose-500">
{{ setting('categories_tag', 'Collecties') }}
</span>
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">
{{ setting('categories_title', 'Ontdek per categorie') }}
</h2>
<p class="text-xs text-slate-500 mt-1">
{{ setting('categories_subtitle', '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>Alle prints bekijken</span>
@@ -170,9 +187,15 @@
<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-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>
<span class="text-xs font-bold uppercase tracking-wider text-rose-500">
{{ setting('featured_tag', 'Selectie') }}
</span>
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">
{{ setting('featured_title', 'Populaire modellen') }}
</h2>
<p class="text-xs 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-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>
@@ -244,17 +267,19 @@
</div>
</section>
<!-- Heldere, Kleurrijke Kwaliteits & Voordelen Banner (Vervangt oude STL upload blok) -->
<!-- Heldere Kwaliteits & Voordelen Banner (Aanpasbaar via Admin) -->
<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>
<span class="text-xs font-bold uppercase tracking-wider text-rose-500">
{{ setting('usp_tag', '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
{{ setting('usp_title', '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.
{{ 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>
@@ -264,8 +289,12 @@
<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>
<h3 class="font-heading font-black text-slate-900 text-sm">
{{ setting('usp_1_title', 'Bambu Lab Precisie') }}
</h3>
<p class="text-xs text-slate-500 leading-relaxed font-medium">
{{ setting('usp_1_desc', 'Haarscherpe lagen vanaf 0.12mm. Vaste toleranties waardoor scharnieren moeiteloos bewegen.') }}
</p>
</div>
<!-- Feature 2 -->
@@ -273,8 +302,12 @@
<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>
<h3 class="font-heading font-black text-slate-900 text-sm">
{{ setting('usp_2_title', '16+ Kleurvariaties') }}
</h3>
<p class="text-xs text-slate-500 leading-relaxed font-medium">
{{ setting('usp_2_desc', 'Van glanzend Silk Goud en Galaxy Zwart tot mat pastel en glow-in-the-dark filament.') }}
</p>
</div>
<!-- Feature 3 -->
@@ -282,8 +315,12 @@
<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>
<h3 class="font-heading font-black text-slate-900 text-sm">
{{ setting('usp_3_title', 'Veilig & Duurzaam PLA+') }}
</h3>
<p class="text-xs text-slate-500 leading-relaxed font-medium">
{{ setting('usp_3_desc', 'Gemaakt van hernieuwbare plantaardige zetmelen. Geurloos, gifvrij en stevig in gebruik.') }}
</p>
</div>
<!-- Feature 4 -->
@@ -291,14 +328,18 @@
<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>
<h3 class="font-heading font-black text-slate-900 text-sm">
{{ setting('usp_4_title', 'Snelle Verzending') }}
</h3>
<p class="text-xs text-slate-500 leading-relaxed font-medium">
{{ setting('usp_4_desc', '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>
<span>{{ setting('usp_btn_text', 'Bekijk alle 3D prints in de winkel') }}</span>
<i data-lucide="arrow-right" class="w-4 h-4"></i>
</a>
</div>