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
<br />
tu negocio
tu reforma
</h2>
<p className="text-lg text-gray-600 leading-relaxed">
Cuéntanos qué necesitas. Nuestro equipo responderá en menos de 24 horas
con una propuesta personalizada.
Cuéntanos qué tienes en mente. Un asesor de tu provincia te responderá en menos de 24 horas con una propuesta a medida.
</p>
{/* Contact details */}
@@ -157,7 +156,7 @@ export default function ContactForm() {
</div>
<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>
@@ -173,7 +172,7 @@ export default function ContactForm() {
</div>
<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>
@@ -194,16 +193,15 @@ export default function ContactForm() {
{/* Testimonial */}
<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">
&ldquo;FlowSync transformó la forma en que colaboramos. Lo que antes
tomaba días, ahora lo hacemos en horas.&rdquo;
&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;
</p>
<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">
MR
LM
</div>
<div>
<div className="text-sm font-bold">María Rodríguez</div>
<div className="text-xs text-white/50">CTO en TechLatam</div>
<div className="text-sm font-bold">Laura Martínez</div>
<div className="text-xs text-white/50">Reforma de cocina en Madrid</div>
</div>
</footer>
</blockquote>
@@ -389,7 +387,7 @@ export default function ContactForm() {
? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
: '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}
value={formData.message}
onChange={handleChange}

View File

@@ -84,18 +84,18 @@ export default function Features() {
<div className="container">
{/* 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">
<span className="badge badge-accent">Características</span>
<span className="badge badge-accent">Cómo funciona</span>
<h2
id="features-heading"
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 />
<span className="text-gray-600">nada que no necesitas</span>
<span className="text-gray-600">sin salir de casa</span>
</h2>
<p className="text-lg text-gray-600 leading-relaxed">
Diseñado para equipos que quieren mover rápido sin romper cosas.
Potente cuando lo necesitas, simple cuando no.
Sin visitas, sin esperas, sin sorpresas. Solo deja tu número, sube una foto
y te llamamos desde tu provincia con presupuesto en mano.
</p>
</div>

View File

@@ -1,10 +1,10 @@
'use client';
const footerLinks = {
Producto: ['Características', 'Precios', 'Integraciones', 'Changelog', 'Roadmap'],
Empresa: ['Sobre nosotros', 'Blog', 'Carreras', 'Prensa', 'Partners'],
Recursos: ['Documentación', 'API', 'Comunidad', 'Webinars', 'Templates'],
Legal: ['Privacidad', 'Términos', 'Cookies', 'Seguridad', 'GDPR'],
Servicios: ['Reformas integrales', 'Reformas de cocinas', 'Reformas de baños', 'Diseño de interiores', 'Comunidades de vecinos'],
Empresa: ['Sobre nosotros', 'Blog de reformas', 'Trabaja con nosotros', 'Prensa', 'Zona de trabajo'],
Ayuda: ['Cómo funciona', 'Preguntas frecuentes', 'Galeria de proyectos', 'Financiación', 'Calculadora de obra'],
Legal: ['Privacidad', 'Términos', 'Cookies', 'RGPD', 'Aviso legal'],
};
const socials = [
@@ -48,14 +48,14 @@ export default function Footer() {
<div className="flex flex-col gap-4">
<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]">
FS
Rx
</span>
<span className="text-lg font-extrabold tracking-[-0.04em] text-white">
FlowSync
Reformix
</span>
</div>
<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>
<div className="flex gap-2">
{socials.map((s) => (
@@ -99,11 +99,11 @@ export default function Footer() {
{/* Bottom bar */}
<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">
© {new Date().getFullYear()} FlowSync, Inc. Todos los derechos reservados.
© {new Date().getFullYear()} Reformix, S.L. Todos los derechos reservados.
</p>
<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" />
Todos los sistemas operativos
Reformas en curso ahora mismo
</div>
</div>
</div>

View File

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

View File

@@ -11,7 +11,7 @@ const slides = [
{
label: 'Baño',
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',