alumnos_ti/LauckCycles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ADD:

Browse Source 
- Agregada funcion de cambio de tema para el modo claro
STYLE:
- Agregadas variantes de estilos, clases en modo claro y oscuro
- Quedan pendientes mas componentes a estilizar
This commit is contained in:
Bryam105
2026-02-21 21:16:00 -03:30
parent 8448a9e43b
commit 850a55f257
10 changed files with 84 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/components/ui/carrousel.blade.php
+16 -16
View File
@@ -1,10 +1,10 @@
@props(['items'])
<div class="relative w-full overflow-hidden rounded-xl border border-neutral-800 bg-panel-bg shadow-xl group" id="lauck-carousel">
<div class="relative w-full overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-800 bg-slate-50 dark:bg-panel-bg shadow-xl group" id="lauck-carousel">
<!-- Título Flotante (Opcional) -->
<div class="absolute top-4 left-6 z-10 bg-black/50 backdrop-blur-sm px-3 py-1 rounded border border-neon-lime/30">
<span class="text-xs font-bold text-neon-lime uppercase tracking-widest">Destacados</span>
<div class="absolute top-4 left-6 z-10 bg-neon-lime/50 dark:bg-black/50 backdrop-blur-sm px-3 py-1 rounded border border-black/30 dark:border-neon-lime/30">
<span class="text-xs font-bold text-black dark:text-neon-lime uppercase tracking-widest">Destacados</span>
</div>
<!-- Contenedor de Slides (Track) -->
@@ -13,40 +13,40 @@
<div class="w-full flex-shrink-0 flex flex-col md:flex-row h-full relative">
<!-- Imagen / Visual (Izquierda o Fondo) -->
<div class="w-full md:w-1/2 bg-neutral-800 flex items-center justify-center relative overflow-hidden">
<div class="w-full md:w-1/2 bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center relative overflow-hidden">
<!-- Decoración de fondo -->
<div class="absolute inset-0 bg-grid-pattern opacity-10"></div>
<!-- Icono Gigante (Placeholder de Bici) -->
<div class="text-neutral-700 transform group-hover:scale-110 transition-transform duration-700">
<div class="text-neutral-300 dark:text-neutral-700 transform group-hover:scale-110 transition-transform duration-700">
@if($item->image_path)
<img src="{{ asset('storage/' . $item->image_path) }}" alt="{{ $item->name }}" class="w-full h-full object-cover">
@else
<!-- Placeholder si no tiene foto -->
<div class="w-full h-full flex items-center justify-center bg-neutral-800">
<div class="w-full h-full flex items-center justify-center bg-neutral-200 dark:bg-neutral-800">
<svg class="w-48 h-48" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="0.5" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path></svg>
</div>
@endif
</div>
<!-- Precio Flotante -->
<div class="absolute bottom-4 left-4 bg-neon-lime text-neutral-900 font-black px-4 py-2 rounded-lg text-xl shadow-lg shadow-neon-lime/20">
<div class="absolute bottom-4 left-4 bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-black px-4 py-2 rounded-lg text-xl shadow-lg shadow-gray-800/10 dark:shadow-neon-lime/20">
${{ number_format($item->price, 0, ',', '.') }}
</div>
</div>
<!-- Info (Derecha) -->
<div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center bg-gradient-to-br from-panel-bg to-neutral-900">
<h3 class="text-sm font-bold text-gray-400 uppercase tracking-widest mb-2">{{ $item->sku }}</h3>
<h2 class="text-3xl md:text-4xl font-black text-white italic mb-4 leading-tight">
<div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center bg-gradient-to-br from-gray-200 dark:from-panel-bg to-neutral-100 dark:to-neutral-900">
<h3 class="text-sm font-bold text-gray-600 dark:text-gray-400 uppercase tracking-widest mb-2">{{ $item->sku }}</h3>
<h2 class="text-3xl md:text-4xl font-black text-black dark:text-white italic mb-4 leading-tight">
{{ $item->name }}
</h2>
<p class="text-gray-400 text-sm md:text-base mb-8 line-clamp-3">
<p class="text-gray-600 dark:text-gray-400 text-sm md:text-base mb-8 line-clamp-3">
{{ $item->description ?? 'Una bicicleta diseñada para el máximo rendimiento en todo terreno. Consultar especificaciones técnicas en el catálogo.' }}
</p>
<div class="flex gap-4">
<a href="{{ route('catalogo.show', $item) }}" class="px-6 py-3 bg-white text-neutral-900 font-bold uppercase tracking-wider rounded hover:bg-gray-200 transition-colors">
<a href="{{ route('catalogo.show', $item) }}" class="px-6 py-3 bg-black dark:bg-white text-neutral-100 dark:text-neutral-900 font-bold uppercase tracking-wider rounded hover:bg-neutral-800 hover:dark:bg-gray-200 transition-colors">
Ver Detalles
</a>
</div>
@@ -54,7 +54,7 @@
</div>
@empty
<!-- Slide de Fallback por si no hay datos -->
<div class="w-full flex-shrink-0 flex items-center justify-center h-full bg-neutral-800 text-gray-500">
<div class="w-full flex-shrink-0 flex items-center justify-center h-full bg-neutral-200 dark:bg-neutral-800 text-gray-500">
<p>No hay productos destacados disponibles.</p>
</div>
@endforelse
@@ -72,7 +72,7 @@
<!-- Indicadores (Puntos) -->
<div class="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-20">
@foreach($items as $index => $item)
<button class="carousel-dot w-3 h-3 rounded-full bg-white/20 hover:bg-neon-lime transition-all" data-index="{{ $index }}"></button>
<button class="carousel-dot w-3 h-3 rounded-full bg-black/20 dark:bg-white/20 hover:bg-lime-500 hover:dark:bg-neon-lime transition-all" data-index="{{ $index }}"></button>
@endforeach
</div>
@@ -91,8 +91,8 @@
$track.css('transform', `translateX(${translateX}%)`);
// Actualizar puntos
$('.carousel-dot').removeClass('bg-neon-lime scale-125').addClass('bg-white/20');
$(`.carousel-dot[data-index="${currentIndex}"]`).addClass('bg-neon-lime scale-125').removeClass('bg-white/20');
$('.carousel-dot').removeClass('bg-lime-500 dark:bg-neon-lime scale-125').addClass('bg-black/20 dark:bg-white/20');
$(`.carousel-dot[data-index="${currentIndex}"]`).addClass('bg-lime-500 dark:bg-neon-lime scale-125').removeClass('bg-black/20 dark:bg-white/20');
}
function nextSlide() {