34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
interface SectionHeaderProps {
|
|
index: string
|
|
title: string
|
|
subtitle?: string
|
|
className?: string
|
|
}
|
|
|
|
export function SectionHeader({ index, title, subtitle, className = '' }: SectionHeaderProps) {
|
|
return (
|
|
<div className={`mb-12 md:mb-16 ${className}`}>
|
|
<div className="flex items-center gap-3 mb-3.5">
|
|
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-medium text-brand-blue bg-brand-blue/10 border border-brand-blue/25 shadow-sm">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-brand-blue" />
|
|
{index}
|
|
</span>
|
|
<div className="h-px flex-1 bg-gradient-to-r from-brand-blue/20 via-white/[0.08] to-transparent" />
|
|
</div>
|
|
<h2
|
|
className="text-2xl sm:text-3xl md:text-4xl font-medium text-neutral-50 tracking-tight leading-[1.22] break-keep"
|
|
style={{ wordBreak: 'keep-all', overflowWrap: 'break-word' }}
|
|
>
|
|
{title}
|
|
</h2>
|
|
{subtitle && (
|
|
<p
|
|
className="mt-3 max-w-2xl text-sm sm:text-base text-neutral-300 leading-relaxed font-normal break-keep"
|
|
style={{ wordBreak: 'keep-all', overflowWrap: 'break-word' }}
|
|
>
|
|
{subtitle}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|