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

Redesign logo & storefront, light subtle admin theme, and 3D print cost calculator

Browse Source
This commit is contained in:
Niek Rabelink
2026-11-01 21:23:53 +01:00
parent 0c95c7d120
commit e0592212e1
18 changed files with 1887 additions and 1153 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/shop/index.blade.php
+51 -51
View File
@@ -3,15 +3,15 @@
@section('title', setting('site_name', 'Jouwdriedee.nl') . ' | ' . setting('site_tagline', 'Kleurrijke 3D Prints, Fidget Toys & Collectibles'))
@section('content')
<!-- 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">
<!-- Hero Section (Subtiel, Vriendelijk, Kleurrijk) -->
<section class="relative overflow-hidden bg-gradient-to-b from-amber-50/40 via-white to-[#FAF9F6] pt-8 pb-12 sm:pt-14 sm:pb-18 border-b border-slate-200/60">
<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/80 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-xs text-slate-800 text-xs font-semibold">
<span class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></span>
<span>{{ setting('hero_badge', 'Nederlandse 3D Printstudio • Bambu Lab Precisie') }}</span>
</div>
@@ -26,11 +26,11 @@
<!-- Action CTA's -->
<div class="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3 pt-2">
<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">
<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-bold 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-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">
<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-50 hover:bg-violet-100 text-violet-900 font-bold text-sm flex items-center justify-center space-x-2 transition border border-violet-200/50">
<span>{{ setting('hero_secondary_btn_text', 'Fidget Toys & Slugs') }}</span>
<i data-lucide="sparkles" class="w-4 h-4 text-violet-600"></i>
</a>
@@ -38,7 +38,7 @@
<!-- 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="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center">
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">
{{ setting('hero_stat_1_val', '0.12 mm') }}
</div>
@@ -46,7 +46,7 @@
{{ 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="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center">
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">
{{ setting('hero_stat_2_val', 'Bambu Lab') }}
</div>
@@ -54,7 +54,7 @@
{{ 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="p-3 bg-white border border-slate-200/70 rounded-2xl shadow-xs text-center">
<div class="text-base sm:text-xl font-black text-slate-900 font-heading">
{{ setting('hero_stat_3_val', '2-3 Dagen') }}
</div>
@@ -68,9 +68,9 @@
<!-- 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/90 shadow-lg">
<div class="relative rounded-3xl bg-white p-3 sm:p-4 border border-slate-200/80 shadow-md">
<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">
<div class="absolute top-5 right-5 bg-white/95 backdrop-blur-xs text-amber-900 border border-amber-200/80 font-bold text-[10px] sm:text-xs px-3 py-1 rounded-full shadow-xs z-10">
{{ setting('hero_card_badge', 'Meest gekozen print') }}
</div>
@@ -81,9 +81,9 @@
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 class="absolute bottom-2.5 left-2.5 right-2.5 p-3 rounded-xl bg-white/95 backdrop-blur-xs border border-slate-200/80 shadow-xs flex items-center justify-between">
<div>
<span class="text-[10px] font-bold uppercase tracking-wider text-rose-500 block">Fidget & Sensory</span>
<span class="text-[10px] font-bold uppercase tracking-wider text-rose-600 block">Fidget & Sensory</span>
<h3 class="font-heading font-black text-slate-900 text-xs sm:text-sm">Articulated Kristaldraak</h3>
</div>
<div class="text-right">
@@ -93,12 +93,12 @@
</div>
</div>
<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">
<div class="mt-3 flex items-center justify-between text-[11px] text-slate-500 font-medium px-1">
<span class="flex items-center space-x-1.5">
<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 class="flex items-center space-x-1 text-slate-600">
<span>Kleur naar keuze selecteerbaar</span>
</span>
</div>
@@ -109,12 +109,12 @@
</div>
</section>
<!-- 3 Categorieën Grid (Plat, Helder & Aanpasbaar) -->
<section class="py-12 sm:py-16 bg-white border-b border-slate-200/70">
<!-- 3 Categorieën Grid (Subtiel, Warm & Vriendelijk) -->
<section class="py-12 sm:py-16 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-8 gap-2">
<div>
<span class="text-xs font-bold uppercase tracking-wider text-rose-500">
<span class="text-xs font-bold uppercase tracking-wider text-amber-700">
{{ setting('categories_tag', 'Collecties') }}
</span>
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">
@@ -124,7 +124,7 @@
{{ 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">
<a href="{{ route('catalog') }}" class="text-xs font-bold text-amber-700 hover:text-amber-800 flex items-center space-x-1 self-start sm:self-auto">
<span>Alle prints bekijken</span>
<i data-lucide="chevron-right" class="w-3.5 h-3.5"></i>
</a>
@@ -132,15 +132,15 @@
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- 1. Fidget Toys -->
<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">
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="rounded-3xl bg-[#FAF7FD] border border-violet-100 hover:border-violet-200 hover:shadow-md transition-all duration-300 overflow-hidden group shadow-xs 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-5">
<span class="text-[10px] font-bold text-violet-600 uppercase tracking-wider block">Beweegbare Scharnieren</span>
<span class="text-[10px] font-bold text-violet-700 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">
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed font-normal">Kristaldraken, wriemel-slakken en compacte folding cubes met soepel klikgeluid.</p>
<div class="mt-4 flex items-center text-xs font-bold text-violet-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>
@@ -148,15 +148,15 @@
</a>
<!-- 2. Pokémon -->
<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">
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="rounded-3xl bg-[#FFFBF0] border border-amber-100 hover:border-amber-200 hover:shadow-md transition-all duration-300 overflow-hidden group shadow-xs 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-5">
<span class="text-[10px] font-bold text-amber-600 uppercase tracking-wider block">Gedetailleerde Figuren</span>
<span class="text-[10px] font-bold text-amber-700 uppercase tracking-wider block">Gedetailleerde Figuren</span>
<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">
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed font-normal">Low-poly Pikachu planters, beweegbare Charizard, sluitende Pokéballs en Gengar.</p>
<div class="mt-4 flex items-center text-xs font-bold text-amber-800 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>
@@ -164,15 +164,15 @@
</a>
<!-- 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">
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="rounded-3xl bg-[#FFF5F5] border border-rose-100 hover:border-rose-200 hover:shadow-md transition-all duration-300 overflow-hidden group shadow-xs 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-5">
<span class="text-[10px] font-bold text-rose-500 uppercase tracking-wider block">Collectibles & Display</span>
<span class="text-[10px] font-bold text-rose-600 uppercase tracking-wider block">Collectibles & Display</span>
<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">
<p class="text-xs text-slate-500 mt-1.5 line-clamp-2 leading-relaxed font-normal">Lightsaber standaarden, Thor Mjolnir bureau-organizers en gedetailleerde figuren.</p>
<div class="mt-4 flex items-center text-xs font-bold 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>
@@ -182,12 +182,12 @@
</div>
</section>
<!-- Uitgelichte Prints Showcase -->
<section class="py-12 sm:py-16 bg-[#FBFBFA]">
<!-- Uitgelichte Prints Showcase (Subtiel & Vriendelijk) -->
<section class="py-12 sm:py-16 bg-[#FAF9F6]">
<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">
<span class="text-xs font-bold uppercase tracking-wider text-amber-700">
{{ setting('featured_tag', 'Selectie') }}
</span>
<h2 class="font-heading text-2xl sm:text-3xl font-black text-slate-900 tracking-tight">
@@ -197,7 +197,7 @@
{{ 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">
<a href="{{ route('catalog') }}" class="px-4 py-2 rounded-xl bg-white border border-slate-200 text-slate-700 text-xs font-bold hover:bg-slate-50 transition flex items-center space-x-1.5 self-start sm:self-auto shadow-xs">
<span>Volledige catalogus</span>
<i data-lucide="arrow-right" class="w-3.5 h-3.5"></i>
</a>
@@ -206,7 +206,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="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">
<div class="rounded-2xl sm:rounded-3xl bg-white border border-slate-200/80 shadow-xs 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">
@@ -218,15 +218,15 @@
>
@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-black shadow-2xs">
<span class="px-2 py-0.5 sm:px-2.5 sm:py-1 rounded-md bg-white/95 backdrop-blur-xs text-slate-800 text-[9px] sm:text-[10px] font-bold shadow-xs border border-slate-200/60">
{{ $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-medium items-center space-x-1">
<i data-lucide="clock" class="w-3 h-3 text-sky-400"></i>
<div class="hidden sm:flex absolute bottom-2.5 left-2.5 px-2 py-0.5 rounded-md bg-white/95 backdrop-blur-xs text-slate-700 border border-slate-200/60 text-[10px] font-medium items-center space-x-1 shadow-xs">
<i data-lucide="clock" class="w-3 h-3 text-sky-600"></i>
<span>{{ $product->print_time_hours }}u printtijd</span>
</div>
@endif
@@ -235,12 +235,12 @@
<!-- Inhoud -->
<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">
<h3 class="font-heading text-xs sm:text-base font-black text-slate-900 group-hover:text-amber-700 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">
<p class="hidden sm:block text-xs text-slate-500 mt-1 line-clamp-2 leading-relaxed font-normal">
{{ $product->short_description }}
</p>
</div>
@@ -254,7 +254,7 @@
</span>
</div>
<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">
<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 shadow-xs">
<span>Kies Kleur</span>
<i data-lucide="chevron-right" class="w-3 h-3"></i>
</a>
@@ -267,18 +267,18 @@
</div>
</section>
<!-- Heldere Kwaliteits & Voordelen Banner (Aanpasbaar via Admin) -->
<section class="py-12 sm:py-16 bg-white border-t border-slate-200/80">
<!-- Subtiele Kwaliteits & Voordelen Banner (Aanpasbaar via Admin) -->
<section class="py-12 sm:py-16 bg-white border-t border-slate-200/60">
<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">
<span class="text-xs font-bold uppercase tracking-wider text-amber-700">
{{ 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">
{{ setting('usp_title', 'Kwaliteit en passie in elke printlaag') }}
</h2>
<p class="text-xs sm:text-sm text-slate-500 mt-2 leading-relaxed">
<p class="text-xs sm:text-sm text-slate-500 mt-2 leading-relaxed font-normal">
{{ 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>
@@ -292,7 +292,7 @@
<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">
<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>
@@ -305,7 +305,7 @@
<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">
<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>
@@ -318,7 +318,7 @@
<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">
<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>
@@ -331,14 +331,14 @@
<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">
<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-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">
<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-bold text-xs transition shadow-xs">
<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>