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