extra bits
This commit is contained in:
Emily Neighbour
parent
06403d254f
commit
8fefc67428
@ -1,61 +1,59 @@
|
||||
"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')" }}
|
||||
>
|
||||
{/* 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">
|
||||
{/* 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>
|
||||
</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.
|
||||
</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.
|
||||
</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">
|
||||
<Image height={100} width={100} src="/education.png" alt="Education Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-2">Education</h3>
|
||||
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
||||
Delivering accessible resources to educate communities on earthquakes.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/research.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-2">Research</h3>
|
||||
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
||||
Advancing scientific studies to deepen understanding of seismic activity.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/tech.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-2">Technology</h3>
|
||||
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
||||
Harnessing innovation for real-time alerts and safety solutions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
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 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>
|
||||
</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.
|
||||
</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.
|
||||
</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">
|
||||
<Image height={100} width={100} src="/education.png" alt="Education Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-2">Education</h3>
|
||||
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
||||
Delivering accessible resources to educate communities on earthquakes.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/research.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-2">Research</h3>
|
||||
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
||||
Advancing scientific studies to deepen understanding of seismic activity.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
||||
<Image height={100} width={100} src="/tech.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
|
||||
<h3 className="text-xl font-bold text-black mb-2">Technology</h3>
|
||||
<p className="text-sm text-black text-center max-w-xs opacity-90">
|
||||
Harnessing innovation for real-time alerts and safety solutions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default OurMission;
|
||||
@ -1,75 +1,73 @@
|
||||
"use client";
|
||||
const teamMembers = [
|
||||
{
|
||||
name: "Tim Howitz",
|
||||
title: "Chief Crack Inspector",
|
||||
description:
|
||||
"Tim is responsible for analysing structures on a day-to-day basis. In his home life he is a keen outdoors enthusiast, with three kids and a dog.",
|
||||
image: "/Timthescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Emily Neighbour",
|
||||
title: "Chief Software Engineer",
|
||||
description:
|
||||
"Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching, and becoming a mute.",
|
||||
image: "/Emilythescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Izzy Patterson",
|
||||
title: "Chief Geologist",
|
||||
description:
|
||||
"Izzy's team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them.",
|
||||
image: "/Izzythescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Lukeshan Thananchayan",
|
||||
title: "Chief Duster",
|
||||
description:
|
||||
"Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure, he likes to play Monopoly on repeat. Maybe one day he'll get a hotel!",
|
||||
image: "/Lukeshanthescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Tim Howitz",
|
||||
title: "Chief Crack Inspector",
|
||||
description:
|
||||
"Tim is responsible for analysing structures on a day-to-day basis. In his home life he is a keen outdoors enthusiast, with three kids and a dog.",
|
||||
image: "/Timthescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Emily Neighbour",
|
||||
title: "Chief Software Engineer",
|
||||
description:
|
||||
"Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching, and becoming a mute.",
|
||||
image: "/Emilythescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Izzy Patterson",
|
||||
title: "Chief Geologist",
|
||||
description:
|
||||
"Izzy's team are responsible for inspecting the rocks that make up our planet. For enjoyment she likes to look at rocks, sometimes she likes to lick them.",
|
||||
image: "/Izzythescientist.PNG",
|
||||
},
|
||||
{
|
||||
name: "Lukeshan Thananchayan",
|
||||
title: "Chief Duster",
|
||||
description:
|
||||
"Lukeshan and his team look at the dust particles created by an earthquake and how to minimise their damage. For pleasure, he likes to play Monopoly on repeat. Maybe one day he'll get a hotel!",
|
||||
image: "/Lukeshanthescientist.PNG",
|
||||
},
|
||||
];
|
||||
export default function Page() {
|
||||
return (
|
||||
<div
|
||||
className="min-h-screen relative flex flex-col items-center justify-center px-4 py-20"
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
{/* Team Members Section */}
|
||||
<div className="relative z-10 flex flex-col items-center gap-6 w-full max-w-3xl">
|
||||
{teamMembers.map((member, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex bg-white bg-opacity-90 rounded-3xl border border-neutral-200 w-full shadow-md hover:shadow-lg transition-shadow duration-300"
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="flex items-center ml-6">
|
||||
<div className="relative w-20 h-20">
|
||||
<div className="absolute inset-0 rounded-full overflow-hidden ring-4 ring-neutral-100">
|
||||
<img src={member.image} alt={member.name} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Text Content */}
|
||||
<div className="flex flex-col items-start pl-8 py-4 pr-6">
|
||||
<h2 className="text-2xl font-bold text-neutral-800">{member.name}</h2>
|
||||
<p className="text-md text-neutral-500 font-semibold">{member.title}</p>
|
||||
<p className="text-neutral-600 mt-3 text-left text-sm leading-relaxed">{member.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
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>
|
||||
<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>
|
||||
</div>
|
||||
{/* Team Members Section */}
|
||||
<div className="relative z-10 flex flex-col items-center gap-6 w-full max-w-3xl">
|
||||
{teamMembers.map((member, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex bg-white bg-opacity-90 rounded-3xl border border-neutral-200 w-full shadow-md hover:shadow-lg transition-shadow duration-300"
|
||||
>
|
||||
{/* Image */}
|
||||
<div className="flex items-center ml-6">
|
||||
<div className="relative w-20 h-20">
|
||||
<div className="absolute inset-0 rounded-full overflow-hidden ring-4 ring-neutral-100">
|
||||
<img src={member.image} alt={member.name} className="h-full w-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Text Content */}
|
||||
<div className="flex flex-col items-start pl-8 py-4 pr-6">
|
||||
<h2 className="text-2xl font-bold text-neutral-800">{member.name}</h2>
|
||||
<p className="text-md text-neutral-500 font-semibold">{member.title}</p>
|
||||
<p className="text-neutral-600 mt-3 text-left text-sm leading-relaxed">{member.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user