52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
/**
|
|
* Statement Section Component
|
|
*
|
|
* Full-width section with dark background for impactful statements.
|
|
* Used to highlight key messages in the manifesto.
|
|
*/
|
|
|
|
import type { StatementSection as StatementSectionType } from '@/content/schemas/manifesto'
|
|
|
|
interface StatementSectionProps {
|
|
section: StatementSectionType
|
|
}
|
|
|
|
export function StatementSection({ section }: StatementSectionProps) {
|
|
const isDark = section.variant === 'dark' || !section.variant
|
|
|
|
return (
|
|
<section
|
|
className={`w-full ${
|
|
isDark ? 'bg-slate-900' : 'bg-slate-50'
|
|
}`}
|
|
style={{
|
|
padding: '4rem 2rem',
|
|
}}
|
|
aria-labelledby={`statement-${section.id}`}
|
|
>
|
|
<div className="max-w-4xl mx-auto text-center">
|
|
<h2
|
|
id={`statement-${section.id}`}
|
|
className={`font-bold mb-4 md:mb-6 font-serif ${
|
|
isDark ? 'text-white' : 'text-slate-900'
|
|
}`}
|
|
style={{
|
|
fontSize: 'clamp(2rem, 5vw, 4rem)',
|
|
lineHeight: 'var(--line-height-tight)',
|
|
}}
|
|
>
|
|
{section.heading}
|
|
</h2>
|
|
<p
|
|
className={`text-lg md:text-xl font-serif leading-relaxed ${
|
|
isDark ? 'text-slate-300' : 'text-slate-700'
|
|
}`}
|
|
>
|
|
{section.content}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|