From 729e06bdc8acdce414aae0d1e7882b80d569dbe3 Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Tue, 21 Jul 2026 11:08:11 -0600
Subject: [PATCH] =?UTF-8?q?feat:=20Disciplinas=20section=20(05)=20?=
 =?UTF-8?q?=E2=80=94=20pillars=20as=20tools?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 app/page.tsx                                  |  2 ++
 components/sections/Disciplinas.tsx           | 29 +++++++++++++++++++
 .../sections/__tests__/Disciplinas.test.tsx   | 12 ++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 components/sections/Disciplinas.tsx
 create mode 100644 components/sections/__tests__/Disciplinas.test.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 0084139..c2b01f5 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -2,6 +2,7 @@ import { Hero } from '@/components/sections/Hero';
 import { FraseAncla } from '@/components/sections/FraseAncla';
 import { ParaQuien } from '@/components/sections/ParaQuien';
 import { Mecanismo } from '@/components/sections/Mecanismo';
+import { Disciplinas } from '@/components/sections/Disciplinas';
 
 export default function Home() {
   return (
@@ -10,6 +11,7 @@ export default function Home() {
       <FraseAncla />
       <ParaQuien />
       <Mecanismo />
+      <Disciplinas />
     </main>
   );
 }
diff --git a/components/sections/Disciplinas.tsx b/components/sections/Disciplinas.tsx
new file mode 100644
index 0000000..2ba7d4c
--- /dev/null
+++ b/components/sections/Disciplinas.tsx
@@ -0,0 +1,29 @@
+'use client';
+import { motion } from 'framer-motion';
+import { Container } from '@/components/primitives/Container';
+import { disciplinas } from '@/lib/content';
+import { fadeInUp, staggerContainer, viewportOnce } from '@/lib/motion';
+
+export function Disciplinas() {
+  return (
+    <section className="bg-base">
+      <Container className="py-24 md:py-32">
+        <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce}
+          className="text-xs tracking-[0.3em] uppercase font-semibold text-gold">{disciplinas.eyebrow}</motion.p>
+        <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce}
+          className="mt-4 font-serif italic font-bold text-3xl md:text-5xl text-ink">{disciplinas.title}</motion.h2>
+        <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce}
+          className="mt-4 text-muted text-lg">{disciplinas.lead}</motion.p>
+        <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce}
+          className="mt-12 grid gap-8 md:grid-cols-3">
+          {disciplinas.items.map((item) => (
+            <motion.div key={item.name} variants={fadeInUp} className="border-t-2 border-gold pt-5">
+              <h3 className="font-serif italic font-bold text-2xl text-ink">{item.name}</h3>
+              <p className="mt-3 text-muted leading-relaxed">{item.desc}</p>
+            </motion.div>
+          ))}
+        </motion.div>
+      </Container>
+    </section>
+  );
+}
diff --git a/components/sections/__tests__/Disciplinas.test.tsx b/components/sections/__tests__/Disciplinas.test.tsx
new file mode 100644
index 0000000..12628be
--- /dev/null
+++ b/components/sections/__tests__/Disciplinas.test.tsx
@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Disciplinas } from '../Disciplinas';
+
+describe('<Disciplinas />', () => {
+  it('renders the 3 disciplines', () => {
+    render(<Disciplinas />);
+    expect(screen.getByText('Comunicación')).toBeInTheDocument();
+    expect(screen.getByText('Digital')).toBeInTheDocument();
+    expect(screen.getByText('Experiencias')).toBeInTheDocument();
+  });
+});