Showcase de Efectos Visuales

Sistema Multi-Cliente - Selecciona un tema para previsualizar

Efectos de Hover para Productos

@foreach($products->take(4) as $index => $product)
@if($product->images->first()) {{ $product->DE_ARTI }} @else Sin imagen @endif
{{ Str::limit($product->DE_ARTI, 20) }}

${{ number_format($product->IM_UNITA, 2) }}

Efecto {{ $index + 1 }}
@endforeach

Efectos de Botones

Efectos de Cards para Categorías

@foreach($categories->take(3) as $index => $category)
{{ $category->DE_CATEGOR }}

Categoría con efecto hover elevación

Ver Productos
@endforeach
@foreach($categories->skip(3)->take(3) as $category)
@if($category->image) @else @endif
{{ $category->DE_CATEGOR }}

Overlay con información adicional

@endforeach

Efectos de Loading

Spinner Circular

Puntos Animados

75%

Barra de Progreso

Bootstrap Spinner

Efectos de Texto

Texto con Gradiente

Ideal para títulos y destacados

Texto con Sombra Dinámica

Hover para ver el efecto de profundidad

Animaciones de Entrada

Fade In Animation
Slide In Left
Zoom In Effect

Efectos para Marcas

@foreach($brands as $brand)
@if($brand->image) {{ $brand->DE_MARCA }} @else
{{ $brand->DE_MARCA }}
@endif
@endforeach

Cómo Implementar en tu Cliente

Para Hiermisa MGT:
  • Usa efectos industriales y profesionales (hover-effect-1, btn-effect-3)
  • Colores oscuros y sobrios (theme-hiermisa)
  • Animaciones sutiles para mantener seriedad
Para La Viruta MGT:
  • Efectos más cálidos y artesanales (hover-effect-3, card-effect-1)
  • Colores madera y tierra (theme-laviruta)
  • Animaciones orgánicas y suaves
Implementación:
  1. Copia las clases CSS del efecto deseado
  2. Agrégalas a tu archivo de estilos del tema
  3. Aplica las clases a los elementos en las vistas Blade
  4. Ajusta colores según la paleta del cliente