thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: thowitz-work:1c08f0364c63755de46c0ab29e8096c5d30ceb9c
Branches Tags
thowitz-work:master
..
compare: thowitz-work:031ada530b175d855416aec869c9ad983d535232
Branches Tags
thowitz-work:master

No commits in common. "1c08f0364c63755de46c0ab29e8096c5d30ceb9c" and "031ada530b175d855416aec869c9ad983d535232" have entirely different histories.
1c08f0364c ... 031ada530b

1 changed files with 17 additions and 11 deletions
Show Stats Expand all files Collapse all files

28
src/app/our-mission/page.tsx
View File

@ -1,20 +1,21 @@
"use client"; "use client";
import Image from "next/image"; import Image from "next/image";
import BottomFooter from "@components/BottomFooter"; import BottomFooter from "@components/BottomFooter";
function OurMission() { function OurMission() {
return ( return (
<div <div
className="relative bg-fixed bg-cover bg-center text-white" className="relative bg-fixed bg-cover bg-center text-white "
style={{ backgroundImage: "url('destruction.jpg')", overflow: "hidden" }} style={{ backgroundImage: "url('destruction.jpg')", overflow: "hidden" }}
> >
{/* Overlay for Readability */}
{/*<div className="absolute inset-0 bg-black bg-opacity-50"></div>*/}
{/* Centered content */} {/* Centered content */}
<div className="relative z-20 flex flex-col items-center justify-center"> <div className="relative z-20 flex flex-col items-center justify-center py-auto">
{/* Title & Mission Statement */} {/* Title & Mission Statement */}
<div className="flex flex-col items-center mb-20 mt-24"> <div className="mb-10 flex flex-col items-center">
<h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg text-white">Our Mission</h1> <h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg text-black">Our Mission</h1>
<p className="text-lg text-center max-w-2xl text-white drop-shadow-md">Earthquake awareness accessible for everyone</p> <p className="text-lg text-center max-w-2xl text-gray-800 drop-shadow-md">Earthquake awareness accessible for everyone</p>
</div> </div>
{/* Content Area */} {/* Content Area */}
<div className="max-w-5xl w-full p-8 bg-white bg-opacity-90 shadow-xl rounded-3xl"> <div className="max-w-5xl w-full p-8 bg-white bg-opacity-90 shadow-xl rounded-3xl">
@ -23,9 +24,15 @@ function OurMission() {
and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative
technology combine together. technology combine together.
</p> </p>
<div className="flex justify-center mb-6"> <div className="flex justify-center mb-6">
<Image src="/logo.png" width={100} height={100} alt="Tremor Tracker Logo" className="h-200 w-200 object-contain" /> <Image
</div> src="/logo.png"
width={100} // Adjust as needed
height={100} // Adjust as needed
alt="Tremor Tracker Logo"
className="h-200 w-200 object-contain"
/>
</div>
<p className="text-xl text-black leading-relaxed mb-8 max-w-3xl mx-auto"> <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 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 preparedness for earthquakes in order to save lives, improve recovery efficiency, and build resilience against seismic
@ -56,9 +63,8 @@ function OurMission() {
</div> </div>
</div> </div>
</div> </div>
<BottomFooter /> <BottomFooter />
</div> </div>
); );
} }
export default OurMission; export default OurMission;