-
- Nuestro Modelo
-
-
-
-
-
-
- Una Sucursal por Ciudad
-
-
-
- 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.
-
-
-
-
-
-
Exclusividad
-
Sin competencia interna
-
-
-
-
Calidad
-
Estándar uniforme
-
-
-
-
Sostenibilidad
-
Demanda controlada
-
-
+ <>
+
+
+
+
Franquicias
+
Anchor:23
+
+ Una oportunidad exclusiva para llevar el estándar Anchor:23 a tu ciudad.
+
+
-
+
-
-
-
Beneficios
-
- {benefits.map((benefit, index) => (
-
- ))}
-
-
-
-
-
Requisitos
-
- {requirements.map((req, index) => (
-
- ))}
-
-
+
+
+ Imagen Hero Franquicias
-
+
+
-
-
- Solicitud de Información
-
+
+
+ Modelo de Negocio
+ Una sucursal por ciudad
+
+ 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.
+
+
-
- {submitted ? (
-
-
-
- Solicitud Enviada
-
-
- Gracias por tu interés. Revisaremos tu perfil y te contactaremos
- pronto para discutir las oportunidades disponibles.
-
-
- ) : (
-
- )}
+
+
-
-
+
+ Beneficios y Requisitos
+
+
+ Beneficios
+
+ {benefits.map((benefit, index) => (
+ {benefit}
+ ))}
+
+
+
+
+ Requisitos
+
+ {requirements.map((req, index) => (
+ {req}
+ ))}
+
+
+
+
+
+ Solicitud de Información
+
+
+
+
+
¿Tienes Preguntas Directas?
@@ -268,8 +179,8 @@ export default function FranchisesPage() {
-
+
)
}
diff --git a/app/globals.css b/app/globals.css
index a599bb2..3efbe66 100644
--- a/app/globals.css
+++ b/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);
+ }
}
diff --git a/app/historia/page.tsx b/app/historia/page.tsx
index c4b7db0..b979610 100644
--- a/app/historia/page.tsx
+++ b/app/historia/page.tsx
@@ -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 (
-
-
-
Nuestra Historia
-
- El origen de una marca que redefine el estándar de belleza exclusiva.
-
-
+ <>
+
+
+
+
Historia
+
Anchor:23
+
+
+
+
+ Imagen Historia Hero
+
+
-
-
-
- El Fundamento
- Nada sólido nace del caos
-
- 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, donde cada detalle importa y donde la exclusividad es
- inherente, no promocional.
-
+
+
+ Fundamento
+ Nada sólido nace del caos
+
+ 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.
+
+
+
+
+ Imagen Fundamento
+
+
+
+
+
+ El Significado
+
+
+ ANCHOR
+ El ancla representa estabilidad, firmeza y permanencia. Es el símbolo de nuestro compromiso con la calidad constante y la excelencia sin concesiones.
+
+ :23
+ El dos y tres simbolizan la dualidad equilibrada: precisión técnica y creatividad artística, tradición e innovación, rigor y calidez.
+
+
-
-
-
-
- El Significado
-
-
-
-
ANCHOR
-
- El ancla representa estabilidad, firmeza y permanencia.
- Es el símbolo de nuestro compromiso con la calidad constante
- y la excelencia sin concesiones.
-
-
-
-
-
:23
-
- El dos y tres simbolizan la dualidad equilibrada: precisión
- técnica y creatividad artística, tradición e innovación,
- rigor y calidez.
-
-
-
-
-
- Nuestra Filosofía
-
-
-
-
Lujo como Estándar
-
- No es lo extrañamente costoso, es lo excepcionalmente bien hecho.
-
-
-
-
-
Exclusividad Inherente
-
- Una sucursal por ciudad, invitación por membresía, calidad por convicción.
-
-
-
-
-
Precisión Absoluta
-
- Cada corte, cada color, cada tratamiento ejecutado con la máxima perfección técnica.
-
-
-
-
-
+
+ Nuestra Filosofía
+
+
+ Lujo como Estándar
+ No es lo extrañamente costoso, es lo excepcionalmente bien hecho.
+
+
+ Exclusividad Inherente
+ Una sucursal por ciudad, invitación por membresía, calidad por convicción.
+
+
+ Precisión Absoluta
+ Cada corte, cada color, cada tratamiento ejecutado con la máxima perfección técnica.
+
+
+
)
}
diff --git a/app/kiosk/[locationId]/page.tsx b/app/kiosk/[locationId]/page.tsx
index 51a3beb..aa0b80d 100644
--- a/app/kiosk/[locationId]/page.tsx
+++ b/app/kiosk/[locationId]/page.tsx
@@ -210,7 +210,7 @@ export default function KioskPage({ params }: { params: { locationId: string } }
Confirmar Cita
- Selecciona "Confirmar Cita"
+ Selecciona "Confirmar Cita"
Ingresa el código de 6 caracteres de tu reserva
Verifica los detalles de tu cita
Confirma tu llegada
@@ -223,7 +223,7 @@ export default function KioskPage({ params }: { params: { locationId: string } }
Reserva Inmediata
- Selecciona "Reserva Inmediata"
+ Selecciona "Reserva Inmediata"
Elige el servicio que deseas
Ingresa tus datos personales
Confirma la reserva
diff --git a/app/layout.tsx b/app/layout.tsx
index b2866b9..d439e95 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -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({
-
- {typeof window === 'undefined' && (
-
- )}
-
- {children}
-
-
+
+
+
+ {children}
+
+
+
@@ -68,6 +50,8 @@ export default function RootLayout({
diff --git a/app/membresias/page.tsx b/app/membresias/page.tsx
index 45cb8eb..2b4cbff 100644
--- a/app/membresias/page.tsx
+++ b/app/membresias/page.tsx
@@ -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
(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(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) => {
+ const handleChange = (e: React.ChangeEvent) => {
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 (
-
-
-
Membresías Exclusivas
-
- Acceso prioritario, privilegios únicos y experiencias personalizadas.
-
-
-
-
-
-
-
- Experiencias a Medida
-
-
- Nuestras membresías están diseñadas para clientes que valoran la exclusividad,
- la atención personalizada y el acceso prioritario.
-
+ <>
+
+
+
+
Membresías
+
Anchor:23
+
+
+
+ Imagen Membresías Hero
+
+
-
+
+
+ Nota operativa
+ Las membresías no sustituyen el valor de las experiencias.
+
+ No existen descuentos ni negociaciones de estándar. Los beneficios se centran en tiempo, acceso, privacidad y criterio.
+
+
+ ANCHOR 23. Un espacio privado donde el tiempo se desacelera. No trabajamos con volumen. Trabajamos con intención.
+
+
+
+
+ Imagen Membresías
+
+
+
+
+
+ ANCHOR 23 · MEMBRESÍAS
+
{tiers.map((tier) => {
const Icon = tier.icon
return (
-
{tier.featured && (
-
+
Más Popular
@@ -126,13 +186,16 @@ export default function MembresiasPage() {
-
+
{tier.name}
-
+
{tier.description}
+
+ Las membresías no ofrecen descuentos. Otorgan acceso prioritario, servicios plus y Beauty Concierge dedicado.
+
@@ -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}
-
+
)
})}
+
-