From d8921bc0bc605ca04d41ae1ffaf7610eddb979b2 Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Tue, 21 Jul 2026 15:42:13 -0600
Subject: [PATCH] feat: sticky Header with persistent contact CTA

---
 app/page.tsx                                |  2 ++
 components/layout/Header.tsx                | 19 +++++++++++++++++++
 components/layout/__tests__/Header.test.tsx | 15 +++++++++++++++
 lib/content.ts                              |  4 ++++
 4 files changed, 40 insertions(+)
 create mode 100644 components/layout/Header.tsx
 create mode 100644 components/layout/__tests__/Header.test.tsx

diff --git a/app/page.tsx b/app/page.tsx
index d01a958..785f565 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,3 +1,4 @@
+import { Header } from '@/components/layout/Header';
 import { Hero } from '@/components/sections/Hero';
 import { FraseAncla } from '@/components/sections/FraseAncla';
 import { ParaQuien } from '@/components/sections/ParaQuien';
@@ -18,6 +19,7 @@ export default function Home() {
   return (
     <>
       <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
+      <Header />
       <main>
         <Hero variant="editorial" /> {/* dueña puede cambiar a "hormozi" */}
         <FraseAncla />
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
new file mode 100644
index 0000000..1703f39
--- /dev/null
+++ b/components/layout/Header.tsx
@@ -0,0 +1,19 @@
+import { Wordmark } from '@/components/primitives/Wordmark';
+import { CTA } from '@/components/primitives/CTA';
+import { Container } from '@/components/primitives/Container';
+import { header } from '@/lib/content';
+
+export function Header() {
+  return (
+    <header className="sticky top-0 z-50 border-b border-ink/10 bg-base/80 backdrop-blur">
+      <Container className="flex items-center justify-between py-3">
+        <a href="#top" aria-label="creeer — inicio">
+          <Wordmark size="md" />
+        </a>
+        <nav aria-label="Principal">
+          <CTA href="#contacto" label={header.cta} variant="light" />
+        </nav>
+      </Container>
+    </header>
+  );
+}
diff --git a/components/layout/__tests__/Header.test.tsx b/components/layout/__tests__/Header.test.tsx
new file mode 100644
index 0000000..a18a25f
--- /dev/null
+++ b/components/layout/__tests__/Header.test.tsx
@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Header } from '../Header';
+
+describe('<Header />', () => {
+  it('renders the wordmark', () => {
+    const { container } = render(<Header />);
+    expect(container.textContent).toContain('creeer');
+  });
+  it('renders a persistent CTA linking to the contact section', () => {
+    render(<Header />);
+    const cta = screen.getByRole('link', { name: /Hablemos/i });
+    expect(cta).toHaveAttribute('href', '#contacto');
+  });
+});
diff --git a/lib/content.ts b/lib/content.ts
index 3a87dbf..b72dabc 100644
--- a/lib/content.ts
+++ b/lib/content.ts
@@ -72,3 +72,7 @@ export const cierre = {
     linkedin: { label: 'LinkedIn', href: 'https://linkedin.com/in/...' },  // TODO dueña: real URL
   },
 };
+
+export const header = {
+  cta: 'Hablemos',   // short nav CTA → #contacto (the full CTA lives in Hero/Cierre)
+};