mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 13:24:27 +00:00
feat: Add Formbricks integration, update forms with webhooks, enhance navigation
- Integrate @formbricks/js for future surveys (FormbricksProvider) - Add WebhookForm component for unified form submission (contact/franchise/membership) - Update contact form with reason dropdown field - Update franchise form with new fields: estado, ciudad, socios checkbox - Update franchise benefits: manuals, training platform, RH system, investment $100k - Add Contacto link to desktop/mobile nav and footer - Update membership form to use WebhookForm with membership_id select - Update hero buttons to use #3E352E color consistently - Refactor contact/franchise pages to use new hero layout and components - Add webhook utility (lib/webhook.ts) for parallel submission to test+prod - Add email receipt hooks to booking endpoints - Update globals.css with new color variables and navigation styles - Docker configuration for deployment
This commit is contained in:
Marco Gallegos
@@ -224,6 +224,19 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
// Send receipt email
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
} catch (emailError) {
|
||||
console.error('Failed to send receipt email:', emailError)
|
||||
// Don't fail the booking if email fails
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
booking
|
||||
|
||||
@@ -187,6 +187,18 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
// Send receipt email
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
} catch (emailError) {
|
||||
console.error('Failed to send receipt email:', emailError)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
booking,
|
||||
|
||||
@@ -149,6 +149,18 @@ export async function POST(request: NextRequest) {
|
||||
)
|
||||
}
|
||||
|
||||
// Send receipt email
|
||||
try {
|
||||
await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/receipts/${booking.id}/email`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
}
|
||||
})
|
||||
} catch (emailError) {
|
||||
console.error('Failed to send receipt email:', emailError)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
booking,
|
||||
|
||||
132
app/api/receipts/[bookingId]/email/route.ts
Normal file
132
app/api/receipts/[bookingId]/email/route.ts
Normal file
@@ -0,0 +1,132 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/admin'
|
||||
import jsPDF from 'jspdf'
|
||||
import { format } from 'date-fns'
|
||||
import { es } from 'date-fns/locale'
|
||||
import { Resend } from 'resend'
|
||||
|
||||
const resend = new Resend(process.env.RESEND_API_KEY!)
|
||||
|
||||
/** @description Send receipt email for booking */
|
||||
export async function POST(
|
||||
request: NextRequest,
|
||||
{ params }: { params: { bookingId: string } }
|
||||
) {
|
||||
try {
|
||||
// Get booking data
|
||||
const { data: booking, error: bookingError } = await supabaseAdmin
|
||||
.from('bookings')
|
||||
.select(`
|
||||
*,
|
||||
customer:customers(*),
|
||||
service:services(*),
|
||||
staff:staff(*),
|
||||
location:locations(*)
|
||||
`)
|
||||
.eq('id', params.bookingId)
|
||||
.single()
|
||||
|
||||
if (bookingError || !booking) {
|
||||
return NextResponse.json({ error: 'Booking not found' }, { status: 404 })
|
||||
}
|
||||
|
||||
// Generate PDF
|
||||
const doc = new jsPDF()
|
||||
doc.setFont('helvetica')
|
||||
|
||||
// Header
|
||||
doc.setFontSize(20)
|
||||
doc.setTextColor(139, 69, 19)
|
||||
doc.text('ANCHOR:23', 20, 30)
|
||||
|
||||
doc.setFontSize(14)
|
||||
doc.setTextColor(0, 0, 0)
|
||||
doc.text('Recibo de Reserva', 20, 45)
|
||||
|
||||
// Details
|
||||
doc.setFontSize(12)
|
||||
let y = 65
|
||||
doc.text(`Número de Reserva: ${booking.id.slice(-8).toUpperCase()}`, 20, y)
|
||||
y += 10
|
||||
doc.text(`Cliente: ${booking.customer.first_name} ${booking.customer.last_name}`, 20, y)
|
||||
y += 10
|
||||
doc.text(`Servicio: ${booking.service.name}`, 20, y)
|
||||
y += 10
|
||||
doc.text(`Fecha y Hora: ${format(new Date(booking.date), 'PPP p', { locale: es })}`, 20, y)
|
||||
y += 10
|
||||
doc.text(`Total: $${booking.service.price} MXN`, 20, y)
|
||||
|
||||
// Footer
|
||||
y = 250
|
||||
doc.setFontSize(10)
|
||||
doc.setTextColor(128, 128, 128)
|
||||
doc.text('ANCHOR:23 - Belleza anclada en exclusividad', 20, y)
|
||||
|
||||
const pdfBuffer = Buffer.from(doc.output('arraybuffer'))
|
||||
|
||||
// Send email
|
||||
const emailHtml = `
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Recibo de Reserva - ANCHOR:23</title>
|
||||
<style>
|
||||
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
|
||||
.container { max-width: 600px; margin: 0 auto; padding: 20px; }
|
||||
.header { text-align: center; margin-bottom: 30px; }
|
||||
.logo { color: #8B4513; font-size: 24px; font-weight: bold; }
|
||||
.details { background: #f9f9f9; padding: 20px; border-radius: 8px; margin: 20px 0; }
|
||||
.footer { text-align: center; margin-top: 30px; font-size: 12px; color: #666; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<div class="logo">ANCHOR:23</div>
|
||||
<h1>Confirmación de Reserva</h1>
|
||||
</div>
|
||||
|
||||
<p>Hola ${booking.customer.first_name},</p>
|
||||
<p>Tu reserva ha sido confirmada. Adjunto el recibo.</p>
|
||||
|
||||
<div class="details">
|
||||
<p><strong>Servicio:</strong> ${booking.service.name}</p>
|
||||
<p><strong>Fecha:</strong> ${format(new Date(booking.date), 'PPP', { locale: es })}</p>
|
||||
<p><strong>Hora:</strong> ${format(new Date(booking.date), 'p', { locale: es })}</p>
|
||||
<p><strong>Total:</strong> $${booking.service.price} MXN</p>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<p>ANCHOR:23 - Saltillo, Coahuila, México</p>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
|
||||
const { data: emailResult, error: emailError } = await resend.emails.send({
|
||||
from: 'ANCHOR:23 <noreply@anchor23.mx>',
|
||||
to: booking.customer.email,
|
||||
subject: 'Confirmación de Reserva - ANCHOR:23',
|
||||
html: emailHtml,
|
||||
attachments: [
|
||||
{
|
||||
filename: `recibo-${booking.id.slice(-8)}.pdf`,
|
||||
content: pdfBuffer
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
if (emailError) {
|
||||
console.error('Email error:', emailError)
|
||||
return NextResponse.json({ error: 'Failed to send email' }, { status: 500 })
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true, emailId: emailResult?.id })
|
||||
|
||||
} catch (error) {
|
||||
console.error('Receipt email error:', error)
|
||||
return NextResponse.json({ error: 'Failed to send receipt email' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
104
app/api/receipts/[bookingId]/route.ts
Normal file
104
app/api/receipts/[bookingId]/route.ts
Normal file
@@ -0,0 +1,104 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/admin'
|
||||
import jsPDF from 'jspdf'
|
||||
import { format } from 'date-fns'
|
||||
import { es } from 'date-fns/locale'
|
||||
|
||||
/** @description Generate PDF receipt for booking */
|
||||
export async function GET(
|
||||
request: NextRequest,
|
||||
{ params }: { params: { bookingId: string } }
|
||||
) {
|
||||
try {
|
||||
const supabase = supabaseAdmin
|
||||
|
||||
// Get booking with related data
|
||||
const { data: booking, error: bookingError } = await supabase
|
||||
.from('bookings')
|
||||
.select(`
|
||||
*,
|
||||
customer:customers(*),
|
||||
service:services(*),
|
||||
staff:staff(*),
|
||||
location:locations(*)
|
||||
`)
|
||||
.eq('id', params.bookingId)
|
||||
.single()
|
||||
|
||||
if (bookingError || !booking) {
|
||||
return NextResponse.json({ error: 'Booking not found' }, { status: 404 })
|
||||
}
|
||||
|
||||
// Create PDF
|
||||
const doc = new jsPDF()
|
||||
|
||||
// Set font
|
||||
doc.setFont('helvetica')
|
||||
|
||||
// Header
|
||||
doc.setFontSize(20)
|
||||
doc.setTextColor(139, 69, 19) // Saddle brown
|
||||
doc.text('ANCHOR:23', 20, 30)
|
||||
|
||||
doc.setFontSize(14)
|
||||
doc.setTextColor(0, 0, 0)
|
||||
doc.text('Recibo de Reserva', 20, 45)
|
||||
|
||||
// Booking details
|
||||
doc.setFontSize(12)
|
||||
let y = 65
|
||||
|
||||
doc.text(`Número de Reserva: ${booking.id.slice(-8).toUpperCase()}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Fecha de Reserva: ${format(new Date(booking.created_at), 'PPP', { locale: es })}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Cliente: ${booking.customer.first_name} ${booking.customer.last_name}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Servicio: ${booking.service.name}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Profesional: ${booking.staff.first_name} ${booking.staff.last_name}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Ubicación: ${booking.location.name}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Fecha y Hora: ${format(new Date(booking.date), 'PPP p', { locale: es })}`, 20, y)
|
||||
y += 10
|
||||
|
||||
doc.text(`Duración: ${booking.service.duration} minutos`, 20, y)
|
||||
y += 10
|
||||
|
||||
// Price
|
||||
y += 10
|
||||
doc.setFontSize(14)
|
||||
doc.text(`Total: $${booking.service.price} MXN`, 20, y)
|
||||
|
||||
// Footer
|
||||
y = 250
|
||||
doc.setFontSize(10)
|
||||
doc.setTextColor(128, 128, 128)
|
||||
doc.text('ANCHOR:23 - Belleza anclada en exclusividad', 20, y)
|
||||
y += 5
|
||||
doc.text('Saltillo, Coahuila, México | contacto@anchor23.mx', 20, y)
|
||||
y += 5
|
||||
doc.text('+52 844 123 4567', 20, y)
|
||||
|
||||
// Generate buffer
|
||||
const pdfBuffer = doc.output('arraybuffer')
|
||||
|
||||
return new NextResponse(pdfBuffer, {
|
||||
headers: {
|
||||
'Content-Type': 'application/pdf',
|
||||
'Content-Disposition': `attachment; filename=receipt-${booking.id.slice(-8)}.pdf`
|
||||
}
|
||||
})
|
||||
|
||||
} catch (error) {
|
||||
console.error('Receipt generation error:', error)
|
||||
return NextResponse.json({ error: 'Failed to generate receipt' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -209,7 +209,7 @@ export default function MisCitasPage() {
|
||||
</div>
|
||||
{booking.notes && (
|
||||
<div className="mt-3 p-3 rounded-lg" style={{ background: 'var(--bone-white)', color: 'var(--charcoal-brown)' }}>
|
||||
<p className="text-sm italic">"{booking.notes}"</p>
|
||||
<p className="text-sm italic">"{booking.notes}"</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -32,6 +32,13 @@ export default function PerfilPage() {
|
||||
}
|
||||
}, [user, authLoading, router])
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading && user) {
|
||||
loadCustomerProfile()
|
||||
loadCustomerBookings()
|
||||
}
|
||||
}, [user, authLoading])
|
||||
|
||||
if (authLoading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
|
||||
@@ -46,11 +53,6 @@ export default function PerfilPage() {
|
||||
return null
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadCustomerProfile()
|
||||
loadCustomerBookings()
|
||||
}, [])
|
||||
|
||||
const loadCustomerProfile = async () => {
|
||||
try {
|
||||
// En una implementación real, esto vendría de autenticación
|
||||
|
||||
@@ -1,176 +1,135 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
import { MapPin, Phone, Mail, Clock } from 'lucide-react'
|
||||
import { WebhookForm } from '@/components/webhook-form'
|
||||
|
||||
/** @description Contact page component with contact information and contact form for inquiries. */
|
||||
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>
|
||||
)}
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<AnimatedLogo />
|
||||
<h1>Contacto</h1>
|
||||
<h2>Anchor:23</h2>
|
||||
<RollingPhrases />
|
||||
<div className="hero-actions">
|
||||
<a href="#informacion" className="btn-secondary">Información</a>
|
||||
<a href="#mensaje" className="btn-primary">Enviar Mensaje</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-image">
|
||||
<div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Contacto Hero</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="foundation" id="informacion">
|
||||
<article>
|
||||
<h3>Información</h3>
|
||||
<h4>Estamos aquí para ti</h4>
|
||||
<p>
|
||||
Anchor:23 es más que un salón, es un espacio diseñado para tu transformación personal.
|
||||
Contáctanos para cualquier consulta o reserva.
|
||||
</p>
|
||||
</article>
|
||||
<aside className="foundation-image">
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Contacto</span>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section className="services-preview">
|
||||
<h3>Información de Contacto</h3>
|
||||
<div className="service-cards">
|
||||
<article className="service-card">
|
||||
<h4>Ubicación</h4>
|
||||
<p>Saltillo, Coahuila, México</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Teléfono</h4>
|
||||
<p>+52 844 123 4567</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Email</h4>
|
||||
<p>contacto@anchor23.mx</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Horario</h4>
|
||||
<p>Lunes - Sábado: 10:00 - 21:00</p>
|
||||
</article>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<a href="https://booking.anchor23.mx" className="btn-primary">
|
||||
Reservar Cita
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="testimonials" id="mensaje">
|
||||
<h3>Envíanos un Mensaje</h3>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<WebhookForm
|
||||
formType="contact"
|
||||
title="Contacto"
|
||||
successMessage="Mensaje Enviado"
|
||||
successSubtext="Gracias por contactarnos. Te responderemos lo antes posible."
|
||||
submitButtonText="Enviar Mensaje"
|
||||
fields={[
|
||||
{
|
||||
name: 'nombre',
|
||||
label: 'Nombre Completo',
|
||||
type: 'text',
|
||||
required: true,
|
||||
placeholder: 'Tu nombre'
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
required: true,
|
||||
placeholder: 'tu@email.com'
|
||||
},
|
||||
{
|
||||
name: 'telefono',
|
||||
label: 'Teléfono',
|
||||
type: 'tel',
|
||||
required: false,
|
||||
placeholder: '+52 844 123 4567'
|
||||
},
|
||||
{
|
||||
name: 'motivo',
|
||||
label: 'Motivo de Contacto',
|
||||
type: 'select',
|
||||
required: true,
|
||||
placeholder: 'Selecciona un motivo',
|
||||
options: [
|
||||
{ value: 'cita', label: 'Agendar Cita' },
|
||||
{ value: 'membresia', label: 'Información Membresías' },
|
||||
{ value: 'franquicia', label: 'Interés en Franquicias' },
|
||||
{ value: 'servicios', label: 'Pregunta sobre Servicios' },
|
||||
{ value: 'pago', label: 'Problema con Pago' },
|
||||
{ value: 'resena', label: 'Enviar Reseña' },
|
||||
{ value: 'otro', label: 'Otro' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'mensaje',
|
||||
label: 'Mensaje',
|
||||
type: 'textarea',
|
||||
required: true,
|
||||
rows: 6,
|
||||
placeholder: '¿Cómo podemos ayudarte?'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,31 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Building2, Map, CheckCircle, Mail, Phone } from 'lucide-react'
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
import { Building2, Map, Mail, Phone, Users, Crown } from 'lucide-react'
|
||||
import { WebhookForm } from '@/components/webhook-form'
|
||||
|
||||
/** @description Franchise information and application page component for potential franchise partners. */
|
||||
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',
|
||||
@@ -33,224 +14,154 @@ export default function FranchisesPage() {
|
||||
'Sistema operativo completo (AnchorOS)',
|
||||
'Capacitación en estándares de lujo',
|
||||
'Membresía de clientes como fuente recurrente',
|
||||
'Soporte continuo y actualizaciones'
|
||||
'Soporte continuo y actualizaciones',
|
||||
'Manuales operativos completos',
|
||||
'Plataforma de entrenamientos digital',
|
||||
'Sistema de RH integrado en AnchorOS'
|
||||
]
|
||||
|
||||
const requirements = [
|
||||
'Compromiso inquebrantable con la calidad',
|
||||
'Experiencia en industria de belleza',
|
||||
'Inversión mínima: $500,000 USD',
|
||||
'Inversión mínima: $100,000 USD',
|
||||
'Ubicación premium en ciudad de interés',
|
||||
'Capacidad de contratar personal calificado'
|
||||
'Capacidad de contratar personal calificado',
|
||||
'Recomendable: Socio con experiencia en servicios de belleza'
|
||||
]
|
||||
|
||||
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>
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<AnimatedLogo />
|
||||
<h1>Franquicias</h1>
|
||||
<h2>Anchor:23</h2>
|
||||
<p className="hero-text">
|
||||
Una oportunidad exclusiva para llevar el estándar Anchor:23 a tu ciudad.
|
||||
</p>
|
||||
<div className="hero-actions">
|
||||
<a href="#modelo" className="btn-secondary">Nuestro Modelo</a>
|
||||
<a href="#solicitud" className="btn-primary">Solicitar Información</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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 className="hero-image">
|
||||
<div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-gray-50 to-amber-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Hero Franquicias</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Solicitud de Información
|
||||
</h2>
|
||||
<section className="foundation" id="modelo">
|
||||
<article>
|
||||
<h3>Modelo de Negocio</h3>
|
||||
<h4>Una sucursal por ciudad</h4>
|
||||
<p>
|
||||
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>
|
||||
</article>
|
||||
|
||||
<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>
|
||||
)}
|
||||
<aside className="foundation-image">
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Modelo Franquicias</span>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</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">
|
||||
<section className="services-preview">
|
||||
<h3>Beneficios y Requisitos</h3>
|
||||
<div className="service-cards">
|
||||
<article className="service-card">
|
||||
<h4>Beneficios</h4>
|
||||
<ul className="list-disc list-inside space-y-2">
|
||||
{benefits.map((benefit, index) => (
|
||||
<li key={index} className="text-gray-700">{benefit}</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article className="service-card">
|
||||
<h4>Requisitos</h4>
|
||||
<ul className="list-disc list-inside space-y-2">
|
||||
{requirements.map((req, index) => (
|
||||
<li key={index} className="text-gray-700">{req}</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<a href="#solicitud" className="btn-primary">Solicitar Información</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="testimonials" id="solicitud">
|
||||
<h3>Solicitud de Información</h3>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<WebhookForm
|
||||
formType="franchise"
|
||||
title="Franquicias"
|
||||
successMessage="Solicitud Enviada"
|
||||
successSubtext="Gracias por tu interés. Revisaremos tu perfil y te contactaremos pronto para discutir las oportunidades disponibles."
|
||||
submitButtonText="Enviar Solicitud"
|
||||
fields={[
|
||||
{
|
||||
name: 'nombre',
|
||||
label: 'Nombre Completo',
|
||||
type: 'text',
|
||||
required: true,
|
||||
placeholder: 'Tu nombre'
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
required: true,
|
||||
placeholder: 'tu@email.com'
|
||||
},
|
||||
{
|
||||
name: 'telefono',
|
||||
label: 'Teléfono',
|
||||
type: 'tel',
|
||||
required: true,
|
||||
placeholder: '+52 844 123 4567'
|
||||
},
|
||||
{
|
||||
name: 'ciudad',
|
||||
label: 'Ciudad de Interés',
|
||||
type: 'text',
|
||||
required: true,
|
||||
placeholder: 'Ej. Monterrey, Guadalajara'
|
||||
},
|
||||
{
|
||||
name: 'experiencia',
|
||||
label: 'Experiencia en el Sector',
|
||||
type: 'select',
|
||||
required: true,
|
||||
placeholder: 'Selecciona una opción',
|
||||
options: [
|
||||
{ value: 'sin-experiencia', label: 'Sin experiencia' },
|
||||
{ value: '1-3-anos', label: '1-3 años' },
|
||||
{ value: '3-5-anos', label: '3-5 años' },
|
||||
{ value: '5-10-anos', label: '5-10 años' },
|
||||
{ value: 'mas-10-anos', label: 'Más de 10 años' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'mensaje',
|
||||
label: 'Mensaje Adicional',
|
||||
type: 'textarea',
|
||||
required: false,
|
||||
rows: 4,
|
||||
placeholder: 'Cuéntanos sobre tu interés o preguntas'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-8">
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-12 text-white max-w-4xl mx-auto">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">
|
||||
¿Tienes Preguntas Directas?
|
||||
</h3>
|
||||
@@ -268,8 +179,8 @@ export default function FranchisesPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
440
app/globals.css
440
app/globals.css
@@ -4,18 +4,18 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--bone-white: #F6F1EC;
|
||||
--soft-cream: #EFE7DE;
|
||||
--mocha-taupe: #B8A89A;
|
||||
--deep-earth: #6F5E4F;
|
||||
--charcoal-brown: #3F362E;
|
||||
--bone-white: #f6f1ec;
|
||||
--soft-cream: #efe7de;
|
||||
--mocha-taupe: #b8a89a;
|
||||
--deep-earth: #6f5e4f;
|
||||
--charcoal-brown: #3f362e;
|
||||
|
||||
--ivory-cream: #FFFEF9;
|
||||
--sand-beige: #E8E4DD;
|
||||
--forest-green: #2E8B57;
|
||||
--clay-orange: #D2691E;
|
||||
--brick-red: #B22222;
|
||||
--slate-blue: #6A5ACD;
|
||||
--ivory-cream: #fffef9;
|
||||
--sand-beige: #e8e4dd;
|
||||
--forest-green: #2e8b57;
|
||||
--clay-orange: #d2691e;
|
||||
--brick-red: #b22222;
|
||||
--slate-blue: #6a5acd;
|
||||
|
||||
--forest-green-alpha: rgba(46, 139, 87, 0.1);
|
||||
--clay-orange-alpha: rgba(210, 105, 30, 0.1);
|
||||
@@ -24,38 +24,42 @@
|
||||
--charcoal-brown-alpha: rgba(63, 54, 46, 0.1);
|
||||
|
||||
/* Aperture - Square UI */
|
||||
--ui-primary: #006AFF;
|
||||
--ui-primary-hover: #005ED6;
|
||||
--ui-primary-light: #E6F0FF;
|
||||
--ui-primary: #006aff;
|
||||
--ui-primary-hover: #005ed6;
|
||||
--ui-primary-light: #e6f0ff;
|
||||
|
||||
--ui-bg: #F6F8FA;
|
||||
--ui-bg-card: #FFFFFF;
|
||||
--ui-bg-hover: #F3F4F6;
|
||||
--ui-bg: #f6f8fa;
|
||||
--ui-bg-card: #ffffff;
|
||||
--ui-bg-hover: #f3f4f6;
|
||||
|
||||
--ui-border: #E1E4E8;
|
||||
--ui-border-light: #F3F4F6;
|
||||
--ui-border: #e1e4e8;
|
||||
--ui-border-light: #f3f4f6;
|
||||
|
||||
--ui-text-primary: #24292E;
|
||||
--ui-text-primary: #24292e;
|
||||
--ui-text-secondary: #586069;
|
||||
--ui-text-tertiary: #8B949E;
|
||||
--ui-text-inverse: #FFFFFF;
|
||||
--ui-text-tertiary: #8b949e;
|
||||
--ui-text-inverse: #ffffff;
|
||||
|
||||
--ui-success: #28A745;
|
||||
--ui-success-light: #D4EDDA;
|
||||
--ui-success: #28a745;
|
||||
--ui-success-light: #d4edda;
|
||||
|
||||
--ui-warning: #DBAB09;
|
||||
--ui-warning-light: #FFF3CD;
|
||||
--ui-warning: #dbab09;
|
||||
--ui-warning-light: #fff3cd;
|
||||
|
||||
--ui-error: #D73A49;
|
||||
--ui-error-light: #F8D7DA;
|
||||
--ui-error: #d73a49;
|
||||
--ui-error-light: #f8d7da;
|
||||
|
||||
--ui-info: #0366D6;
|
||||
--ui-info-light: #CCE5FF;
|
||||
--ui-info: #0366d6;
|
||||
--ui-info-light: #cce5ff;
|
||||
|
||||
--ui-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.08);
|
||||
--ui-shadow-md: 0 4px 12px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.08);
|
||||
--ui-shadow-lg: 0 8px 24px rgba(0,0,0,0,16), 0 4px 6px rgba(0,0,0,0.08);
|
||||
--ui-shadow-xl: 0 20px 25px rgba(0,0,0,0.16), 0 4px 6px rgba(0,0,0,0.08);
|
||||
--ui-shadow-sm:
|
||||
0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.08);
|
||||
--ui-shadow-md:
|
||||
0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
--ui-shadow-lg:
|
||||
0 8px 24px rgba(0, 0, 0, 0, 16), 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
--ui-shadow-xl:
|
||||
0 20px 25px rgba(0, 0, 0, 0.16), 0 4px 6px rgba(0, 0, 0, 0.08);
|
||||
|
||||
--ui-radius-sm: 4px;
|
||||
--ui-radius-md: 6px;
|
||||
@@ -72,15 +76,15 @@
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* Font sizes */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
}
|
||||
|
||||
body {
|
||||
@@ -88,8 +92,13 @@
|
||||
background: var(--bone-white);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: "Playfair Display", serif;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -137,34 +146,157 @@
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
@apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
|
||||
background: var(--deep-earth);
|
||||
@apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded-lg transition-all duration-300 relative overflow-hidden;
|
||||
background: linear-gradient(135deg, #3E352E, var(--deep-earth));
|
||||
color: var(--bone-white);
|
||||
border-color: var(--deep-earth);
|
||||
border-color: #3E352E;
|
||||
box-shadow: 0 4px 15px rgba(139, 69, 19, 0.2);
|
||||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.btn-primary::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
opacity: 0.85;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(139, 69, 19, 0.3);
|
||||
background: linear-gradient(135deg, var(--deep-earth), #3E352E);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 10px rgba(139, 69, 19, 0.2);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded transition-all;
|
||||
background: var(--soft-cream);
|
||||
@apply inline-flex items-center justify-center px-8 py-3 border text-sm font-medium rounded-lg transition-all duration-300 relative overflow-hidden;
|
||||
background: linear-gradient(135deg, var(--bone-white), var(--soft-cream));
|
||||
color: var(--charcoal-brown);
|
||||
border-color: var(--mocha-taupe);
|
||||
box-shadow: 0 4px 15px rgba(139, 69, 19, 0.1);
|
||||
}
|
||||
|
||||
|
||||
.btn-secondary::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(139, 69, 19, 0.1),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.btn-secondary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--mocha-taupe);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(139, 69, 19, 0.2);
|
||||
background: linear-gradient(135deg, var(--soft-cream), var(--bone-white));
|
||||
border-color: #3E352E;
|
||||
}
|
||||
|
||||
.btn-secondary:active {
|
||||
transform: translateY(0);
|
||||
box-shadow: 0 2px 10px rgba(139, 69, 19, 0.1);
|
||||
}
|
||||
|
||||
.hero {
|
||||
@apply min-h-screen flex items-center justify-center pt-24;
|
||||
@apply min-h-screen flex items-center justify-center pt-24 relative overflow-hidden;
|
||||
background: var(--bone-white);
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
radial-gradient(
|
||||
circle at 20% 80%,
|
||||
rgba(139, 69, 19, 0.03) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 80% 20%,
|
||||
rgba(218, 165, 32, 0.02) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
animation: heroGlow 8s ease-in-out infinite alternate;
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at 30% 40%,
|
||||
rgba(139, 69, 19, 0.04) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 70% 60%,
|
||||
rgba(218, 165, 32, 0.03) 1px,
|
||||
transparent 1px
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 50% 80%,
|
||||
rgba(139, 69, 19, 0.02) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size:
|
||||
100px 100px,
|
||||
150px 150px,
|
||||
200px 200px;
|
||||
background-position:
|
||||
0 0,
|
||||
50px 50px,
|
||||
100px 100px;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes heroGlow {
|
||||
0% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@apply max-w-7xl mx-auto px-8 text-center;
|
||||
@apply max-w-7xl mx-auto px-8 text-center relative z-10;
|
||||
}
|
||||
|
||||
.logo-mark {
|
||||
@@ -173,24 +305,39 @@
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
@apply text-7xl md:text-9xl mb-6 tracking-tight;
|
||||
@apply text-7xl md:text-9xl mb-4 tracking-tight;
|
||||
color: var(--charcoal-brown);
|
||||
animation: heroFadeIn 1s ease-out 0.5s both;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hero h2 {
|
||||
@apply text-2xl md:text-3xl mb-8;
|
||||
@apply text-2xl md:text-3xl mb-6;
|
||||
color: var(--charcoal-brown);
|
||||
opacity: 0.85;
|
||||
opacity: 0;
|
||||
animation: heroFadeIn 1s ease-out 1s both;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
@apply text-xl mb-12 max-w-2xl mx-auto leading-relaxed;
|
||||
color: var(--charcoal-brown);
|
||||
opacity: 0.7;
|
||||
opacity: 0;
|
||||
animation: heroFadeIn 1s ease-out 1.5s both;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
@apply flex items-center justify-center gap-6 flex-wrap;
|
||||
animation: heroFadeIn 1s ease-out 2s both;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@keyframes heroFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
@@ -362,7 +509,162 @@
|
||||
|
||||
.select-item[data-state="checked"] {
|
||||
background: var(--soft-cream);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
ELEGANT NAVIGATION STYLES
|
||||
======================================== */
|
||||
|
||||
.site-header {
|
||||
@apply fixed top-0 left-0 right-0 z-50 backdrop-blur-md border-b border-amber-100/50 transition-all duration-300;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
background-image:
|
||||
radial-gradient(
|
||||
circle at 25% 25%,
|
||||
rgba(139, 69, 19, 0.02) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
circle at 75% 75%,
|
||||
rgba(218, 165, 32, 0.01) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
|
||||
.site-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(
|
||||
45deg,
|
||||
transparent 49%,
|
||||
rgba(139, 69, 19, 0.03) 50%,
|
||||
transparent 51%
|
||||
),
|
||||
linear-gradient(
|
||||
-45deg,
|
||||
transparent 49%,
|
||||
rgba(218, 165, 32, 0.02) 50%,
|
||||
transparent 51%
|
||||
);
|
||||
background-size: 20px 20px;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-header.scrolled {
|
||||
@apply shadow-lg;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
}
|
||||
|
||||
.nav-primary {
|
||||
@apply max-w-7xl mx-auto px-8 py-6 flex items-center justify-between relative;
|
||||
}
|
||||
|
||||
.logo a {
|
||||
@apply text-2xl font-bold relative transition-all duration-300;
|
||||
color: var(--charcoal-brown);
|
||||
text-shadow: 0 1px 2px rgba(139, 69, 19, 0.1);
|
||||
}
|
||||
|
||||
.logo a::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
bottom: -8px;
|
||||
left: -8px;
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
rgba(139, 69, 19, 0.05),
|
||||
rgba(218, 165, 32, 0.03)
|
||||
);
|
||||
border-radius: 8px;
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.logo a:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
@apply hidden md:flex items-center space-x-8;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
@apply text-sm font-medium transition-all duration-300 relative;
|
||||
color: var(--charcoal-brown);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#3E352E,
|
||||
var(--golden-brown)
|
||||
);
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
.nav-links a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
color: #3E352E;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.nav-actions {
|
||||
@apply flex items-center gap-4;
|
||||
}
|
||||
|
||||
.nav-actions .btn-primary,
|
||||
.nav-actions .btn-secondary {
|
||||
@apply transition-all duration-300;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nav-actions .btn-primary::before,
|
||||
.nav-actions .btn-secondary::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.5s ease;
|
||||
}
|
||||
|
||||
.nav-actions .btn-primary:hover::before,
|
||||
.nav-actions .btn-secondary:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.nav-actions .btn-primary:hover,
|
||||
.nav-actions .btn-secondary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 25px rgba(139, 69, 19, 0.15);
|
||||
}
|
||||
|
||||
.select-trigger {
|
||||
@@ -378,4 +680,20 @@
|
||||
.select-trigger[data-state="open"] {
|
||||
border-color: var(--deep-earth);
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
@apply p-2 rounded-lg transition-all duration-300 border border-transparent;
|
||||
color: var(--charcoal-brown);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.icon-btn:hover {
|
||||
background: var(--soft-cream);
|
||||
border-color: var(--mocha-taupe);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.icon-btn:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,89 +1,77 @@
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
|
||||
/** @description Company history and philosophy page component explaining the brand's foundation and values. */
|
||||
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>
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<AnimatedLogo />
|
||||
<h1>Historia</h1>
|
||||
<h2>Anchor:23</h2>
|
||||
<RollingPhrases />
|
||||
<div className="hero-actions">
|
||||
<a href="#fundamento" className="btn-secondary">El Fundamento</a>
|
||||
<a href="#filosofia" className="btn-primary">Nuestra Filosofía</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-image">
|
||||
<div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Historia Hero</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section className="foundation" id="fundamento">
|
||||
<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. En un mundo saturado de opciones,
|
||||
decidimos crear algo diferente: un refugio donde la precisión técnica
|
||||
se encuentra con la elegancia atemporal.
|
||||
</p>
|
||||
</article>
|
||||
<aside className="foundation-image">
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Fundamento</span>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section className="services-preview">
|
||||
<h3>El Significado</h3>
|
||||
<div className="service-cards">
|
||||
<article className="service-card">
|
||||
<h4>ANCHOR</h4>
|
||||
<p>El ancla representa estabilidad, firmeza y permanencia. Es el símbolo de nuestro compromiso con la calidad constante y la excelencia sin concesiones.</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>:23</h4>
|
||||
<p>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>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section className="testimonials" id="filosofia">
|
||||
<h3>Nuestra Filosofía</h3>
|
||||
<div className="service-cards">
|
||||
<article className="service-card">
|
||||
<h4>Lujo como Estándar</h4>
|
||||
<p>No es lo extrañamente costoso, es lo excepcionalmente bien hecho.</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Exclusividad Inherente</h4>
|
||||
<p>Una sucursal por ciudad, invitación por membresía, calidad por convicción.</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Precisión Absoluta</h4>
|
||||
<p>Cada corte, cada color, cada tratamiento ejecutado con la máxima perfección técnica.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -210,7 +210,7 @@ export default function KioskPage({ params }: { params: { locationId: string } }
|
||||
Confirmar Cita
|
||||
</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
|
||||
<li>Selecciona "Confirmar Cita"</li>
|
||||
<li>Selecciona "Confirmar Cita"</li>
|
||||
<li>Ingresa el código de 6 caracteres de tu reserva</li>
|
||||
<li>Verifica los detalles de tu cita</li>
|
||||
<li>Confirma tu llegada</li>
|
||||
@@ -223,7 +223,7 @@ export default function KioskPage({ params }: { params: { locationId: string } }
|
||||
Reserva Inmediata
|
||||
</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
|
||||
<li>Selecciona "Reserva Inmediata"</li>
|
||||
<li>Selecciona "Reserva Inmediata"</li>
|
||||
<li>Elige el servicio que deseas</li>
|
||||
<li>Ingresa tus datos personales</li>
|
||||
<li>Confirma la reserva</li>
|
||||
|
||||
@@ -3,6 +3,9 @@ import { Inter } from 'next/font/google'
|
||||
import './globals.css'
|
||||
import { AuthProvider } from '@/lib/auth/context'
|
||||
import { AuthGuard } from '@/components/auth-guard'
|
||||
import { AppWrapper } from '@/components/app-wrapper'
|
||||
import { ResponsiveNav } from '@/components/responsive-nav'
|
||||
import { FormbricksProvider } from '@/components/formbricks-provider'
|
||||
|
||||
const inter = Inter({
|
||||
subsets: ['latin'],
|
||||
@@ -28,36 +31,15 @@ export default function RootLayout({
|
||||
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
</head>
|
||||
<body className={`${inter.variable} font-sans`}>
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
{typeof window === 'undefined' && (
|
||||
<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>
|
||||
</ul>
|
||||
|
||||
<div className="nav-actions flex items-center gap-4">
|
||||
<a href="/booking/servicios" className="btn-secondary">
|
||||
Book Now
|
||||
</a>
|
||||
<a href="/membresias" className="btn-primary">
|
||||
Memberships
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
)}
|
||||
|
||||
<main>{children}</main>
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
<AppWrapper>
|
||||
<FormbricksProvider />
|
||||
<AuthProvider>
|
||||
<AuthGuard>
|
||||
<ResponsiveNav />
|
||||
<main>{children}</main>
|
||||
</AuthGuard>
|
||||
</AuthProvider>
|
||||
</AppWrapper>
|
||||
|
||||
<footer className="site-footer">
|
||||
<div className="footer-brand">
|
||||
@@ -68,6 +50,8 @@ export default function RootLayout({
|
||||
<div className="footer-links">
|
||||
<a href="/historia">Nosotros</a>
|
||||
<a href="/servicios">Servicios</a>
|
||||
<a href="/membresias">Membresías</a>
|
||||
<a href="/contacto">Contacto</a>
|
||||
<a href="/franchises">Franquicias</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,75 +1,113 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
import { Crown, Star, Award, Diamond } from 'lucide-react'
|
||||
import { getDeviceType, sendWebhookPayload } from '@/lib/webhook'
|
||||
|
||||
/** @description Membership tiers page component displaying exclusive membership options and application forms. */
|
||||
export default function MembresiasPage() {
|
||||
const [selectedTier, setSelectedTier] = useState<string | null>(null)
|
||||
const [formData, setFormData] = useState({
|
||||
membership_id: '',
|
||||
nombre: '',
|
||||
email: '',
|
||||
telefono: '',
|
||||
mensaje: ''
|
||||
})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
const [showThankYou, setShowThankYou] = useState(false)
|
||||
const [submitError, setSubmitError] = useState<string | null>(null)
|
||||
|
||||
const tiers = [
|
||||
{
|
||||
id: 'gold',
|
||||
name: 'Gold Tier',
|
||||
name: 'GOLD TIER',
|
||||
icon: Star,
|
||||
description: 'Acceso prioritario y experiencias exclusivas.',
|
||||
description: 'Acceso curado y acompañamiento continuo.',
|
||||
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'
|
||||
'Prioridad de agenda en experiencias Anchor',
|
||||
'Beauty Concierge para asesoría y coordinación de rituales',
|
||||
'Acceso a horarios preferentes',
|
||||
'Consulta de belleza mensual',
|
||||
'Producto curado de cortesía mensual',
|
||||
'Invitación anticipada a experiencias privadas'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'black',
|
||||
name: 'Black Tier',
|
||||
name: 'BLACK TIER',
|
||||
icon: Award,
|
||||
description: 'Privilegios premium y atención personalizada.',
|
||||
description: 'Privilegios premium y atención extendida.',
|
||||
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'
|
||||
'Prioridad absoluta de agenda (sin listas de espera)',
|
||||
'Beauty Concierge dedicado con seguimiento integral',
|
||||
'Acceso a espacios privados y bloques extendidos',
|
||||
'Dos rituales complementarios curados al mes',
|
||||
'Set de productos premium trimestral',
|
||||
'Acceso VIP a eventos cerrados'
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'vip',
|
||||
name: 'VIP Tier',
|
||||
name: 'VIP TIER',
|
||||
icon: Crown,
|
||||
description: 'La máxima expresión de exclusividad.',
|
||||
description: 'Acceso total y curaduría absoluta.',
|
||||
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'
|
||||
'Acceso inmediato y sin restricciones de agenda',
|
||||
'Beauty Concierge exclusivo + estilista asignado',
|
||||
'Experiencias personalizadas ilimitadas (agenda privada)',
|
||||
'Acceso a instalaciones fuera de horario',
|
||||
'Evento privado anual para la member + 5 invitadas',
|
||||
'Curaduría integral de rituales, productos y experiencias'
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSubmitted(true)
|
||||
setIsSubmitting(true)
|
||||
setSubmitError(null)
|
||||
|
||||
const payload = {
|
||||
form: 'memberships',
|
||||
membership_id: formData.membership_id,
|
||||
nombre: formData.nombre,
|
||||
email: formData.email,
|
||||
telefono: formData.telefono,
|
||||
mensaje: formData.mensaje,
|
||||
timestamp_utc: new Date().toISOString(),
|
||||
device_type: getDeviceType()
|
||||
}
|
||||
|
||||
try {
|
||||
await sendWebhookPayload(payload)
|
||||
setSubmitted(true)
|
||||
setShowThankYou(true)
|
||||
window.setTimeout(() => setShowThankYou(false), 3500)
|
||||
setFormData({
|
||||
membership_id: '',
|
||||
nombre: '',
|
||||
email: '',
|
||||
telefono: '',
|
||||
mensaje: ''
|
||||
})
|
||||
} catch (error) {
|
||||
setSubmitError('No pudimos enviar tu solicitud. Intenta de nuevo.')
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
@@ -77,46 +115,68 @@ export default function MembresiasPage() {
|
||||
}
|
||||
|
||||
const handleApply = (tierId: string) => {
|
||||
setSelectedTier(tierId)
|
||||
setFormData((prev) => ({
|
||||
...prev,
|
||||
membership_id: 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>
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<AnimatedLogo />
|
||||
<h1>Membresías</h1>
|
||||
<h2>Anchor:23</h2>
|
||||
<RollingPhrases />
|
||||
<div className="hero-actions">
|
||||
<a href="#tiers" className="btn-secondary">Ver Membresías</a>
|
||||
<a href="#solicitud" className="bg-[#3E352E] text-white hover:bg-[#3E352E]/90 px-8 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center justify-center">Solicitar Membresía</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-image">
|
||||
<div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Membresías Hero</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
<section className="foundation" id="tiers">
|
||||
<article>
|
||||
<h3>Nota operativa</h3>
|
||||
<h4>Las membresías no sustituyen el valor de las experiencias.</h4>
|
||||
<p>
|
||||
No existen descuentos ni negociaciones de estándar. Los beneficios se centran en tiempo, acceso, privacidad y criterio.
|
||||
</p>
|
||||
<p>
|
||||
ANCHOR 23. Un espacio privado donde el tiempo se desacelera. No trabajamos con volumen. Trabajamos con intención.
|
||||
</p>
|
||||
</article>
|
||||
<aside className="foundation-image">
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Membresías</span>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section className="services-preview">
|
||||
<h3>ANCHOR 23 · MEMBRESÍAS</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{tiers.map((tier) => {
|
||||
const Icon = tier.icon
|
||||
return (
|
||||
<div
|
||||
<article
|
||||
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'
|
||||
? 'bg-[#3E352E] border-[#3E352E] text-white transform scale-105'
|
||||
: 'bg-white border-gray-100 hover:border-[#3E352E] hover:shadow-xl'
|
||||
}`}
|
||||
>
|
||||
{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">
|
||||
<span className="bg-[#3E352E] text-white px-4 py-1 rounded-full text-sm font-semibold">
|
||||
Más Popular
|
||||
</span>
|
||||
</div>
|
||||
@@ -126,13 +186,16 @@ export default function MembresiasPage() {
|
||||
<Icon className="w-12 h-12" />
|
||||
</div>
|
||||
|
||||
<h3 className={`text-2xl font-bold mb-2 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
|
||||
<h4 className={`text-2xl font-bold mb-2 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
|
||||
{tier.name}
|
||||
</h3>
|
||||
</h4>
|
||||
|
||||
<p className={`mb-6 ${tier.featured ? 'text-gray-300' : 'text-gray-600'}`}>
|
||||
{tier.description}
|
||||
</p>
|
||||
<p className={`mb-6 text-sm ${tier.featured ? 'text-gray-300' : 'text-gray-600'}`}>
|
||||
Las membresías no ofrecen descuentos. Otorgan acceso prioritario, servicios plus y Beauty Concierge dedicado.
|
||||
</p>
|
||||
|
||||
<div className="mb-8">
|
||||
<div className={`text-4xl font-bold mb-1 ${tier.featured ? 'text-white' : 'text-gray-900'}`}>
|
||||
@@ -161,131 +224,142 @@ export default function MembresiasPage() {
|
||||
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'
|
||||
: 'bg-[#3E352E] text-white hover:bg-[#3E352E]/90'
|
||||
}`}
|
||||
>
|
||||
Solicitar {tier.name}
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
|
||||
<section className="testimonials" id="solicitud">
|
||||
<h3>Solicitud de Membresía</h3>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
{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">
|
||||
<div className="p-8 bg-green-50 border border-green-200 rounded-xl text-center">
|
||||
<Diamond className="w-12 h-12 text-green-900 mb-4 mx-auto" />
|
||||
<h4 className="text-xl font-semibold text-green-900 mb-2">
|
||||
Solicitud Recibida
|
||||
</h3>
|
||||
</h4>
|
||||
<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">
|
||||
<form id="application-form" onSubmit={handleSubmit} className="space-y-6 p-8 bg-white rounded-2xl shadow-lg border border-gray-100">
|
||||
{formData.membership_id && (
|
||||
<div className="p-4 bg-gray-50 rounded-lg border border-gray-200 mb-6 text-center">
|
||||
<span className="font-semibold text-gray-900">
|
||||
Membresía Seleccionada: {tiers.find(t => t.id === selectedTier)?.name}
|
||||
Membresía Seleccionada: {tiers.find(t => t.id === formData.membership_id)?.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 className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="membership_id" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Membresía
|
||||
</label>
|
||||
<select
|
||||
id="membership_id"
|
||||
name="membership_id"
|
||||
value={formData.membership_id}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||
>
|
||||
<option value="" disabled>Selecciona una membresía</option>
|
||||
{tiers.map((tier) => (
|
||||
<option key={tier.id} value={tier.id}>{tier.name}</option>
|
||||
))}
|
||||
</select>
|
||||
</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 (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>
|
||||
</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>
|
||||
{submitError && (
|
||||
<p className="text-sm text-red-600 text-center">
|
||||
{submitError}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<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
|
||||
type="submit"
|
||||
className="bg-[#3E352E] text-white hover:bg-[#3E352E]/90 px-8 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center justify-center w-full"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? 'Enviando...' : '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>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
19
app/page.tsx
19
app/page.tsx
@@ -1,23 +1,20 @@
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
|
||||
/** @description Home page component for the salon website, featuring hero section, services preview, and testimonials. */
|
||||
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>
|
||||
<AnimatedLogo />
|
||||
<h1>ANCHOR:23</h1>
|
||||
<h2>Belleza anclada en exclusividad</h2>
|
||||
<p>Un estándar exclusivo de lujo y precisión.</p>
|
||||
<h2>Beauty Club</h2>
|
||||
<RollingPhrases />
|
||||
|
||||
<div className="hero-actions">
|
||||
<div className="hero-actions" style={{ animationDelay: '2.5s' }}>
|
||||
<a href="/servicios" className="btn-secondary">Ver servicios</a>
|
||||
<a href="https://booking.anchor23.mx" className="btn-primary">Solicitar cita</a>
|
||||
<a href="/booking/servicios" className="bg-[#3E352E] text-white hover:bg-[#3E352E]/90 px-8 py-3 rounded-lg font-semibold shadow-md hover:shadow-lg transition-all duration-300 inline-flex items-center justify-center">Solicitar cita</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,66 +1,244 @@
|
||||
/** @description Static services page component displaying available salon services and categories. */
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
|
||||
/** @description Services page with home page style structure */
|
||||
'use client'
|
||||
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
|
||||
/** @description Services page with home page style structure */
|
||||
import { useState, useEffect } from 'react'
|
||||
|
||||
interface Service {
|
||||
id: string
|
||||
name: string
|
||||
description: string
|
||||
duration_minutes: number
|
||||
base_price: number
|
||||
category: string
|
||||
requires_dual_artist: boolean
|
||||
is_active: boolean
|
||||
}
|
||||
|
||||
export default function ServiciosPage() {
|
||||
const services = [
|
||||
{
|
||||
category: 'Spa de Alta Gama',
|
||||
description: 'Sauna y spa excepcionales, diseñados para el rejuvenecimiento y el equilibrio.',
|
||||
items: ['Tratamientos Faciales', 'Masajes Terapéuticos', 'Hidroterapia']
|
||||
},
|
||||
{
|
||||
category: 'Arte y Manicure de Precisión',
|
||||
description: 'Estilización y técnica donde el detalle define el resultado.',
|
||||
items: ['Manicure de Precisión', 'Pedicure Spa', 'Arte en Uñas']
|
||||
},
|
||||
{
|
||||
category: 'Peinado y Maquillaje de Lujo',
|
||||
description: 'Transformaciones discretas y sofisticadas para ocasiones selectas.',
|
||||
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']
|
||||
const [services, setServices] = useState<Service[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
useEffect(() => {
|
||||
fetchServices()
|
||||
}, [])
|
||||
|
||||
const fetchServices = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/services')
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setServices(data.services.filter((s: Service) => s.is_active))
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching services:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const formatCurrency = (amount: number) => {
|
||||
return new Intl.NumberFormat('es-MX', {
|
||||
style: 'currency',
|
||||
currency: 'MXN'
|
||||
}).format(amount)
|
||||
}
|
||||
|
||||
const formatDuration = (minutes: number) => {
|
||||
const hours = Math.floor(minutes / 60)
|
||||
const mins = minutes % 60
|
||||
if (hours > 0) {
|
||||
return mins > 0 ? `${hours}h ${mins}min` : `${hours}h`
|
||||
}
|
||||
return `${mins} min`
|
||||
}
|
||||
|
||||
const getCategoryTitle = (category: string) => {
|
||||
const titles: Record<string, string> = {
|
||||
core: 'CORE EXPERIENCES - El corazón de Anchor 23',
|
||||
nails: 'NAIL COUTURE - Técnica invisible. Resultado impecable.',
|
||||
hair: 'HAIR FINISHING RITUALS',
|
||||
lashes: 'LASH & BROW RITUALS - Mirada definida con sutileza.',
|
||||
brows: 'LASH & BROW RITUALS - Mirada definida con sutileza.',
|
||||
events: 'EVENT EXPERIENCES - Agenda especial',
|
||||
permanent: 'PERMANENT RITUALS - Agenda limitada · Especialista certificada'
|
||||
}
|
||||
return titles[category] || category
|
||||
}
|
||||
|
||||
const getCategoryDescription = (category: string) => {
|
||||
const descriptions: Record<string, string> = {
|
||||
core: 'Rituales conscientes donde el tiempo se desacelera. Cada experiencia está diseñada para mujeres que valoran el silencio, la atención absoluta y los resultados impecables.',
|
||||
nails: 'En Anchor 23 no eliges técnicas. Cada decisión se toma internamente para lograr un resultado elegante, duradero y natural. No ofrecemos servicios de mantenimiento ni correcciones.',
|
||||
hair: 'Disponibles únicamente para clientas con experiencia Anchor el mismo día.',
|
||||
lashes: '',
|
||||
brows: '',
|
||||
events: 'Agenda especial para ocasiones selectas.',
|
||||
permanent: ''
|
||||
}
|
||||
return descriptions[category] || ''
|
||||
}
|
||||
|
||||
const groupedServices = services.reduce((acc, service) => {
|
||||
if (!acc[service.category]) {
|
||||
acc[service.category] = []
|
||||
}
|
||||
acc[service.category].push(service)
|
||||
return acc
|
||||
}, {} as Record<string, Service[]>)
|
||||
|
||||
const categoryOrder = ['core', 'nails', 'hair', 'lashes', 'brows', 'events', 'permanent']
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="section">
|
||||
<div className="section-header">
|
||||
<h1 className="section-title">Nuestros Servicios</h1>
|
||||
<p className="section-subtitle">Cargando servicios...</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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>
|
||||
))}
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<AnimatedLogo />
|
||||
<h1>Servicios</h1>
|
||||
<h2>Anchor:23</h2>
|
||||
<RollingPhrases />
|
||||
<div className="hero-actions">
|
||||
<a href="/booking/servicios" className="btn-primary">
|
||||
Reservar Cita
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-12 text-center">
|
||||
<a href="https://booking.anchor23.mx" className="btn-primary">
|
||||
Reservar Cita
|
||||
</a>
|
||||
<div className="hero-image">
|
||||
<div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Servicios</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="foundation">
|
||||
<article>
|
||||
<h3>Experiencias</h3>
|
||||
<h4>Criterio antes que cantidad</h4>
|
||||
<p>
|
||||
Anchor 23 es un espacio privado donde el tiempo se desacelera. Aquí, cada experiencia está diseñada para mujeres que valoran el silencio, la atención absoluta y los resultados impecables.
|
||||
</p>
|
||||
<p>
|
||||
No trabajamos con volumen. Trabajamos con intención.
|
||||
</p>
|
||||
</article>
|
||||
<aside className="foundation-image">
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Experiencias</span>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section className="services-preview">
|
||||
<h3>Nuestros Servicios</h3>
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
{categoryOrder.map(category => {
|
||||
const categoryServices = groupedServices[category]
|
||||
if (!categoryServices || categoryServices.length === 0) return null
|
||||
|
||||
return (
|
||||
<div key={category} className="service-cards mb-24">
|
||||
<div className="mb-8">
|
||||
<h4 className="text-3xl font-bold text-gray-900 mb-4">
|
||||
{getCategoryTitle(category)}
|
||||
</h4>
|
||||
{getCategoryDescription(category) && (
|
||||
<p className="text-gray-600 text-lg leading-relaxed">
|
||||
{getCategoryDescription(category)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{categoryServices.map((service) => (
|
||||
<article
|
||||
key={service.id}
|
||||
className="service-card"
|
||||
>
|
||||
<div className="mb-4">
|
||||
<h5 className="text-xl font-semibold text-gray-900 mb-2">
|
||||
{service.name}
|
||||
</h5>
|
||||
{service.description && (
|
||||
<p className="text-gray-600 text-sm leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<span className="text-gray-500 text-sm">
|
||||
⏳ {formatDuration(service.duration_minutes)}
|
||||
</span>
|
||||
{service.requires_dual_artist && (
|
||||
<span className="text-xs bg-gray-100 px-2 py-1 rounded-full">Dual Artist</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-2xl font-bold text-gray-900">
|
||||
{formatCurrency(service.base_price)}
|
||||
</span>
|
||||
<a href="/booking/servicios" className="btn-primary">
|
||||
Reservar
|
||||
</a>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<section className="testimonials">
|
||||
<h3>Lo que Define Anchor 23</h3>
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="grid md:grid-cols-2 gap-6 text-left">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">•</span>
|
||||
<span className="text-gray-700">No ofrecemos retoques ni servicios aislados</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">•</span>
|
||||
<span className="text-gray-700">No trabajamos con prisas</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">•</span>
|
||||
<span className="text-gray-700">No explicamos de más</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">•</span>
|
||||
<span className="text-gray-700">No negociamos estándares</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-red-500 text-xl">•</span>
|
||||
<span className="text-gray-700">Cada experiencia está pensada para durar, sentirse y recordarse</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user