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";
import Image from 'next/image';
import Image from "next/image";
const OurMission = () => {
return (
<div
className="min-h-screen relative bg-fixed bg-cover bg-center text-white"
style={{ backgroundImage: "url('destruction.jpg')" }}
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 min-h-screen">
<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>
<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.
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.
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">

View File

@ -32,16 +32,14 @@ const teamMembers = [
export default function Page() {
return (
<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" }}
>
{/* Overlay */}
<div className="absolute inset-0 bg-black bg-opacity-50 pointer-events-none"></div>
{/* Header */}
<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">
Meet the Team
</h1>
<h1 className="text-4xl font-bold text-center text-white mb-4 tracking-tight drop-shadow-lg">Meet the Team</h1>
<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:
</p>