soroush.asadi
51 lines
1.3 KiB
TypeScript
51 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import { motion } from 'framer-motion';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
type Props = {
|
|
eyebrow: string;
|
|
title: string;
|
|
sub?: string;
|
|
align?: 'center' | 'start';
|
|
className?: string;
|
|
};
|
|
|
|
export function SectionHeader({
|
|
eyebrow,
|
|
title,
|
|
sub,
|
|
align = 'start',
|
|
className,
|
|
}: Props) {
|
|
const isCenter = align === 'center';
|
|
return (
|
|
<motion.header
|
|
initial={{ opacity: 0, y: 24 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-80px' }}
|
|
transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
|
|
className={cn(
|
|
'flex flex-col gap-4',
|
|
isCenter ? 'items-center text-center' : 'items-start',
|
|
'max-w-3xl',
|
|
isCenter && 'mx-auto',
|
|
className,
|
|
)}
|
|
>
|
|
<span className="label-mono inline-flex items-center gap-2">
|
|
<span className="h-px w-8 bg-electric/60" aria-hidden />
|
|
{eyebrow}
|
|
</span>
|
|
<h2 className="font-display text-balance text-[clamp(1.85rem,3.6vw,2.9rem)] font-semibold leading-[1.1] tracking-tight text-white">
|
|
{title}
|
|
</h2>
|
|
{sub && (
|
|
<p className="text-balance text-[clamp(0.98rem,1.4vw,1.1rem)] leading-relaxed text-slate-400">
|
|
{sub}
|
|
</p>
|
|
)}
|
|
</motion.header>
|
|
);
|
|
}
|