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 ( 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 */} {/* Lava Flood Overlay */}
{lavaActive && ( {lavaActive && (
<div className="lava-flood-overlay lava-active fixed inset-0 z-[60] flex items-center justify-center"> <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" src="/lava.jpg"
alt="Lava flood" alt="Lava flood"
draggable={false} 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> </div>
)} )}
@ -117,7 +117,7 @@ const ContactUs = () => {
src="/pulsatingMap.jpg" src="/pulsatingMap.jpg"
alt="Pulsating Map" alt="Pulsating Map"
draggable={false} 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> </div>
)} )}
@ -153,7 +153,7 @@ const ContactUs = () => {
src="/tsunamiWaves.jpg" src="/tsunamiWaves.jpg"
/> />
{/* Overlay for readability */} {/* 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 */} {/* Container */}
<div className="max-w-4xl mx-auto p-5 mt-20"> <div className="max-w-4xl mx-auto p-5 mt-20">
{/* Header */} {/* Header */}

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

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

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

@ -1,20 +1,21 @@
"use client"; "use client";
import Image from "next/image"; import Image from "next/image";
import BottomFooter from "@components/BottomFooter";
function OurMission() { function OurMission() {
return ( return (
<div <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" }} style={{ backgroundImage: "url('destruction.jpg')", 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 h-full py-auto"> <div className="relative z-20 flex flex-col items-center justify-center 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">Our Mission</h1> <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-white drop-shadow-md">Earthquake awareness accessible for everyone</p> <p className="text-lg text-center max-w-2xl text-gray-800 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">
@ -23,6 +24,15 @@ function OurMission() {
and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative
technology combine together. technology combine together.
</p> </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"> <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 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> </div>
</div> </div>
<BottomFooter />
</div> </div>
); );
} }

4
src/app/page.tsx
View File

@ -69,14 +69,14 @@ export default function Home() {
href="/observatories" href="/observatories"
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300" 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> <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"> <p className="text-md text-black text-center max-w-xs opacity-90">
Find recently active observatories, and newly opened/closed sites Find recently active observatories, and newly opened/closed sites
</p> </p>
</Link> </Link>
<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"> <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> <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"> <p className="text-md text-black text-center max-w-xs opacity-90">
View or purchase recently discovered artefacts from seismic events View or purchase recently discovered artefacts from seismic events

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

@ -1,73 +1,84 @@
"use client"; "use client";
import BottomFooter from "@components/BottomFooter";
const teamMembers = [ const teamMembers = [
{ {
name: "Tim Howitz", name: "Tim Howitz",
title: "Chief Crack Inspector", title: "Chief Crack Inspector",
description: 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.", "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", image: "/Timthescientist.PNG",
}, },
{ {
name: "Emily Neighbour", name: "Emily Neighbour",
title: "Chief Software Engineer", title: "Chief Software Engineer",
description: description:
"Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching, and becoming a mute.", "Emily focuses on vital earthquake prediction models. In her personal life, her hobbies include knitting, birdwatching, and becoming a mute.",
image: "/Emilythescientist.PNG", image: "/Emilythescientist.PNG",
}, },
{ {
name: "Izzy Patterson", name: "Izzy Patterson",
title: "Chief Geologist", title: "Chief Geologist",
description: 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.", "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", image: "/Izzythescientist.PNG",
}, },
{ {
name: "Lukeshan Thananchayan", name: "Lukeshan Thananchayan",
title: "Chief Duster", title: "Chief Duster",
description: 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!", "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", image: "/Lukeshanthescientist.PNG",
}, },
]; ];
export default function Page() { export default function Page() {
return ( return (
<div <>
className="min-h-screen relative flex flex-col items-center justify-center px-4 py-30" <div
style={{ backgroundImage: "url('tectonicPlates.png')", backgroundSize: "cover", backgroundPosition: "center" }} className="min-h-screen relative flex flex-col items-center justify-center px-4 py-30"
> style={{
{/* Overlay */} backgroundImage: "url('tectonicPlates.png')",
<div className="absolute inset-0 bg-black bg-opacity-50 pointer-events-none"></div> backgroundSize: "cover",
{/* Header */} backgroundPosition: "center"
<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"> {/* Overlay */}
Our world-class scientists and engineers drive innovation across the globe. Meet our four department heads: <div className="absolute inset-0 bg-black bg-opacity-50 pointer-events-none"></div>
</p> {/* Header */}
</div> <div className="relative z-10 flex flex-col items-center mb-1">
{/* Team Members Section */} <h1 className="text-4xl font-bold text-center text-white mb-4 tracking-tight drop-shadow-lg">Meet the Team</h1>
<div className="relative z-10 flex flex-col items-center gap-6 w-full max-w-3xl"> <p className="text-lg text-center max-w-2xl text-white mb-12 drop-shadow-md">
{teamMembers.map((member, index) => ( Our world-class scientists and engineers drive innovation across the globe. Meet our four department heads:
<div </p>
key={index} </div>
className="flex bg-white bg-opacity-90 rounded-3xl border border-neutral-200 w-full shadow-md hover:shadow-lg transition-shadow duration-300" {/* Team Members Section */}
> <div className="relative z-10 flex flex-col items-center gap-6 w-full max-w-3xl">
{/* Image */} {teamMembers.map((member, index) => (
<div className="flex items-center ml-6"> <div
<div className="relative w-20 h-20"> key={index}
<div className="absolute inset-0 rounded-full overflow-hidden ring-4 ring-neutral-100"> className="flex bg-white bg-opacity-90 rounded-3xl border border-neutral-200 w-full shadow-md hover:shadow-lg transition-shadow duration-300"
<img src={member.image} alt={member.name} className="h-full w-full object-cover" /> >
</div> {/* Image */}
</div> <div className="flex items-center ml-6">
</div> <div className="relative w-20 h-20">
{/* Text Content */} <div className="absolute inset-0 rounded-full overflow-hidden ring-4 ring-neutral-100">
<div className="flex flex-col items-start pl-8 py-4 pr-6"> <img src={member.image} alt={member.name} className="h-full w-full object-cover" />
<h2 className="text-2xl font-bold text-neutral-800">{member.name}</h2> </div>
<p className="text-md text-neutral-500 font-semibold">{member.title}</p> </div>
<p className="text-neutral-600 mt-3 text-left text-sm leading-relaxed">{member.description}</p> </div>
</div> {/* Text Content */}
</div> <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>
</div> <p className="text-md text-neutral-500 font-semibold">{member.title}</p>
</div> <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 />
</>
);
} }