extra bits
This commit is contained in:
parent
06403d254f
commit
8fefc67428
@ -1,34 +1,32 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import Image from 'next/image';
|
import Image from "next/image";
|
||||||
|
|
||||||
const OurMission = () => {
|
const OurMission = () => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="min-h-screen relative bg-fixed bg-cover bg-center text-white"
|
className="relative bg-fixed bg-cover bg-center text-white "
|
||||||
style={{ backgroundImage: "url('destruction.jpg')" }}
|
style={{ backgroundImage: "url('destruction.jpg')", height: 845, overflow: "hidden" }}
|
||||||
>
|
>
|
||||||
{/* Overlay for Readability */}
|
{/* Overlay for Readability */}
|
||||||
<div className="absolute inset-0 bg-black bg-opacity-50"></div>
|
<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 min-h-screen">
|
<div className="relative z-20 flex flex-col items-center justify-center h-full py-auto">
|
||||||
{/* Title & Mission Statement */}
|
{/* Title & Mission Statement */}
|
||||||
<div className="mb-10 flex flex-col items-center">
|
<div className="mb-10 flex flex-col items-center">
|
||||||
<h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg">
|
<h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg">Our Mission</h1>
|
||||||
Our Mission
|
<p className="text-lg text-center max-w-2xl text-white drop-shadow-md">Earthquake awareness accessible for everyone</p>
|
||||||
</h1>
|
|
||||||
<p className="text-lg text-center max-w-2xl text-white 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">
|
||||||
<p className="text-xl text-black leading-relaxed mb-6 max-w-3xl mx-auto">
|
<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
|
At <span className="font-bold text-black">Tremor Tracker</span>, we empower communities worldwide to understand where
|
||||||
and recovery. Education, cutting-edge research, and innovative technology combine together.
|
and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative
|
||||||
|
technology combine together.
|
||||||
</p>
|
</p>
|
||||||
<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 events.
|
preparedness for earthquakes in order to save lives, improve recovery efficiency, and build resilience against seismic
|
||||||
|
events.
|
||||||
</p>
|
</p>
|
||||||
<div className="flex flex-col md:flex-row md:justify-evenly gap-8 mt-8">
|
<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">
|
<div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
||||||
|
|||||||
@ -32,16 +32,14 @@ const teamMembers = [
|
|||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="min-h-screen relative flex flex-col items-center justify-center px-4 py-20"
|
className="min-h-screen relative flex flex-col items-center justify-center px-4 py-30"
|
||||||
style={{ backgroundImage: "url('tectonicPlate.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}
|
style={{ backgroundImage: "url('tectonicPlate.jpg')", backgroundSize: "cover", backgroundPosition: "center" }}
|
||||||
>
|
>
|
||||||
{/* Overlay */}
|
{/* Overlay */}
|
||||||
<div className="absolute inset-0 bg-black bg-opacity-50 pointer-events-none"></div>
|
<div className="absolute inset-0 bg-black bg-opacity-50 pointer-events-none"></div>
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="relative z-10 flex flex-col items-center mb-1">
|
<div className="relative z-10 flex flex-col items-center mb-1">
|
||||||
<h1 className="text-4xl font-bold text-center text-white mb-4 tracking-tight drop-shadow-lg">
|
<h1 className="text-4xl font-bold text-center text-white mb-4 tracking-tight drop-shadow-lg">Meet the Team</h1>
|
||||||
Meet the Team
|
|
||||||
</h1>
|
|
||||||
<p className="text-lg text-center max-w-2xl text-white mb-12 drop-shadow-md">
|
<p className="text-lg text-center max-w-2xl text-white mb-12 drop-shadow-md">
|
||||||
Our world-class scientists and engineers drive innovation across the globe. Meet our four department heads:
|
Our world-class scientists and engineers drive innovation across the globe. Meet our four department heads:
|
||||||
</p>
|
</p>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user