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
|
||||
Reference in New Issue
Block a user