From 5c47ef2e3b789f47b317c3ddb61584e05d787925 Mon Sep 17 00:00:00 2001
From: unknown <alexparracol81@gmail.com>
Date: Wed, 27 May 2026 00:07:21 -0400
Subject: [PATCH] Configuracion de estilos excelente

---
 src/app/page.tsx                              |   5 +-
 src/components/ContactForm/ContactForm.tsx    |  25 +-
 src/components/Features/Features.tsx          |  82 +--
 src/components/Footer/Footer.tsx              |  31 -
 src/components/Hero/Hero.tsx                  | 544 ++++++++++++------
 .../ReformaSlider/ReformaSlider.tsx           | 142 +++++
 6 files changed, 535 insertions(+), 294 deletions(-)
 create mode 100644 src/components/ReformaSlider/ReformaSlider.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7145ba4..7b1ca2e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,6 @@
 import Navbar from '@/components/Navbar/Navbar';
 import Hero from '@/components/Hero/Hero';
+import ReformaSlider from '@/components/ReformaSlider/ReformaSlider';
 import Features from '@/components/Features/Features';
 import Pricing from '@/components/Pricing/Pricing';
 import ContactForm from '@/components/ContactForm/ContactForm';
@@ -8,12 +9,12 @@ import Footer from '@/components/Footer/Footer';
 export default function Home() {
   return (
     <>
-      <Navbar />
+      {/* <Navbar /> */}
       <main id="main-content">
         <Hero />
+        <ReformaSlider />
         <Features />
         <Pricing />
-        <ContactForm />
       </main>
       <Footer />
     </>
diff --git a/src/components/ContactForm/ContactForm.tsx b/src/components/ContactForm/ContactForm.tsx
index 0736bf7..8620225 100644
--- a/src/components/ContactForm/ContactForm.tsx
+++ b/src/components/ContactForm/ContactForm.tsx
@@ -269,11 +269,10 @@ export default function ContactForm() {
                       id="contact-name"
                       name="name"
                       type="text"
-                      className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${
-                        errors.name && touched.name
+                      className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${errors.name && touched.name
                           ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
                           : 'border-gray-200'
-                      }`}
+                        }`}
                       placeholder="Juan García"
                       value={formData.name}
                       onChange={handleChange}
@@ -298,11 +297,10 @@ export default function ContactForm() {
                       id="contact-email"
                       name="email"
                       type="email"
-                      className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${
-                        errors.email && touched.email
+                      className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${errors.email && touched.email
                           ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
                           : 'border-gray-200'
-                      }`}
+                        }`}
                       placeholder="juan@empresa.com"
                       value={formData.email}
                       onChange={handleChange}
@@ -330,11 +328,10 @@ export default function ContactForm() {
                       id="contact-company"
                       name="company"
                       type="text"
-                      className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${
-                        errors.company && touched.company
+                      className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${errors.company && touched.company
                           ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
                           : 'border-gray-200'
-                      }`}
+                        }`}
                       placeholder="Mi Empresa S.A."
                       value={formData.company}
                       onChange={handleChange}
@@ -360,11 +357,10 @@ export default function ContactForm() {
                       id="contact-phone"
                       name="phone"
                       type="tel"
-                      className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${
-                        errors.phone && touched.phone
+                      className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${errors.phone && touched.phone
                           ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
                           : 'border-gray-200'
-                      }`}
+                        }`}
                       placeholder="+52 55 1234 5678"
                       value={formData.phone}
                       onChange={handleChange}
@@ -389,11 +385,10 @@ export default function ContactForm() {
                   <textarea
                     id="contact-message"
                     name="message"
-                    className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] resize-y min-h-[120px] ${
-                      errors.message && touched.message
+                    className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] resize-y min-h-[120px] ${errors.message && touched.message
                         ? '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..."
                     rows={5}
                     value={formData.message}
diff --git a/src/components/Features/Features.tsx b/src/components/Features/Features.tsx
index 7b9ef9c..729f1ca 100644
--- a/src/components/Features/Features.tsx
+++ b/src/components/Features/Features.tsx
@@ -15,10 +15,9 @@ const features = [
         />
       </svg>
     ),
-    title: 'Automatización inteligente',
-    description:
-      'Crea flujos de trabajo sin código. Conecta apps, dispara acciones y elimina tareas manuales con nuestra IA incorporada.',
-    tag: 'IA',
+    title: 'Deja tu número',
+    description: 'Rellena tu nombre, teléfono y email. En menos de 2 minutos te llamamos.',
+    tag: '01',
   },
   {
     icon: (
@@ -32,10 +31,9 @@ const features = [
         />
       </svg>
     ),
-    title: 'Colaboración en tiempo real',
-    description:
-      'Tu equipo siempre sincronizado. Comenta, asigna tareas y sigue el progreso de cada proyecto en tiempo real.',
-    tag: 'Equipos',
+    title: 'Sube una foto',
+    description: 'Fotografía tu cocina o baño. Nuestra IA analiza el espacio.',
+    tag: '02',
   },
   {
     icon: (
@@ -49,55 +47,9 @@ const features = [
         />
       </svg>
     ),
-    title: 'Analíticas avanzadas',
-    description:
-      'Paneles personalizables con métricas de negocio en tiempo real. Toma decisiones basadas en datos, no en suposiciones.',
-    tag: 'Analytics',
-  },
-  {
-    icon: (
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-        <rect x="3" y="11" width="18" height="11" rx="2" ry="2" stroke="currentColor" strokeWidth="2" />
-        <path d="M7 11V7a5 5 0 0110 0v4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-      </svg>
-    ),
-    title: 'Seguridad enterprise',
-    description:
-      'Cifrado end-to-end, SSO, auditoría de accesos y cumplimiento SOC 2 Tipo II. Tu información, siempre protegida.',
-    tag: 'Seguridad',
-  },
-  {
-    icon: (
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-        <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" />
-        <path
-          d="M2 12h20M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"
-          stroke="currentColor"
-          strokeWidth="2"
-        />
-      </svg>
-    ),
-    title: '200+ integraciones',
-    description:
-      'Conecta con Slack, Notion, GitHub, Salesforce y más. FlowSync se adapta a tu stack, no al revés.',
-    tag: 'Integraciones',
-  },
-  {
-    icon: (
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-        <path
-          d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"
-          stroke="currentColor"
-          strokeWidth="2"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        />
-      </svg>
-    ),
-    title: 'Soporte 24/7',
-    description:
-      'Equipo de soporte dedicado disponible en cualquier zona horaria. Tiempo de respuesta promedio: menos de 2 minutos.',
-    tag: 'Soporte',
+    title: 'Recibe tu presupuesto',
+    description: 'Al colgar te llega por WhatsApp el render + presupuesto desglosado.',
+    tag: '03',
   },
 ];
 
@@ -160,7 +112,7 @@ export default function Features() {
                 {feature.icon}
               </div>
               <div className="flex flex-col gap-2">
-                <div className="text-xs font-bold uppercase tracking-widest text-gray-400">
+                <div className="text-[6rem] font-black leading-none text-gray-300 select-none -mt-2 -mb-2">
                   {feature.tag}
                 </div>
                 <h3 className="text-xl font-extrabold tracking-tight text-black leading-tight">
@@ -173,20 +125,6 @@ export default function Features() {
             </article>
           ))}
         </div>
-
-        {/* Bottom CTA */}
-        <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out text-center mt-16 flex flex-col items-center gap-4">
-          <p className="text-xl font-bold text-black tracking-tight">
-            ¿Listo para transformar cómo trabaja tu equipo?
-          </p>
-          <button
-            className="btn btn-primary btn-lg"
-            id="features-cta-btn"
-            onClick={() => document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' })}
-          >
-            Ver todas las funciones
-          </button>
-        </div>
       </div>
     </section>
   );
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 32fcc75..5ca2dba 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -40,37 +40,6 @@ const socials = [
 export default function Footer() {
   return (
     <footer className="bg-black text-white" role="contentinfo">
-      {/* CTA Banner */}
-      <div className="bg-gray-900 border-b border-white/10">
-        <div className="container">
-          <div className="flex items-center justify-between gap-8 py-12 flex-wrap max-sm:flex-col max-sm:text-center">
-            <div className="flex flex-col gap-2">
-              <h2 className="text-[clamp(1.5rem,4vw,2.25rem)] font-black tracking-[-0.04em] text-white">
-                Empieza hoy mismo — es gratis
-              </h2>
-              <p className="text-base text-white/50">
-                Únete a más de 10,000 equipos que ya usan FlowSync
-              </p>
-            </div>
-            <div className="flex gap-3 shrink-0 flex-wrap max-sm:w-full max-sm:flex-col">
-              <button
-                className="btn btn-accent btn-lg max-sm:w-full max-sm:justify-center"
-                id="footer-cta-btn"
-                onClick={() => document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' })}
-              >
-                Prueba gratis 14 días
-              </button>
-              <button
-                className="btn btn-secondary btn-lg border-white/20 text-white bg-white/10 hover:bg-white/20 hover:border-white/30 max-sm:w-full max-sm:justify-center"
-                id="footer-demo-btn"
-              >
-                Ver demo
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-
       {/* Main footer */}
       <div className="py-16 pb-8">
         <div className="container">
diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
index 7a46212..0015f0b 100644
--- a/src/components/Hero/Hero.tsx
+++ b/src/components/Hero/Hero.tsx
@@ -1,13 +1,292 @@
 'use client';
 
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
-const stats = [
-  { value: '10K+', label: 'Equipos activos' },
-  { value: '99.9%', label: 'Uptime garantizado' },
-  { value: '3x', label: 'Más productividad' },
-  { value: '140+', label: 'Países' },
-];
+type FormData = {
+  name: string;
+  email: string;
+  company: string;
+  phone: string;
+  message: string;
+};
+
+type FormErrors = Partial<Record<keyof FormData, string>>;
+type SubmitStatus = 'idle' | 'loading' | 'success' | 'error';
+
+const initialData: FormData = {
+  name: '',
+  email: '',
+  company: '',
+  phone: '',
+  message: '',
+};
+
+function validateForm(data: FormData): FormErrors {
+  const errors: FormErrors = {};
+  if (!data.name.trim()) errors.name = 'El nombre es requerido';
+  if (!data.email.trim()) {
+    errors.email = 'El email es requerido';
+  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(data.email)) {
+    errors.email = 'Ingresa un email válido';
+  }
+  if (!data.company.trim()) errors.company = 'La empresa es requerida';
+  if (data.phone && !/^[+\d\s\-().]{7,20}$/.test(data.phone)) {
+    errors.phone = 'Ingresa un teléfono válido';
+  }
+  return errors;
+}
+
+function LeadForm() {
+  const [formData, setFormData] = useState<FormData>(initialData);
+  const [errors, setErrors] = useState<FormErrors>({});
+  const [touched, setTouched] = useState<Partial<Record<keyof FormData, boolean>>>({});
+  const [status, setStatus] = useState<SubmitStatus>('idle');
+
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+    if (touched[name as keyof FormData]) {
+      const newErrors = validateForm({ ...formData, [name]: value });
+      setErrors((prev) => ({ ...prev, [name]: newErrors[name as keyof FormData] }));
+    }
+  };
+
+  const handleBlur = (
+    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const { name } = e.target;
+    setTouched((prev) => ({ ...prev, [name]: true }));
+    const newErrors = validateForm(formData);
+    setErrors((prev) => ({ ...prev, [name]: newErrors[name as keyof FormData] }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    const allTouched = Object.keys(formData).reduce(
+      (acc, k) => ({ ...acc, [k]: true }),
+      {} as Record<keyof FormData, boolean>
+    );
+    setTouched(allTouched);
+
+    const validationErrors = validateForm(formData);
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors);
+      return;
+    }
+
+    setStatus('loading');
+    await new Promise((resolve) => setTimeout(resolve, 1800));
+    setStatus('success');
+    setFormData(initialData);
+    setTouched({});
+    setErrors({});
+  };
+
+  const handleReset = () => {
+    setStatus('idle');
+    setFormData(initialData);
+    setErrors({});
+    setTouched({});
+  };
+
+  if (status === 'success') {
+    return (
+      <div
+        className="flex flex-col items-center justify-center text-center gap-4 py-16 px-8 animate-scaleIn"
+        role="alert"
+        aria-live="polite"
+      >
+        <div className="w-18 h-18 bg-black text-white rounded-full flex items-center justify-center mb-2 p-4">
+          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" aria-hidden="true">
+            <path
+              d="M6 16l7 7L26 9"
+              stroke="currentColor"
+              strokeWidth="3"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </div>
+        <h3 className="text-2xl font-extrabold tracking-tight text-black">
+          ¡Mensaje enviado!
+        </h3>
+        <p className="text-base text-gray-600 max-w-[320px] leading-relaxed mb-4">
+          Gracias por contactarnos. Nuestro equipo te responderá en menos de 24 horas.
+        </p>
+        <button
+          className="btn btn-secondary text-sm px-4 py-2 bg-gray-100 hover:bg-gray-200 text-black font-semibold rounded-lg transition-colors"
+          onClick={handleReset}
+        >
+          Enviar otro mensaje
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <form
+      className="flex flex-col gap-5"
+      onSubmit={handleSubmit}
+      noValidate
+      aria-label="Formulario de contacto"
+    >
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="flex flex-col gap-2">
+          <label htmlFor="lead-name" className="text-sm font-semibold text-dark">
+            Nombre completo <span className="text-error">*</span>
+          </label>
+          <input
+            id="lead-name"
+            name="name"
+            type="text"
+            className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${errors.name && touched.name
+              ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
+              : 'border-gray-200'
+              }`}
+            placeholder="Juan García"
+            value={formData.name}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            autoComplete="name"
+            aria-required="true"
+            aria-describedby={errors.name && touched.name ? 'name-error' : undefined}
+            aria-invalid={!!(errors.name && touched.name)}
+          />
+          {errors.name && touched.name && (
+            <span id="name-error" className="text-xs text-error font-medium flex items-center gap-1" role="alert">
+              {errors.name}
+            </span>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <label htmlFor="lead-email" className="text-sm font-semibold text-dark">
+            Email <span className="text-error">*</span>
+          </label>
+          <input
+            id="lead-email"
+            name="email"
+            type="email"
+            className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${errors.email && touched.email
+              ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
+              : 'border-gray-200'
+              }`}
+            placeholder="juan@empresa.com"
+            value={formData.email}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            autoComplete="email"
+            aria-required="true"
+            aria-describedby={errors.email && touched.email ? 'email-error' : undefined}
+            aria-invalid={!!(errors.email && touched.email)}
+          />
+          {errors.email && touched.email && (
+            <span id="email-error" className="text-xs text-error font-medium flex items-center gap-1" role="alert">
+              {errors.email}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div className="flex flex-col gap-2">
+          <label htmlFor="lead-company" className="text-sm font-semibold text-dark">
+            Empresa <span className="text-error">*</span>
+          </label>
+          <input
+            id="lead-company"
+            name="company"
+            type="text"
+            className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${errors.company && touched.company
+              ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
+              : 'border-gray-200'
+              }`}
+            placeholder="Mi Empresa S.A."
+            value={formData.company}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            autoComplete="organization"
+            aria-required="true"
+            aria-describedby={errors.company && touched.company ? 'company-error' : undefined}
+            aria-invalid={!!(errors.company && touched.company)}
+          />
+          {errors.company && touched.company && (
+            <span id="company-error" className="text-xs text-error font-medium flex items-center gap-1" role="alert">
+              {errors.company}
+            </span>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <label htmlFor="lead-phone" className="text-sm font-semibold text-dark">
+            Teléfono <span className="font-normal text-gray-400">(opcional)</span>
+          </label>
+          <input
+            id="lead-phone"
+            name="phone"
+            type="tel"
+            className={`w-full px-4 py-3 text-base font-sans text-dark bg-white border-[1.5px] rounded-lg transition-all duration-150 outline-none placeholder:text-gray-400 focus:border-black focus:shadow-[0_0_0_3px_rgba(0,0,0,0.06)] ${errors.phone && touched.phone
+              ? 'border-error shadow-[0_0_0_3px_rgba(255,59,59,0.08)]'
+              : 'border-gray-200'
+              }`}
+            placeholder="+52 55 1234 5678"
+            value={formData.phone}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            autoComplete="tel"
+            aria-describedby={errors.phone && touched.phone ? 'phone-error' : undefined}
+            aria-invalid={!!(errors.phone && touched.phone)}
+          />
+          {errors.phone && touched.phone && (
+            <span id="phone-error" className="text-xs text-error font-medium flex items-center gap-1" role="alert">
+              {errors.phone}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <button
+        type="submit"
+        className="w-full bg-black text-white py-4 text-sm font-medium rounded-lg transition-opacity disabled:opacity-40 disabled:cursor-not-allowed hover:opacity-90 flex justify-center items-center gap-2 mt-2"
+        disabled={status === 'loading'}
+        aria-busy={status === 'loading'}
+      >
+        {status === 'loading' ? (
+          <>
+            <span
+              className="w-[18px] h-[18px] border-2 border-white/30 border-t-white rounded-full animate-[spin_0.7s_linear_infinite] shrink-0"
+              aria-hidden="true"
+            />
+            Enviando...
+          </>
+        ) : (
+          <>
+            Enviar mensaje
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path
+                d="M2 8h12M10 4l4 4-4 4"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </>
+        )}
+      </button>
+
+      <p className="text-xs text-gray-400 text-center leading-relaxed">
+        Al enviar, aceptas nuestra{' '}
+        <a href="#" className="text-gray-600 underline underline-offset-2 hover:text-black">
+          política de privacidad
+        </a>
+        .
+      </p>
+    </form>
+  );
+}
 
 export default function Hero() {
   const heroRef = useRef<HTMLElement>(null);
@@ -24,190 +303,107 @@ export default function Hero() {
       },
       { threshold: 0.1 }
     );
-
     const elements = heroRef.current?.querySelectorAll('.reveal');
     elements?.forEach((el) => observer.observe(el));
-
     return () => observer.disconnect();
   }, []);
 
-  const handleScrollToContact = () => {
-    document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' });
-  };
-
-  const handleScrollToFeatures = () => {
-    document.querySelector('#features')?.scrollIntoView({ behavior: 'smooth' });
-  };
-
   return (
-    <section
-      className="pt-[72px] bg-white overflow-hidden"
-      id="hero"
-      ref={heroRef}
-      aria-label="Sección principal"
-    >
-      <div className="container flex flex-col items-center text-center pt-20 pb-16 gap-6">
-        {/* Badge */}
-        <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-100 mb-2">
-          <span className="badge badge-dark">
-            <svg width="8" height="8" viewBox="0 0 8 8" fill="none" aria-hidden="true">
-              <circle cx="4" cy="4" r="4" fill="#00c853" />
-            </svg>
-            Nuevo — Ahora con IA integrada
-          </span>
-        </div>
+    <section className="bg-white overflow-hidden" id="hero" ref={heroRef} aria-label="Sección principal">
+      <div className="container py-16 md:pt-24 pb-8">
 
-        {/* Heading */}
-        <h1 className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-200 text-[clamp(2.5rem,7vw,5rem)] font-black tracking-[-0.04em] leading-[1.05] text-black max-w-[800px]">
-          El flujo de trabajo
-          <br />
-          <em className="italic font-black">que tu equipo</em>
-          <br />
-          siempre necesitó
-        </h1>
+        {/* Grid 2 columnas */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-16 items-start">
 
-        {/* Subheading */}
-        <p className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-300 text-[clamp(1rem,2vw,1.25rem)] text-gray-600 max-w-[520px] leading-relaxed mt-2">
-          FlowSync conecta a tu equipo, automatiza tareas repetitivas y te da
-          visibilidad total de cada proyecto — todo en un solo lugar.
-        </p>
+          {/* Columna izquierda — textos */}
+          <div className="flex flex-col gap-6">
+            <h1 className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out text-[clamp(2.5rem,5vw,4rem)] font-black tracking-[-0.04em] leading-[1.05] text-black">
+              Tu reforma,
+              <br />
+              <em className="italic font-black">presupuestada</em>
+              <br />
+              en 5 minutos.
+            </h1>
 
-        {/* CTA Buttons */}
-        <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-400 flex flex-wrap justify-center gap-3 mt-2 max-sm:flex-col max-sm:w-full max-sm:max-w-[320px]">
-          <button
-            className="btn btn-primary btn-lg max-sm:w-full"
-            id="hero-cta-primary"
-            onClick={handleScrollToContact}
-          >
-            Empieza gratis
-            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
-              <path
-                d="M3 8h10M9 4l4 4-4 4"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-          </button>
-          <button
-            className="btn btn-secondary btn-lg max-sm:w-full"
-            id="hero-cta-secondary"
-            onClick={handleScrollToFeatures}
-          >
-            Ver características
-          </button>
-        </div>
+            <p className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-100 text-lg text-gray-500 leading-relaxed max-w-md">
+              Deja tu teléfono, sube una foto de tu cocina o baño y te llamamos desde tu provincia en menos de 2 minutos. Al colgar recibirás por WhatsApp el render de tu reforma + presupuesto desglosado.
+            </p>
 
-        {/* Trust note */}
-        <p className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-500 text-sm text-gray-400 mt-1">
-          Sin tarjeta de crédito &nbsp;·&nbsp; 14 días gratis &nbsp;·&nbsp; Cancela cuando quieras
-        </p>
-
-        {/* Dashboard mockup */}
-        <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-600 w-full max-w-[900px] mt-8 [perspective:1200px]">
-          <div
-            className="bg-white border border-gray-200 rounded-2xl shadow-xl overflow-hidden transform rotate-x-4 transition-transform duration-400 ease-out hover:rotate-x-0"
-            role="img"
-            aria-label="Vista previa del dashboard de FlowSync"
-            style={{ transform: 'rotateX(4deg)' }}
-          >
-            {/* Window chrome */}
-            <div className="flex items-center gap-2 px-4 py-3 bg-gray-50 border-b border-gray-200">
-              <span className="w-3 h-3 rounded-full shrink-0 bg-[#ff5f57]" />
-              <span className="w-3 h-3 rounded-full shrink-0 bg-[#febc2e]" />
-              <span className="w-3 h-3 rounded-full shrink-0 bg-[#28c840]" />
-              <span className="flex-1 text-center text-xs text-gray-400 bg-white border border-gray-200 rounded-full py-[2px] px-3 max-w-[280px] mx-auto">
-                app.flowsync.io/dashboard
-              </span>
-            </div>
-
-            {/* Mock dashboard content */}
-            <div className="flex h-[380px] max-md:h-[260px]">
-              {/* Sidebar */}
-              <nav className="w-14 bg-gray-50 border-r border-gray-200 px-3 py-4 flex flex-col gap-3 shrink-0 max-md:hidden" aria-hidden="true">
-                <div className="w-8 h-8 bg-black rounded-md mb-4" />
-                {[...Array(5)].map((_, i) => (
-                  <div
-                    key={i}
-                    className={`w-8 h-8 rounded-md ${
-                      i === 0 ? 'bg-black' : 'bg-gray-200'
-                    }`}
-                  />
-                ))}
-              </nav>
-
-              {/* Main content */}
-              <main className="flex-1 p-6 flex flex-col gap-4 overflow-hidden" aria-hidden="true">
-                {/* Header row */}
-                <div className="flex justify-between items-center">
-                  <div className="h-5 w-40 bg-gray-200 rounded-sm" />
-                  <div className="h-8 w-24 bg-black rounded-md" />
-                </div>
-
-                {/* Metric cards */}
-                <div className="grid grid-cols-4 max-md:grid-cols-2 gap-3">
-                  {['#0066ff', '#00c853', '#ff9500', '#6c5ce7'].map((color, i) => (
-                    <div key={i} className="bg-gray-50 border border-gray-200 rounded-xl p-3 flex gap-2 items-center">
-                      <div
-                        className="w-8 h-8 rounded-md shrink-0"
-                        style={{ background: `${color}18`, color }}
-                      />
-                      <div className="flex flex-col gap-[6px] flex-1">
-                        <div className="h-[14px] bg-gray-300 rounded-sm w-[70%]" />
-                        <div className="h-[10px] bg-gray-200 rounded-sm w-[90%]" />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-
-                {/* Chart area */}
-                <div className="flex-1 bg-gray-50 border border-gray-200 rounded-xl p-4 overflow-hidden">
-                  <div className="flex items-end gap-2 h-100">
-                    {[60, 80, 50, 90, 70, 85, 65, 95, 75, 88].map((h, i) => (
-                      <div
-                        key={i}
-                        className={`flex-1 rounded-t-sm animate-fadeIn opacity-100 ${
-                          i === 3 || i === 7 ? 'bg-black opacity-90' : 'bg-black opacity-10'
-                        }`}
-                        style={{
-                          height: `${h}%`,
-                          animationDelay: `${i * 0.05}s`,
-                          opacity: i === 3 || i === 7 ? 0.9 : (i % 2 === 0 ? 0.12 : 0.08)
-                        }}
-                      />
-                    ))}
-                  </div>
-                </div>
-
-                {/* Task list */}
-                <div className="flex flex-col gap-2">
-                  {[85, 60, 95, 70].map((w, i) => (
-                    <div key={i} className="flex items-center gap-3">
-                      <div className="w-4 h-4 border-2 border-gray-300 rounded-sm shrink-0" />
-                      <div className="h-[10px] bg-gray-200 rounded-sm" style={{ width: `${w}%` }} />
-                    </div>
-                  ))}
-                </div>
-              </main>
+            {/* Stats */}
+            <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-200 flex flex-wrap gap-3">
+              <button
+                className="btn btn-primary btn-lg"
+                onClick={() => document.querySelector('#contact')?.scrollIntoView({ behavior: 'smooth' })}
+              >
+                Empieza gratis
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              </button>
+              <button
+                className="btn btn-secondary btn-lg"
+                onClick={() => document.querySelector('#features')?.scrollIntoView({ behavior: 'smooth' })}
+              >
+                Ver características
+              </button>
             </div>
           </div>
+
+          {/* Columna derecha — formulario */}
+          <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-150 border border-gray-100 rounded-xl p-8 bg-white shadow-sm">
+            <div className="mb-6">
+              <h2 className="text-xl font-black tracking-tight text-black">Recibe tu presupuesto gratis</h2>
+              <p className="text-sm text-gray-400 mt-1">Sin compromiso · En menos de 5 minutos</p>
+            </div>
+            <LeadForm />
+          </div>
+
         </div>
 
-        {/* Stats */}
-        <div className="reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-700 flex flex-wrap justify-center gap-12 max-md:gap-8 mt-8">
-          {stats.map((stat) => (
-            <div key={stat.label} className="flex flex-col items-center gap-1">
-              <span className="text-3xl font-black tracking-[-0.04em] text-black">
-                {stat.value}
-              </span>
-              <span className="text-sm text-gray-500">
-                {stat.label}
-              </span>
+        <hr className="border-gray-300 mt-12 pb-8" />
+        {/* Servicios */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 justify-center">
+          {[
+            {
+              icon: (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                  <path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              ),
+              title: 'Reformas Integrales',
+              description: 'Gestionamos tu reforma de principio a fin con un objetivo claro: cumplir plazos y superar expectativas.',
+            },
+            {
+              icon: (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                  <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                  <polyline points="9 22 9 12 15 12 15 22" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              ),
+              title: 'Reformas de Cocinas',
+              description: 'Transforma tu cocina en el espacio que siempre quisiste. Materiales de calidad, diseño a tu medida.',
+            },
+            {
+              icon: (
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+                  <path d="M4 12h16M4 12a2 2 0 01-2-2V6a2 2 0 012-2h16a2 2 0 012 2v4a2 2 0 01-2 2M4 12v6a2 2 0 002 2h12a2 2 0 002-2v-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+              ),
+              title: 'Reformas de Baños',
+              description: 'El baño es el espacio más personal del hogar. Te ayudamos a conseguir el resultado que mereces.',
+            },
+          ].map(({ icon, title, description }) => (
+            <div key={title} className="flex flex-col gap-4 items-center text-center">
+              <div className="w-12 h-12 rounded-full bg-black flex items-center justify-center text-white">
+                {icon}
+              </div>
+              <h3 className="text-xl font-black tracking-tight text-black">{title}</h3>
+              <p className="text-gray-400 leading-relaxed text-sm max-w-[280px]">{description}</p>
             </div>
           ))}
         </div>
+
       </div>
     </section>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/ReformaSlider/ReformaSlider.tsx b/src/components/ReformaSlider/ReformaSlider.tsx
new file mode 100644
index 0000000..de77d5b
--- /dev/null
+++ b/src/components/ReformaSlider/ReformaSlider.tsx
@@ -0,0 +1,142 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+
+const slides = [
+  {
+    label: 'Cocina',
+    before: 'https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=900',
+    after: 'https://images.unsplash.com/photo-1556909172-54557c7e4fb7?w=900',
+  },
+  {
+    label: 'Baño',
+    before: 'https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=900',
+    after: 'https://images.unsplash.com/photo-1620626011761-996317702519?w=900',
+  },
+  {
+    label: 'Salón',
+    before: 'https://images.unsplash.com/photo-1484101403633-562f891dc89a?w=900',
+    after: 'https://images.unsplash.com/photo-1618221195710-dd6b41faaea6?w=900',
+  },
+];
+
+export default function ReformaSlider() {
+  const [activeSlide, setActiveSlide] = useState(0);
+  const [sliderX, setSliderX] = useState(50);
+  const [dragging, setDragging] = useState(false);
+  const [visible, setVisible] = useState(true);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const sectionRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('opacity-100', 'translate-y-0');
+            entry.target.classList.remove('opacity-0', 'translate-y-6');
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    const elements = sectionRef.current?.querySelectorAll('.reveal');
+    elements?.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, []);
+
+  const handleMove = (clientX: number) => {
+    if (!dragging || !containerRef.current) return;
+    const rect = containerRef.current.getBoundingClientRect();
+    const x = ((clientX - rect.left) / rect.width) * 100;
+    setSliderX(Math.min(Math.max(x, 5), 95));
+  };
+
+  const switchSlide = (index: number) => {
+    if (index === activeSlide) return;
+    setVisible(false);
+    setTimeout(() => {
+      setActiveSlide(index);
+      setSliderX(50);
+      setVisible(true);
+    }, 300);
+  };
+
+  return (
+    <section className="bg-white py-16 md:py-24" ref={sectionRef}>
+      <div className="container text-center">
+        <h2 className="text-[clamp(2.5rem,5vw,4rem)] font-black tracking-[-0.04em] leading-[1.05] text-black mb-6 reveal opacity-0 translate-y-6 transition-all duration-700 ease-out">
+          Ve cómo quedará tu reforma
+        </h2>
+        <div className="flex flex-col gap-4 reveal opacity-0 translate-y-6 transition-all duration-700 ease-out delay-100">
+          <div
+            ref={containerRef}
+            className="relative w-full aspect-[16/9] rounded-xl overflow-hidden cursor-col-resize select-none"
+            onMouseDown={() => setDragging(true)}
+            onMouseUp={() => setDragging(false)}
+            onMouseLeave={() => setDragging(false)}
+            onMouseMove={(e) => handleMove(e.clientX)}
+            onTouchStart={() => setDragging(true)}
+            onTouchEnd={() => setDragging(false)}
+            onTouchMove={(e) => handleMove(e.touches[0].clientX)}
+          >
+            <div
+              className="absolute inset-0 transition-opacity duration-300"
+              style={{ opacity: visible ? 1 : 0 }}
+            >
+              <img
+                src={slides[activeSlide].after}
+                alt="Después de la reforma"
+                className="absolute inset-0 w-full h-full object-cover"
+              />
+              <div
+                className="absolute inset-0 overflow-hidden"
+                style={{ width: `${sliderX}%` }}
+              >
+                <img
+                  src={slides[activeSlide].before}
+                  alt="Antes de la reforma"
+                  className="absolute inset-0 w-full h-full object-cover"
+                  style={{ width: `${(100 / sliderX) * 100}%`, maxWidth: 'none' }}
+                />
+              </div>
+              <span className="absolute top-3 left-4 bg-black/70 text-white text-xs font-medium px-3 py-1 rounded-full">
+                Antes
+              </span>
+              <span className="absolute top-3 right-4 bg-white/90 text-black text-xs font-medium px-3 py-1 rounded-full">
+                Después
+              </span>
+              <div
+                className="absolute top-0 bottom-0 w-[2px] bg-white shadow-lg"
+                style={{ left: `${sliderX}%` }}
+              >
+                <div className="absolute top-1/2 -translate-x-1/2 -translate-y-1/2 w-9 h-9 bg-white rounded-full shadow-xl flex items-center justify-center">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
+                    <path d="M8 4l-4 8 4 8M16 4l4 8-4 8" stroke="#1A1A1A" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex gap-3 justify-center mt-2">
+            {slides.map((slide, i) => (
+              <button
+                key={slide.label}
+                onClick={() => switchSlide(i)}
+                className={`relative rounded-lg overflow-hidden w-24 h-16 shrink-0 transition-all duration-200 ${i === activeSlide ? 'ring-2 ring-black ring-offset-2' : 'opacity-50 hover:opacity-80'
+                  }`}
+                aria-label={`Ver reforma de ${slide.label}`}
+              >
+                <img src={slide.before} alt={slide.label} className="w-full h-full object-cover" />
+                <span className="absolute bottom-1 left-1/2 -translate-x-1/2 bg-black/70 text-white text-[10px] px-2 py-0.5 rounded-full whitespace-nowrap">
+                  {slide.label}
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}