Configuracion arquitectura y estilos

This commit is contained in:
unknown
2026-05-27 00:14:16 -04:00
parent 5c47ef2e3b
commit 986a17698b
5 changed files with 69 additions and 71 deletions

View File

@@ -135,11 +135,10 @@ export default function ContactForm() {
> >
Hablemos de Hablemos de
<br /> <br />
tu negocio tu reforma
</h2> </h2>
<p className="text-lg text-gray-600 leading-relaxed"> <p className="text-lg text-gray-600 leading-relaxed">
Cuéntanos qué necesitas. Nuestro equipo responderá en menos de 24 horas Cuéntanos qué tienes en mente. Un asesor de tu provincia te responderá en menos de 24 horas con una propuesta a medida.
con una propuesta personalizada.
</p> </p>
{/* Contact details */} {/* Contact details */}
@@ -157,7 +156,7 @@ export default function ContactForm() {
</div> </div>
<div> <div>
<div className="text-xs font-semibold uppercase tracking-widest text-gray-400">Email</div> <div className="text-xs font-semibold uppercase tracking-widest text-gray-400">Email</div>
<div className="text-base font-semibold text-black">hola@flowsync.io</div> <div className="text-base font-semibold text-black">hola@reformix.es</div>
</div> </div>
</div> </div>
@@ -173,7 +172,7 @@ export default function ContactForm() {
</div> </div>
<div> <div>
<div className="text-xs font-semibold uppercase tracking-widest text-gray-400">Teléfono</div> <div className="text-xs font-semibold uppercase tracking-widest text-gray-400">Teléfono</div>
<div className="text-base font-semibold text-black">+1 (800) 123-4567</div> <div className="text-base font-semibold text-black">+34 900 123 456</div>
</div> </div>
</div> </div>
@@ -194,16 +193,15 @@ export default function ContactForm() {
{/* Testimonial */} {/* Testimonial */}
<blockquote className="bg-black text-white rounded-xl p-6 flex flex-col gap-4"> <blockquote className="bg-black text-white rounded-xl p-6 flex flex-col gap-4">
<p className="text-base leading-relaxed text-white/85 italic"> <p className="text-base leading-relaxed text-white/85 italic">
&ldquo;FlowSync transformó la forma en que colaboramos. Lo que antes &ldquo;Reformix me dio un presupuesto en 5 minutos. A la semana ya tenía a los operarios en casa. Mejor reforma que la que pedí.&rdquo;
tomaba días, ahora lo hacemos en horas.&rdquo;
</p> </p>
<footer className="flex items-center gap-3"> <footer className="flex items-center gap-3">
<div className="w-10 h-10 bg-white/15 rounded-full flex items-center justify-center text-xs font-bold tracking-wider shrink-0"> <div className="w-10 h-10 bg-white/15 rounded-full flex items-center justify-center text-xs font-bold tracking-wider shrink-0">
MR LM
</div> </div>
<div> <div>
<div className="text-sm font-bold">María Rodríguez</div> <div className="text-sm font-bold">Laura Martínez</div>
<div className="text-xs text-white/50">CTO en TechLatam</div> <div className="text-xs text-white/50">Reforma de cocina en Madrid</div>
</div> </div>
</footer> </footer>
</blockquote> </blockquote>
@@ -389,7 +387,7 @@ export default function ContactForm() {
? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]' ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
: 'border-gray-200' : 'border-gray-200'
}`} }`}
placeholder="Cuéntanos sobre tu proyecto, equipo y qué quieres lograr con FlowSync..." placeholder="Cuéntanos sobre tu reforma: qué espacio quieres reformar, cuál es tu presupuesto aproximado y en qué ciudad vives..."
rows={5} rows={5}
value={formData.message} value={formData.message}
onChange={handleChange} onChange={handleChange}

View File

@@ -84,18 +84,18 @@ export default function Features() {
<div className="container"> <div className="container">
{/* Header */} {/* Header */}
<div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out text-center max-w-[600px] mx-auto mb-16 flex flex-col items-center gap-4"> <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out text-center max-w-[600px] mx-auto mb-16 flex flex-col items-center gap-4">
<span className="badge badge-accent">Características</span> <span className="badge badge-accent">Cómo funciona</span>
<h2 <h2
id="features-heading" id="features-heading"
className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black" className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black"
> >
Todo lo que necesitas, Tu presupuesto en 5 minutos,
<br /> <br />
<span className="text-gray-600">nada que no necesitas</span> <span className="text-gray-600">sin salir de casa</span>
</h2> </h2>
<p className="text-lg text-gray-600 leading-relaxed"> <p className="text-lg text-gray-600 leading-relaxed">
Diseñado para equipos que quieren mover rápido sin romper cosas. Sin visitas, sin esperas, sin sorpresas. Solo deja tu número, sube una foto
Potente cuando lo necesitas, simple cuando no. y te llamamos desde tu provincia con presupuesto en mano.
</p> </p>
</div> </div>

View File

@@ -1,10 +1,10 @@
'use client'; 'use client';
const footerLinks = { const footerLinks = {
Producto: ['Características', 'Precios', 'Integraciones', 'Changelog', 'Roadmap'], Servicios: ['Reformas integrales', 'Reformas de cocinas', 'Reformas de baños', 'Diseño de interiores', 'Comunidades de vecinos'],
Empresa: ['Sobre nosotros', 'Blog', 'Carreras', 'Prensa', 'Partners'], Empresa: ['Sobre nosotros', 'Blog de reformas', 'Trabaja con nosotros', 'Prensa', 'Zona de trabajo'],
Recursos: ['Documentación', 'API', 'Comunidad', 'Webinars', 'Templates'], Ayuda: ['Cómo funciona', 'Preguntas frecuentes', 'Galeria de proyectos', 'Financiación', 'Calculadora de obra'],
Legal: ['Privacidad', 'Términos', 'Cookies', 'Seguridad', 'GDPR'], Legal: ['Privacidad', 'Términos', 'Cookies', 'RGPD', 'Aviso legal'],
}; };
const socials = [ const socials = [
@@ -48,14 +48,14 @@ export default function Footer() {
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="w-9 h-9 bg-white text-black rounded-md flex items-center justify-center text-xs font-extrabold tracking-[-0.02em]"> <span className="w-9 h-9 bg-white text-black rounded-md flex items-center justify-center text-xs font-extrabold tracking-[-0.02em]">
FS Rx
</span> </span>
<span className="text-lg font-extrabold tracking-[-0.04em] text-white"> <span className="text-lg font-extrabold tracking-[-0.04em] text-white">
FlowSync Reformix
</span> </span>
</div> </div>
<p className="text-sm text-white/45 leading-relaxed"> <p className="text-sm text-white/45 leading-relaxed">
La plataforma todo-en-uno para equipos que quieren moverse rápido sin perder el control. Reformas de cocinas y baños con presupuesto en 5 minutos y render por WhatsApp. Tu reforma, gestionada de principio a fin.
</p> </p>
<div className="flex gap-2"> <div className="flex gap-2">
{socials.map((s) => ( {socials.map((s) => (
@@ -99,11 +99,11 @@ export default function Footer() {
{/* Bottom bar */} {/* Bottom bar */}
<div className="flex items-center justify-between pt-8 border-t border-white/10 flex-wrap gap-4"> <div className="flex items-center justify-between pt-8 border-t border-white/10 flex-wrap gap-4">
<p className="text-sm text-white/35"> <p className="text-sm text-white/35">
© {new Date().getFullYear()} FlowSync, Inc. Todos los derechos reservados. © {new Date().getFullYear()} Reformix, S.L. Todos los derechos reservados.
</p> </p>
<div className="flex items-center gap-2 text-xs font-medium text-white/45"> <div className="flex items-center gap-2 text-xs font-medium text-white/45">
<span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" /> <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
Todos los sistemas operativos Reformas en curso ahora mismo
</div> </div>
</div> </div>
</div> </div>

View File

@@ -4,58 +4,58 @@ import { useEffect, useRef, useState } from 'react';
const plans = [ const plans = [
{ {
id: 'starter', id: 'esencial',
name: 'Starter', name: 'Presupuesto',
price: { monthly: 0, annual: 0 }, price: { monthly: 0, annual: 0 },
description: 'Para equipos pequeños que están comenzando.', description: 'Para quien quiere saber cuánto cuesta antes de comprometerse.',
cta: 'Empieza gratis', cta: 'Solicitar presupuesto',
highlight: false, highlight: false,
features: [ features: [
'Hasta 5 usuarios', 'Llamada en menos de 2 minutos',
'3 proyectos activos', 'Presupuesto desglosado por partidas',
'1 GB de almacenamiento', 'Render visual de tu espacio por WhatsApp',
'Integraciones básicas (5)', 'Sin compromiso de contratación',
'Soporte por email', 'Asesor desde tu provincia',
'Analíticas básicas', 'Válido para cocinas y baños',
], ],
}, },
{ {
id: 'pro', id: 'reforma',
name: 'Pro', name: 'Reforma',
price: { monthly: 29, annual: 23 }, price: { monthly: 199, annual: 159 },
description: 'Para equipos en crecimiento que necesitan más poder.', description: 'Para quien ya tiene claro que quiere reformar y necesita un equipo de confianza.',
cta: 'Empieza prueba gratis', cta: 'Empezar mi reforma',
highlight: true, highlight: true,
badge: 'Más popular', badge: 'Más contratado',
features: [ features: [
'Hasta 25 usuarios', 'Todo lo del plan Presupuesto',
'Proyectos ilimitados', 'Proyecto de reforma completo',
'50 GB de almacenamiento', 'Gestión de materiales y proveedores',
'Integraciones avanzadas (50+)', 'Coordinador de obra dedicado',
'Soporte prioritario 24/7', 'Seguimiento fotográfico semanal',
'Analíticas avanzadas', 'Garantía de 2 años en mano de obra',
'Automatización de flujos', 'Plazos de entrega garantizados',
'Roles y permisos', 'Atención post-obra incluida',
], ],
}, },
{ {
id: 'enterprise', id: 'integral',
name: 'Enterprise', name: 'Integral',
price: { monthly: 99, annual: 79 }, price: { monthly: 499, annual: 399 },
description: 'Para organizaciones que necesitan control total.', description: 'Para reformas completas de viviendas o comunidades con gestión total.',
cta: 'Contactar ventas', cta: 'Hablar con un asesor',
highlight: false, highlight: false,
features: [ features: [
'Usuarios ilimitados', 'Todo lo del plan Reforma',
'Proyectos ilimitados', 'Reforma integral de vivienda completa',
'1 TB de almacenamiento', 'Diseño de interiores incluido',
'Todas las integraciones', 'Renders 3D de todos los espacios',
'Soporte dedicado + SLA', 'Gestión de licencias y permisos',
'Analíticas enterprise', 'Financiación flexible disponible',
'IA avanzada', 'Acceso a catálogo premium de materiales',
'SSO & SAML', 'Garantía extendida de 5 años',
'Auditoría y compliance', 'Servicio de mudanza coordinado',
'Infraestructura dedicada', 'Revisión técnica anual',
], ],
}, },
]; ];
@@ -90,17 +90,17 @@ export default function Pricing() {
<div className="container"> <div className="container">
{/* Header */} {/* Header */}
<div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out flex flex-col items-center text-center gap-4 mb-16"> <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out flex flex-col items-center text-center gap-4 mb-16">
<span className="badge badge-dark">Precios</span> <span className="badge badge-dark">Servicios</span>
<h2 <h2
id="pricing-heading" id="pricing-heading"
className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black" className="text-[clamp(1.875rem,5vw,3rem)] font-black tracking-[-0.04em] leading-[1.1] text-black"
> >
Transparente. Simple. Reformas con precio claro
<br /> <br />
Sin sorpresas. desde el primer minuto.
</h2> </h2>
<p className="text-lg text-gray-600"> <p className="text-lg text-gray-600">
Comienza gratis. Escala cuando estés listo. Sin contratos a largo plazo. Sin letras pequeñas, sin presupuestos que se disparan. Sabes lo que pagas antes de que empiece la obra.
</p> </p>
{/* Toggle */} {/* Toggle */}
@@ -257,13 +257,13 @@ export default function Pricing() {
{/* Enterprise note */} {/* Enterprise note */}
<div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out text-center mt-12 text-base text-gray-600"> <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out text-center mt-12 text-base text-gray-600">
<p> <p>
¿Necesitas algo personalizado? &nbsp; ¿Tienes un proyecto especial o una comunidad de vecinos? &nbsp;
<button <button
className="bg-transparent border-none cursor-pointer font-sans text-base font-semibold text-black underline underline-offset-4 transition-opacity duration-150 ease-out hover:opacity-60" className="bg-transparent border-none cursor-pointer font-sans text-base font-semibold text-black underline underline-offset-4 transition-opacity duration-150 ease-out hover:opacity-60"
onClick={handleContactScroll} onClick={handleContactScroll}
id="pricing-enterprise-contact-btn" id="pricing-enterprise-contact-btn"
> >
Habla con nuestro equipo Cuéntanos tu caso
</button> </button>
</p> </p>
</div> </div>

View File

@@ -11,7 +11,7 @@ const slides = [
{ {
label: 'Baño', label: 'Baño',
before: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900', before: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900',
after: 'https://images.unsplash.com/photo-1620626011761-996317702519?w=900', after: 'https://images.unsplash.com/photo-1584622650111-993a426fbf0a?w=900',
}, },
{ {
label: 'Salón', label: 'Salón',