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

neatening

Browse Source
This commit is contained in:
IZZY 2025-05-31 22:35:17 +01:00
parent 9a76ba9f54
commit 09b2034522
7 changed files with 102 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/artefact.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
public/observe.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

8
src/app/contact-us/page.tsx
View File

@ -98,7 +98,7 @@ const ContactUs = () => {
};
return (
<div className="h-full relative text-white border border-black overflow-hidden">
<div className="min-h-screen relative text-white border border-black ">
{/* Lava Flood Overlay */}
{lavaActive && (
<div className="lava-flood-overlay lava-active fixed inset-0 z-[60] flex items-center justify-center">
@ -106,7 +106,7 @@ const ContactUs = () => {
src="/lava.jpg"
alt="Lava flood"
draggable={false}
className="w-full h-full object-cover opacity-80 pointer-events-none"
className="w-full min-h-screen object-cover opacity-80 pointer-events-none"
/>
</div>
)}
@ -117,7 +117,7 @@ const ContactUs = () => {
src="/pulsatingMap.jpg"
alt="Pulsating Map"
draggable={false}
className="w-full h-full object-cover opacity-80 pointer-events-none"
className="w-full min-h-screen object-cover opacity-80 pointer-events-none"
/>
</div>
)}
@ -153,7 +153,7 @@ const ContactUs = () => {
src="/tsunamiWaves.jpg"
/>
{/* Overlay for readability */}
<div className="absolute overflow-hidden w-full h-full bg-gradient-to-b from-black/80 via-black/40 to-black/20 flex flex-col items-center z-20">
<div className="relative w-full min-h-screen bg-gradient-to-b from-black/80 via-black/40 to-black/20 flex flex-col items-center z-20">
{/* Container */}
<div className="max-w-4xl mx-auto p-5 mt-20">
{/* Header */}

2
src/app/earthquakes/page.tsx
View File

@ -127,7 +127,7 @@ export default function Earthquakes() {
.map(
(x: Earthquake): GeologicalEvent => ({
id: x.code,
title: `Earthquake in ${x.code.split("-")[2]}`,
title: `Earthquake in ${x.location || (x.code && x.code.split("-")[2])}`,
magnitude: x.magnitude,
longitude: x.longitude,
latitude: x.latitude,

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

@ -1,20 +1,21 @@
"use client";
import Image from "next/image";
import BottomFooter from "@components/BottomFooter";
function OurMission() {
return (
<div
className="relative h-full 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" }}
>
{/* 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 */}
<div className="relative z-20 flex flex-col items-center justify-center h-full py-auto">
<div className="relative z-20 flex flex-col items-center justify-center 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 text-black">Our Mission</h1>
<p className="text-lg text-center max-w-2xl text-gray-800 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">
@ -23,6 +24,15 @@ function OurMission() {
and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative
technology combine together.
</p>
<div className="flex justify-center mb-6">
<Image
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">
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
@ -53,6 +63,7 @@ function OurMission() {
</div>
</div>
</div>
<BottomFooter />
</div>
);
}

4
src/app/page.tsx
View File

@ -69,14 +69,14 @@ export default function Home() {
href="/observatories"
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
>
<Image height={100} width={100} src="/observatory.jpg" alt="Research Icon" className="h-40 w-40 mb-4" />
<Image height={100} width={100} src="/observe.png" alt="Research Icon" className="h-40 w-40 mb-4" />
<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
<p className="text-md text-black text-center max-w-xs opacity-90">
Find recently active observatories, and newly opened/closed sites
</p>
</Link>
<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
<Image height={100} width={100} src="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
<Image height={100} width={100} src="/artefact.png" alt="Technology Icon" className="h-40 w-40 mb-4" />
<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
<p className="text-md text-black text-center max-w-xs opacity-90">
View or purchase recently discovered artefacts from seismic events

147
src/app/the-team/page.tsx
View File

@ -1,73 +1,84 @@
"use client";
import BottomFooter from "@components/BottomFooter";
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-30"
style={{ backgroundImage: "url('tectonicPlates.png')", 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('tectonicPlates.png')",
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>
{/* Footer goes OUTSIDE the flex/padded container, so it spans full width */}
<BottomFooter />
</>
);
}