tremor-tracker/src/app/our-mission/page.tsx

"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;