mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 16:24:30 +00:00
feat: Implementar frontend completo de anchor23.mx
- Crear landing page con hero, fundamento, servicios y testimoniales - Crear página de servicios con grid y descripciones - Crear página de historia con filosofía de la marca - Crear página de contacto con formulario - Crear página de franchises con solicitud - Crear página de membresías con 3 tiers (Gold, Black, VIP) - Crear páginas de Privacy Policy y Legal - Implementar header y footer global - Estilos con Tailwind CSS según especificaciones - HTML semántico y estructura clara - Conversión silenciosa hacia booking.anchor23.mx
This commit is contained in:
Marco Gallegos
175
app/contacto/page.tsx
Normal file
175
app/contacto/page.tsx
Normal file
@@ -0,0 +1,175 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { MapPin, Phone, Mail, Clock } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function ContactoPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
nombre: '',
|
||||||
|
email: '',
|
||||||
|
telefono: '',
|
||||||
|
mensaje: ''
|
||||||
|
})
|
||||||
|
const [submitted, setSubmitted] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setSubmitted(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
[e.target.name]: e.target.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="section">
|
||||||
|
<div className="section-header">
|
||||||
|
<h1 className="section-title">Contáctanos</h1>
|
||||||
|
<p className="section-subtitle">
|
||||||
|
Estamos aquí para responder tus preguntas y atender tus necesidades.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid md:grid-cols-2 gap-12">
|
||||||
|
<div className="space-y-8">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">Información de Contacto</h2>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<MapPin className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">Ubicación</h3>
|
||||||
|
<p className="text-gray-600">Saltillo, Coahuila, México</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<Phone className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">Teléfono</h3>
|
||||||
|
<p className="text-gray-600">+52 844 123 4567</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<Mail className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">Email</h3>
|
||||||
|
<p className="text-gray-600">contacto@anchor23.mx</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-start space-x-4">
|
||||||
|
<Clock className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
|
||||||
|
<div>
|
||||||
|
<h3 className="font-semibold text-gray-900">Horario</h3>
|
||||||
|
<p className="text-gray-600">Lunes - Sábado: 10:00 - 21:00</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-100">
|
||||||
|
<h3 className="font-semibold text-gray-900 mb-2">¿Necesitas reservar una cita?</h3>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Utiliza nuestro sistema de reservas en línea para mayor comodidad.
|
||||||
|
</p>
|
||||||
|
<a href="https://booking.anchor23.mx" className="btn-primary inline-flex">
|
||||||
|
Reservar Cita
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">Envíanos un Mensaje</h2>
|
||||||
|
|
||||||
|
{submitted ? (
|
||||||
|
<div className="p-8 bg-green-50 border border-green-200 rounded-xl">
|
||||||
|
<h3 className="text-xl font-semibold text-green-900 mb-2">
|
||||||
|
Mensaje Enviado
|
||||||
|
</h3>
|
||||||
|
<p className="text-green-800">
|
||||||
|
Gracias por contactarnos. Te responderemos lo antes posible.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="nombre" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Nombre Completo
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="nombre"
|
||||||
|
name="nombre"
|
||||||
|
value={formData.nombre}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="Tu nombre"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="tu@email.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="telefono" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Teléfono
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="telefono"
|
||||||
|
name="telefono"
|
||||||
|
value={formData.telefono}
|
||||||
|
onChange={handleChange}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="+52 844 123 4567"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="mensaje" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Mensaje
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="mensaje"
|
||||||
|
name="mensaje"
|
||||||
|
value={formData.mensaje}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
rows={6}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
|
||||||
|
placeholder="¿Cómo podemos ayudarte?"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="btn-primary w-full">
|
||||||
|
Enviar Mensaje
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
274
app/franchises/page.tsx
Normal file
274
app/franchises/page.tsx
Normal file
@@ -0,0 +1,274 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Building2, Map, CheckCircle, Mail, Phone } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function FranchisesPage() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
nombre: '',
|
||||||
|
email: '',
|
||||||
|
telefono: '',
|
||||||
|
ciudad: '',
|
||||||
|
experiencia: '',
|
||||||
|
mensaje: ''
|
||||||
|
})
|
||||||
|
const [submitted, setSubmitted] = useState(false)
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setSubmitted(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
[e.target.name]: e.target.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const benefits = [
|
||||||
|
'Modelo de negocio exclusivo y probado',
|
||||||
|
'Una sucursal por ciudad: saturación controlada',
|
||||||
|
'Sistema operativo completo (SalonOS)',
|
||||||
|
'Capacitación en estándares de lujo',
|
||||||
|
'Membresía de clientes como fuente recurrente',
|
||||||
|
'Soporte continuo y actualizaciones'
|
||||||
|
]
|
||||||
|
|
||||||
|
const requirements = [
|
||||||
|
'Compromiso inquebrantable con la calidad',
|
||||||
|
'Experiencia en industria de belleza',
|
||||||
|
'Inversión mínima: $500,000 USD',
|
||||||
|
'Ubicación premium en ciudad de interés',
|
||||||
|
'Capacidad de contratar personal calificado'
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="section">
|
||||||
|
<div className="section-header">
|
||||||
|
<h1 className="section-title">Franquicias</h1>
|
||||||
|
<p className="section-subtitle">
|
||||||
|
Una oportunidad para llevar el estándar Anchor:23 a tu ciudad.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<section className="mb-24">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Nuestro Modelo</h2>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto bg-gradient-to-br from-gray-50 to-white rounded-2xl shadow-lg p-12 border border-gray-100">
|
||||||
|
<div className="flex items-center justify-center mb-8">
|
||||||
|
<Building2 className="w-16 h-16 text-gray-900" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-6 text-center">
|
||||||
|
Una Sucursal por Ciudad
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className="text-lg text-gray-600 leading-relaxed text-center mb-8">
|
||||||
|
A diferencia de modelos masivos, creemos en la exclusividad geográfica.
|
||||||
|
Cada ciudad tiene una sola ubicación Anchor:23, garantizando calidad
|
||||||
|
consistente y demanda sostenible.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-6 text-center">
|
||||||
|
<div className="p-6">
|
||||||
|
<Map className="w-12 h-12 mx-auto mb-4 text-gray-900" />
|
||||||
|
<h4 className="font-semibold text-gray-900 mb-2">Exclusividad</h4>
|
||||||
|
<p className="text-gray-600 text-sm">Sin competencia interna</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<CheckCircle className="w-12 h-12 mx-auto mb-4 text-gray-900" />
|
||||||
|
<h4 className="font-semibold text-gray-900 mb-2">Calidad</h4>
|
||||||
|
<p className="text-gray-600 text-sm">Estándar uniforme</p>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<Building2 className="w-12 h-12 mx-auto mb-4 text-gray-900" />
|
||||||
|
<h4 className="font-semibold text-gray-900 mb-2">Sostenibilidad</h4>
|
||||||
|
<p className="text-gray-600 text-sm">Demanda controlada</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-24">
|
||||||
|
<div className="grid md:grid-cols-2 gap-12">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">Beneficios</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{benefits.map((benefit, index) => (
|
||||||
|
<div key={index} className="flex items-start space-x-3">
|
||||||
|
<CheckCircle className="w-5 h-5 text-gray-900 mt-1 flex-shrink-0" />
|
||||||
|
<p className="text-gray-700">{benefit}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">Requisitos</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
{requirements.map((req, index) => (
|
||||||
|
<div key={index} className="flex items-start space-x-3">
|
||||||
|
<CheckCircle className="w-5 h-5 text-gray-900 mt-1 flex-shrink-0" />
|
||||||
|
<p className="text-gray-700">{req}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||||
|
Solicitud de Información
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="max-w-2xl mx-auto">
|
||||||
|
{submitted ? (
|
||||||
|
<div className="p-8 bg-green-50 border border-green-200 rounded-xl">
|
||||||
|
<CheckCircle className="w-12 h-12 text-green-900 mb-4" />
|
||||||
|
<h3 className="text-xl font-semibold text-green-900 mb-2">
|
||||||
|
Solicitud Enviada
|
||||||
|
</h3>
|
||||||
|
<p className="text-green-800">
|
||||||
|
Gracias por tu interés. Revisaremos tu perfil y te contactaremos
|
||||||
|
pronto para discutir las oportunidades disponibles.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6 p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
|
||||||
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
|
<div>
|
||||||
|
<label htmlFor="nombre" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Nombre Completo
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="nombre"
|
||||||
|
name="nombre"
|
||||||
|
value={formData.nombre}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="Tu nombre"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="tu@email.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="telefono" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Teléfono
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="telefono"
|
||||||
|
name="telefono"
|
||||||
|
value={formData.telefono}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="+52 844 123 4567"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="ciudad" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Ciudad de Interés
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="ciudad"
|
||||||
|
name="ciudad"
|
||||||
|
value={formData.ciudad}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="Ej. Monterrey, Guadalajara"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="experiencia" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Experiencia en el Sector
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
id="experiencia"
|
||||||
|
name="experiencia"
|
||||||
|
value={formData.experiencia}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
>
|
||||||
|
<option value="">Selecciona una opción</option>
|
||||||
|
<option value="sin-experiencia">Sin experiencia</option>
|
||||||
|
<option value="1-3-anos">1-3 años</option>
|
||||||
|
<option value="3-5-anos">3-5 años</option>
|
||||||
|
<option value="5-10-anos">5-10 años</option>
|
||||||
|
<option value="mas-10-anos">Más de 10 años</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="mensaje" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Mensaje Adicional
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="mensaje"
|
||||||
|
name="mensaje"
|
||||||
|
value={formData.mensaje}
|
||||||
|
onChange={handleChange}
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
|
||||||
|
placeholder="Cuéntanos sobre tu interés o preguntas"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="btn-primary w-full">
|
||||||
|
Enviar Solicitud
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="max-w-4xl mx-auto">
|
||||||
|
<div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-12 text-white">
|
||||||
|
<h3 className="text-2xl font-bold mb-6 text-center">
|
||||||
|
¿Tienes Preguntas Directas?
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-300 mb-8 text-center">
|
||||||
|
Nuestro equipo de franquicias está disponible para resolver tus dudas.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col md:flex-row items-center justify-center gap-6">
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<Mail className="w-6 h-6" />
|
||||||
|
<span>franchises@anchor23.mx</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<Phone className="w-6 h-6" />
|
||||||
|
<span>+52 844 987 6543</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
214
app/globals.css
214
app/globals.css
@@ -2,26 +2,206 @@
|
|||||||
@tailwind components;
|
@tailwind components;
|
||||||
@tailwind utilities;
|
@tailwind utilities;
|
||||||
|
|
||||||
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--foreground-rgb: 0, 0, 0;
|
--foreground-rgb: 20, 20, 20;
|
||||||
--background-start-rgb: 214, 219, 220;
|
--background-rgb: 255, 255, 255;
|
||||||
--background-end-rgb: 255, 255, 255;
|
--accent-rgb: 180, 150, 120;
|
||||||
}
|
--accent-dark-rgb: 140, 110, 80;
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--foreground-rgb: 255, 255, 255;
|
|
||||||
--background-start-rgb: 0, 0, 0;
|
|
||||||
--background-end-rgb: 0, 0, 0;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
color: rgb(var(--foreground-rgb));
|
color: rgb(var(--foreground-rgb));
|
||||||
background: linear-gradient(
|
background: rgb(var(--background-rgb));
|
||||||
to bottom,
|
}
|
||||||
transparent,
|
}
|
||||||
rgb(var(--background-end-rgb))
|
|
||||||
)
|
@layer components {
|
||||||
rgb(var(--background-start-rgb));
|
.site-header {
|
||||||
|
@apply fixed top-0 left-0 right-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-primary {
|
||||||
|
@apply max-w-7xl mx-auto px-6 py-4 flex items-center justify-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo a {
|
||||||
|
@apply text-2xl font-bold tracking-tight text-gray-900 hover:text-gray-700 transition-colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
@apply hidden md:flex items-center space-x-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-links a {
|
||||||
|
@apply text-gray-600 hover:text-gray-900 transition-colors font-medium;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-actions {
|
||||||
|
@apply flex items-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
@apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-sm font-medium rounded-md text-white bg-gray-900 hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
@apply inline-flex items-center justify-center px-6 py-3 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
@apply min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 to-gray-100 pt-20;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content {
|
||||||
|
@apply max-w-7xl mx-auto px-6 text-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-mark {
|
||||||
|
@apply w-24 h-24 mx-auto mb-8 text-gray-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
@apply text-6xl md:text-8xl font-bold text-gray-900 mb-4 tracking-tight;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h2 {
|
||||||
|
@apply text-2xl md:text-3xl font-light text-gray-600 mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
@apply text-lg text-gray-500 mb-8 max-w-2xl mx-auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-actions {
|
||||||
|
@apply flex items-center justify-center gap-4 flex-wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-image {
|
||||||
|
@apply mt-12 rounded-2xl overflow-hidden shadow-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foundation {
|
||||||
|
@apply max-w-7xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12 items-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foundation article {
|
||||||
|
@apply space-y-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foundation h3 {
|
||||||
|
@apply text-sm font-semibold text-gray-500 tracking-widest uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foundation h4 {
|
||||||
|
@apply text-3xl md:text-4xl font-bold text-gray-900;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foundation p {
|
||||||
|
@apply text-lg text-gray-600 leading-relaxed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foundation-image {
|
||||||
|
@apply rounded-2xl overflow-hidden shadow-xl h-96 bg-gradient-to-br from-gray-200 to-gray-300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-preview {
|
||||||
|
@apply max-w-7xl mx-auto px-6 py-24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.services-preview h3 {
|
||||||
|
@apply text-3xl md:text-4xl font-bold text-gray-900 mb-12 text-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-cards {
|
||||||
|
@apply grid md:grid-cols-3 gap-8 mb-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card {
|
||||||
|
@apply p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card h4 {
|
||||||
|
@apply text-xl font-semibold text-gray-900 mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-card p {
|
||||||
|
@apply text-gray-600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonials {
|
||||||
|
@apply max-w-7xl mx-auto px-6 py-24 bg-gradient-to-br from-gray-50 to-gray-100 rounded-3xl mb-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonials h3 {
|
||||||
|
@apply text-3xl md:text-4xl font-bold text-gray-900 mb-12 text-center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial-grid {
|
||||||
|
@apply grid md:grid-cols-2 gap-8 mb-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial {
|
||||||
|
@apply p-8 bg-white rounded-2xl shadow-lg;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial .stars {
|
||||||
|
@apply text-2xl mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial p {
|
||||||
|
@apply text-lg text-gray-700 mb-4 italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.testimonial cite {
|
||||||
|
@apply text-gray-900 font-semibold not-italic block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer {
|
||||||
|
@apply bg-gray-900 text-white py-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.site-footer a {
|
||||||
|
@apply text-gray-400 hover:text-white transition-colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand {
|
||||||
|
@apply max-w-7xl mx-auto px-6 mb-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand span {
|
||||||
|
@apply text-2xl font-bold block mb-2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-brand p {
|
||||||
|
@apply text-gray-400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
@apply max-w-7xl mx-auto px-6 mb-8 flex flex-wrap gap-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-legal {
|
||||||
|
@apply max-w-7xl mx-auto px-6 mb-8 flex flex-wrap gap-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-contact {
|
||||||
|
@apply max-w-7xl mx-auto px-6 flex flex-wrap gap-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
@apply py-24;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-header {
|
||||||
|
@apply max-w-7xl mx-auto px-6 mb-12;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
@apply text-3xl md:text-4xl font-bold text-gray-900 mb-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
@apply text-lg text-gray-600 max-w-2xl;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
88
app/historia/page.tsx
Normal file
88
app/historia/page.tsx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
export default function HistoriaPage() {
|
||||||
|
return (
|
||||||
|
<div className="section">
|
||||||
|
<div className="section-header">
|
||||||
|
<h1 className="section-title">Nuestra Historia</h1>
|
||||||
|
<p className="section-subtitle">
|
||||||
|
El origen de una marca que redefine el estándar de belleza exclusiva.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<section className="foundation mb-24">
|
||||||
|
<article>
|
||||||
|
<h2>El Fundamento</h2>
|
||||||
|
<h3 className="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Nada sólido nace del caos</h3>
|
||||||
|
<p className="text-lg text-gray-600 leading-relaxed mb-6">
|
||||||
|
Anchor:23 nace de la unión de dos creativos que creen en el lujo
|
||||||
|
como estándar, no como promesa.
|
||||||
|
</p>
|
||||||
|
<p className="text-lg text-gray-600 leading-relaxed">
|
||||||
|
En un mundo saturado de opciones, decidimos crear algo diferente:
|
||||||
|
un refugio donde la precisión técnica se encuentra con la elegancia
|
||||||
|
atemporal, donde cada detalle importa y donde la exclusividad es
|
||||||
|
inherente, no promocional.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside className="foundation-image">
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
|
||||||
|
<span className="text-gray-500 text-lg">Imagen Historia</span>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="max-w-4xl mx-auto mb-24">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">El Significado</h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
|
<div className="p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">ANCHOR</h3>
|
||||||
|
<p className="text-gray-600 leading-relaxed">
|
||||||
|
El ancla representa estabilidad, firmeza y permanencia.
|
||||||
|
Es el símbolo de nuestro compromiso con la calidad constante
|
||||||
|
y la excelencia sin concesiones.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
|
||||||
|
<h3 className="text-2xl font-bold text-gray-900 mb-4">:23</h3>
|
||||||
|
<p className="text-gray-600 leading-relaxed">
|
||||||
|
El dos y tres simbolizan la dualidad equilibrada: precisión
|
||||||
|
técnica y creatividad artística, tradición e innovación,
|
||||||
|
rigor y calidez.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="max-w-4xl mx-auto">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">Nuestra Filosofía</h2>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div className="p-6 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-100">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-3">Lujo como Estándar</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
No es lo extrañamente costoso, es lo excepcionalmente bien hecho.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-100">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-3">Exclusividad Inherente</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Una sucursal por ciudad, invitación por membresía, calidad por convicción.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 bg-gradient-to-r from-gray-50 to-white rounded-xl border border-gray-100">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-3">Precisión Absoluta</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Cada corte, cada color, cada tratamiento ejecutado con la máxima perfección técnica.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -5,8 +5,8 @@ import './globals.css'
|
|||||||
const inter = Inter({ subsets: ['latin'] })
|
const inter = Inter({ subsets: ['latin'] })
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: 'SalonOS',
|
title: 'ANCHOR:23 — Belleza Anclada en Exclusividad',
|
||||||
description: 'Exclusive Studio Management & CRM Engine',
|
description: 'Salón de ultra lujo. Un estándar exclusivo de precisión y elegancia.',
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
@@ -15,8 +15,52 @@ export default function RootLayout({
|
|||||||
children: React.ReactNode
|
children: React.ReactNode
|
||||||
}) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="es">
|
||||||
<body className={inter.className}>{children}</body>
|
<body className={inter.className}>
|
||||||
|
<header className="site-header">
|
||||||
|
<nav className="nav-primary">
|
||||||
|
<div className="logo">
|
||||||
|
<a href="/">ANCHOR:23</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="nav-links">
|
||||||
|
<li><a href="/">Inicio</a></li>
|
||||||
|
<li><a href="/historia">Nosotros</a></li>
|
||||||
|
<li><a href="/servicios">Servicios</a></li>
|
||||||
|
<li><a href="/membresias">Membresías</a></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div className="nav-actions">
|
||||||
|
<a className="btn-primary" href="/membresias">Solicitar Membresía</a>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>{children}</main>
|
||||||
|
|
||||||
|
<footer className="site-footer">
|
||||||
|
<div className="footer-brand">
|
||||||
|
<span>ANCHOR:23</span>
|
||||||
|
<p>Saltillo, Coahuila, México</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-links">
|
||||||
|
<a href="/historia">Nosotros</a>
|
||||||
|
<a href="/servicios">Servicios</a>
|
||||||
|
<a href="/contacto">Contáctanos</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-legal">
|
||||||
|
<a href="/privacy-policy">Privacy Policy</a>
|
||||||
|
<a href="/legal">Legal</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-contact">
|
||||||
|
<span>+52 844 123 4567</span>
|
||||||
|
<span>contacto@anchor23.mx</span>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
160
app/legal/page.tsx
Normal file
160
app/legal/page.tsx
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
export default function LegalPage() {
|
||||||
|
return (
|
||||||
|
<div className="section">
|
||||||
|
<div className="max-w-4xl mx-auto px-6">
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900 mb-8">Términos y Condiciones</h1>
|
||||||
|
|
||||||
|
<div className="prose prose-lg max-w-none">
|
||||||
|
<p className="text-gray-600 mb-8">
|
||||||
|
Última actualización: {new Date().toLocaleDateString('es-MX', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">1. Aceptación de Términos</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Al utilizar los servicios de Anchor:23, aceptas estos términos y condiciones.
|
||||||
|
Si no estás de acuerdo con alguno de estos términos, por favor no utilices
|
||||||
|
nuestros servicios.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">2. Servicios Prestados</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Anchor:23 proporciona servicios de belleza y bienestar de alta gama,
|
||||||
|
incluyendo pero no limitado a:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Spa de Alta Gama</li>
|
||||||
|
<li>Arte y Manicure de Precisión</li>
|
||||||
|
<li>Peinado y Maquillaje de Lujo</li>
|
||||||
|
<li>Cuidado Corporal</li>
|
||||||
|
<li>Membresías Exclusivas</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">3. Reservas y Cancelaciones</h2>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">Reservas</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Las reservas se pueden realizar a través de nuestro sitio web
|
||||||
|
booking.anchor23.mx o por teléfono. Se requiere confirmación con
|
||||||
|
al menos 24 horas de anticipación.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">Cancelaciones</h3>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Cancelaciones con más de 24h de anticipación: sin costo</li>
|
||||||
|
<li>Cancelaciones con menos de 24h: 50% del servicio</li>
|
||||||
|
<li>No-show: 100% del servicio</li>
|
||||||
|
<li>Las membresías VIP tienen políticas más flexibles</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">4. Pagos</h2>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Aceptamos efectivo, tarjetas de crédito/débito y transferencias</li>
|
||||||
|
<li>Los precios incluyen IVA</li>
|
||||||
|
<li>Las membresías se cobran mensualmente</li>
|
||||||
|
<li>No realizamos reembolsos por servicios parcialmente utilizados</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">5. Membresías</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Las membresías de Anchor:23 otorgan acceso prioritario y beneficios
|
||||||
|
exclusivos:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Gold Tier: Acceso prioritario, descuentos selectos</li>
|
||||||
|
<li>Black Tier: Privilegios premium, atención personalizada</li>
|
||||||
|
<li>VIP Tier: Experiencias ilimitadas, acceso exclusivo</li>
|
||||||
|
</ul>
|
||||||
|
<p className="text-gray-600 mt-4">
|
||||||
|
Las membresías se renuevan automáticamente. Para cancelar, notificar
|
||||||
|
con 30 días de anticipación.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">6. Conducta del Cliente</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Esperamos un comportamiento respetuoso y profesional de todos nuestros
|
||||||
|
clientes. Nos reservamos el derecho de denegar servicio o cancelar
|
||||||
|
membresías por:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Comportamiento agresivo o ofensivo</li>
|
||||||
|
<li>Violación de políticas de salud y seguridad</li>
|
||||||
|
<li>No pago de servicios</li>
|
||||||
|
<li>Faltas recurrentes sin notificación</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">7. Propiedad Intelectual</h2>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Todo el contenido, diseño, marcas y materiales en este sitio y
|
||||||
|
relacionadas con Anchor:23 son propiedad exclusiva de la empresa.
|
||||||
|
No se permite la reproducción sin autorización expresa.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">8. Limitación de Responsabilidad</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Anchor:23 no se hace responsable por:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Daños personales derivados de negligencia del cliente</li>
|
||||||
|
<li>Pérdida de objetos personales</li>
|
||||||
|
<li>Reacciones alérgicas a productos (previo aviso de alergias)</li>
|
||||||
|
<li>Interrupciones de servicio por fuerza mayor</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">9. Modificaciones</h2>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Nos reservamos el derecho de modificar estos términos y condiciones en
|
||||||
|
cualquier momento. Los cambios entrarán en vigor al publicarse en este
|
||||||
|
sitio.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">10. Jurisdicción</h2>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Estos términos y condiciones se rigen por las leyes de México.
|
||||||
|
Cualquier disputa será resuelta en los tribunales de Saltillo,
|
||||||
|
Coahuila, México.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">11. Contacto</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Para preguntas sobre estos términos y condiciones, contáctenos:
|
||||||
|
</p>
|
||||||
|
<div className="space-y-2 text-gray-700">
|
||||||
|
<p>Email: legal@anchor23.mx</p>
|
||||||
|
<p>Teléfono: +52 844 123 4567</p>
|
||||||
|
<p>Dirección: Saltillo, Coahuila, México</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
290
app/membresias/page.tsx
Normal file
290
app/membresias/page.tsx
Normal file
@@ -0,0 +1,290 @@
|
|||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { Crown, Star, Award, Diamond } from 'lucide-react'
|
||||||
|
|
||||||
|
export default function MembresiasPage() {
|
||||||
|
const [selectedTier, setSelectedTier] = useState<string | null>(null)
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
nombre: '',
|
||||||
|
email: '',
|
||||||
|
telefono: '',
|
||||||
|
mensaje: ''
|
||||||
|
})
|
||||||
|
const [submitted, setSubmitted] = useState(false)
|
||||||
|
|
||||||
|
const tiers = [
|
||||||
|
{
|
||||||
|
id: 'gold',
|
||||||
|
name: 'Gold Tier',
|
||||||
|
icon: Star,
|
||||||
|
description: 'Acceso prioritario y experiencias exclusivas.',
|
||||||
|
price: '$2,500 MXN',
|
||||||
|
period: '/mes',
|
||||||
|
benefits: [
|
||||||
|
'Reserva prioritaria',
|
||||||
|
'15% descuento en servicios',
|
||||||
|
'Acceso anticipado a eventos',
|
||||||
|
'Consultas de belleza mensuales',
|
||||||
|
'Producto de cortesía mensual'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'black',
|
||||||
|
name: 'Black Tier',
|
||||||
|
icon: Award,
|
||||||
|
description: 'Privilegios premium y atención personalizada.',
|
||||||
|
price: '$5,000 MXN',
|
||||||
|
period: '/mes',
|
||||||
|
benefits: [
|
||||||
|
'Reserva prioritaria + sin espera',
|
||||||
|
'25% descuento en servicios',
|
||||||
|
'Acceso VIP a eventos exclusivos',
|
||||||
|
'2 tratamientos spa complementarios/mes',
|
||||||
|
'Set de productos premium trimestral'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'vip',
|
||||||
|
name: 'VIP Tier',
|
||||||
|
icon: Crown,
|
||||||
|
description: 'La máxima expresión de exclusividad.',
|
||||||
|
price: '$10,000 MXN',
|
||||||
|
period: '/mes',
|
||||||
|
featured: true,
|
||||||
|
benefits: [
|
||||||
|
'Acceso inmediato - sin restricciones',
|
||||||
|
'35% descuento en servicios + productos',
|
||||||
|
'Experiencias personalizadas ilimitadas',
|
||||||
|
'Estilista asignado exclusivamente',
|
||||||
|
'Evento privado anual para ti + 5 invitados',
|
||||||
|
'Acceso a instalaciones fuera de horario'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setSubmitted(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||||
|
setFormData({
|
||||||
|
...formData,
|
||||||
|
[e.target.name]: e.target.value
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleApply = (tierId: string) => {
|
||||||
|
setSelectedTier(tierId)
|
||||||
|
document.getElementById('application-form')?.scrollIntoView({ behavior: 'smooth' })
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="section">
|
||||||
|
<div className="section-header">
|
||||||
|
<h1 className="section-title">Membresías Exclusivas</h1>
|
||||||
|
<p className="section-subtitle">
|
||||||
|
Acceso prioritario, privilegios únicos y experiencias personalizadas.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6 mb-24">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<Diamond className="w-16 h-16 mx-auto mb-6 text-gray-900" />
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
Experiencias a Medida
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Nuestras membresías están diseñadas para clientes que valoran la exclusividad,
|
||||||
|
la atención personalizada y el acceso prioritario.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||||
|
{tiers.map((tier) => {
|
||||||
|
const Icon = tier.icon
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={tier.id}
|
||||||
|
className={`relative p-8 rounded-2xl shadow-lg border-2 transition-all ${
|
||||||
|
tier.featured
|
||||||
|
? 'bg-gray-900 border-gray-900 text-white transform scale-105'
|
||||||
|
: 'bg-white border-gray-100 hover:border-gray-900'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{tier.featured && (
|
||||||
|
<div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
|
||||||
|
<span className="bg-gray-900 text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||||
|
Más Popular
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className={`flex items-center justify-center mb-6 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
|
||||||
|
<Icon className="w-12 h-12" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h3 className={`text-2xl font-bold mb-2 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
|
||||||
|
{tier.name}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<p className={`mb-6 ${tier.featured ? 'text-gray-300' : 'text-gray-600'}`}>
|
||||||
|
{tier.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="mb-8">
|
||||||
|
<div className={`text-4xl font-bold mb-1 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
|
||||||
|
{tier.price}
|
||||||
|
</div>
|
||||||
|
<div className={`text-sm ${tier.featured ? 'text-gray-300' : 'text-gray-600'}`}>
|
||||||
|
{tier.period}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul className="space-y-3 mb-8">
|
||||||
|
{tier.benefits.map((benefit, index) => (
|
||||||
|
<li key={index} className="flex items-start">
|
||||||
|
<span className={`mr-2 mt-1 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
|
||||||
|
✓
|
||||||
|
</span>
|
||||||
|
<span className={tier.featured ? 'text-gray-200' : 'text-gray-700'}>
|
||||||
|
{benefit}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => handleApply(tier.id)}
|
||||||
|
className={`w-full py-3 rounded-lg font-semibold transition-all ${
|
||||||
|
tier.featured
|
||||||
|
? 'bg-white text-gray-900 hover:bg-gray-100'
|
||||||
|
: 'bg-gray-900 text-white hover:bg-gray-800'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Solicitar {tier.name}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="application-form" className="max-w-2xl mx-auto">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||||
|
Solicitud de Membresía
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{submitted ? (
|
||||||
|
<div className="p-8 bg-green-50 border border-green-200 rounded-xl">
|
||||||
|
<Award className="w-12 h-12 text-green-900 mb-4" />
|
||||||
|
<h3 className="text-xl font-semibold text-green-900 mb-2">
|
||||||
|
Solicitud Recibida
|
||||||
|
</h3>
|
||||||
|
<p className="text-green-800">
|
||||||
|
Gracias por tu interés. Nuestro equipo revisará tu solicitud y te
|
||||||
|
contactará pronto para completar el proceso.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6 p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
|
||||||
|
{selectedTier && (
|
||||||
|
<div className="p-4 bg-gray-50 rounded-lg border border-gray-200 mb-6">
|
||||||
|
<span className="font-semibold text-gray-900">
|
||||||
|
Membresía Seleccionada: {tiers.find(t => t.id === selectedTier)?.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="nombre" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Nombre Completo
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="nombre"
|
||||||
|
name="nombre"
|
||||||
|
value={formData.nombre}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="Tu nombre completo"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Email
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
id="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="tu@email.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="telefono" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Teléfono
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="tel"
|
||||||
|
id="telefono"
|
||||||
|
name="telefono"
|
||||||
|
value={formData.telefono}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||||
|
placeholder="+52 844 123 4567"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label htmlFor="mensaje" className="block text-sm font-medium text-gray-700 mb-2">
|
||||||
|
Mensaje Adicional (Opcional)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
id="mensaje"
|
||||||
|
name="mensaje"
|
||||||
|
value={formData.mensaje}
|
||||||
|
onChange={handleChange}
|
||||||
|
rows={4}
|
||||||
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
|
||||||
|
placeholder="¿Tienes alguna pregunta específica?"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="btn-primary w-full">
|
||||||
|
Enviar Solicitud
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-3xl p-12 max-w-4xl mx-auto">
|
||||||
|
<h3 className="text-2xl font-bold text-white mb-6 text-center">
|
||||||
|
¿Tienes Preguntas?
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-300 text-center mb-8 max-w-2xl mx-auto">
|
||||||
|
Nuestro equipo de atención a miembros está disponible para resolver tus dudas
|
||||||
|
y ayudarte a encontrar la membresía perfecta para ti.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col md:flex-row items-center justify-center gap-6">
|
||||||
|
<a href="mailto:membresias@anchor23.mx" className="text-white hover:text-gray-200">
|
||||||
|
membresias@anchor23.mx
|
||||||
|
</a>
|
||||||
|
<span className="text-gray-600">|</span>
|
||||||
|
<a href="tel:+528441234567" className="text-white hover:text-gray-200">
|
||||||
|
+52 844 123 4567
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
95
app/page.tsx
Normal file
95
app/page.tsx
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
export default function HomePage() {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<section className="hero">
|
||||||
|
<div className="hero-content">
|
||||||
|
<div className="logo-mark">
|
||||||
|
<svg viewBox="0 0 100 100" className="w-24 h-24 mx-auto">
|
||||||
|
<circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="3" />
|
||||||
|
<path d="M 50 20 L 50 80 M 20 50 L 80 50" stroke="currentColor" strokeWidth="3" />
|
||||||
|
<circle cx="50" cy="50" r="10" fill="currentColor" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h1>ANCHOR:23</h1>
|
||||||
|
<h2>Belleza Anclada en Exclusividad</h2>
|
||||||
|
<p>Un estándar exclusivo de lujo y precisión.</p>
|
||||||
|
|
||||||
|
<div className="hero-actions">
|
||||||
|
<a href="/servicios" className="btn-secondary">Ver servicios</a>
|
||||||
|
<a href="https://booking.anchor23.mx" className="btn-primary">Solicitar cita</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="hero-image">
|
||||||
|
<div className="w-full h-96 bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
|
||||||
|
<span className="text-gray-500 text-lg">Imagen Hero</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="foundation">
|
||||||
|
<article>
|
||||||
|
<h3>Fundamento</h3>
|
||||||
|
<h4>Nada sólido nace del caos</h4>
|
||||||
|
<p>
|
||||||
|
Anchor:23 nace de la unión de dos creativos que creen en el lujo
|
||||||
|
como estándar, no como promesa.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<aside className="foundation-image">
|
||||||
|
<div className="w-full h-full bg-gradient-to-br from-gray-200 to-gray-300 flex items-center justify-center">
|
||||||
|
<span className="text-gray-500 text-lg">Imagen Fundamento</span>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="services-preview">
|
||||||
|
<h3>Servicios Exclusivos</h3>
|
||||||
|
|
||||||
|
<div className="service-cards">
|
||||||
|
<article className="service-card">
|
||||||
|
<h4>Spa de Alta Gama</h4>
|
||||||
|
<p>Experiencias diseñadas para el rejuvenecimiento.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="service-card">
|
||||||
|
<h4>Arte y Manicure de Precisión</h4>
|
||||||
|
<p>Detalle, exactitud y perfección.</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="service-card">
|
||||||
|
<h4>Peinado y Maquillaje de Lujo</h4>
|
||||||
|
<p>Transformaciones discretas y sofisticadas.</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<a href="/servicios" className="btn-secondary">Ver todos los servicios</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="testimonials">
|
||||||
|
<h3>Testimonios</h3>
|
||||||
|
|
||||||
|
<div className="testimonial-grid">
|
||||||
|
<article className="testimonial">
|
||||||
|
<span className="stars">★★★★★</span>
|
||||||
|
<p>La atención al detalle define el lujo real.</p>
|
||||||
|
<cite>Gabriela M.</cite>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<article className="testimonial">
|
||||||
|
<span className="stars">★★★★★</span>
|
||||||
|
<p>Exclusivo sin ser pretencioso.</p>
|
||||||
|
<cite>Lorena T.</cite>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-center">
|
||||||
|
<a href="/membresias" className="btn-primary">Solicitar Membresía</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
122
app/privacy-policy/page.tsx
Normal file
122
app/privacy-policy/page.tsx
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
export default function PrivacyPolicyPage() {
|
||||||
|
return (
|
||||||
|
<div className="section">
|
||||||
|
<div className="max-w-4xl mx-auto px-6">
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900 mb-8">Política de Privacidad</h1>
|
||||||
|
|
||||||
|
<div className="prose prose-lg max-w-none">
|
||||||
|
<p className="text-gray-600 mb-8">
|
||||||
|
Última actualización: {new Date().toLocaleDateString('es-MX', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">1. Información que Recopilamos</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Anchor:23 recopila información personal de nuestros clientes para proporcionar
|
||||||
|
servicios de belleza exclusiva y mejorar la experiencia general.
|
||||||
|
</p>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-3">Información Personal</h3>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Nombre completo</li>
|
||||||
|
<li>Correo electrónico</li>
|
||||||
|
<li>Número de teléfono</li>
|
||||||
|
<li>Historial de citas y preferencias</li>
|
||||||
|
<li>Información de pago (procesada de forma segura)</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">2. Uso de la Información</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Utilizamos la información recopilada para los siguientes propósitos:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Programar y confirmar citas</li>
|
||||||
|
<li>Comunicar actualizaciones y recordatorios</li>
|
||||||
|
<li>Personalizar experiencias de servicio</li>
|
||||||
|
<li>Procesar pagos de manera segura</li>
|
||||||
|
<li>Mejorar nuestros servicios y productos</li>
|
||||||
|
<li>Cumplir con obligaciones legales</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">3. Compartir de Información</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
No vendemos, intercambiamos ni alquilamos información personal a terceros.
|
||||||
|
Solo compartimos información en las siguientes circunstancias:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Con proveedores de servicios necesarios (procesadores de pago)</li>
|
||||||
|
<li>Para cumplir con obligaciones legales</li>
|
||||||
|
<li>Para proteger nuestros derechos y propiedad</li>
|
||||||
|
<li>Con consentimiento explícito del cliente</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">4. Seguridad de Datos</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Implementamos medidas de seguridad robustas para proteger la información personal:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Encriptación SSL para todas las transacciones</li>
|
||||||
|
<li>Sistemas de autenticación seguros</li>
|
||||||
|
<li>Acceso restringido a información personal</li>
|
||||||
|
<li>Auditorías periódicas de seguridad</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">5. Derechos del Usuario</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Los clientes tienen los siguientes derechos sobre su información personal:
|
||||||
|
</p>
|
||||||
|
<ul className="list-disc pl-6 text-gray-600 space-y-2">
|
||||||
|
<li>Acceder a la información que tenemos sobre ellos</li>
|
||||||
|
<li>Solicitar corrección de información inexacta</li>
|
||||||
|
<li>Solicitar eliminación de su información</li>
|
||||||
|
<li>Oponerse al procesamiento de su información</li>
|
||||||
|
<li>Retirar consentimiento en cualquier momento</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">6. Cookies y Tecnologías Similares</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Utilizamos cookies para mejorar la experiencia del usuario, analizar el
|
||||||
|
tráfico del sitio y personalizar el contenido. Los usuarios pueden configurar
|
||||||
|
su navegador para rechazar cookies, aunque esto puede afectar la funcionalidad
|
||||||
|
del sitio.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">7. Cambios en la Política</h2>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
Nos reservamos el derecho de modificar esta política de privacidad en cualquier momento.
|
||||||
|
Los cambios serán publicados en esta página con la fecha de actualización.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="mb-12">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">8. Contacto</h2>
|
||||||
|
<p className="text-gray-600 mb-4">
|
||||||
|
Para preguntas sobre esta política de privacidad o para ejercer sus derechos
|
||||||
|
como usuario, contáctenos:
|
||||||
|
</p>
|
||||||
|
<div className="space-y-2 text-gray-700">
|
||||||
|
<p>Email: privacidad@anchor23.mx</p>
|
||||||
|
<p>Teléfono: +52 844 123 4567</p>
|
||||||
|
<p>Dirección: Saltillo, Coahuila, México</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
65
app/servicios/page.tsx
Normal file
65
app/servicios/page.tsx
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
export default function ServiciosPage() {
|
||||||
|
const services = [
|
||||||
|
{
|
||||||
|
category: 'Spa de Alta Gama',
|
||||||
|
description: 'Experiencias diseñadas para el rejuvenecimiento.',
|
||||||
|
items: ['Tratamientos Faciales', 'Masajes Terapéuticos', 'Hidroterapia']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'Arte y Manicure de Precisión',
|
||||||
|
description: 'Detalle, exactitud y perfección.',
|
||||||
|
items: ['Manicure de Precisión', 'Pedicure Spa', 'Arte en Uñas']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'Peinado y Maquillaje de Lujo',
|
||||||
|
description: 'Transformaciones discretas y sofisticadas.',
|
||||||
|
items: ['Corte y Estilismo', 'Color Premium', 'Maquillaje Profesional']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'Cuidado Corporal',
|
||||||
|
description: 'Ritual de bienestar integral.',
|
||||||
|
items: ['Exfoliación Profunda', 'Envolturas Corporales', 'Tratamientos Reductores']
|
||||||
|
},
|
||||||
|
{
|
||||||
|
category: 'Membresías Exclusivas',
|
||||||
|
description: 'Acceso prioritario y experiencias personalizadas.',
|
||||||
|
items: ['Gold Tier', 'Black Tier', 'VIP Tier']
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="section">
|
||||||
|
<div className="section-header">
|
||||||
|
<h1 className="section-title">Nuestros Servicios</h1>
|
||||||
|
<p className="section-subtitle">
|
||||||
|
Experiencias diseñadas con precisión y elegancia para clientes que valoran la exclusividad.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="grid md:grid-cols-2 gap-8">
|
||||||
|
{services.map((service, index) => (
|
||||||
|
<article key={index} className="p-8 bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow border border-gray-100">
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-900 mb-3">{service.category}</h2>
|
||||||
|
<p className="text-gray-600 mb-4">{service.description}</p>
|
||||||
|
<ul className="space-y-2">
|
||||||
|
{service.items.map((item, idx) => (
|
||||||
|
<li key={idx} className="flex items-center text-gray-700">
|
||||||
|
<span className="w-1.5 h-1.5 bg-gray-900 rounded-full mr-2" />
|
||||||
|
{item}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12 text-center">
|
||||||
|
<a href="https://booking.anchor23.mx" className="btn-primary">
|
||||||
|
Reservar Cita
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user