Cambios en vistas de catalogo, mejoras visuales y creado componente para ver el producto como invitado

resources/views/catalogo.blade.php

@@ -8,7 +8,8 @@
         @if ($products->count() > 0)
             <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
                 @foreach ($products as $prod)
-                    <div class="group p-4 border border-neutral-800 rounded-xl hover:border-neon-lime hover:-translate-y-1 transition-all duration-300 shadow-lg hover:shadow-neon-lime/20">
+                    <x-ui.imagecard title="" aria-description="">
+                    <div class="group p-4 border border-neutral-800 rounded-xl hover:border-neon-lime hover:-translate-y-1 transition-all duration-300">
                         {{-- Imagen si existe --}}
                         @if (!empty($prod->img))
                             <img src="{{ asset('storage/' . $prod->img) }}" alt="{{ $prod->name }}"

resources/views/components/ui/imgcard.blade.php

@@ -0,0 +1,31 @@
+@props(['href' => '#', 'title', 'description', 'price', 'image' => null])
+
+<div class="group p-4 border border-neutral-800 rounded-xl hover:border-neon-lime hover:-translate-y-1 transition-all duration-300">
+    {{-- Imagen si existe --}}
+    @if ($image)
+        <img src="{{ asset('storage/' . $image) }}" alt="{{ $title }}"
+            class="w-full h-40 object-cover rounded mb-4">
+    @else
+        <div class="w-full h-40 bg-lime-500 flex items-center justify-center rounded mb-4">
+            <span class="text-neutral-900 text-md uppercase font-bold">Sin imagen</span>
+        </div>
+    @endif
+
+    {{-- Nombre --}}
+    <h2 class="text-lg font-semibold text-white">{{ $title }}</h2>
+
+    {{-- Descripción corta --}}
+    <div class="h-10 overflow-y-auto [scrollbar-width:none]">
+        @if (!empty($description))
+            <p class="text-sm text-gray-400 mt-2">{{ $description }}</p>
+        @endif
+    </div>
+
+    {{-- Precio --}}
+    <p class="text-white group-hover:text-neon-lime font-bold mt-3 transition-colors">${{ number_format($price, 2, ',', '.') }}</p>
+
+    {{-- Botón --}}
+    <a href="{{ $href }}" class="mt-4 block w-full bg-blue-500 text-white py-2 rounded-lg text-center hover:bg-blue-600">
+        Ver producto
+    </a>
+</div>

resources/views/welcome.blade.php

@@ -1,4 +1,14 @@
-<x-appc>
+<x-layout title="Home - Lauck">
-    <x-slot name="title">Lauck - Inicio</x-slot>
+    <x-section-header subtitle="Inicio" title="Bicicleteria " highlight="Lauck"/>
-    <x-slot name="navTitle">Bienvenido</x-slot>
+
-</x-appc>
+    <!-- Tarjeta Catálogo -->
+    <div class="grid grid-cols-2 w-full h-80">
+        <a href="{{ url('/catalogo') }}" class="p-6 bg-gradient-to-br from-neutral-800 to-neutral-900 border border-neutral-700 rounded-xl flex flex-col justify-center items-center text-center hover:border-neon-lime transition-all">
+            <span class="text-4xl font-black text-white">85%</span>
+            <span class="text-xs uppercase tracking-widest text-gray-500 mt-1">Eficiencia Taller</span>
+            <div class="w-full bg-gray-700 rounded-full h-1.5 mt-4">
+              <div class="bg-neon-lime h-1.5 rounded-full" style="width: 85%"></div>
+            </div>
+        </a>
+    </div>
+</x-layout>

routes/web.php

@@ -14,6 +14,7 @@ use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\Session;
 
 Route::get('/',HomeController::class);
+Route::get('/catalogo', [CatalogoController::class,'catalogo'])->name('catalogo');
 
 Route::get('login', function(){
     return view('login');
@@ -52,5 +53,4 @@ Route::middleware(['auth'])->group(function () {
 });
 
 
-Route::get('/catalogo', [CatalogoController::class,'catalogo'])->name('catalogo');
 Route::get('/productos/{id}/vistaUsuario', [ProductosController::class,'vistaUsuario'])->name('productos.vistaUsuario');