49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
import {motion} from 'framer-motion';
|
|
import React from 'react';
|
|
|
|
export function SectionHeader({
|
|
number,
|
|
label,
|
|
title,
|
|
titleAccent,
|
|
subtitle,
|
|
}: {
|
|
number: string;
|
|
label: string;
|
|
title: string;
|
|
titleAccent?: string;
|
|
subtitle?: string;
|
|
}) {
|
|
return (
|
|
<motion.div
|
|
initial={{opacity: 0, y: 16}}
|
|
whileInView={{opacity: 1, y: 0}}
|
|
viewport={{once: true, margin: '-10%'}}
|
|
transition={{duration: 0.7, ease: [0.22, 1, 0.36, 1]}}
|
|
className={'grid gap-8 lg:grid-cols-12 lg:gap-16'}
|
|
>
|
|
<div
|
|
style={{fontFamily: 'var(--font-mono)'}}
|
|
className={
|
|
'flex items-center gap-4 border-t border-neutral-900 pt-4 text-[11px] uppercase tracking-[0.2em] text-neutral-700 lg:col-span-3 lg:self-start'
|
|
}
|
|
>
|
|
<span className={'font-medium text-neutral-900'}>§ {number}</span>
|
|
<span className={'text-neutral-500'}>{label}</span>
|
|
</div>
|
|
<div className={'lg:col-span-9'}>
|
|
<h2
|
|
style={{fontFamily: 'var(--font-display)'}}
|
|
className={
|
|
'text-[clamp(2.25rem,5.5vw,4.5rem)] font-extrabold leading-[0.95] tracking-[-0.03em] text-neutral-900'
|
|
}
|
|
>
|
|
{title}
|
|
{titleAccent && <> {titleAccent}</>}
|
|
</h2>
|
|
{subtitle && <p className={'mt-6 max-w-2xl text-lg leading-relaxed text-neutral-600'}>{subtitle}</p>}
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|