55 lines
2.0 KiB
TypeScript
55 lines
2.0 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { SECTION_IDS, OUR_MISSION_CONTENT } from '../constants';
|
||
|
|
import { BookOpenIcon } from './icons'; // A fitting icon for a manifesto
|
||
|
|
|
||
|
|
const MissionSectionItem: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (
|
||
|
|
<div className="mb-10">
|
||
|
|
<h2 className="font-quicksand text-2xl sm:text-3xl font-bold text-slate-800 mb-4">{title}</h2>
|
||
|
|
<div className="prose prose-lg max-w-none font-inter text-slate-700">
|
||
|
|
{typeof children === 'string' ? <p>{children}</p> : children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
|
||
|
|
const OurMissionSection: React.FC = () => {
|
||
|
|
return (
|
||
|
|
<section
|
||
|
|
id={SECTION_IDS.ourMissionPage}
|
||
|
|
className="py-16 md:py-24 bg-white min-h-screen"
|
||
|
|
>
|
||
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-4xl">
|
||
|
|
<header className="mb-12 md:mb-16 text-center">
|
||
|
|
<BookOpenIcon className="w-16 h-16 mx-auto text-slate-400 mb-4" />
|
||
|
|
<h1 className="font-quicksand text-4xl sm:text-5xl md:text-6xl font-bold text-slate-900">
|
||
|
|
{OUR_MISSION_CONTENT.title}
|
||
|
|
</h1>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div className="prose prose-xl max-w-none font-inter text-slate-700 mb-12">
|
||
|
|
{typeof OUR_MISSION_CONTENT.preamble === 'string'
|
||
|
|
? <p>{OUR_MISSION_CONTENT.preamble}</p>
|
||
|
|
: OUR_MISSION_CONTENT.preamble
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-12">
|
||
|
|
{OUR_MISSION_CONTENT.sections.map((section, index) => (
|
||
|
|
<MissionSectionItem key={index} title={section.title}>
|
||
|
|
{section.content}
|
||
|
|
</MissionSectionItem>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer className="mt-12 pt-8 border-t border-slate-200">
|
||
|
|
<div className="prose prose-lg max-w-none font-inter text-slate-700">
|
||
|
|
<p className="font-semibold">{OUR_MISSION_CONTENT.closingStatement}</p>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default OurMissionSection;
|