Add accurate photorealistic 3D print product & category photos and rewrite all copy to professional maker-focused texts
This commit is contained in:
@@ -15,30 +15,30 @@ class DatabaseSeeder extends Seeder
|
||||
// 1. Materialen
|
||||
$materials = [
|
||||
[
|
||||
'name' => 'Bio-PLA+ (Kindvriendelijk)',
|
||||
'name' => 'Bio-PLA+ Filament',
|
||||
'code' => 'pla',
|
||||
'description' => 'Plantaardig, biologisch afbreekbaar en geurloos. Dé ideale keuze voor speelgoed, fidgets en gedetailleerde figuren.',
|
||||
'description' => 'Hoogwaardig plantaardig filament. Reukloos, biologisch afbreekbaar en ideaal voor strakke details zonder krimp.',
|
||||
'badge_color' => 'emerald',
|
||||
'price_multiplier' => 1.00,
|
||||
],
|
||||
[
|
||||
'name' => 'PETG Tough (Extra Sterk)',
|
||||
'name' => 'PETG Tough',
|
||||
'code' => 'petg',
|
||||
'description' => 'Slagvast, kan tegen een stootje en waterdicht. Perfect voor intensief speelgoed en plantenpotjes.',
|
||||
'description' => 'Slagvast, waterdicht en hittebestendig tot 75°C. Geschikt voor functionele items en plantenpotjes.',
|
||||
'badge_color' => 'blue',
|
||||
'price_multiplier' => 1.20,
|
||||
],
|
||||
[
|
||||
'name' => 'TPU Flexibel (Rubberachtig)',
|
||||
'name' => 'TPU 95A Flexibel',
|
||||
'code' => 'tpu',
|
||||
'description' => 'Buigzaam, onbreekbaar elastomeer. Heerlijk zacht en kneedbaar voor fidget gadgets.',
|
||||
'description' => 'Slijtvast rubberachtig elastomeer. Buigzaam, schokabsorberend en nagenoeg onbreekbaar.',
|
||||
'badge_color' => 'amber',
|
||||
'price_multiplier' => 1.35,
|
||||
],
|
||||
[
|
||||
'name' => 'Silk / Regenboog Glans',
|
||||
'name' => 'Silk Zijdeglans PLA',
|
||||
'code' => 'silk',
|
||||
'description' => 'Extra glanzende zijdelook met sprankelende kleurwisselingen bij lichtinval.',
|
||||
'description' => 'Zijdezachte glansafwerking met metallic reflectie bij lichtinval. Perfect voor display-modellen.',
|
||||
'badge_color' => 'purple',
|
||||
'price_multiplier' => 1.25,
|
||||
],
|
||||
@@ -65,11 +65,11 @@ class DatabaseSeeder extends Seeder
|
||||
Color::updateOrCreate(['name' => $c['name']], $c);
|
||||
}
|
||||
|
||||
// 3. Categorieën (Alleen Fidget Toys, Pokémon, Film & Popculture, Eigen Model)
|
||||
// 3. Categorieën
|
||||
$catFidget = Category::updateOrCreate(['slug' => 'fidget-toys'], [
|
||||
'name' => 'Fidget Toys & Sensory',
|
||||
'slug' => 'fidget-toys',
|
||||
'description' => 'Articulated draken, wriemel slakken, oneindige kubussen en bevredigende clickers.',
|
||||
'description' => 'Scharnierende draken, flexibele slakken en compacte cubes met soepele print-in-place verbindingen.',
|
||||
'icon' => 'sparkles',
|
||||
'is_featured' => true,
|
||||
'sort_order' => 1,
|
||||
@@ -78,99 +78,98 @@ class DatabaseSeeder extends Seeder
|
||||
$catPokemon = Category::updateOrCreate(['slug' => 'pokemon-3d'], [
|
||||
'name' => 'Pokémon 3D Prints',
|
||||
'slug' => 'pokemon-3d',
|
||||
'description' => 'Beweegbare Charizards, Pikachu potjes, Pokéballs en iconische figuren.',
|
||||
'description' => 'Gedetailleerde figuren, low-poly planters voor vetplantjes en sluitende Pokéballs op schaal.',
|
||||
'icon' => 'zap',
|
||||
'is_featured' => true,
|
||||
'sort_order' => 2,
|
||||
]);
|
||||
|
||||
$catFilm = Category::updateOrCreate(['slug' => 'film-popculture'], [
|
||||
'name' => 'Film, Popculture & Gaming',
|
||||
'name' => 'Film, Gaming & Collectibles',
|
||||
'slug' => 'film-popculture',
|
||||
'description' => 'Star Wars Grogu & Lightsabers, Marvel Mjolnir, Harry Potter en anime prints.',
|
||||
'description' => 'Displaystandaarden, bureau-accessoires en busts van iconische personages uit popcultuur en gaming.',
|
||||
'icon' => 'film',
|
||||
'is_featured' => true,
|
||||
'sort_order' => 3,
|
||||
]);
|
||||
|
||||
$catCustom = Category::updateOrCreate(['slug' => 'eigen-model'], [
|
||||
'name' => 'Eigen 3D Model Printen',
|
||||
'name' => 'Eigen 3D Bestand Printen',
|
||||
'slug' => 'eigen-model',
|
||||
'description' => 'Upload jouw eigen STL of 3MF bestand en bestel direct online op maat.',
|
||||
'description' => 'Upload direct jouw .STL of .3MF bestand en bestel jouw model op maat in gewenste schaal en kleur.',
|
||||
'icon' => 'printer',
|
||||
'is_featured' => true,
|
||||
'sort_order' => 4,
|
||||
]);
|
||||
|
||||
// Verwijder oude niet-relevante categorieën
|
||||
Category::whereNotIn('slug', ['fidget-toys', 'pokemon-3d', 'film-popculture', 'eigen-model'])->delete();
|
||||
|
||||
// 4. Producten (Verwijder oude vazen, gereedschap, etc.)
|
||||
// 4. Producten met accurate lokale foto's & strakke teksten
|
||||
Product::truncate();
|
||||
|
||||
$products = [
|
||||
// --- FIDGET TOYS ---
|
||||
[
|
||||
'category_id' => $catFidget->id,
|
||||
'name' => 'Articulated Kristaldraak (Flexibel Beweegbaar)',
|
||||
'name' => 'Articulated Kristaldraak (45 cm)',
|
||||
'slug' => 'articulated-kristaldraak-flexibel',
|
||||
'short_description' => 'De virale 3D kristaldraak! Print-in-place scharnieren met tientallen soepele schakels.',
|
||||
'description' => 'Deze iconische kristaldraak wordt in één geheel geprint met ingenieuze scharnierverbindingen. De draak beweegt soepel en natuurlijk in je handen en maakt een heerlijk zacht klikkend geluid. Een ultieme fidget toy en een fantastisch pronkstuk voor op je bureau of kast.',
|
||||
'short_description' => 'Volledig scharnierende print-in-place draak met tientallen soepele schakels. Rustgevend in de hand en een blikvanger op het bureau.',
|
||||
'description' => "Deze kristaldraak wordt in één sessie geprint zonder montage of losse onderdelen. Dankzij de ingenieuze kogel- en komgewrichten beweegt het lichaam vloeiend en natuurlijk.\n\nGeprint op professionele Bambu Lab X1-Carbon printers met 0.16 mm laaghoogte voor strakke facetten en minimale naadvorming. Prachtig in glanzend zijdeglans koper of rainbow filament.",
|
||||
'base_price' => 17.95,
|
||||
'sku' => 'J3D-FID-DRAAK',
|
||||
'is_featured' => true,
|
||||
'dimensions' => '45 x 6 x 4 cm',
|
||||
'weight_grams' => 135,
|
||||
'print_time_hours' => 6.5,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1563089145-599997674d42?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/crystal-dragon.jpg',
|
||||
'available_materials' => ['pla', 'silk'],
|
||||
'available_colors' => ['Regenboog Multi-Color', 'Koper Zijdeglans', 'Spooky Paars (Gengar)', 'Hemelsblauw (Squirtle)', 'Mat Zwart'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catFidget->id,
|
||||
'name' => 'Articulated Fidget Slug (Wriemel Slak)',
|
||||
'name' => 'Articulated Fidget Slug (18 cm)',
|
||||
'slug' => 'articulated-fidget-slug-wriemel-slak',
|
||||
'short_description' => 'Vrolijke scharnierende slak die rustgevend ratelt en beweegt. Perfect tegen stress en friemelen!',
|
||||
'description' => 'De originele 3D Fidget Slug is gemaakt van concentrische flexibele segmenten. Wanneer je hem schudt of vasthoudt, beweegt hij golvend en produceert hij een zacht, bevredigend ASMR-geluid. Zeer geliefd bij zowel kinderen als volwassenen!',
|
||||
'short_description' => 'Flexibele slak opgebouwd uit in elkaar grijpende ringen. Beweegt soepel en maakt een zacht, bevredigend ratelend geluid.',
|
||||
'description' => "De klassieke Fidget Slug bestaat uit een reeks concentrische ringen die vrij over elkaar glijden. Hierdoor vormt hij zich direct naar je handpalm en geeft hij een subtiel tastbaar en auditief effect dat helpt bij concentratie tijdens het werken of studeren.\n\nGemaakt van duurzaam, kindvriendelijk PLA+ plastic.",
|
||||
'base_price' => 9.95,
|
||||
'sku' => 'J3D-FID-SLUG',
|
||||
'is_featured' => true,
|
||||
'dimensions' => '18 x 5 x 4 cm',
|
||||
'weight_grams' => 75,
|
||||
'print_time_hours' => 3.5,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1607604276583-eef5d076aa5f?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/fidget-slug.jpg',
|
||||
'available_materials' => ['pla', 'silk'],
|
||||
'available_colors' => ['Zon Geel (Pikachu)', 'Muntgroen (Bulbasaur)', 'Hemelsblauw (Squirtle)', 'Regenboog Multi-Color'],
|
||||
'available_colors' => ['Regenboog Multi-Color', 'Zon Geel (Pikachu)', 'Muntgroen (Bulbasaur)', 'Hemelsblauw (Squirtle)'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catFidget->id,
|
||||
'name' => 'Infinity Fidget Cube (Oneindige Kubus)',
|
||||
'name' => 'Infinity Fidget Cube (4 x 4 cm)',
|
||||
'slug' => 'infinity-fidget-cube-oneindige-kubus',
|
||||
'short_description' => 'Vouw hem oneindig in elkaar van rechthoek naar kubus. Ideaal voor focus tijdens werk of school.',
|
||||
'description' => 'Een precisie-geprinte kubus bestaande uit 8 onderling verbonden minikubussen. Vouw hem met één hand om en om terwijl je leert, belt of gamet. Compact formaat dat makkelijk in je broekzak past.',
|
||||
'short_description' => 'Geometrische kubus bestaande uit 8 scharnierende blokken die oneindig in elke richting omgevouwen kunnen worden.',
|
||||
'description' => "Met uiterste precisie gekalibreerd zodat de scharnieren direct na het printen soepel vouwen zonder speling. Compact genoeg voor je broekzak en een ideale tool tegen onrustige handen achter het beeldscherm.\n\nVerkrijgbaar in strak mat zwart, tweekleurige varianten of opvallende filamenttinten.",
|
||||
'base_price' => 11.50,
|
||||
'sku' => 'J3D-FID-CUBE',
|
||||
'is_featured' => false,
|
||||
'dimensions' => '4 x 4 x 4 cm',
|
||||
'weight_grams' => 50,
|
||||
'print_time_hours' => 2.5,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1596461404969-9ae70f2830c1?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/infinity-cube.jpg',
|
||||
'available_materials' => ['pla', 'petg'],
|
||||
'available_colors' => ['Mat Zwart', 'Zon Geel (Pikachu)', 'Hemelsblauw (Squirtle)', 'Spooky Paars (Gengar)'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catFidget->id,
|
||||
'name' => 'Gyroscope Tri-Ring Fidget Spinner',
|
||||
'name' => 'Gyroscope Tri-Ring Desk Spinner',
|
||||
'slug' => 'gyroscope-tri-ring-fidget-spinner',
|
||||
'short_description' => 'Multi-axis gyroscoop met onafhankelijk draaiende ringen. Draait soepel in elke dimensie.',
|
||||
'description' => 'Drie concentrische ringen die in elkaar hangen en tegelijkertijd in verschillende richtingen kunnen tuimelen. Geeft een heerlijk gevoel van gewichtloosheid in je vingers.',
|
||||
'short_description' => 'Drie concentrische ringen die onafhankelijk over meerdere assen tuimelen. Rustgevende kinetische beweging.',
|
||||
'description' => 'Geïnspireerd op mechanische gyroscopen. De ringen draaien vloeiend in elkaar en creëren een dynamisch patroon wanneer je de spinner in beweging zet. Zowel met de hand te bedienen als als stijlvol bureau-object neer te zetten.',
|
||||
'base_price' => 8.95,
|
||||
'sku' => 'J3D-FID-GYRO',
|
||||
'is_featured' => false,
|
||||
'dimensions' => '7 x 7 x 1 cm',
|
||||
'weight_grams' => 35,
|
||||
'print_time_hours' => 2.0,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1508873696983-2df5293cb32f?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/gyro-spinner.jpg',
|
||||
'available_materials' => ['pla', 'silk'],
|
||||
'available_colors' => ['Regenboog Multi-Color', 'Koper Zijdeglans', 'Zon Geel (Pikachu)'],
|
||||
],
|
||||
@@ -178,131 +177,131 @@ class DatabaseSeeder extends Seeder
|
||||
// --- POKÉMON 3D PRINTS ---
|
||||
[
|
||||
'category_id' => $catPokemon->id,
|
||||
'name' => 'Low-Poly Pikachu Plantenpotje & Bureau-Organizer',
|
||||
'name' => 'Low-Poly Pikachu Planter & Pennenhouder',
|
||||
'slug' => 'low-poly-pikachu-plantenpotje',
|
||||
'short_description' => 'Iconische vrolijke Pikachu met geometrische low-poly vlakken. Perfect voor vetplantjes of pennen!',
|
||||
'description' => 'Een absolute fan-favorite! Deze vrolijke Pikachu is ontworpen in een stijlvolle low-poly facetstijl. Bovenop bevindt zich een uitsparing van ca. 6 cm doorsnede, uitermate geschikt voor kleine vetplantjes, cactussen of pennen op je bureau.',
|
||||
'short_description' => 'Geometrische low-poly Pikachu met geïntegreerde uitsparing voor kleine vetplantjes, cactussen of pennen.',
|
||||
'description' => "Een moderne interpretatie van de iconische gele Pokémon. De scherpe geometrische facetten vangen het omgevingslicht prachtig op. Bovenin zit een potuitsparing van ca. 6 cm doorsnede, voorzien van stabiele bodem.\n\nIdeaal als groen accent op je bureau of vensterbank.",
|
||||
'base_price' => 14.95,
|
||||
'sku' => 'J3D-POK-PIKA',
|
||||
'is_featured' => true,
|
||||
'dimensions' => '12 x 10 x 14 cm',
|
||||
'weight_grams' => 110,
|
||||
'print_time_hours' => 4.5,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1613771404784-3a5686aa2be3?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/pikachu-planter.jpg',
|
||||
'available_materials' => ['pla', 'petg'],
|
||||
'available_colors' => ['Zon Geel (Pikachu)', 'Sneeuwwit', 'Mat Zwart', 'Koper Zijdeglans'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catPokemon->id,
|
||||
'name' => 'Articulated Beweegbare Charizard Draak',
|
||||
'name' => 'Articulated Charizard (32 cm)',
|
||||
'slug' => 'articulated-beweegbare-charizard-draak',
|
||||
'short_description' => 'Volledig scharnierende Charizard met beweegbare vleugels, kop en vlamstaart. Print-in-place spektakel!',
|
||||
'description' => 'De ultieme vuurdraak in flexibele 3D print uitvoering! De segmenten van zijn staart, rug en nek bewegen soepel met elkaar mee. Geprint in vurige oranje/rode filamentkleuren of shiny zwart.',
|
||||
'short_description' => 'Scharnierende vuurdraak met beweegbare staartsegmenten, kop en verstelbare vleugels.',
|
||||
'description' => "Een indrukwekkend staaltje 3D printtechniek. Charizard is ontworpen met flexibele staartgeledingen en afzonderlijk scharnierende vleugels, waardoor hij in verschillende actiehoudingen geposeerd kan worden.\n\nGeprint in levendig oranje/rood of stealth matzwart PLA+ met 0.12 mm laaghoogte voor maximale scherpte.",
|
||||
'base_price' => 22.50,
|
||||
'sku' => 'J3D-POK-CHAR',
|
||||
'is_featured' => true,
|
||||
'dimensions' => '32 x 20 x 8 cm',
|
||||
'weight_grams' => 160,
|
||||
'print_time_hours' => 7.5,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/charizard-dragon.jpg',
|
||||
'available_materials' => ['pla', 'silk'],
|
||||
'available_colors' => ['Vurig Rood (Charizard)', 'Mat Zwart', 'Koper Zijdeglans', 'Zon Geel (Pikachu)'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catPokemon->id,
|
||||
'name' => 'Pokéball Opbergdoosje met Kliksluiting',
|
||||
'name' => 'Pokéball Opbergbox met Scharnier & Knop',
|
||||
'slug' => 'pokeball-opbergdoosje-met-kliksluiting',
|
||||
'short_description' => 'Functionele 3D geprinte Pokéball die echt open en dicht klikt! Ideaal voor kleine schatten of sieraden.',
|
||||
'description' => 'Geprint in meerdere losse kleuren en met precisie geassembleerd. Druk op de witte middenknop om de bal te openen. Voorzien van een stabiele bodem zodat hij netjes rechtop op je bureau staat.',
|
||||
'short_description' => 'Precieze replica op ware grootte (8 cm) met functioneel veerscharnier en drukknop-sluiting.',
|
||||
'description' => 'Opgebouwd uit meervoudige precisie-onderdelen in klassiek rood, wit en zwart. De witte middenknop ontgrendelt het mechanische scharnier waarna de bal openklapt. Handig als opbergdoosje voor ringen, kleine kabels, dobbelstenen of als verzamelitem op de plank.',
|
||||
'base_price' => 13.95,
|
||||
'sku' => 'J3D-POK-BALL',
|
||||
'is_featured' => false,
|
||||
'dimensions' => '8 x 8 x 8 cm',
|
||||
'weight_grams' => 85,
|
||||
'print_time_hours' => 4.0,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1563089145-599997674d42?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/pokeball-box.jpg',
|
||||
'available_materials' => ['pla', 'petg'],
|
||||
'available_colors' => ['Vurig Rood (Charizard)', 'Spooky Paars (Gengar)', 'Hemelsblauw (Squirtle)'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catPokemon->id,
|
||||
'name' => 'Bulbasaur Geometrisch Vetplant Potje',
|
||||
'name' => 'Bulbasaur Succulent Planter',
|
||||
'slug' => 'bulbasaur-geometrisch-vetplant-potje',
|
||||
'short_description' => 'De klassieke Bulbasaur met plantenruimte op zijn rug. Schattig en super populair!',
|
||||
'description' => 'Zet een echt klein vetplantje op Bulbasaur zijn rug om zijn beroemde plantenknop na te bootsen! Voorzien van waterafvoergaatje aan de onderzijde bij gebruik met echte plantjes.',
|
||||
'short_description' => 'Geometrische Bulbasaur met ruime ruguitsparing voor echte vetplantjes of kleine cactussen.',
|
||||
'description' => "Plaats een echt vetplantje op de rug van Bulbasaur om zijn iconische plantenbol compleet te maken. De plantpot is voorzien van een waterafvoer-kanaal aan de onderzijde bij gebruik van levende beplanting.\n\nGeprint in fris muntgroen PLA+ dat vochtbestendig en kleurvast blijft.",
|
||||
'base_price' => 14.95,
|
||||
'sku' => 'J3D-POK-BULBA',
|
||||
'is_featured' => false,
|
||||
'dimensions' => '13 x 10 x 9 cm',
|
||||
'weight_grams' => 105,
|
||||
'print_time_hours' => 4.0,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1509198397868-475647b2a1e5?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/bulbasaur-planter.jpg',
|
||||
'available_materials' => ['pla', 'petg'],
|
||||
'available_colors' => ['Muntgroen (Bulbasaur)', 'Sneeuwwit', 'Hemelsblauw (Squirtle)'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catPokemon->id,
|
||||
'name' => 'Gengar Grijns Schaduw Figuur',
|
||||
'name' => 'Gengar Desk Figuur (Zijdeglans)',
|
||||
'slug' => 'gengar-grijns-schaduw-figuur',
|
||||
'short_description' => 'De ondeugende Gengar met zijn beruchte brede grijns en puntige oren in paars filament.',
|
||||
'description' => 'Spooky en iconisch! Deze Gengar is met zorg gemodelleerd en heeft strakke detaillijnen. Prachtig in glanzend paars zijdefilament of spooky glow-in-the-dark effect.',
|
||||
'short_description' => 'Gedetailleerd model van Gengar met zijn brede grijns, spitse oren en gemene ogen.',
|
||||
'description' => "Een massief geprint display-item met strakke rondingen en gedetailleerde gezichtscontouren. Komt bijzonder sterk tot zijn recht in glanzend zijdepaars of matzwart filament.\n\nStaat stevig op elke ondergrond dankzij een verzwaard zwaartepunt.",
|
||||
'base_price' => 16.95,
|
||||
'sku' => 'J3D-POK-GENG',
|
||||
'is_featured' => true,
|
||||
'dimensions' => '11 x 11 x 10 cm',
|
||||
'weight_grams' => 120,
|
||||
'print_time_hours' => 5.0,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1566576912321-d58ddd74b508?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/gengar-figure.jpg',
|
||||
'available_materials' => ['pla', 'silk'],
|
||||
'available_colors' => ['Spooky Paars (Gengar)', 'Mat Zwart', 'Sneeuwwit'],
|
||||
],
|
||||
|
||||
// --- FILM, POPCULTURE & GAMING ---
|
||||
// --- FILM, GAMING & POPCULTURE ---
|
||||
[
|
||||
'category_id' => $catFilm->id,
|
||||
'name' => 'Grogu Baby Yoda 3D Bureaufiguur',
|
||||
'name' => 'Grogu (Baby Yoda) Gedetailleerd Display Beeld',
|
||||
'slug' => 'grogu-baby-yoda-3d-bureaufiguur',
|
||||
'short_description' => 'De schattigste Jedi uit het universum! Prachtig gedetailleerd beeldje van Grogu in zijn mantel.',
|
||||
'description' => 'This is the way! Schattig beeldje van Grogu (The Child) met zijn iconische grote oren en plooien in zijn gewaad. Geprint in hoge resolutie (0.12mm laaghoogte) voor maximale detailweergave.',
|
||||
'short_description' => 'Hoge-resolutie 3D print van Grogu in zijn karakteristieke mantel met grote oren.',
|
||||
'description' => 'Geprint met een fijne laaghoogte van 0.12 mm om de textuur van de mantel en gelaatstrekken haarscherp weer te geven. Een must-have voor Star Wars liefhebbers op zoek naar een kwalitatief displaystuk voor in de vitrine of naast het toetsenbord.',
|
||||
'base_price' => 19.95,
|
||||
'sku' => 'J3D-POP-GROGU',
|
||||
'is_featured' => true,
|
||||
'dimensions' => '12 x 14 x 10 cm',
|
||||
'weight_grams' => 140,
|
||||
'print_time_hours' => 6.0,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1608889175123-8ee362201f81?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/grogu-figure.jpg',
|
||||
'available_materials' => ['pla', 'petg'],
|
||||
'available_colors' => ['Muntgroen (Bulbasaur)', 'Sneeuwwit', 'Koper Zijdeglans', 'Mat Zwart'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catFilm->id,
|
||||
'name' => 'Lightsaber Horizontale Bureaustandaard',
|
||||
'name' => 'Lightsaber Horizontale Displaystandaard',
|
||||
'slug' => 'lightsaber-horizontale-bureaustandaard',
|
||||
'short_description' => 'Strakke displaystandaard met Star Wars thema om jouw lightsaber handvat horizontaal te tonen.',
|
||||
'description' => 'Laat jouw lightsaber hilt schitteren op je bureau of wandplank. Universele wieg-uitsparingen geschikt voor vrijwel elk verzamel- of FX-model.',
|
||||
'short_description' => 'Universele wieg-standaard in matzwart voor het horizontaal tentoonstellen van lightsaber hilts en props.',
|
||||
'description' => "Strak minimalistisch ontworpen om de aandacht volledig op je verzamelobject te houden. De uitsparingen zijn voorzien van afgeronde randen die krassen op het metaal of kunststof van je hilt voorkomen.\n\nGeschikt voor hilts tot 45 mm diameter.",
|
||||
'base_price' => 15.95,
|
||||
'sku' => 'J3D-POP-SABER',
|
||||
'is_featured' => false,
|
||||
'dimensions' => '22 x 7 x 8 cm',
|
||||
'weight_grams' => 100,
|
||||
'print_time_hours' => 4.0,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1579783900882-c0d3dad7b119?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/lightsaber-stand.jpg',
|
||||
'available_materials' => ['pla', 'petg'],
|
||||
'available_colors' => ['Mat Zwart', 'Sneeuwwit', 'Galaxy Grijs'],
|
||||
],
|
||||
[
|
||||
'category_id' => $catFilm->id,
|
||||
'name' => "Marvel Thor's Mjolnir Pennen- & Toolhouder",
|
||||
'name' => "Marvel Thor's Mjolnir Bureau-Organizer",
|
||||
'slug' => 'marvel-thors-mjolnir-pennenhouder',
|
||||
'short_description' => 'De mythische hamer gestoken in een rotssokkel met uitsparingen voor pennen en gadgets.',
|
||||
'description' => 'Alleen degenen die waardig zijn kunnen deze pen pakken! Een stoere bureau-organizer in de vorm van de iconische Mjolnir hamer in een rotsachtig plateau.',
|
||||
'short_description' => 'De mythische hamer van Thor rustend in een rotsachtig plateau met vakken voor pennen en schrijfwaren.',
|
||||
'description' => 'Geprint in een steenachtige textuur met robuuste wanddikte. De rotsvormige basis biedt een stevige standaard en voorkomt omvallen, terwijl de bovenkant praktische opbergruimte biedt voor pennen, stylussen en usb-sticks.',
|
||||
'base_price' => 18.50,
|
||||
'sku' => 'J3D-POP-THOR',
|
||||
'is_featured' => true,
|
||||
'dimensions' => '14 x 12 x 15 cm',
|
||||
'weight_grams' => 175,
|
||||
'print_time_hours' => 6.5,
|
||||
'image_url' => 'https://images.unsplash.com/photo-1568605117036-5fe5e7bab0b7?auto=format&fit=crop&w=800&q=80',
|
||||
'image_url' => '/images/products/thor-mjolnir.jpg',
|
||||
'available_materials' => ['pla', 'petg'],
|
||||
'available_colors' => ['Mat Zwart', 'Koper Zijdeglans', 'Sneeuwwit'],
|
||||
],
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 695 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 703 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 624 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 607 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 658 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 677 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 703 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 589 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 636 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 645 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 624 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 607 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 643 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 695 KiB |
@@ -3,13 +3,13 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
|
||||
<title>@yield('title', 'Jouwdriedee.nl ✨ Dé 3D Print Webshop | Fidget Toys, Pokémon & Eigen Modellen')</title>
|
||||
<meta name="description" content="@yield('meta_description', 'Jouwdriedee.nl - Vrolijke 3D prints, toffe fidget toys, Pokémon figuren en film artikelen. Bestel ook direct jouw eigen 3D model!')">
|
||||
<title>@yield('title', 'Jouwdriedee.nl | 3D Prints, Fidget Toys, Pokémon & Custom Prints')</title>
|
||||
<meta name="description" content="@yield('meta_description', 'Jouwdriedee.nl - Hoogwaardige 3D prints, soepele fidget toys, Pokémon planters en popculture figuren. Upload ook jouw eigen STL bestand!')">
|
||||
|
||||
<!-- Google Fonts: Fredoka & Nunito -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
||||
|
||||
@vite(['resources/css/app.css', 'resources/js/app.js'])
|
||||
|
||||
@@ -24,66 +24,66 @@
|
||||
</head>
|
||||
<body class="min-h-full flex flex-col bg-[#FFFDF9] text-slate-800 selection:bg-amber-300 selection:text-slate-900" x-data="{ mobileMenuOpen: false }">
|
||||
|
||||
<!-- Top Announcement Bar (Vrolijk & Subtiel) -->
|
||||
<div class="bg-gradient-to-r from-amber-400 via-rose-400 to-indigo-500 text-slate-950 text-xs py-2 px-3 sm:px-4 font-black">
|
||||
<!-- Top Announcement Bar (Strak & Duidelijk) -->
|
||||
<div class="bg-slate-900 text-white text-xs py-2 px-3 sm:px-4 font-bold border-b border-slate-800">
|
||||
<div class="max-w-7xl mx-auto flex items-center justify-between">
|
||||
<div class="flex items-center space-x-1.5 mx-auto sm:mx-0 text-center sm:text-left">
|
||||
<span class="inline-block animate-bounce">✨</span>
|
||||
<span>Fidget toys, Pokémon figuren & film gadgets vers 3D geprint!</span>
|
||||
<div class="flex items-center space-x-2 mx-auto sm:mx-0 text-center sm:text-left text-slate-300">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
||||
<span>Nederlandse 3D Printstudio • Haarscherpe afwerking op Bambu Lab printers</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-5 text-[11px] font-bold text-slate-900">
|
||||
<span class="flex items-center space-x-1 bg-white/70 backdrop-blur-xs px-2.5 py-0.5 rounded-full shadow-2xs">
|
||||
<span>📦</span>
|
||||
<div class="hidden md:flex items-center space-x-5 text-[11px] text-slate-300">
|
||||
<span class="flex items-center space-x-1">
|
||||
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i>
|
||||
<span>Gratis verzending vanaf € 50,-</span>
|
||||
</span>
|
||||
<span class="flex items-center space-x-1 bg-white/70 backdrop-blur-xs px-2.5 py-0.5 rounded-full shadow-2xs">
|
||||
<span>🚀</span>
|
||||
<span>Binnen 2-3 werkdagen in huis</span>
|
||||
<span class="flex items-center space-x-1">
|
||||
<i data-lucide="clock" class="w-3.5 h-3.5 text-sky-400"></i>
|
||||
<span>Verzending binnen 2-3 werkdagen</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Navigation Header -->
|
||||
<header class="sticky top-0 z-40 bg-white/90 backdrop-blur-md border-b border-slate-200/80 shadow-xs">
|
||||
<header class="sticky top-0 z-40 bg-white/95 backdrop-blur-md border-b border-slate-200/80 shadow-xs">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex items-center justify-between h-16 sm:h-20">
|
||||
|
||||
<!-- Logo & Brand -->
|
||||
<div class="flex items-center space-x-4 sm:space-x-8">
|
||||
<a href="{{ route('home') }}" class="flex items-center space-x-2.5 group">
|
||||
<div class="w-10 h-10 sm:w-11 sm:h-11 rounded-2xl bg-gradient-to-br from-amber-400 via-rose-400 to-indigo-500 flex items-center justify-center text-white shadow-md shadow-rose-500/20 group-hover:scale-105 group-hover:-rotate-3 transition transform">
|
||||
<i data-lucide="sparkles" class="w-5 h-5 sm:w-6 sm:h-6 stroke-[2.5]"></i>
|
||||
<div class="w-10 h-10 sm:w-11 sm:h-11 rounded-2xl bg-gradient-to-tr from-amber-400 via-rose-400 to-indigo-500 flex items-center justify-center text-white shadow-sm group-hover:scale-105 transition transform">
|
||||
<i data-lucide="layers" class="w-5 h-5 sm:w-6 sm:h-6 stroke-[2.2]"></i>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex items-baseline space-x-1">
|
||||
<span class="font-heading text-xl sm:text-2xl font-black tracking-tight text-slate-900">Jouw<span class="text-rose-500">driedee</span></span>
|
||||
<span class="text-[10px] font-black bg-indigo-500 text-white px-1.5 py-0.2 rounded-md">.NL</span>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-amber-600 hidden sm:inline">🧸 3D Prints, Fidgets & Pokémon</span>
|
||||
<span class="text-[10px] font-bold text-slate-500 hidden sm:inline">3D Prints, Fidgets & Collectibles</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Nav Links -->
|
||||
<nav class="hidden lg:flex items-center space-x-1 text-sm font-extrabold text-slate-700">
|
||||
<a href="{{ route('home') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('home') ? 'bg-amber-100 text-amber-900 font-black' : 'hover:bg-slate-100 text-slate-700' }}">
|
||||
Home 🏠
|
||||
<nav class="hidden lg:flex items-center space-x-1 text-sm font-bold text-slate-700">
|
||||
<a href="{{ route('home') }}" class="px-3.5 py-2 rounded-xl transition {{ request()->routeIs('home') ? 'bg-slate-100 text-slate-900 font-extrabold' : 'hover:bg-slate-50 text-slate-700' }}">
|
||||
Home
|
||||
</a>
|
||||
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-100 text-slate-700">
|
||||
Fidget Toys 🌀
|
||||
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-50 text-slate-700">
|
||||
Fidget Toys
|
||||
</a>
|
||||
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-100 text-slate-700">
|
||||
Pokémon ⚡
|
||||
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-50 text-slate-700">
|
||||
Pokémon
|
||||
</a>
|
||||
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-100 text-slate-700">
|
||||
Film & Gaming 🎬
|
||||
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2 rounded-xl transition hover:bg-slate-50 text-slate-700">
|
||||
Film & Gaming
|
||||
</a>
|
||||
<a href="{{ route('custom.request') }}" class="px-3.5 py-2 rounded-xl transition bg-rose-50 text-rose-600 hover:bg-rose-100 font-black flex items-center space-x-1">
|
||||
<span>Eigen Model Bestellen</span>
|
||||
<span>🚀</span>
|
||||
<a href="{{ route('custom.request') }}" class="px-3.5 py-2 rounded-xl transition bg-rose-50 text-rose-600 hover:bg-rose-100 font-extrabold flex items-center space-x-1.5">
|
||||
<i data-lucide="upload-cloud" class="w-3.5 h-3.5"></i>
|
||||
<span>Eigen STL Printen</span>
|
||||
</a>
|
||||
<a href="{{ route('admin.makerworld.index') }}" class="px-3 py-1.5 rounded-xl transition bg-slate-900 text-white text-xs font-bold hover:bg-slate-800 ml-2">
|
||||
<span>MakerWorld Importer</span>
|
||||
<span>MakerWorld</span>
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
@@ -91,14 +91,14 @@
|
||||
<!-- Right Action Bar -->
|
||||
<div class="flex items-center space-x-2 sm:space-x-3">
|
||||
|
||||
<!-- Search Bar in Header (Desktop) -->
|
||||
<!-- Search Bar in Header -->
|
||||
<form action="{{ route('catalog') }}" method="GET" class="hidden md:flex items-center relative">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ request('q') }}"
|
||||
placeholder="Zoek fidget, Pokémon..."
|
||||
class="w-48 lg:w-56 bg-slate-100/80 border border-slate-200 rounded-xl pl-8 pr-3 py-2 text-xs font-bold text-slate-900 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-2 focus:ring-rose-400 transition"
|
||||
placeholder="Zoek print, model..."
|
||||
class="w-44 lg:w-56 bg-slate-100/90 border border-slate-200/80 rounded-xl pl-8 pr-3 py-2 text-xs font-semibold text-slate-800 placeholder-slate-400 focus:bg-white focus:outline-none focus:ring-1 focus:ring-rose-400 transition"
|
||||
>
|
||||
<i data-lucide="search" class="w-3.5 h-3.5 text-slate-400 absolute left-2.5 pointer-events-none"></i>
|
||||
</form>
|
||||
@@ -108,11 +108,11 @@
|
||||
$cartItems = is_array(session('cart')) ? session('cart') : [];
|
||||
$cartCount = array_sum(array_column($cartItems, 'quantity'));
|
||||
@endphp
|
||||
<a href="{{ route('cart.index') }}" class="playful-btn relative px-3 sm:px-4 py-2 rounded-2xl bg-gradient-to-r from-amber-300 to-amber-400 hover:from-amber-400 hover:to-amber-500 text-slate-950 font-black text-xs flex items-center space-x-1.5 shadow-sm shadow-amber-500/20 group">
|
||||
<span class="text-base group-hover:scale-110 transition-transform">🛒</span>
|
||||
<span class="hidden sm:inline font-bold">Mandje</span>
|
||||
<a href="{{ route('cart.index') }}" class="playful-btn relative px-3.5 py-2 rounded-xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs flex items-center space-x-1.5 shadow-xs group">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4 text-slate-900"></i>
|
||||
<span class="hidden sm:inline font-bold">Winkelwagen</span>
|
||||
@if($cartCount > 0)
|
||||
<span class="inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-black text-white bg-rose-500 rounded-full animate-bounce">
|
||||
<span class="inline-flex items-center justify-center px-1.5 py-0.5 text-[10px] font-black text-white bg-rose-500 rounded-full">
|
||||
{{ $cartCount }}
|
||||
</span>
|
||||
@endif
|
||||
@@ -120,46 +120,46 @@
|
||||
|
||||
<!-- Mobile Menu Trigger -->
|
||||
<button @click="mobileMenuOpen = !mobileMenuOpen" type="button" class="lg:hidden p-2 rounded-xl bg-slate-100 hover:bg-slate-200 text-slate-800 transition">
|
||||
<i data-lucide="menu" class="w-6 h-6"></i>
|
||||
<i data-lucide="menu" class="w-5 h-5"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Drawer (100% Touch Friendly) -->
|
||||
<div x-show="mobileMenuOpen" x-cloak class="lg:hidden border-t border-slate-200 bg-white/98 backdrop-blur-md px-4 pt-3 pb-6 space-y-3 shadow-lg">
|
||||
<!-- Mobile Menu Drawer -->
|
||||
<div x-show="mobileMenuOpen" x-cloak class="lg:hidden border-t border-slate-200 bg-white px-4 pt-3 pb-6 space-y-3 shadow-lg">
|
||||
<form action="{{ route('catalog') }}" method="GET" class="flex items-center relative mb-2">
|
||||
<input
|
||||
type="text"
|
||||
name="q"
|
||||
value="{{ request('q') }}"
|
||||
placeholder="Zoek fidgets, Pokémon, figuren..."
|
||||
class="w-full bg-slate-100 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs font-bold placeholder-slate-400"
|
||||
placeholder="Zoek model of categorie..."
|
||||
class="w-full bg-slate-100 border border-slate-200 rounded-xl pl-9 pr-3.5 py-2.5 text-xs font-semibold placeholder-slate-400"
|
||||
>
|
||||
<i data-lucide="search" class="w-4 h-4 text-slate-400 absolute left-3"></i>
|
||||
</form>
|
||||
<div class="flex flex-col space-y-1.5 font-bold text-sm">
|
||||
<div class="flex flex-col space-y-1 font-bold text-sm">
|
||||
<a href="{{ route('home') }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between">
|
||||
<span>Home 🏠</span>
|
||||
<span>Home</span>
|
||||
</a>
|
||||
<a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-indigo-600">
|
||||
<span>Fidget Toys & Slugs 🌀</span>
|
||||
<span>Fidget Toys & Sensory</span>
|
||||
<span class="text-xs bg-indigo-50 px-2 py-0.5 rounded-md font-bold">Populier</span>
|
||||
</a>
|
||||
<a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-amber-600">
|
||||
<span>Pokémon 3D Prints ⚡</span>
|
||||
<span class="text-xs bg-amber-50 px-2 py-0.5 rounded-md font-bold">Trending</span>
|
||||
<span>Pokémon 3D Prints</span>
|
||||
<span class="text-xs bg-amber-50 px-2 py-0.5 rounded-md font-bold">Favoriet</span>
|
||||
</a>
|
||||
<a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="px-3.5 py-2.5 rounded-xl hover:bg-slate-50 flex items-center justify-between text-rose-600">
|
||||
<span>Film, Gaming & Popculture 🎬</span>
|
||||
<span>Film, Gaming & Collectibles</span>
|
||||
</a>
|
||||
<a href="{{ route('custom.request') }}" class="px-3.5 py-3 rounded-2xl bg-gradient-to-r from-rose-500 to-indigo-600 text-white font-black flex items-center justify-between shadow-sm shadow-rose-500/20">
|
||||
<a href="{{ route('custom.request') }}" class="px-3.5 py-3 rounded-2xl bg-gradient-to-r from-rose-500 to-indigo-600 text-white font-black flex items-center justify-between shadow-xs">
|
||||
<span>Eigen 3D Model Bestellen (Upload STL)</span>
|
||||
<span>🚀</span>
|
||||
<i data-lucide="upload" class="w-4 h-4"></i>
|
||||
</a>
|
||||
<a href="{{ route('admin.makerworld.index') }}" class="px-3.5 py-2 text-xs font-bold text-slate-500 hover:text-slate-800 flex items-center space-x-1.5 pt-2 border-t border-slate-100">
|
||||
<i data-lucide="layers" class="w-3.5 h-3.5"></i>
|
||||
<span>MakerWorld Importer Beheer</span>
|
||||
<span>MakerWorld Importer (Beheer)</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -170,10 +170,10 @@
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
|
||||
<div class="p-3.5 sm:p-4 rounded-2xl bg-emerald-50 border border-emerald-200 text-emerald-900 text-xs sm:text-sm font-bold flex items-center justify-between shadow-xs">
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-lg">🎉</span>
|
||||
<i data-lucide="check-circle" class="w-4 h-4 text-emerald-600"></i>
|
||||
<span>{{ session('success') }}</span>
|
||||
</div>
|
||||
<a href="{{ route('cart.index') }}" class="px-3 py-1 bg-white border border-emerald-300 rounded-xl text-xs font-black text-emerald-800 hover:bg-emerald-100 transition">Winkelmandje →</a>
|
||||
<a href="{{ route('cart.index') }}" class="px-3 py-1 bg-white border border-emerald-300 rounded-xl text-xs font-black text-emerald-800 hover:bg-emerald-100 transition">Winkelwagen →</a>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@@ -181,7 +181,7 @@
|
||||
@if(session('error'))
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4">
|
||||
<div class="p-3.5 sm:p-4 rounded-2xl bg-rose-50 border border-rose-200 text-rose-900 text-xs sm:text-sm font-bold flex items-center space-x-2 shadow-xs">
|
||||
<span class="text-lg">⚠️</span>
|
||||
<i data-lucide="alert-circle" class="w-4 h-4 text-rose-600"></i>
|
||||
<span>{{ session('error') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -192,74 +192,74 @@
|
||||
@yield('content')
|
||||
</main>
|
||||
|
||||
<!-- Refined Friendly Footer -->
|
||||
<footer class="bg-slate-900 text-white border-t-2 border-amber-400 pt-12 pb-10 mt-16">
|
||||
<!-- Footer (Zakelijk en Betrouwbaar) -->
|
||||
<footer class="bg-slate-900 text-white border-t border-slate-800 pt-12 pb-10 mt-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 pb-10 border-b border-slate-800">
|
||||
|
||||
<!-- Col 1: Brand & Info -->
|
||||
<div class="space-y-3 sm:col-span-1">
|
||||
<div class="flex items-center space-x-2.5">
|
||||
<div class="w-9 h-9 rounded-xl bg-gradient-to-tr from-amber-400 to-rose-400 flex items-center justify-center text-white font-black text-sm">
|
||||
✨
|
||||
<div class="w-8 h-8 rounded-xl bg-gradient-to-tr from-amber-400 to-rose-400 flex items-center justify-center text-white font-black text-xs">
|
||||
3D
|
||||
</div>
|
||||
<span class="font-heading text-xl font-black text-white tracking-tight">Jouw<span class="text-rose-400">driedee</span>.nl</span>
|
||||
<span class="font-heading text-lg font-black text-white tracking-tight">Jouw<span class="text-rose-400">driedee</span>.nl</span>
|
||||
</div>
|
||||
<p class="text-xs text-slate-300 leading-relaxed font-medium">
|
||||
Dé vrolijke 3D print webshop voor originele fidget toys, Pokémon creaties, popculture figuren en custom 3D prints op maat!
|
||||
Gespecialiseerd in het 3D printen van gedetailleerde modellen, soepel bewegende fidget toys en iconische popculture figuren. Gemaakt met hoogwaardige filamenten op hypermoderne FDM-printers.
|
||||
</p>
|
||||
<div class="inline-flex items-center space-x-1.5 text-[11px] font-bold text-emerald-300 bg-emerald-950/60 px-2.5 py-1 rounded-full border border-emerald-500/30">
|
||||
<div class="inline-flex items-center space-x-1.5 text-[11px] font-bold text-emerald-400 bg-emerald-950/60 px-2.5 py-1 rounded-full border border-emerald-500/30">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></span>
|
||||
<span>Printers online en print-klaar 🖨️</span>
|
||||
<span>Printers gekalibreerd & actief</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Col 2: Categorieën -->
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-amber-300">🧸 Onze Collectie</h3>
|
||||
<ul class="space-y-1.5 text-xs text-slate-300 font-bold">
|
||||
<li><a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="hover:text-amber-300 transition flex items-center space-x-1"><span>🌀</span><span>Fidget Toys & Slugs</span></a></li>
|
||||
<li><a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="hover:text-amber-300 transition flex items-center space-x-1"><span>⚡</span><span>Pokémon 3D Prints</span></a></li>
|
||||
<li><a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="hover:text-amber-300 transition flex items-center space-x-1"><span>🎬</span><span>Film & Gaming Items</span></a></li>
|
||||
<li><a href="{{ route('custom.request') }}" class="hover:text-amber-300 transition flex items-center space-x-1 text-rose-300 font-black"><span>🚀</span><span>Eigen STL Bestand Bestellen</span></a></li>
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-amber-300">Collectie</h3>
|
||||
<ul class="space-y-1.5 text-xs text-slate-300 font-semibold">
|
||||
<li><a href="{{ route('catalog', ['category' => 'fidget-toys']) }}" class="hover:text-white transition">Fidget Toys & Slugs</a></li>
|
||||
<li><a href="{{ route('catalog', ['category' => 'pokemon-3d']) }}" class="hover:text-white transition">Pokémon 3D Prints</a></li>
|
||||
<li><a href="{{ route('catalog', ['category' => 'film-popculture']) }}" class="hover:text-white transition">Film, Gaming & Collectibles</a></li>
|
||||
<li><a href="{{ route('custom.request') }}" class="hover:text-white transition text-rose-300">Eigen STL Model Printen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Col 3: Veilige Materialen -->
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-sky-300">🌈 Kwaliteit & Materialen</h3>
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-sky-300">Materialen & Kwaliteit</h3>
|
||||
<ul class="space-y-1.5 text-xs text-slate-300 font-medium">
|
||||
<li class="flex items-center space-x-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-emerald-400"></span>
|
||||
<span><strong>Bio-PLA+</strong> (Veilig voor kinderen)</span>
|
||||
<span><strong>Bio-PLA+</strong>: Biologisch & geurloos</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-sky-400"></span>
|
||||
<span><strong>PETG Tough</strong> (Slagvast)</span>
|
||||
<span><strong>PETG Tough</strong>: Slagvast & waterdicht</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-amber-400"></span>
|
||||
<span><strong>TPU Flex</strong> (Rubberachtig buigzaam)</span>
|
||||
<span><strong>TPU 95A</strong>: Buigzaam rubber</span>
|
||||
</li>
|
||||
<li class="flex items-center space-x-1.5">
|
||||
<span class="w-2 h-2 rounded-full bg-purple-400"></span>
|
||||
<span><strong>Silk Regenboog</strong> (Glanzend effect)</span>
|
||||
<span><strong>Silk Glans</strong>: Prachtige reflectie</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Col 4: Contact -->
|
||||
<div class="space-y-2">
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-rose-300">💌 Service & Bezorging</h3>
|
||||
<p class="text-xs text-slate-300 font-medium">Heb je een speciale wens of custom print verzoek?</p>
|
||||
<h3 class="font-heading text-xs font-black uppercase tracking-wider text-rose-300">Bestelling & Verzending</h3>
|
||||
<p class="text-xs text-slate-300 font-medium">Heb je een vraag over een print of wil je een model op afwijkend formaat laten printen?</p>
|
||||
<div class="p-3 rounded-2xl bg-slate-800/80 border border-slate-700 text-xs space-y-1 font-bold">
|
||||
<div class="flex items-center space-x-1.5 text-slate-200">
|
||||
<span>📧</span>
|
||||
<i data-lucide="mail" class="w-3.5 h-3.5 text-amber-400"></i>
|
||||
<span>info@jouwdriedee.nl</span>
|
||||
</div>
|
||||
<div class="flex items-center space-x-1.5 text-slate-200">
|
||||
<span>📦</span>
|
||||
<span>Verzending binnen 2-3 werkdagen</span>
|
||||
<i data-lucide="truck" class="w-3.5 h-3.5 text-amber-400"></i>
|
||||
<span>Verzending in heel NL & België</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -267,11 +267,11 @@
|
||||
</div>
|
||||
|
||||
<div class="pt-6 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-400 font-bold gap-3 text-center sm:text-left">
|
||||
<p>© {{ date('Y') }} Jouwdriedee.nl. Alles vers 3D geprint in Nederland.</p>
|
||||
<p>© {{ date('Y') }} Jouwdriedee.nl. Alle 3D prints worden op bestelling vervaardigd.</p>
|
||||
<div class="flex items-center space-x-3">
|
||||
<span>💳 iDEAL & Bancontact</span>
|
||||
<span>iDEAL & Bancontact</span>
|
||||
<span>•</span>
|
||||
<span>🚚 PostNL Track & Trace</span>
|
||||
<span>PostNL Track & Trace</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', '3D Print Catalogus 🎁 | Jouwdriedee.nl')
|
||||
@section('title', '3D Print Catalogus | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<!-- Page Header -->
|
||||
<div class="bg-gradient-to-b from-amber-50 to-[#FFFDF9] border-b border-slate-200/80 py-6 sm:py-8">
|
||||
<div class="bg-slate-50 border-b border-slate-200/80 py-6 sm:py-8">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
||||
<div>
|
||||
<div class="inline-flex items-center space-x-1.5 px-3 py-1 rounded-full bg-white border border-slate-200 text-[10px] sm:text-xs font-black text-rose-500 shadow-2xs mb-2">
|
||||
<span>🧸</span>
|
||||
<span>Onze Collectie 3D Prints</span>
|
||||
<div class="inline-flex items-center space-x-1.5 px-3 py-1 rounded-full bg-white border border-slate-200 text-xs font-bold text-slate-700 shadow-2xs mb-2">
|
||||
<span>Overzicht 3D Modellen</span>
|
||||
</div>
|
||||
<h1 class="font-heading text-2xl sm:text-4xl font-black text-slate-900 tracking-tight">Kies Jouw Favoriete Print! 🎁</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">Fidget toys, Pokémon figuren en popculture collectibles vers uit de 3D printer.</p>
|
||||
<h1 class="font-heading text-2xl sm:text-4xl font-black text-slate-900 tracking-tight">Onze 3D Print Collectie</h1>
|
||||
<p class="text-xs text-slate-500 mt-1">Fidget toys, Pokémon figuren en popculture modellen. Geprint op aanvraag in jouw gewenste kleur.</p>
|
||||
</div>
|
||||
@if(request()->hasAny(['category', 'material', 'q', 'sort']))
|
||||
<a href="{{ route('catalog') }}" class="playful-btn px-3 py-1.5 rounded-xl bg-white border border-slate-200 text-xs font-bold text-rose-600 hover:bg-rose-50 flex items-center space-x-1 self-start shadow-2xs">
|
||||
@@ -87,7 +86,7 @@
|
||||
|
||||
<!-- Categorie filter -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-2">Categorieën 🧸</label>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-2">Categorieën</label>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('catalog', array_merge(request()->except('category', 'page'), [])) }}" class="flex items-center justify-between px-3 py-2 rounded-xl text-xs font-bold transition {{ !request('category') ? 'bg-amber-100 text-amber-950 font-black' : 'text-slate-600 hover:bg-slate-50' }}">
|
||||
<span>Alle categorieën</span>
|
||||
@@ -102,7 +101,7 @@
|
||||
|
||||
<!-- Materiaal filter -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-2">Materiaal 🌈</label>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-2">Filament Materiaal</label>
|
||||
<div class="space-y-1">
|
||||
<a href="{{ route('catalog', array_merge(request()->except('material', 'page'), [])) }}" class="flex items-center justify-between px-3 py-1.5 rounded-xl text-xs font-bold transition {{ !request('material') ? 'bg-sky-100 text-sky-950 font-black' : 'text-slate-600 hover:bg-slate-50' }}">
|
||||
<span>Alle materialen</span>
|
||||
@@ -119,7 +118,7 @@
|
||||
<div class="hidden lg:block">
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Sorteren</label>
|
||||
<select name="sort" onchange="this.form.submit()" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs font-bold text-slate-700 focus:bg-white focus:outline-none">
|
||||
<option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Nieuwste eerst ✨</option>
|
||||
<option value="newest" {{ request('sort') === 'newest' ? 'selected' : '' }}>Nieuwste toevoegingen</option>
|
||||
<option value="price_asc" {{ request('sort') === 'price_asc' ? 'selected' : '' }}>Prijs: Laag naar hoog</option>
|
||||
<option value="price_desc" {{ request('sort') === 'price_desc' ? 'selected' : '' }}>Prijs: Hoog naar laag</option>
|
||||
</select>
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('title', 'Eigen 3D Model Bestellen (STL / 3MF Upload) 🚀 | Jouwdriedee.nl')
|
||||
@section('title', 'Eigen 3D Model Printen (STL / 3MF) | Jouwdriedee.nl')
|
||||
|
||||
@section('content')
|
||||
<!-- Header Banner -->
|
||||
<div class="bg-gradient-to-b from-amber-50 to-[#FFFDF9] border-b border-slate-200/80 py-8 sm:py-12">
|
||||
<div class="bg-slate-50 border-b border-slate-200/80 py-8 sm:py-12">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center space-y-3">
|
||||
<span class="px-3 py-1 rounded-full bg-rose-100 text-rose-700 text-xs font-black inline-flex items-center space-x-1.5 shadow-2xs">
|
||||
<span>🚀</span>
|
||||
<span>Direct 3D Printen op Bestelling</span>
|
||||
<span class="px-3.5 py-1 rounded-full bg-white border border-slate-200 text-xs font-bold text-slate-700 inline-flex items-center space-x-1.5 shadow-2xs">
|
||||
<i data-lucide="layers" class="w-3.5 h-3.5 text-rose-500"></i>
|
||||
<span>3D Print op Aanvraag & Maatwerk</span>
|
||||
</span>
|
||||
<h1 class="font-heading text-3xl sm:text-5xl font-black text-slate-900 tracking-tight">Bestel Jouw Eigen 3D Model!</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-600 max-w-xl mx-auto leading-relaxed font-medium">
|
||||
Heb je een gaaf 3D bestand gevonden op MakerWorld, Printables, Thingiverse of zelf ontworpen? Upload jouw bestand of plak de link, kies je kleur en bestel direct online!
|
||||
<h1 class="font-heading text-3xl sm:text-5xl font-black text-slate-900 tracking-tight">Eigen 3D Model Printen</h1>
|
||||
<p class="text-xs sm:text-sm text-slate-600 max-w-xl mx-auto leading-relaxed font-normal">
|
||||
Heb je een 3D-bestand van MakerWorld, Printables of Thingiverse, of een eigen CAD-ontwerp? Upload jouw bestand of plak de link, kies je materiaal en bestel direct online.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -55,8 +55,8 @@
|
||||
:class="activeTab === 'direct' ? 'bg-white text-slate-900 shadow-sm font-black' : 'text-slate-600 hover:text-slate-900 font-bold'"
|
||||
class="flex-1 py-2.5 px-4 rounded-xl text-xs transition flex items-center justify-center space-x-1.5"
|
||||
>
|
||||
<span>🛒</span>
|
||||
<span>Direct Bestellen & Afrekenen</span>
|
||||
<i data-lucide="shopping-bag" class="w-3.5 h-3.5"></i>
|
||||
<span>Direct online bestellen</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
@@ -64,13 +64,13 @@
|
||||
:class="activeTab === 'offerte' ? 'bg-white text-slate-900 shadow-sm font-black' : 'text-slate-600 hover:text-slate-900 font-bold'"
|
||||
class="flex-1 py-2.5 px-4 rounded-xl text-xs transition flex items-center justify-center space-x-1.5"
|
||||
>
|
||||
<span>💬</span>
|
||||
<span>Vrijblijvende Prijsopgave</span>
|
||||
<i data-lucide="file-text" class="w-3.5 h-3.5"></i>
|
||||
<span>Maatwerk offerte</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- TAB 1: DIRECT BESTELLEN EN IN WINKELWAGEN -->
|
||||
<div x-show="activeTab === 'direct'" class="p-6 sm:p-10 rounded-3xl bg-white border border-slate-100 shadow-xl shadow-slate-200/50 space-y-8">
|
||||
<div x-show="activeTab === 'direct'" class="p-6 sm:p-10 rounded-3xl bg-white border border-slate-200/80 shadow-lg shadow-slate-200/40 space-y-8">
|
||||
|
||||
<form action="{{ route('custom.cart.add') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
|
||||
@csrf
|
||||
@@ -79,46 +79,44 @@
|
||||
<div class="space-y-4">
|
||||
<div class="border-b border-slate-100 pb-3">
|
||||
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2">
|
||||
<span>1️⃣</span>
|
||||
<span>Upload 3D Bestand of vul een Model-Link in</span>
|
||||
<span>1. 3D-bestand uploaden of link invoeren</span>
|
||||
</h3>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Ondersteunt STL, 3MF, STEP, OBJ of directe links van MakerWorld, Printables en Thingiverse.</p>
|
||||
<p class="text-xs text-slate-500 mt-0.5">Ondersteunt STL, 3MF, STEP en OBJ, of een directe link naar het model op MakerWorld of Printables.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<!-- Bestand upload -->
|
||||
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-200 hover:border-rose-400 transition">
|
||||
<label class="block text-xs font-black text-slate-800 mb-1 flex items-center space-x-1">
|
||||
<span>📁</span>
|
||||
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 hover:border-slate-300 transition">
|
||||
<label class="block text-xs font-bold text-slate-800 mb-1 flex items-center space-x-1.5">
|
||||
<i data-lucide="file" class="w-3.5 h-3.5 text-rose-500"></i>
|
||||
<span>Bestand uploaden (.stl, .3mf, .step, .obj)</span>
|
||||
</label>
|
||||
<input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-600 file:mr-3 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-rose-500 file:text-white hover:file:bg-rose-600 cursor-pointer">
|
||||
<span class="text-[10px] text-slate-400 block mt-1">Max. 50MB</span>
|
||||
<input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-600 file:mr-3 file:py-1.5 file:px-3 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-900 file:text-white hover:file:bg-slate-800 cursor-pointer">
|
||||
<span class="text-[10px] text-slate-400 block mt-1">Maximale bestandsgrootte: 50MB</span>
|
||||
</div>
|
||||
|
||||
<!-- Of URL -->
|
||||
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-200 hover:border-rose-400 transition">
|
||||
<label class="block text-xs font-black text-slate-800 mb-1 flex items-center space-x-1">
|
||||
<span>🔗</span>
|
||||
<div class="p-4 rounded-2xl bg-slate-50 border border-slate-200/80 hover:border-slate-300 transition">
|
||||
<label class="block text-xs font-bold text-slate-800 mb-1 flex items-center space-x-1.5">
|
||||
<i data-lucide="link" class="w-3.5 h-3.5 text-rose-500"></i>
|
||||
<span>Of plak een MakerWorld / Printables link</span>
|
||||
</label>
|
||||
<input type="url" name="model_url" placeholder="https://makerworld.com/nl/models/..." class="w-full bg-white border border-slate-200 rounded-xl px-3 py-2 text-xs font-medium placeholder-slate-400 focus:outline-none focus:ring-1 focus:ring-rose-400">
|
||||
<span class="text-[10px] text-slate-400 block mt-1">Wij halen het 3D model direct binnen</span>
|
||||
<span class="text-[10px] text-slate-400 block mt-1">Wij downloaden en inspecteren het bestand</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1">Naam of titel van het model (optioneel)</label>
|
||||
<input type="text" name="model_name" placeholder="Bijv. Pikachu sleutelhanger of Fidget Spinner" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs font-medium text-slate-800 focus:bg-white focus:outline-none">
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1">Omschrijving of modelnaam (optioneel)</label>
|
||||
<input type="text" name="model_name" placeholder="Bijv. Pikachu sleutelhanger of Fidget Toy" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2 text-xs font-medium text-slate-800 focus:bg-white focus:outline-none">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. Formaat & Afmeting -->
|
||||
<div class="space-y-3">
|
||||
<div class="border-b border-slate-100 pb-2">
|
||||
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2">
|
||||
<span>2️⃣</span>
|
||||
<span>Kies het gewenste formaat</span>
|
||||
<h3 class="font-heading text-base font-black text-slate-900">
|
||||
<span>2. Formaat en schaal selecteren</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
@@ -127,40 +125,40 @@
|
||||
<button
|
||||
type="button"
|
||||
@click="selectedSize = 'klein'"
|
||||
:class="selectedSize === 'klein' ? 'border-rose-500 bg-rose-50 ring-2 ring-rose-400 font-black' : 'border-slate-200 hover:bg-slate-50 font-bold'"
|
||||
:class="selectedSize === 'klein' ? 'border-amber-400 bg-amber-50 ring-2 ring-amber-400 font-bold' : 'border-slate-200 hover:bg-slate-50 font-semibold'"
|
||||
class="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<span class="text-xs font-black text-slate-900 block">Klein (tot 8 cm)</span>
|
||||
<span class="text-[11px] text-slate-500 block mt-0.5">Sleutelhangers, munten, miniatuurtjes</span>
|
||||
<span class="text-xs font-bold text-slate-900 block">Klein (tot 8 cm)</span>
|
||||
<span class="text-[11px] text-slate-500 block mt-0.5">Sleutelhangers, miniaturen, kleine clips</span>
|
||||
</div>
|
||||
<span class="font-heading text-base font-black text-rose-600 mt-2 block">€ 9,95</span>
|
||||
<span class="font-heading text-base font-black text-slate-900 mt-2 block">€ 9,95</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="selectedSize = 'medium'"
|
||||
:class="selectedSize === 'medium' ? 'border-rose-500 bg-rose-50 ring-2 ring-rose-400 font-black' : 'border-slate-200 hover:bg-slate-50 font-bold'"
|
||||
:class="selectedSize === 'medium' ? 'border-amber-400 bg-amber-50 ring-2 ring-amber-400 font-bold' : 'border-slate-200 hover:bg-slate-50 font-semibold'"
|
||||
class="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<span class="text-xs font-black text-slate-900 block">Medium (tot 15 cm) 🔥</span>
|
||||
<span class="text-[11px] text-slate-500 block mt-0.5">Figuren, plantenpotjes, bureau-items</span>
|
||||
<span class="text-xs font-bold text-slate-900 block">Medium (tot 15 cm)</span>
|
||||
<span class="text-[11px] text-slate-500 block mt-0.5">Figuren, plantenbakjes, bureau-organizers</span>
|
||||
</div>
|
||||
<span class="font-heading text-base font-black text-rose-600 mt-2 block">€ 16,95</span>
|
||||
<span class="font-heading text-base font-black text-slate-900 mt-2 block">€ 16,95</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="selectedSize = 'groot'"
|
||||
:class="selectedSize === 'groot' ? 'border-rose-500 bg-rose-50 ring-2 ring-rose-400 font-black' : 'border-slate-200 hover:bg-slate-50 font-bold'"
|
||||
:class="selectedSize === 'groot' ? 'border-amber-400 bg-amber-50 ring-2 ring-amber-400 font-bold' : 'border-slate-200 hover:bg-slate-50 font-semibold'"
|
||||
class="p-4 rounded-2xl border text-left transition cursor-pointer flex flex-col justify-between"
|
||||
>
|
||||
<div>
|
||||
<span class="text-xs font-black text-slate-900 block">Groot (tot 22 cm)</span>
|
||||
<span class="text-[11px] text-slate-500 block mt-0.5">Grote beelden, cosplay, vazen</span>
|
||||
<span class="text-xs font-bold text-slate-900 block">Groot (tot 22 cm)</span>
|
||||
<span class="text-[11px] text-slate-500 block mt-0.5">Grote displays, cosplay props, vazen</span>
|
||||
</div>
|
||||
<span class="font-heading text-base font-black text-rose-600 mt-2 block">€ 24,95</span>
|
||||
<span class="font-heading text-base font-black text-slate-900 mt-2 block">€ 24,95</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -168,16 +166,15 @@
|
||||
<!-- 3. Materiaal & Kleur -->
|
||||
<div class="space-y-4">
|
||||
<div class="border-b border-slate-100 pb-2">
|
||||
<h3 class="font-heading text-base font-black text-slate-900 flex items-center space-x-2">
|
||||
<span>3️⃣</span>
|
||||
<span>Kies Materiaal & Kleur</span>
|
||||
<h3 class="font-heading text-base font-black text-slate-900">
|
||||
<span>3. Materiaal en printkleur</span>
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<!-- Materiaal -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Materiaal</label>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Filament type</label>
|
||||
<select name="material" x-model="selectedMaterial" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3 py-2.5 text-xs font-bold text-slate-800 focus:bg-white focus:outline-none">
|
||||
@foreach($materials as $mat)
|
||||
<option value="{{ $mat->code }}">{{ $mat->name }}</option>
|
||||
@@ -187,7 +184,7 @@
|
||||
|
||||
<!-- Kleur -->
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Printkleur: <span class="text-rose-500 font-black" x-text="selectedColor"></span></label>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1.5">Printkleur: <span class="text-rose-500 font-bold" x-text="selectedColor"></span></label>
|
||||
<input type="hidden" name="color" x-model="selectedColor">
|
||||
<div class="flex flex-wrap gap-2 pt-1">
|
||||
@foreach($colors as $c)
|
||||
@@ -209,15 +206,15 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1">Optionele opmerkingen / afmetingen</label>
|
||||
<textarea name="notes" rows="2" placeholder="Bijv. exact 12cm hoog maken, extra stevige infill gewenst, etc." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs text-slate-800 focus:bg-white focus:outline-none"></textarea>
|
||||
<label class="block text-xs font-bold text-slate-700 mb-1">Bijzondere instructies (optioneel)</label>
|
||||
<textarea name="notes" rows="2" placeholder="Bijv. gewenste oriëntatie, specifieke wanddikte of infill..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3 text-xs text-slate-800 focus:bg-white focus:outline-none"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4. Prijs & Bestelknop -->
|
||||
<div class="p-5 rounded-2xl bg-gradient-to-r from-amber-50 via-rose-50 to-indigo-50 border border-amber-200/80 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div class="p-5 rounded-2xl bg-slate-50 border border-slate-200/80 flex flex-col sm:flex-row items-center justify-between gap-4">
|
||||
<div>
|
||||
<span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider block">Berekende Stukprijs</span>
|
||||
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-wider block">Berekende Stukprijs</span>
|
||||
<div class="flex items-baseline space-x-2">
|
||||
<span class="font-heading text-3xl font-black text-slate-900">€ <span x-text="unitPrice"></span></span>
|
||||
<span class="text-xs text-slate-500">incl. btw & materiaal</span>
|
||||
@@ -227,15 +224,15 @@
|
||||
<div class="flex items-center space-x-3 w-full sm:w-auto">
|
||||
<!-- Aantal -->
|
||||
<div class="flex items-center border border-slate-200 rounded-xl bg-white overflow-hidden shadow-2xs">
|
||||
<button type="button" @click="if (quantity > 1) quantity--" class="px-3 py-2 text-slate-700 font-black cursor-pointer text-sm hover:bg-slate-100">-</button>
|
||||
<button type="button" @click="if (quantity > 1) quantity--" class="px-3 py-2 text-slate-700 font-bold cursor-pointer text-sm hover:bg-slate-100">-</button>
|
||||
<span class="px-3 py-2 font-heading font-black text-xs text-slate-900" x-text="quantity"></span>
|
||||
<input type="hidden" name="quantity" x-model="quantity">
|
||||
<button type="button" @click="if (quantity < 20) quantity++" class="px-3 py-2 text-slate-700 font-black cursor-pointer text-sm hover:bg-slate-100">+</button>
|
||||
<button type="button" @click="if (quantity < 20) quantity++" class="px-3 py-2 text-slate-700 font-bold cursor-pointer text-sm hover:bg-slate-100">+</button>
|
||||
</div>
|
||||
|
||||
<!-- Bestelknop -->
|
||||
<button type="submit" class="playful-btn flex-1 sm:flex-none px-6 py-3.5 rounded-2xl bg-gradient-to-r from-amber-400 via-rose-400 to-rose-500 text-slate-950 font-black text-xs sm:text-sm shadow-md shadow-rose-500/20 flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<span>🛒</span>
|
||||
<button type="submit" class="playful-btn flex-1 sm:flex-none px-6 py-3.5 rounded-2xl bg-amber-400 hover:bg-amber-300 text-slate-950 font-black text-xs sm:text-sm shadow-xs flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<i data-lucide="shopping-bag" class="w-4 h-4"></i>
|
||||
<span>In Winkelwagen • € <span x-text="calculatedTotal"></span></span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -246,10 +243,10 @@
|
||||
</div>
|
||||
|
||||
<!-- TAB 2: VRIJBLIJVENDE OFFERTE (VOOR MAATWERK & ADVIES) -->
|
||||
<div x-show="activeTab === 'offerte'" class="p-6 sm:p-10 rounded-3xl bg-white border border-slate-100 shadow-xl shadow-slate-200/50 space-y-6">
|
||||
<div x-show="activeTab === 'offerte'" class="p-6 sm:p-10 rounded-3xl bg-white border border-slate-200/80 shadow-lg shadow-slate-200/40 space-y-6">
|
||||
<div class="border-b border-slate-100 pb-3">
|
||||
<h3 class="font-heading text-lg font-black text-slate-900">Vrijblijvende Prijsopgave & Maatwerk Advies</h3>
|
||||
<p class="text-xs text-slate-500 mt-1">Voor grotere series, mechanische onderdelen of technisch advies. We reageren binnen 24 uur met een scherpe offerte.</p>
|
||||
<h3 class="font-heading text-lg font-black text-slate-900">Vrijblijvende Maatwerk Offerte</h3>
|
||||
<p class="text-xs text-slate-500 mt-1">Voor grotere series, meerkleurige assemblages of speciale technische vereisten. We reageren binnen 24 uur met een passend voorstel.</p>
|
||||
</div>
|
||||
|
||||
<form action="{{ route('custom.store') }}" method="POST" enctype="multipart/form-data" class="space-y-5">
|
||||
@@ -274,23 +271,24 @@
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">3D Model Bestand (.stl, .step, .obj, .zip)</label>
|
||||
<div class="p-6 border-2 border-dashed border-slate-200 hover:border-rose-400 rounded-2xl bg-slate-50/60 text-center transition">
|
||||
<input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-rose-500 file:text-white hover:file:bg-rose-600 cursor-pointer">
|
||||
<div class="p-6 border-2 border-dashed border-slate-200 hover:border-slate-300 rounded-2xl bg-slate-50/60 text-center transition">
|
||||
<input type="file" name="model_file" accept=".stl,.step,.stp,.obj,.3mf,.zip" class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-bold file:bg-slate-900 file:text-white hover:file:bg-slate-800 cursor-pointer">
|
||||
<p class="text-[11px] text-slate-400 mt-2">Ondersteunde formaten: STL, STEP, OBJ, 3MF of ZIP (max 50 MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-1">Toelichting, Afmetingen & Aantal *</label>
|
||||
<textarea name="description" rows="4" required placeholder="Vermeld gewenste afmetingen, aantal en toepassing..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3.5 text-xs text-slate-900 focus:bg-white focus:outline-none"></textarea>
|
||||
<textarea name="description" rows="4" required placeholder="Vermeld eventuele gewenste afmetingen, aantal en toepassing..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-3.5 text-xs text-slate-900 focus:bg-white focus:outline-none"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="playful-btn w-full py-4 rounded-2xl bg-gradient-to-r from-rose-500 to-indigo-600 text-white font-black text-xs uppercase tracking-wider transition shadow-md shadow-rose-500/20 flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<button type="submit" class="playful-btn w-full py-4 rounded-2xl bg-slate-900 hover:bg-slate-800 text-white font-black text-xs uppercase tracking-wider transition shadow-sm flex items-center justify-center space-x-2 cursor-pointer">
|
||||
<i data-lucide="send" class="w-4 h-4"></i>
|
||||
<span>Aanvraag Vrijblijvend Verzenden ✨</span>
|
||||
<span>Aanvraag Verzenden</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
|
||||
@@ -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