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,89 +1,77 @@
|
||||
import { AnimatedLogo } from '@/components/animated-logo'
|
||||
import { RollingPhrases } from '@/components/rolling-phrases'
|
||||
|
||||
/** @description Company history and philosophy page component explaining the brand's foundation and values. */
|
||||
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>
|
||||
<>
|
||||
<section className="hero">
|
||||
<div className="hero-content">
|
||||
<AnimatedLogo />
|
||||
<h1>Historia</h1>
|
||||
<h2>Anchor:23</h2>
|
||||
<RollingPhrases />
|
||||
<div className="hero-actions">
|
||||
<a href="#fundamento" className="btn-secondary">El Fundamento</a>
|
||||
<a href="#filosofia" className="btn-primary">Nuestra Filosofía</a>
|
||||
</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 Historia Hero</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section className="foundation" id="fundamento">
|
||||
<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. En un mundo saturado de opciones,
|
||||
decidimos crear algo diferente: un refugio donde la precisión técnica
|
||||
se encuentra con la elegancia atemporal.
|
||||
</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 Fundamento</span>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section className="services-preview">
|
||||
<h3>El Significado</h3>
|
||||
<div className="service-cards">
|
||||
<article className="service-card">
|
||||
<h4>ANCHOR</h4>
|
||||
<p>El ancla representa estabilidad, firmeza y permanencia. Es el símbolo de nuestro compromiso con la calidad constante y la excelencia sin concesiones.</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>:23</h4>
|
||||
<p>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>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
<section className="testimonials" id="filosofia">
|
||||
<h3>Nuestra Filosofía</h3>
|
||||
<div className="service-cards">
|
||||
<article className="service-card">
|
||||
<h4>Lujo como Estándar</h4>
|
||||
<p>No es lo extrañamente costoso, es lo excepcionalmente bien hecho.</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Exclusividad Inherente</h4>
|
||||
<p>Una sucursal por ciudad, invitación por membresía, calidad por convicción.</p>
|
||||
</article>
|
||||
<article className="service-card">
|
||||
<h4>Precisión Absoluta</h4>
|
||||
<p>Cada corte, cada color, cada tratamiento ejecutado con la máxima perfección técnica.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user