Initial commit: Lash Vanshy - Complete project with admin panel, gallery, products, and contact
This commit is contained in:
281
resources/views/frontend/contacto/index.blade.php
Executable file
281
resources/views/frontend/contacto/index.blade.php
Executable file
@@ -0,0 +1,281 @@
|
||||
@extends('frontend.layouts.main')
|
||||
|
||||
@section('title', 'Contacto - Lash Vanshy')
|
||||
|
||||
@section('content')
|
||||
<!-- Page Header -->
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1>Contáctanos</h1>
|
||||
<p>Estamos aquí para responder a todas tus preguntas</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section class="contact-section section-padding">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<!-- Contact Info -->
|
||||
<div class="col-lg-5 mb-4 mb-lg-0">
|
||||
<div class="contact-info h-100">
|
||||
<h3 class="mb-4">Información de Contacto</h3>
|
||||
|
||||
<div class="contact-info-item">
|
||||
<i class="fas fa-phone-alt"></i>
|
||||
<div>
|
||||
<strong>Teléfono</strong>
|
||||
@if(!empty($configuracion['telefono']))
|
||||
<a href="tel:{{ $configuracion['telefono'] }}">{{ $configuracion['telefono'] }}</a>
|
||||
@else
|
||||
<span>+34 000 000 000</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-info-item">
|
||||
<i class="fas fa-envelope"></i>
|
||||
<div>
|
||||
<strong>Email</strong>
|
||||
@if(!empty($configuracion['email']))
|
||||
<a href="mailto:{{ $configuracion['email'] }}">{{ $configuracion['email'] }}</a>
|
||||
@else
|
||||
<span>contacto@lashvanshy.com</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-info-item">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<div>
|
||||
<strong>Dirección</strong>
|
||||
@if(!empty($configuracion['direccion']))
|
||||
<span>{{ $configuracion['direccion'] }}</span>
|
||||
@else
|
||||
<span>Tu dirección aquí</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="contact-info-item">
|
||||
<i class="fas fa-clock"></i>
|
||||
<div>
|
||||
<strong>Horario</strong>
|
||||
@if(!empty($configuracion['horario']))
|
||||
<span>{!! nl2br(e($configuracion['horario'])) !!}</span>
|
||||
@else
|
||||
<span>Lunes - Viernes: 10:00 - 20:00</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<h5 class="mb-3">Síguenos en redes sociales</h5>
|
||||
<div class="social-links">
|
||||
@if(!empty($configuracion['facebook']))
|
||||
<a href="{{ $configuracion['facebook'] }}" target="_blank" class="social-link" title="Facebook">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
@endif
|
||||
@if(!empty($configuracion['instagram']))
|
||||
<a href="{{ $configuracion['instagram'] }}" target="_blank" class="social-link" title="Instagram">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
@endif
|
||||
@if(!empty($configuracion['whatsapp']))
|
||||
<a href="{{ $configuracion['whatsapp'] }}" target="_blank" class="social-link" title="WhatsApp">
|
||||
<i class="fab fa-whatsapp"></i>
|
||||
</a>
|
||||
@endif
|
||||
@if(!empty($configuracion['tiktok']))
|
||||
<a href="{{ $configuracion['tiktok'] }}" target="_blank" class="social-link" title="TikTok">
|
||||
<i class="fab fa-tiktok"></i>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<div class="col-lg-7">
|
||||
<div class="contact-card">
|
||||
<div class="contact-form">
|
||||
<h3 class="mb-4">Envíanos un Mensaje</h3>
|
||||
|
||||
@if(session('success'))
|
||||
<div class="alert alert-success">
|
||||
<i class="fas fa-check-circle me-2"></i>
|
||||
{{ session('success') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($errors->any())
|
||||
<div class="alert alert-danger">
|
||||
<i class="fas fa-exclamation-circle me-2"></i>
|
||||
<ul class="mb-0">
|
||||
@foreach($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('contacto.send') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="nombre" class="form-label">Nombre completo *</label>
|
||||
<input type="text"
|
||||
class="form-control @error('nombre') is-invalid @enderror"
|
||||
id="nombre"
|
||||
name="nombre"
|
||||
value="{{ old('nombre') }}"
|
||||
placeholder="Tu nombre"
|
||||
required>
|
||||
@error('nombre')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 mb-3">
|
||||
<label for="email" class="form-label">Email *</label>
|
||||
<input type="email"
|
||||
class="form-control @error('email') is-invalid @enderror"
|
||||
id="email"
|
||||
name="email"
|
||||
value="{{ old('email') }}"
|
||||
placeholder="tu@email.com"
|
||||
required>
|
||||
@error('email')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="telefono" class="form-label">Teléfono (opcional)</label>
|
||||
<input type="tel"
|
||||
class="form-control @error('telefono') is-invalid @enderror"
|
||||
id="telefono"
|
||||
name="telefono"
|
||||
value="{{ old('telefono') }}"
|
||||
placeholder="Tu número de teléfono">
|
||||
@error('telefono')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label for="mensaje" class="form-label">Mensaje *</label>
|
||||
<textarea class="form-control @error('mensaje') is-invalid @enderror"
|
||||
id="mensaje"
|
||||
name="mensaje"
|
||||
rows="5"
|
||||
placeholder="¿En qué podemos ayudarte?"
|
||||
required>{{ old('mensaje') }}</textarea>
|
||||
@error('mensaje')
|
||||
<div class="invalid-feedback">{{ $message }}</div>
|
||||
@enderror
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-primary-custom">
|
||||
<i class="fas fa-paper-plane me-2"></i>Enviar Mensaje
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: var(--text-light);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
|
||||
padding: 3rem;
|
||||
border-radius: 20px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.contact-info h3 {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.contact-info-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.contact-info-item i {
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--primary-dark);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.contact-info-item strong {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.contact-info-item a,
|
||||
.contact-info-item span {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.contact-form .form-label {
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.contact-form .form-control {
|
||||
border: 2px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.contact-form .form-control:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 4px rgba(248, 180, 196, 0.2);
|
||||
}
|
||||
|
||||
.contact-form .form-control.is-invalid {
|
||||
border-color: var(--danger);
|
||||
}
|
||||
|
||||
.contact-form .invalid-feedback {
|
||||
color: var(--danger);
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
167
resources/views/frontend/galeria/index.blade.php
Executable file
167
resources/views/frontend/galeria/index.blade.php
Executable file
@@ -0,0 +1,167 @@
|
||||
@extends('frontend.layouts.main')
|
||||
|
||||
@section('title', 'Galería - Lash Vanshy')
|
||||
|
||||
@section('content')
|
||||
<!-- Page Header -->
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1>Nuestra Galería</h1>
|
||||
<p>Explora nuestros trabajos realizados y transforma tu mirada</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Gallery Section -->
|
||||
<section class="gallery-section section-padding">
|
||||
<div class="container">
|
||||
<!-- Filters -->
|
||||
<div class="gallery-filters">
|
||||
<button class="filter-btn {{ $tipo === 'todos' ? 'active' : '' }}"
|
||||
onclick="filterGallery('todos')">
|
||||
<i class="fas fa-th-large me-2"></i>Todos ({{ $stats['total'] }})
|
||||
</button>
|
||||
<button class="filter-btn {{ $tipo === 'imagen' ? 'active' : '' }}"
|
||||
onclick="filterGallery('imagen')">
|
||||
<i class="fas fa-image me-2"></i>Imágenes ({{ $stats['imagenes'] }})
|
||||
</button>
|
||||
<button class="filter-btn {{ $tipo === 'video' ? 'active' : '' }}"
|
||||
onclick="filterGallery('video')">
|
||||
<i class="fas fa-video me-2"></i>Videos ({{ $stats['videos'] }})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Gallery Grid -->
|
||||
@if($galeria->isNotEmpty())
|
||||
<div class="gallery-grid">
|
||||
@foreach($galeria as $item)
|
||||
<div class="gallery-item" data-type="{{ $item->tipo }}">
|
||||
@if($item->tipo === 'video')
|
||||
@if($item->thumbnail)
|
||||
<img src="{{ asset('storage/' . $item->thumbnail) }}"
|
||||
alt="{{ $item->titulo }}"
|
||||
loading="lazy">
|
||||
@elseif($item->archivo)
|
||||
<video poster="{{ asset('storage/' . $item->archivo . '/preview.jpg') }}">
|
||||
<source src="{{ asset('storage/' . $item->archivo) }}" type="video/mp4">
|
||||
</video>
|
||||
@else
|
||||
<div class="placeholder-img w-100 h-100">
|
||||
<i class="fas fa-video fa-2x"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="play-icon">
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
@else
|
||||
@if($item->archivo)
|
||||
<a href="{{ asset('storage/' . $item->archivo) }}"
|
||||
data-lightbox="gallery"
|
||||
data-title="{{ $item->titulo }}">
|
||||
<img src="{{ asset('storage/' . $item->archivo) }}"
|
||||
alt="{{ $item->titulo }}"
|
||||
loading="lazy">
|
||||
</a>
|
||||
@else
|
||||
<div class="placeholder-img w-100 h-100">
|
||||
<i class="fas fa-image fa-2x"></i>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
<div class="overlay">
|
||||
<div class="overlay-content">
|
||||
<h4>{{ $item->titulo }}</h4>
|
||||
@if($item->descripcion)
|
||||
<p>{{ Str::limit($item->descripcion, 60) }}</p>
|
||||
@endif
|
||||
<span class="badge bg-light text-dark mt-2">
|
||||
<i class="fas {{ $item->tipo === 'video' ? 'fa-video' : 'fa-image' }} me-1"></i>
|
||||
{{ $item->tipo === 'video' ? 'Video' : 'Imagen' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
{{ $galeria->appends(['tipo' => $tipo])->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-images"></i>
|
||||
<h4>No hay elementos en la galería</h4>
|
||||
<p>Próximamente subiremos más contenido. ¡Vuelve pronto!</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: var(--text-light);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
color: var(--text);
|
||||
border: 2px solid var(--border);
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function filterGallery(tipo) {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('tipo', tipo);
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
|
||||
// Configurar Lightbox
|
||||
lightbox.option({
|
||||
'resizeDuration': 200,
|
||||
'wrapAround': true,
|
||||
'albumLabel': 'Imagen %1 de %2',
|
||||
'fadeDuration': 300,
|
||||
'imageFadeDuration': 300
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
209
resources/views/frontend/home/index.blade.php
Executable file
209
resources/views/frontend/home/index.blade.php
Executable file
@@ -0,0 +1,209 @@
|
||||
@extends('frontend.layouts.main')
|
||||
|
||||
@section('title', 'Lash Vanshy - Extensiones de Pestañas Profesionales')
|
||||
|
||||
@section('content')
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-6 order-2 order-lg-1">
|
||||
<div class="hero-content text-center text-lg-start">
|
||||
<h1 class="hero-title">
|
||||
<span>Lash Vanshy</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Extensiones de pestañas profesionales con productos de la más alta calidad.
|
||||
Destaca tu belleza natural con nuestros servicios especializados y personalizados.
|
||||
</p>
|
||||
<a href="{{ route('productos') }}" class="hero-btn">
|
||||
Ver Servicios <i class="fas fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 order-1 order-lg-2 mb-4 mb-lg-0">
|
||||
<div class="hero-image-wrapper">
|
||||
<img src="https://images.unsplash.com/photo-1516975080664-ed2fc6a32937?w=600&h=500&fit=crop"
|
||||
alt="Extensiones de pestañas profesionales"
|
||||
class="hero-image img-fluid"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 300%22%3E%3Crect fill=%22%23FFE4EC%22 width=%22400%22 height=%22300%22/%3E%3Ctext x=%22200%22 y=%22150%22 text-anchor=%22middle%22 fill=%22%23E89AAD%22 font-size=%2240%22%3E%E2%9C%A8%3C/text%3E%3Ctext x=%22200%22 y=%22190%22 text-anchor=%22middle%22 fill=%22%234A4A4A%22 font-size=%2216%22%3ELash Vanshy%3C/text%3E%3C/svg%3E'">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Servicios Destacados -->
|
||||
@if($productosDestacados->isNotEmpty())
|
||||
<section class="section-padding">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>Servicios <span>Destacados</span></h2>
|
||||
<p>Descubre nuestros servicios más populares y solicitados por nuestras clientas.</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
@foreach($productosDestacados as $producto)
|
||||
<div class="col-md-6 col-lg-4">
|
||||
<div class="card-custom h-100">
|
||||
<div class="position-relative">
|
||||
@if($producto->imagen)
|
||||
<img src="{{ asset('storage/' . $producto->imagen) }}"
|
||||
alt="{{ $producto->nombre }}"
|
||||
class="card-img-top">
|
||||
@else
|
||||
<div class="card-img-top placeholder-img">
|
||||
<i class="fas fa-eye"></i>
|
||||
</div>
|
||||
@endif
|
||||
<span class="badge-destacado">⭐ Destacado</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<span class="text-primary small text-uppercase fw-bold">{{ $producto->categoria }}</span>
|
||||
<h5 class="card-title mt-2">{{ $producto->nombre }}</h5>
|
||||
<p class="card-text">{{ Str::limit($producto->descripcion, 100) }}</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="price">{{ $producto->precio_formateado }}</span>
|
||||
<a href="{{ route('contacto') }}" class="btn btn-sm btn-outline-primary">
|
||||
Reservar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="{{ route('productos') }}" class="hero-btn">
|
||||
Ver Todos los Servicios <i class="fas fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
<!-- Galería Preview -->
|
||||
@if($galeria->isNotEmpty())
|
||||
<section class="section-padding bg-secondary">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>Nuestro <span>Trabajo</span></h2>
|
||||
<p>Mira algunos de nuestros trabajos realizados. Cada cliente es único y especial para nosotros.</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-3">
|
||||
@foreach($galeria as $item)
|
||||
<div class="col-6 col-md-4 col-lg-3">
|
||||
<div class="gallery-item">
|
||||
@if($item->tipo === 'video')
|
||||
@if($item->thumbnail)
|
||||
<img src="{{ asset('storage/' . $item->thumbnail) }}" alt="{{ $item->titulo }}">
|
||||
@else
|
||||
<div class="placeholder-img w-100 h-100">
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="play-icon">
|
||||
<i class="fas fa-play"></i>
|
||||
</div>
|
||||
@else
|
||||
@if($item->archivo)
|
||||
<img src="{{ asset('storage/' . $item->archivo) }}" alt="{{ $item->titulo }}">
|
||||
@else
|
||||
<div class="placeholder-img w-100 h-100">
|
||||
<i class="fas fa-image"></i>
|
||||
</div>
|
||||
@endif
|
||||
@endif
|
||||
<div class="overlay">
|
||||
<div class="overlay-content">
|
||||
<h4>{{ $item->titulo }}</h4>
|
||||
@if($item->descripcion)
|
||||
<p>{{ Str::limit($item->descripcion, 50) }}</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="{{ route('galeria') }}" class="hero-btn">
|
||||
Ver Galería Completa <i class="fas fa-arrow-right ms-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@endif
|
||||
|
||||
<!-- Por qué elegirnos -->
|
||||
<section class="section-padding">
|
||||
<div class="container">
|
||||
<div class="section-title">
|
||||
<h2>¿Por qué <span>Elegirnos?</span></h2>
|
||||
<p>Nos comprometemos a darte los mejores resultados.</p>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="text-center p-4">
|
||||
<div class="feature-icon mb-3">
|
||||
<i class="fas fa-gem"></i>
|
||||
</div>
|
||||
<h4>Productos de Calidad</h4>
|
||||
<p class="text-muted">Utilizamos solo productos premium y seguros para tus pestañas.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-center p-4">
|
||||
<div class="feature-icon mb-3">
|
||||
<i class="fas fa-user-tie"></i>
|
||||
</div>
|
||||
<h4>Profesionales Expertas</h4>
|
||||
<p class="text-muted">Nuestro equipo tiene años de experiencia en el sector.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="text-center p-4">
|
||||
<div class="feature-icon mb-3">
|
||||
<i class="fas fa-heart"></i>
|
||||
</div>
|
||||
<h4>Atención Personalizada</h4>
|
||||
<p class="text-muted">Cada clienta recibe un tratamiento adaptado a sus necesidades.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Contacto -->
|
||||
<section class="section-padding bg-primary-custom">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8 text-center">
|
||||
<h2 class="mb-3">¿Lista para transformar tu mirada?</h2>
|
||||
<p class="mb-4">Contáctanos hoy mismo y agenda tu cita. Estaremos encantadas de atenderte.</p>
|
||||
<a href="{{ route('contacto') }}" class="hero-btn">
|
||||
Contactar Ahora <i class="fas fa-envelope ms-2"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.feature-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, var(--secondary), var(--primary));
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 2rem;
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
144
resources/views/frontend/layouts/main.blade.php
Executable file
144
resources/views/frontend/layouts/main.blade.php
Executable file
@@ -0,0 +1,144 @@
|
||||
@php
|
||||
$configuracion = \App\Models\Configuracion::allAsArray();
|
||||
@endphp
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Lash Vanshy - Extensiones de pestañas profesionales. Servicios de extensiones de pestañas, lift de pestañas y más.">
|
||||
<title>@yield('title', 'Lash Vanshy - Extensiones de Pestañas Profesionales')</title>
|
||||
|
||||
<!-- Fonts -->
|
||||
<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=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<!-- Lightbox CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/css/lightbox.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Estilos personalizados -->
|
||||
<link rel="stylesheet" href="{{ asset('css/frontend.css') }}">
|
||||
|
||||
@stack('styles')
|
||||
</head>
|
||||
<body>
|
||||
<!-- Header -->
|
||||
<header class="header-main">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="{{ route('home') }}">
|
||||
<span class="brand-icon">✨</span>
|
||||
<span class="brand-text">Lash Vanshy</span>
|
||||
</a>
|
||||
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ request()->routeIs('home') ? 'active' : '' }}" href="{{ route('home') }}">Inicio</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ request()->is('galeria*') ? 'active' : '' }}" href="{{ route('galeria') }}">Galería</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ request()->is('productos*') ? 'active' : '' }}" href="{{ route('productos') }}">Servicios</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {{ request()->is('contacto*') ? 'active' : '' }}" href="{{ route('contacto') }}">Contacto</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Contenido principal -->
|
||||
<main class="main-content">
|
||||
@yield('content')
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer-main">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||||
<h5 class="footer-title">Lash Vanshy</h5>
|
||||
<p class="footer-description">
|
||||
Extensions de pestañas profesionales con productos de la más alta calidad. Destaca tu belleza natural con我们的 servicios especializados.
|
||||
</p>
|
||||
<div class="social-links">
|
||||
<a href="{{ $configuracion['facebook'] ?? '#' }}" target="_blank" class="social-link" title="Facebook">
|
||||
<i class="fab fa-facebook-f"></i>
|
||||
</a>
|
||||
<a href="{{ $configuracion['instagram'] ?? '#' }}" target="_blank" class="social-link" title="Instagram">
|
||||
<i class="fab fa-instagram"></i>
|
||||
</a>
|
||||
<a href="{{ $configuracion['whatsapp'] ?? '#' }}" target="_blank" class="social-link" title="WhatsApp">
|
||||
<i class="fab fa-whatsapp"></i>
|
||||
</a>
|
||||
<a href="{{ $configuracion['tiktok'] ?? '#' }}" target="_blank" class="social-link" title="TikTok">
|
||||
<i class="fab fa-tiktok"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4 mb-4 mb-lg-0">
|
||||
<h5 class="footer-title">Contacto</h5>
|
||||
<ul class="footer-contact">
|
||||
@if(!empty($configuracion['telefono']))
|
||||
<li>
|
||||
<i class="fas fa-phone"></i>
|
||||
<a href="tel:{{ $configuracion['telefono'] }}">{{ $configuracion['telefono'] }}</a>
|
||||
</li>
|
||||
@endif
|
||||
@if(!empty($configuracion['email']))
|
||||
<li>
|
||||
<i class="fas fa-envelope"></i>
|
||||
<a href="mailto:{{ $configuracion['email'] }}">{{ $configuracion['email'] }}</a>
|
||||
</li>
|
||||
@endif
|
||||
@if(!empty($configuracion['direccion']))
|
||||
<li>
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
<span>{{ $configuracion['direccion'] }}</span>
|
||||
</li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<h5 class="footer-title">Horario</h5>
|
||||
<ul class="footer-schedule">
|
||||
@if(!empty($configuracion['horario']))
|
||||
<li><span>{!! nl2br(e($configuracion['horario'])) !!}</span></li>
|
||||
@else
|
||||
<li><span>Lunes - Viernes: 10:00 - 20:00</span></li>
|
||||
<li><span>Sábado: 10:00 - 18:00</span></li>
|
||||
<li><span>Domingo: Cerrado</span></li>
|
||||
@endif
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© {{ date('Y') }} Lash Vanshy. Todos los derechos reservados.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- Lightbox JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/lightbox2@2.11.4/dist/js/lightbox.min.js"></script>
|
||||
|
||||
@stack('scripts')
|
||||
</body>
|
||||
</html>
|
||||
178
resources/views/frontend/productos/index.blade.php
Executable file
178
resources/views/frontend/productos/index.blade.php
Executable file
@@ -0,0 +1,178 @@
|
||||
@extends('frontend.layouts.main')
|
||||
|
||||
@section('title', 'Servicios - Lash Vanshy')
|
||||
|
||||
@section('content')
|
||||
<!-- Page Header -->
|
||||
<section class="page-header">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1>Nuestros Servicios</h1>
|
||||
<p>Descubre todos los servicios que temos para ti</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Productos Section -->
|
||||
<section class="products-section section-padding">
|
||||
<div class="container">
|
||||
<!-- Category Filters -->
|
||||
<div class="category-filters">
|
||||
<button class="filter-btn {{ $categoria === 'todos' ? 'active' : '' }}"
|
||||
onclick="filterProducts('todos')">
|
||||
<i class="fas fa-th-large me-2"></i>Todos
|
||||
</button>
|
||||
@foreach($categorias as $cat)
|
||||
<button class="filter-btn {{ $categoria === $cat ? 'active' : '' }}"
|
||||
onclick="filterProducts('{{ $cat }}')">
|
||||
{{ $cat }}
|
||||
</button>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Featured Products -->
|
||||
@if($destacados->isNotEmpty() && $productos->currentPage() === 1)
|
||||
<div class="mb-5">
|
||||
<h3 class="mb-4">
|
||||
<i class="fas fa-star text-warning me-2"></i>Servicios Destacados
|
||||
</h3>
|
||||
<div class="products-grid">
|
||||
@foreach($destacados as $producto)
|
||||
<div class="product-card">
|
||||
@if($producto->imagen)
|
||||
<img src="{{ asset('storage/' . $producto->imagen) }}"
|
||||
alt="{{ $producto->nombre }}">
|
||||
@else
|
||||
<div class="placeholder-img" style="height: 250px;">
|
||||
<i class="fas fa-spa fa-2x"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="product-info">
|
||||
<span class="product-category">{{ $producto->categoria }}</span>
|
||||
<h3 class="product-title">{{ $producto->nombre }}</h3>
|
||||
<p class="product-description">{{ Str::limit($producto->descripcion, 120) }}</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="product-price">{{ $producto->precio_formateado }}</span>
|
||||
<a href="{{ route('contacto') }}" class="btn btn-sm btn-outline-primary rounded-pill">
|
||||
Reservar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<!-- All Products -->
|
||||
<div>
|
||||
<h3 class="mb-4">Todos los Servicios</h3>
|
||||
@if($productos->isNotEmpty())
|
||||
<div class="products-grid">
|
||||
@foreach($productos as $producto)
|
||||
<div class="product-card">
|
||||
@if($producto->imagen)
|
||||
<img src="{{ asset('storage/' . $producto->imagen) }}"
|
||||
alt="{{ $producto->nombre }}">
|
||||
@else
|
||||
<div class="placeholder-img" style="height: 250px;">
|
||||
<i class="fas fa-spa fa-2x"></i>
|
||||
</div>
|
||||
@endif
|
||||
<div class="product-info">
|
||||
<span class="product-category">{{ $producto->categoria }}</span>
|
||||
<h3 class="product-title">{{ $producto->nombre }}</h3>
|
||||
<p class="product-description">{{ Str::limit($producto->descripcion, 120) }}</p>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<span class="product-price">{{ $producto->precio_formateado }}</span>
|
||||
<a href="{{ route('contacto') }}" class="btn btn-sm btn-outline-primary rounded-pill">
|
||||
Reservar
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<!-- Pagination -->
|
||||
<div class="pagination-wrapper">
|
||||
{{ $productos->appends(['categoria' => $categoria])->links() }}
|
||||
</div>
|
||||
@else
|
||||
<div class="empty-state">
|
||||
<i class="fas fa-spa"></i>
|
||||
<h4>No hay servicios disponibles</h4>
|
||||
<p>Próximamente tendremos más servicios. ¡Vuelve pronto!</p>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-header {
|
||||
background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);
|
||||
padding: 60px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--text);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.page-header p {
|
||||
color: var(--text-light);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
margin-top: 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pagination .page-link {
|
||||
color: var(--text);
|
||||
border: 2px solid var(--border);
|
||||
margin: 0 0.25rem;
|
||||
border-radius: 10px;
|
||||
padding: 0.5rem 1rem;
|
||||
}
|
||||
|
||||
.pagination .page-link:hover {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.pagination .page-item.active .page-link {
|
||||
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-outline-primary {
|
||||
border-color: var(--primary);
|
||||
color: var(--primary-dark);
|
||||
}
|
||||
|
||||
.btn-outline-primary:hover {
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
function filterProducts(categoria) {
|
||||
const url = new URL(window.location.href);
|
||||
url.searchParams.set('categoria', categoria);
|
||||
window.location.href = url.toString();
|
||||
}
|
||||
</script>
|
||||
@endpush
|
||||
@endsection
|
||||
Reference in New Issue
Block a user