mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 16:24:30 +00:00
feat: Add Formbricks integration, update forms with webhooks, enhance navigation
- Integrate @formbricks/js for future surveys (FormbricksProvider) - Add WebhookForm component for unified form submission (contact/franchise/membership) - Update contact form with reason dropdown field - Update franchise form with new fields: estado, ciudad, socios checkbox - Update franchise benefits: manuals, training platform, RH system, investment $100k - Add Contacto link to desktop/mobile nav and footer - Update membership form to use WebhookForm with membership_id select - Update hero buttons to use #3E352E color consistently - Refactor contact/franchise pages to use new hero layout and components - Add webhook utility (lib/webhook.ts) for parallel submission to test+prod - Add email receipt hooks to booking endpoints - Update globals.css with new color variables and navigation styles - Docker configuration for deployment
This commit is contained in:
Marco Gallegos
@@ -1,176 +1,135 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
import { MapPin, Phone, Mail, Clock } from 'lucide-react'
|
||||
import { WebhookForm } from '@/components/webhook-form'
|
||||
|
||||
/** @description Contact page component with contact information and contact form for inquiries. */
|
||||
export default function ContactoPage() {
|
||||
const [formData, setFormData] = useState({
|
||||
nombre: '',
|
||||
email: '',
|
||||
telefono: '',
|
||||
mensaje: ''
|
||||
})
|
||||
const [submitted, setSubmitted] = useState(false)
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setSubmitted(true)
|
||||
}
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
[e.target.name]: e.target.value
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="section">
|
||||
<div className="section-header">
|
||||
<h1 className="section-title">Contáctanos</h1>
|
||||
<p className="section-subtitle">
|
||||
Estamos aquí para responder tus preguntas y atender tus necesidades.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="grid md:grid-cols-2 gap-12">
|
||||
<div className="space-y-8">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Información de Contacto</h2>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start space-x-4">
|
||||
<MapPin className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">Ubicación</h3>
|
||||
<p className="text-gray-600">Saltillo, Coahuila, México</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<Phone className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">Teléfono</h3>
|
||||
<p className="text-gray-600">+52 844 123 4567</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<Mail className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">Email</h3>
|
||||
<p className="text-gray-600">contacto@anchor23.mx</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<Clock className="w-6 h-6 text-gray-900 mt-1 flex-shrink-0" />
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">Horario</h3>
|
||||
<p className="text-gray-600">Lunes - Sábado: 10:00 - 21:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-6 bg-gradient-to-br from-gray-50 to-white rounded-xl border border-gray-100">
|
||||
<h3 className="font-semibold text-gray-900 mb-2">¿Necesitas reservar una cita?</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Utiliza nuestro sistema de reservas en línea para mayor comodidad.
|
||||
</p>
|
||||
<a href="https://booking.anchor23.mx" className="btn-primary inline-flex">
|
||||
Reservar Cita
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">Envíanos un Mensaje</h2>
|
||||
|
||||
{submitted ? (
|
||||
<div className="p-8 bg-green-50 border border-green-200 rounded-xl">
|
||||
<h3 className="text-xl font-semibold text-green-900 mb-2">
|
||||
Mensaje Enviado
|
||||
</h3>
|
||||
<p className="text-green-800">
|
||||
Gracias por contactarnos. Te responderemos lo antes posible.
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="nombre" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Nombre Completo
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="nombre"
|
||||
name="nombre"
|
||||
value={formData.nombre}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||
placeholder="Tu nombre"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||
placeholder="tu@email.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="telefono" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Teléfono
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="telefono"
|
||||
name="telefono"
|
||||
value={formData.telefono}
|
||||
onChange={handleChange}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent"
|
||||
placeholder="+52 844 123 4567"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="mensaje" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Mensaje
|
||||
</label>
|
||||
<textarea
|
||||
id="mensaje"
|
||||
name="mensaje"
|
||||
value={formData.mensaje}
|
||||
onChange={handleChange}
|
||||
required
|
||||
rows={6}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-900 focus:border-transparent resize-none"
|
||||
placeholder="¿Cómo podemos ayudarte?"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn-primary w-full">
|
||||
Enviar Mensaje
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<AnimatedLogo />
|
||||
<h1>Contacto</h1>
|
||||
<h2>Anchor:23</h2>
|
||||
<RollingPhrases />
|
||||
<div className="hero-actions">
|
||||
<a href="#informacion" className="btn-secondary">Información</a>
|
||||
<a href="#mensaje" className="btn-primary">Enviar Mensaje</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hero-image">
|
||||
<div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Contacto Hero</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="foundation" id="informacion">
|
||||
<article>
|
||||
<h3>Información</h3>
|
||||
<h4>Estamos aquí para ti</h4>
|
||||
<p>
|
||||
Anchor:23 es más que un salón, es un espacio diseñado para tu transformación personal.
|
||||
Contáctanos para cualquier consulta o reserva.
|
||||
</p>
|
||||
</article>
|
||||
<aside className="foundation-image">
|
||||
<div className="w-full h-full flex items-center justify-center bg-gradient-to-br from-amber-50 to-gray-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Contacto</span>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section className="services-preview">
|
||||
<h3>Información de Contacto</h3>
|
||||
<div className="service-cards">
|
||||
<article className="service-card">
|
||||
<h4>Ubicación</h4>
|
||||
<p>Saltillo, Coahuila, México</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Teléfono</h4>
|
||||
<p>+52 844 123 4567</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Email</h4>
|
||||
<p>contacto@anchor23.mx</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Horario</h4>
|
||||
<p>Lunes - Sábado: 10:00 - 21:00</p>
|
||||
</article>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<a href="https://booking.anchor23.mx" className="btn-primary">
|
||||
Reservar Cita
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="testimonials" id="mensaje">
|
||||
<h3>Envíanos un Mensaje</h3>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<WebhookForm
|
||||
formType="contact"
|
||||
title="Contacto"
|
||||
successMessage="Mensaje Enviado"
|
||||
successSubtext="Gracias por contactarnos. Te responderemos lo antes posible."
|
||||
submitButtonText="Enviar Mensaje"
|
||||
fields={[
|
||||
{
|
||||
name: 'nombre',
|
||||
label: 'Nombre Completo',
|
||||
type: 'text',
|
||||
required: true,
|
||||
placeholder: 'Tu nombre'
|
||||
},
|
||||
{
|
||||
name: 'email',
|
||||
label: 'Email',
|
||||
type: 'email',
|
||||
required: true,
|
||||
placeholder: 'tu@email.com'
|
||||
},
|
||||
{
|
||||
name: 'telefono',
|
||||
label: 'Teléfono',
|
||||
type: 'tel',
|
||||
required: false,
|
||||
placeholder: '+52 844 123 4567'
|
||||
},
|
||||
{
|
||||
name: 'motivo',
|
||||
label: 'Motivo de Contacto',
|
||||
type: 'select',
|
||||
required: true,
|
||||
placeholder: 'Selecciona un motivo',
|
||||
options: [
|
||||
{ value: 'cita', label: 'Agendar Cita' },
|
||||
{ value: 'membresia', label: 'Información Membresías' },
|
||||
{ value: 'franquicia', label: 'Interés en Franquicias' },
|
||||
{ value: 'servicios', label: 'Pregunta sobre Servicios' },
|
||||
{ value: 'pago', label: 'Problema con Pago' },
|
||||
{ value: 'resena', label: 'Enviar Reseña' },
|
||||
{ value: 'otro', label: 'Otro' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'mensaje',
|
||||
label: 'Mensaje',
|
||||
type: 'textarea',
|
||||
required: true,
|
||||
rows: 6,
|
||||
placeholder: '¿Cómo podemos ayudarte?'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user