diff --git a/app/page.tsx b/app/page.tsx
index 785f565..8d7b607 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,6 +5,7 @@ import { ParaQuien } from '@/components/sections/ParaQuien';
import { Mecanismo } from '@/components/sections/Mecanismo';
import { Disciplinas } from '@/components/sections/Disciplinas';
import { Estratega } from '@/components/sections/Estratega';
+import { ComoEmpezar } from '@/components/sections/ComoEmpezar';
import { Cierre } from '@/components/sections/Cierre';
const jsonLd = {
@@ -27,6 +28,7 @@ export default function Home() {
+
>
diff --git a/components/sections/ComoEmpezar.tsx b/components/sections/ComoEmpezar.tsx
new file mode 100644
index 0000000..6a90974
--- /dev/null
+++ b/components/sections/ComoEmpezar.tsx
@@ -0,0 +1,36 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Container } from '@/components/primitives/Container';
+import { CTA } from '@/components/primitives/CTA';
+import { comoEmpezar, cierre } from '@/lib/content';
+import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
+
+export function ComoEmpezar() {
+ const reduced = usePrefersReducedMotion();
+ const waHref = `${cierre.contact.whatsapp.href}?text=${encodeURIComponent(comoEmpezar.whatsappText)}`;
+ return (
+
+
+ {comoEmpezar.eyebrow}
+ {comoEmpezar.title}
+
+ {comoEmpezar.steps.map((step) => (
+
+ {step.n}
+ {step.name}
+ {step.desc}
+
+ ))}
+
+
+
+
+
+
+ );
+}
diff --git a/components/sections/__tests__/ComoEmpezar.test.tsx b/components/sections/__tests__/ComoEmpezar.test.tsx
new file mode 100644
index 0000000..250f457
--- /dev/null
+++ b/components/sections/__tests__/ComoEmpezar.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { ComoEmpezar } from '../ComoEmpezar';
+
+describe('', () => {
+ it('renders the on-ramp steps', () => {
+ render();
+ expect(screen.getByText('Escríbeme')).toBeInTheDocument();
+ expect(screen.getByText('Sesión de diagnóstico')).toBeInTheDocument();
+ });
+ it('links the CTA to WhatsApp with a prefilled message', () => {
+ render();
+ const cta = screen.getByRole('link', { name: /Agenda tu sesión de diagnóstico/i });
+ const href = cta.getAttribute('href') ?? '';
+ expect(href).toMatch(/^https:\/\/wa\.me\//);
+ expect(href).toContain('text=');
+ });
+});
diff --git a/lib/content.ts b/lib/content.ts
index b72dabc..43a116b 100644
--- a/lib/content.ts
+++ b/lib/content.ts
@@ -63,6 +63,18 @@ export const estratega = {
quote: 'El tiempo no se compra, se invierte.',
};
+export const comoEmpezar = {
+ eyebrow: 'cómo empezar',
+ title: 'Tu siguiente movimiento empieza con una conversación.',
+ steps: [
+ { n: '01', name: 'Escríbeme', desc: 'Cuéntame dónde está tu negocio hoy.' },
+ { n: '02', name: 'Sesión de diagnóstico', desc: 'Una conversación para ubicar tu punto de inflexión.' },
+ { n: '03', name: 'Estrategia ejecutable', desc: 'Sales con claridad y tu siguiente movimiento definido.' },
+ ],
+ cta: 'Agenda tu sesión de diagnóstico',
+ whatsappText: 'Hola, quiero agendar una sesión de diagnóstico',
+};
+
export const cierre = {
quote: 'Devuélvele claridad al rumbo de tu empresa.',
cta: 'Define tu siguiente movimiento',