From e380e9751ab504eedb12ac996516f08eb5055de5 Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Tue, 21 Jul 2026 10:28:44 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20ParaQuien=20section=20(03)=20=E2=80=94?=
 =?UTF-8?q?=20audience=20filter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/page.tsx                                  |  2 ++
 components/sections/ParaQuien.tsx             | 29 +++++++++++++++++++
 .../sections/__tests__/ParaQuien.test.tsx     | 16 ++++++++++
 3 files changed, 47 insertions(+)
 create mode 100644 components/sections/ParaQuien.tsx
 create mode 100644 components/sections/__tests__/ParaQuien.test.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 37afbf1..c4e0510 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,11 +1,13 @@
 import { Hero } from '@/components/sections/Hero';
 import { FraseAncla } from '@/components/sections/FraseAncla';
+import { ParaQuien } from '@/components/sections/ParaQuien';
 
 export default function Home() {
   return (
     <main>
       <Hero variant="editorial" />
       <FraseAncla />
+      <ParaQuien />
     </main>
   );
 }
diff --git a/components/sections/ParaQuien.tsx b/components/sections/ParaQuien.tsx
new file mode 100644
index 0000000..bb96a0c
--- /dev/null
+++ b/components/sections/ParaQuien.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Container } from '@/components/primitives/Container';
+import { paraQuien } from '@/lib/content';
+import { fadeInUp, staggerContainer, viewportOnce } from '@/lib/motion';
+
+export function ParaQuien() {
+  return (
+    <section className="bg-base">
+      <Container className="py-24 md:py-32">
+        <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} className="max-w-3xl">
+          <motion.h2 variants={fadeInUp} className="font-serif italic font-bold text-3xl md:text-5xl text-ink leading-tight">
+            {paraQuien.title}
+          </motion.h2>
+          <motion.p variants={fadeInUp} className="mt-6 text-lg text-muted">{paraQuien.lead}</motion.p>
+          <motion.ul variants={fadeInUp} className="mt-8 space-y-3">
+            {paraQuien.criteria.map((c) => (
+              <li key={c} className="flex items-start gap-3">
+                <span className="text-gold font-bold mt-1" aria-hidden="true">✓</span>
+                <span className="text-ink text-lg">{c}</span>
+              </li>
+            ))}
+          </motion.ul>
+        </motion.div>
+      </Container>
+    </section>
+  );
+}
diff --git a/components/sections/__tests__/ParaQuien.test.tsx b/components/sections/__tests__/ParaQuien.test.tsx
new file mode 100644
index 0000000..967f1c4
--- /dev/null
+++ b/components/sections/__tests__/ParaQuien.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { ParaQuien } from '../ParaQuien';
+
+describe('<ParaQuien />', () => {
+  it('renders the section title', () => {
+    render(<ParaQuien />);
+    expect(screen.getByText(/punto de inflexión/i)).toBeInTheDocument();
+  });
+  it('renders all 3 criteria', () => {
+    render(<ParaQuien />);
+    expect(screen.getByText(/tienes tracción/i)).toBeInTheDocument();
+    expect(screen.getByText(/trabajar más ya no rinde/i)).toBeInTheDocument();
+    expect(screen.getByText(/necesitas claridad/i)).toBeInTheDocument();
+  });
+});