<![CDATA[export default function NectLawPresentation() {
const slides = [
{
title: "Rediseño Web Estratégico",
subtitle: "NECT LAW",
content: "Transformando una página informativa en una herramienta de captación de clientes.",
},
{
title: "¿Qué buscamos con este rediseño?",
bullets: [
"Convertir visitantes en potenciales clientes",
"Generar confianza desde el primer impacto",
"Guiar al usuario hacia el contacto",
"Reducir fricción y facilitar la toma de acción",
],
},
{
title: "Situación actual",
bullets: [
"El sitio informa, pero no convierte",
"No comunica claramente a quién ayudan",
"El usuario no encuentra rápidamente una solución",
"El contacto tiene demasiada fricción",
"No existe una guía clara hacia la acción",
],
},
{
title: "Nuestra visión",
content:
"Pasar de una página corporativa tradicional a una experiencia digital centrada en el usuario y orientada a resultados.",
},
{
title: "Ejes del rediseño",
bullets: [
"Mensaje claro y orientado al cliente",
"Diseño moderno y profesional",
"Experiencia centrada en problemas reales",
"Mayor enfoque en generación de contacto",
"Construcción progresiva de confianza",
],
},
{
title: "Antes vs Después",
comparison: {
before: [
"Lenguaje genérico",
"Información institucional",
"Navegación pasiva",
"Fricción en el contacto",
],
after: [
"Mensajes claros y humanos",
"Orientación a problemas del usuario",
"Embudo de conversión",
"Contacto rápido y visible",
],
},
},
{
title: "Nuevo enfoque de comunicación",
content:
"El usuario debe entender en menos de 5 segundos qué hace la firma, si pueden ayudarle y cuál es el siguiente paso.",
},
{
title: "Diseño visual",
bullets: [
"Nueva tipografía moderna",
"Mayor uso de espacios en blanco",
"Jerarquía visual clara",
"Diseño limpio y profesional",
"Experiencia mobile-first",
],
},
{
title: "Arquitectura centrada en el usuario",
bullets: [
"¿En qué podemos ayudarte?",
"¿Tienes este problema legal?",
"Servicios explicados desde necesidades reales",
"Navegación intuitiva y guiada",
],
},
{
title: "Optimización de conversiones",
bullets: [
"CTA visibles en todo momento",
"Botones: Agendar consulta / Hablar con un abogado",
"Formularios simplificados",
"Opciones rápidas de contacto",
"Reducción de clics innecesarios",
],
},
{
title: "Construcción de confianza",
bullets: [
"Fotografías reales del equipo",
"Experiencia y trayectoria",
"Testimonios de clientes",
"Casos y resultados relevantes",
"Lenguaje cercano y humano",
],
},
{
title: "¿Cómo trabajamos?",
steps: [
"Escuchamos tu caso",
"Analizamos tu situación",
"Proponemos una solución clara",
"Te acompañamos durante el proceso",
],
},
{
title: "Estructura propuesta del sitio",
bullets: [
"Inicio orientado a conversión",
"Servicios explicados desde el problema",
"Proceso de trabajo claro",
"Sección de confianza y testimonios",
"Equipo y experiencia",
"Contacto rápido y optimizado",
],
},
{
title: "Principios UX",
bullets: [
"Claridad inmediata",
"Navegación guiada",
"Menos fricción",
"Escaneabilidad",
"Confianza progresiva",
],
},
{
title: "Experiencia Mobile First",
bullets: [
"Botones accesibles",
"Scroll fluido",
"Formularios simplificados",
"Jerarquía visual optimizada para móvil",
],
},
{
title: "Beneficios esperados",
bullets: [
"Mayor claridad para el usuario",
"Incremento de confianza",
"Más contactos potenciales",
"Mejor diferenciación frente a otras firmas",
"Experiencia moderna y profesional",
],
},
{
title: "Resultado final",
content:
"Una plataforma digital diseñada no solo para informar, sino para generar confianza, captar clientes y fortalecer la presencia de NECT LAW.",
},
];
return (
<div className="bg-zinc-950 min-h-screen text-white p-8 font-sans">
<div className="max-w-6xl mx-auto space-y-10">
{slides.map((slide, index) => (
<section
key={index}
className="min-h-[80vh] bg-zinc-900 rounded-3xl p-10 shadow-2xl border border-zinc-800 flex flex-col justify-center"
>
<div className="mb-8">
<span className="text-sm tracking-[0.3em] uppercase text-zinc-400">
Slide {index + 1}
</span>
<h1 className="text-5xl font-bold mt-3 leading-tight">
{slide.title}
</h1>
{slide.subtitle && (
<p className="text-2xl text-zinc-300 mt-3">{slide.subtitle}</p>
)}
</div>
{slide.content && (
<p className="text-xl text-zinc-300 leading-relaxed max-w-4xl">
{slide.content}
</p>
)}
{slide.bullets && (
<ul className="space-y-4 mt-4">
{slide.bullets.map((bullet, i) => (
<li
key={i}
className="text-xl text-zinc-200 flex items-start gap-4"
>
<span className="text-yellow-500 text-2xl">•</span>
<span>{bullet}</span>
</li>
))}
</ul>
)}
{slide.steps && (
<div className="grid md:grid-cols-4 gap-6 mt-6">
{slide.steps.map((step, i) => (
<div
key={i}
className="bg-zinc-800 rounded-2xl p-6 border border-zinc-700"
>
<div className="text-4xl font-bold text-yellow-500 mb-4">
0{i + 1}
</div>
<p className="text-lg text-zinc-200">{step}</p>
</div>
))}
</div>
)}
{slide.comparison && (
<div className="grid md:grid-cols-2 gap-8 mt-6">
<div className="bg-red-950/30 border border-red-800 rounded-2xl p-6">
<h3 className="text-2xl font-semibold mb-4">Antes</h3>
<ul className="space-y-3">
{slide.comparison.before.map((item, i) => (
<li key={i} className="text-zinc-300">
• {item}
</li>
))}
</ul>
</div>
<div className="bg-emerald-950/30 border border-emerald-800 rounded-2xl p-6">
<h3 className="text-2xl font-semibold mb-4">Después</h3>
<ul className="space-y-3">
{slide.comparison.after.map((item, i) => (
<li key={i} className="text-zinc-300">
• {item}
</li>
))}
</ul>
</div>
</div>
)}
</section>
))}
</div>
</div>
);
}
]]>