feat: Implementar frontend completo de anchor23.mx

- Crear landing page con hero, fundamento, servicios y testimoniales
- Crear página de servicios con grid y descripciones
- Crear página de historia con filosofía de la marca
- Crear página de contacto con formulario
- Crear página de franchises con solicitud
- Crear página de membresías con 3 tiers (Gold, Black, VIP)
- Crear páginas de Privacy Policy y Legal
- Implementar header y footer global
- Estilos con Tailwind CSS según especificaciones
- HTML semántico y estructura clara
- Conversión silenciosa hacia booking.anchor23.mx

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>
+  )
+}