From bf607f7aa67f962ef70a7c6f329e96f3d235863e Mon Sep 17 00:00:00 2001
From: Marco Gallegos <marco.gallegos@outlook.com>
Date: Fri, 16 Jan 2026 15:45:28 -0600
Subject: [PATCH] feat: Implementar frontend completo de anchor23.mx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Crear landing page con hero, fundamento, servicios y testimoniales
- Crear página de servicios con grid y descripciones
- Crear página de historia con filosofía de la marca
- Crear página de contacto con formulario
- Crear página de franchises con solicitud
- Crear página de membresías con 3 tiers (Gold, Black, VIP)
- Crear páginas de Privacy Policy y Legal
- Implementar header y footer global
- Estilos con Tailwind CSS según especificaciones
- HTML semántico y estructura clara
- Conversión silenciosa hacia booking.anchor23.mx
---
 app/contacto/page.tsx       | 175 ++++++++++++++++++++++
 app/franchises/page.tsx     | 274 ++++++++++++++++++++++++++++++++++
 app/globals.css             | 216 ++++++++++++++++++++++++---
 app/historia/page.tsx       |  88 +++++++++++
 app/layout.tsx              |  52 ++++++-
 app/legal/page.tsx          | 160 ++++++++++++++++++++
 app/membresias/page.tsx     | 290 ++++++++++++++++++++++++++++++++++++
 app/page.tsx                |  95 ++++++++++++
 app/privacy-policy/page.tsx | 122 +++++++++++++++
 app/servicios/page.tsx      |  65 ++++++++
 10 files changed, 1515 insertions(+), 22 deletions(-)
 create mode 100644 app/contacto/page.tsx
 create mode 100644 app/franchises/page.tsx
 create mode 100644 app/historia/page.tsx
 create mode 100644 app/legal/page.tsx
 create mode 100644 app/membresias/page.tsx
 create mode 100644 app/page.tsx
 create mode 100644 app/privacy-policy/page.tsx
 create mode 100644 app/servicios/page.tsx

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