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 { 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 />
|
||||
|
||||
@@ -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
|
||||
},
|
||||
};
|
||||
|
||||
export const header = {
|
||||
cta: 'Hablemos', // short nav CTA → #contacto (the full CTA lives in Hero/Cierre)
|
||||
};
|
||||
Reference in new issue
Block a user