60 lines
3.2 KiB
TypeScript
60 lines
3.2 KiB
TypeScript
"use client";
|
|
import Image from "next/image";
|
|
|
|
const OurMission = () => {
|
|
return (
|
|
<div
|
|
className="relative bg-fixed bg-cover bg-center text-white "
|
|
style={{ backgroundImage: "url('destruction.jpg')", height: 845, overflow: "hidden" }}
|
|
>
|
|
{/* Overlay for Readability */}
|
|
<div className="absolute inset-0 bg-black bg-opacity-50"></div>
|
|
{/* Centered content */}
|
|
<div className="relative z-20 flex flex-col items-center justify-center h-full py-auto">
|
|
{/* Title & Mission Statement */}
|
|
<div className="mb-10 flex flex-col items-center">
|
|
<h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg">Our Mission</h1>
|
|
<p className="text-lg text-center max-w-2xl text-white drop-shadow-md">Earthquake awareness accessible for everyone</p>
|
|
</div>
|
|
{/* Content Area */}
|
|
<div className="max-w-5xl w-full p-8 bg-white bg-opacity-90 shadow-xl rounded-3xl">
|
|
<p className="text-xl text-black leading-relaxed mb-6 max-w-3xl mx-auto">
|
|
At <span className="font-bold text-black">Tremor Tracker</span>, we empower communities worldwide to understand where
|
|
and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative
|
|
technology combine together.
|
|
</p>
|
|
<p className="text-xl text-black leading-relaxed mb-8 max-w-3xl mx-auto">
|
|
We combine scientific insights with public awareness, delivering resources, tools, and real-time updates to enhance
|
|
preparedness for earthquakes in order to save lives, improve recovery efficiency, and build resilience against seismic
|
|
events.
|
|
</p>
|
|
<div className="flex flex-col md:flex-row md:justify-evenly gap-8 mt-8">
|
|
<div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
|
<Image height={100} width={100} src="/education.png" alt="Education Icon" className="h-20 w-20 mb-4" />
|
|
<h3 className="text-xl font-bold text-black mb-2">Education</h3>
|
|
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
|
Delivering accessible resources to educate communities on earthquakes.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
|
<Image height={100} width={100} src="/research.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
|
|
<h3 className="text-xl font-bold text-black mb-2">Research</h3>
|
|
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
|
Advancing scientific studies to deepen understanding of seismic activity.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
|
<Image height={100} width={100} src="/tech.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
|
|
<h3 className="text-xl font-bold text-black mb-2">Technology</h3>
|
|
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
|
Harnessing innovation for real-time alerts and safety solutions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
export default OurMission;
|