- {/* Window chrome */}
-
-
-
-
-
- app.flowsync.io/dashboard
-
-
-
- {/* Mock dashboard content */}
-
- {/* Sidebar */}
-
-
- {/* Main content */}
-
- {/* Header row */}
-
-
- {/* Metric cards */}
-
- {['#0066ff', '#00c853', '#ff9500', '#6c5ce7'].map((color, i) => (
-
- ))}
-
-
- {[60, 80, 50, 90, 70, 85, 65, 95, 75, 88].map((h, i) => (
-
- ))}
-
-
- {[85, 60, 95, 70].map((w, i) => (
-
- ))}
-
+ {/* Stats */}
+
+
+
+
+ {/* Columna derecha — formulario */}
+
+
+
Recibe tu presupuesto gratis
+
Sin compromiso · En menos de 5 minutos
+
+
+
+
- {stats.map((stat) => (
-
-
- {stat.value}
-
-
- {stat.label}
-
+
+ {/* Servicios */}
+
+ {[
+ {
+ icon: (
+
+ ),
+ title: 'Reformas Integrales',
+ description: 'Gestionamos tu reforma de principio a fin con un objetivo claro: cumplir plazos y superar expectativas.',
+ },
+ {
+ icon: (
+
+ ),
+ title: 'Reformas de Cocinas',
+ description: 'Transforma tu cocina en el espacio que siempre quisiste. Materiales de calidad, diseño a tu medida.',
+ },
+ {
+ icon: (
+
+ ),
+ 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 }) => (
+
+
+ {icon}
+
+
{title}
+
{description}
))}
+
);
-}
+}
\ 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
(null);
+ const sectionRef = useRef(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 (
+
+
+
+ Ve cómo quedará tu reforma
+
+
+
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)}
+ >
+
+
+
+
+
+
+ Antes
+
+
+ Después
+
+
+
+
+
+
+ {slides.map((slide, i) => (
+
+ ))}
+
+
+