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

"use client";

//export default function Page()
const OurMission = () => {
  return (
    <div className="min-h-screen bg-gray-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-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-4">
            <img
              src="/images/education-icon.png"
              alt="Education Icon"
              className="h-16 w-16 mb-4"
            />
            <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-4">
            <img
              src="/images/research-icon.png"
              alt="Research Icon"
              className="h-16 w-16 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-4">
            <img
              src="/images/technology-icon.png"
              alt="Technology Icon"
              className="h-16 w-16 mb-4"
            />
            <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>
  );
};

export default OurMission;