Initial commit for iiEasy: all files included

components/OurMissionSection.tsx

@@ -0,0 +1,54 @@
+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;