Sluijsens
63e11f1595
Continuous Integration / config (pull_request) Successful in 9s
Continuous Integration / prepare (pull_request) Successful in 1m15s
Continuous Integration / build (pull_request) Successful in 1m47s
Continuous Integration / test (pull_request) Successful in 1m42s
Continuous Integration / deploy-test (pull_request) Skipped
42 lines
1.8 KiB
TypeScript
42 lines
1.8 KiB
TypeScript
import { heroContent } from '../data/content';
|
|
import { handleAnchorClick } from '../utils/scrollToHash';
|
|
|
|
export function Hero() {
|
|
return (
|
|
<header id="top" className="relative overflow-hidden pb-[88px] pt-24">
|
|
<div className="mx-auto max-w-[1080px] px-6">
|
|
<span className="font-mono mb-5 block text-sm uppercase tracking-wider text-accent">
|
|
{heroContent.eyebrow}
|
|
</span>
|
|
<h1 className="font-display mb-6 max-w-[15ch] text-4xl font-extrabold leading-tight tracking-tight sm:text-5xl">
|
|
{heroContent.heading}
|
|
</h1>
|
|
<p className="mb-9 max-w-[52ch] text-lg text-muted">{heroContent.lead}</p>
|
|
<div
|
|
aria-hidden="true"
|
|
className="font-mono mb-10 inline-flex max-w-full items-center gap-2 overflow-x-auto whitespace-nowrap rounded border border-line bg-surface px-6 py-4 shadow-lg"
|
|
>
|
|
<span>{heroContent.codeLine}</span>
|
|
<span className="caret" data-testid="hero-caret" />
|
|
</div>
|
|
<div className="flex flex-col gap-4 sm:flex-row sm:flex-wrap">
|
|
<a
|
|
href="#pakketten"
|
|
onClick={(event) => handleAnchorClick(event, '#pakketten')}
|
|
className="rounded-lg bg-accent px-6 py-3.5 text-center text-[0.98rem] font-semibold text-[var(--color-accent-contrast)] transition-transform hover:bg-[var(--color-accent-hover)] active:scale-[0.98] sm:text-left"
|
|
>
|
|
Bekijk pakketten
|
|
</a>
|
|
<a
|
|
href="#contact"
|
|
onClick={(event) => handleAnchorClick(event, '#contact')}
|
|
className="rounded-lg border border-line px-6 py-3.5 text-center text-[0.98rem] font-semibold text-text transition-colors hover:border-accent-line sm:text-left"
|
|
>
|
|
Plan een gesprek
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|