extra bits

This commit is contained in:
Emily Neighbour 2025-05-12 13:49:15 +01:00
parent 06403d254f
commit 8fefc67428
2 changed files with 124 additions and 128 deletions

View File

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

View File

@ -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>