94 lines
4.8 KiB
TypeScript
94 lines
4.8 KiB
TypeScript
"use client";
|
|
|
|
const OurMission = () => {
|
|
return (
|
|
<div
|
|
className="h-screen relative bg-fixed bg-cover bg-center text-white py-10"
|
|
style={{ backgroundImage: "url('destruction.jpg')" }}
|
|
>
|
|
{/* Overlay to Improve Text Readability */}
|
|
<div className="absolute inset-0 bg-black bg-opacity-40"></div>
|
|
|
|
{/* Content Area */}
|
|
<div className="relative z-10 max-w-4xl mx-auto p-5 bg-white bg-opacity-90 shadow-lg rounded-lg">
|
|
<h1 className="text-3xl font-bold text-center text-gray-800 mb-6">Our Mission</h1>
|
|
<p className="text-lg text-gray-600 leading-relaxed mb-4">
|
|
At <span className="font-semibold text-blue-600">Earthquake Awareness Initiative</span>, our mission is to help people
|
|
worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work
|
|
tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events.
|
|
</p>
|
|
<p className="text-lg text-gray-600 leading-relaxed mb-4">
|
|
We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and
|
|
real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster
|
|
resilience against nature's powerful forces.
|
|
</p>
|
|
<div className="flex flex-col md:flex-row md:justify-evenly items-center mt-6">
|
|
<div className="flex flex-col items-center p-10">
|
|
<img src="education.png" alt="Education Icon" className="h-20 w-20 mb-8" />
|
|
<h3 className="text-xl font-bold text-gray-700 mb-2">Education</h3>
|
|
<p className="text-sm text-gray-500 text-center">
|
|
Providing accessible resources to educate people about earthquake preparedness.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center p-10">
|
|
<img src="research.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
|
|
<h3 className="text-xl font-bold text-gray-700 mb-2">Research</h3>
|
|
<p className="text-sm text-gray-500 text-center">
|
|
Supporting scientific studies to enhance understanding of seismic activity.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center p-10">
|
|
<img src="tech.jpg" alt="Technology Icon" className="h-20 w-20 mb-8" />
|
|
<h3 className="text-xl font-bold text-gray-700 mb-2">Technology</h3>
|
|
<p className="text-sm text-gray-500 text-center">
|
|
Leveraging innovation to deliver real-time alerts and safety tools.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
return (
|
|
<div className="min-h-screen bg-neutral-100 flex flex-col items-center justify-center py-10">
|
|
<div className="max-w-4xl mx-auto p-5 bg-white shadow-lg rounded-lg">
|
|
<h1 className="text-3xl font-bold text-center text-neutral-800 mb-6">Our Mission</h1>
|
|
<p className="text-lg text-neutral-600 leading-relaxed mb-4">
|
|
At <span className="font-semibold text-blue-600">Earthquake Awareness Initiative</span>, our mission is to help people
|
|
worldwide prepare for and recover from earthquakes. Through education, research, and innovative technology, we work
|
|
tirelessly to empower communities with the knowledge they need to stay safe before, during, and after seismic events.
|
|
</p>
|
|
<p className="text-lg text-neutral-600 leading-relaxed mb-4">
|
|
We aim to bridge the gap between scientific research and community awareness by providing resources, tools, and
|
|
real-time updates for earthquake preparedness. Together, we aspire to save lives, mitigate impacts, and foster
|
|
resilience against nature's powerful forces.
|
|
</p>
|
|
<div className="flex flex-col md:flex-row md:justify-evenly items-center mt-6">
|
|
<div className="flex flex-col items-center p-4">
|
|
<img src="/images/education-icon.png" alt="Education Icon" className="h-16 w-16 mb-4" />
|
|
<h3 className="text-xl font-bold text-neutral-700 mb-2">Education</h3>
|
|
<p className="text-sm text-neutral-500 text-center">
|
|
Providing accessible resources to educate people about earthquake preparedness.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center p-4">
|
|
<img src="/images/research-icon.png" alt="Research Icon" className="h-16 w-16 mb-4" />
|
|
<h3 className="text-xl font-bold text-neutral-700 mb-2">Research</h3>
|
|
<p className="text-sm text-neutral-500 text-center">
|
|
Supporting scientific studies to enhance understanding of seismic activity.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center p-4">
|
|
<img src="/images/technology-icon.png" alt="Technology Icon" className="h-16 w-16 mb-4" />
|
|
<h3 className="text-xl font-bold text-neutral-700 mb-2">Technology</h3>
|
|
<p className="text-sm text-neutral-500 text-center">
|
|
Leveraging innovation to deliver real-time alerts and safety tools.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OurMission;
|