mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 18:24:31 +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,31 +1,12 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Building2, Map, CheckCircle, Mail, Phone } from 'lucide-react'
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
import { Building2, Map, Mail, Phone, Users, Crown } from 'lucide-react'
|
||||
import { WebhookForm } from '@/components/webhook-form'
|
||||
|
||||
/** @description Franchise information and application page component for potential franchise partners. */
|
||||
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',
|
||||
@@ -33,224 +14,154 @@ export default function FranchisesPage() {
|
||||
'Sistema operativo completo (AnchorOS)',
|
||||
'Capacitación en estándares de lujo',
|
||||
'Membresía de clientes como fuente recurrente',
|
||||
'Soporte continuo y actualizaciones'
|
||||
'Soporte continuo y actualizaciones',
|
||||
'Manuales operativos completos',
|
||||
'Plataforma de entrenamientos digital',
|
||||
'Sistema de RH integrado en AnchorOS'
|
||||
]
|
||||
|
||||
const requirements = [
|
||||
'Compromiso inquebrantable con la calidad',
|
||||
'Experiencia en industria de belleza',
|
||||
'Inversión mínima: $500,000 USD',
|
||||
'Inversión mínima: $100,000 USD',
|
||||
'Ubicación premium en ciudad de interés',
|
||||
'Capacidad de contratar personal calificado'
|
||||
'Capacidad de contratar personal calificado',
|
||||
'Recomendable: Socio con experiencia en servicios de belleza'
|
||||
]
|
||||
|
||||
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>
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<AnimatedLogo />
|
||||
<h1>Franquicias</h1>
|
||||
<h2>Anchor:23</h2>
|
||||
<p className="hero-text">
|
||||
Una oportunidad exclusiva para llevar el estándar Anchor:23 a tu ciudad.
|
||||
</p>
|
||||
<div className="hero-actions">
|
||||
<a href="#modelo" className="btn-secondary">Nuestro Modelo</a>
|
||||
<a href="#solicitud" className="btn-primary">Solicitar Información</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<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 className="hero-image">
|
||||
<div className="w-full h-96 flex items-center justify-center bg-gradient-to-br from-gray-50 to-amber-50">
|
||||
<span className="text-gray-500 text-lg">Imagen Hero Franquicias</span>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
Solicitud de Información
|
||||
</h2>
|
||||
<section className="foundation" id="modelo">
|
||||
<article>
|
||||
<h3>Modelo de Negocio</h3>
|
||||
<h4>Una sucursal por ciudad</h4>
|
||||
<p>
|
||||
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>
|
||||
</article>
|
||||
|
||||
<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>
|
||||
)}
|
||||
<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 Modelo Franquicias</span>
|
||||
</div>
|
||||
</section>
|
||||
</aside>
|
||||
</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">
|
||||
<section className="services-preview">
|
||||
<h3>Beneficios y Requisitos</h3>
|
||||
<div className="service-cards">
|
||||
<article className="service-card">
|
||||
<h4>Beneficios</h4>
|
||||
<ul className="list-disc list-inside space-y-2">
|
||||
{benefits.map((benefit, index) => (
|
||||
<li key={index} className="text-gray-700">{benefit}</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article className="service-card">
|
||||
<h4>Requisitos</h4>
|
||||
<ul className="list-disc list-inside space-y-2">
|
||||
{requirements.map((req, index) => (
|
||||
<li key={index} className="text-gray-700">{req}</li>
|
||||
))}
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<a href="#solicitud" className="btn-primary">Solicitar Información</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="testimonials" id="solicitud">
|
||||
<h3>Solicitud de Información</h3>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<WebhookForm
|
||||
formType="franchise"
|
||||
title="Franquicias"
|
||||
successMessage="Solicitud Enviada"
|
||||
successSubtext="Gracias por tu interés. Revisaremos tu perfil y te contactaremos pronto para discutir las oportunidades disponibles."
|
||||
submitButtonText="Enviar Solicitud"
|
||||
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: true,
|
||||
placeholder: '+52 844 123 4567'
|
||||
},
|
||||
{
|
||||
name: 'ciudad',
|
||||
label: 'Ciudad de Interés',
|
||||
type: 'text',
|
||||
required: true,
|
||||
placeholder: 'Ej. Monterrey, Guadalajara'
|
||||
},
|
||||
{
|
||||
name: 'experiencia',
|
||||
label: 'Experiencia en el Sector',
|
||||
type: 'select',
|
||||
required: true,
|
||||
placeholder: 'Selecciona una opción',
|
||||
options: [
|
||||
{ value: 'sin-experiencia', label: 'Sin experiencia' },
|
||||
{ value: '1-3-anos', label: '1-3 años' },
|
||||
{ value: '3-5-anos', label: '3-5 años' },
|
||||
{ value: '5-10-anos', label: '5-10 años' },
|
||||
{ value: 'mas-10-anos', label: 'Más de 10 años' }
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'mensaje',
|
||||
label: 'Mensaje Adicional',
|
||||
type: 'textarea',
|
||||
required: false,
|
||||
rows: 4,
|
||||
placeholder: 'Cuéntanos sobre tu interés o preguntas'
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mt-8">
|
||||
<div className="bg-gradient-to-br from-gray-900 to-gray-800 rounded-2xl p-12 text-white max-w-4xl mx-auto">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">
|
||||
¿Tienes Preguntas Directas?
|
||||
</h3>
|
||||
@@ -268,8 +179,8 @@ export default function FranchisesPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user