feat: sticky Header with persistent contact CTA
This commit is contained in:
1 parent
50f62bdf28
commit
d8921bc0bc
4 files changed
+40
No files matched your search
@@ -1,3 +1,4 @@
|
|||||||
|
import { Header } from '@/components/layout/Header';
|
||||||
import { Hero } from '@/components/sections/Hero';
|
import { Hero } from '@/components/sections/Hero';
|
||||||
import { FraseAncla } from '@/components/sections/FraseAncla';
|
import { FraseAncla } from '@/components/sections/FraseAncla';
|
||||||
import { ParaQuien } from '@/components/sections/ParaQuien';
|
import { ParaQuien } from '@/components/sections/ParaQuien';
|
||||||
@@ -18,6 +19,7 @@ export default function Home() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||||
|
<Header />
|
||||||
<main>
|
<main>
|
||||||
<Hero variant="editorial" /> {/* dueña puede cambiar a "hormozi" */}
|
<Hero variant="editorial" /> {/* dueña puede cambiar a "hormozi" */}
|
||||||
<FraseAncla />
|
<FraseAncla />
|
||||||
|
|||||||
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -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');
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -72,3 +72,7 @@ export const cierre = {
|
|||||||
linkedin: { label: 'LinkedIn', href: 'https://linkedin.com/in/...' }, // TODO dueña: real URL
|
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)
|
||||||
|
};
|
||||||
Reference in new issue
Block a user