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

homepage info

Browse Source
This commit is contained in:
Emily Neighbour 2025-06-01 11:21:04 +01:00
parent 658cb92ace
commit 0ae4d6145c
1 changed files with 196 additions and 195 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/page.tsx
View File

@ -3,6 +3,7 @@ import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { TbHexagon } from "react-icons/tb"; import { TbHexagon } from "react-icons/tb";
import useSWR from "swr"; import useSWR from "swr";
import BottomFooter from "@components/BottomFooter"; import BottomFooter from "@components/BottomFooter";
import { createPoster } from "@utils/axiosHelpers"; import { createPoster } from "@utils/axiosHelpers";
import getMagnitudeColor from "@utils/getMagnitudeColour"; import getMagnitudeColor from "@utils/getMagnitudeColour";
@ -37,14 +38,9 @@ function MagnitudeNumber({ magnitude }: { magnitude: number }) {
} }
export default function Home() { export default function Home() {
const { data, error, isLoading } = useSWR( const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 }));
"/api/earthquakes",
createPoster({ rangeDaysPrev: 6 })
);
// Take 5 most recent // Take 5 most recent
const recents = (data?.earthquakes ?? []) const recents = (data?.earthquakes ?? []).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, 5);
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
.slice(0, 5);
return ( return (
<main className="min-h-screen text-black"> <main className="min-h-screen text-black">
@ -77,7 +73,7 @@ export default function Home() {
</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="/artefact.png" alt="Technology Icon" className="h-40 w-40 mb-4" /> <Image height={100} width={100} src="/artefact.png" alt="Aftefacts 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
@ -96,39 +92,53 @@ export default function Home() {
Welcome to Tremor Tracker Welcome to Tremor Tracker
</h1> </h1>
<p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10"> <p className="text-lg md:text-xl font-sans text-white w-4/6 mx-auto drop-shadow-md z-10">
TremorTracker is a non-profit website and research company, that aims to provide true, reliable data. Our mission TremorTracker is a non-profit website and research company, that aims to provide seismic education and aid
is seismic education and preparation for all preparation
</p> </p>
<p className="mt-20"></p> <p className="mt-10"></p>
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p> <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is an earthquake?</p>
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10"> <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range An earthquake is a sudden shaking of the Earth’s surface, triggered by a rapid release of energy deep underground.
in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of This usually happens because the Earth’s outer shell, called the crust, is made up of large pieces known as
earthquakes happen every day—but most are too small to feel. tectonic plates. These plates are always moving, but sometimes they get stuck at their edges; when stress builds
up and is finally released, it causes the ground to shake—an earthquake. Earthquakes can vary greatly in size—from
barely noticeable tremors to powerful quakes capable of causing widespread destruction. There are several types:
Tectonic, Volcanic and Collapse earthquakes. Understanding why and how earthquakes happen helps scientists predict
where they are most likely to occur and how to lessen their impact.
</p> </p>
<p className="mt-20"></p> <p className="mt-10"></p>
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10"> <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
How do we log earthquakes? How do we log earthquakes?
</p> </p>
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10"> <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
What information are we interested in? What information are we interested in?
</p> </p>
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p> <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
<p className="mt-20"></p> Scientists record earthquakes using special instruments called seismometers, which detect and measure the
vibrations in the ground. When an earthquake occurs, the seismometer produces a trace known as a seismogram,
showing the strength and duration of the shaking. Information from seismometers around the world is sent to data
centers, where experts analyze it to pinpoint the earthquake’s location, type, depth, and magnitude. This process
is called “logging” or recording earthquakes, and it helps track seismic activity globally.
</p>
<p className="mt-10"></p>
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10"> <p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
What are observatories? What are observatories?
</p> </p>
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">What is their role?</p> <p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p> An earthquake observatory is a specialized facility where scientists monitor and study seismic activity. These
observatories are equipped with sensitive instruments that can detect and record even the smallest tremors deep
within the Earth. Observatories collect important data about the strength, location, and timing of each earthquake
that can be shared with the general public. Scientists at the observatory use this data to better understand how
and why earthquakes occur, track earthquake patterns, and issue warnings if a major quake is detected. The
information gathered also helps in designing safer buildings and improving emergency response plans.
</p>
</section> </section>
</div> </div>
</div> </div>
</section> </section>
<p className="mt-20"></p> <p className="mt-20"></p>
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2"> <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight"> <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Recent Earthquake Events</h1>
Recent Earthquake Events
</h1>
<p className="text-lg md:text-xl text-black drop-shadow-md"> <p className="text-lg md:text-xl text-black drop-shadow-md">
Learn about the most recent earthquake events from around the world: Learn about the most recent earthquake events from around the world:
</p> </p>
@ -152,14 +162,9 @@ export default function Home() {
)} )}
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
{recents.map((eq) => ( {recents.map((eq) => (
<div <div key={eq.code} className="flex items-center justify-between p-4 bg-white rounded-xl shadow border">
key={eq.code}
className="flex items-center justify-between p-4 bg-white rounded-xl shadow border"
>
<div> <div>
<div className="font-semibold"> <div className="font-semibold">Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}</div>
Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
</div>
<div className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div> <div className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div>
</div> </div>
<MagnitudeNumber magnitude={eq.magnitude} /> <MagnitudeNumber magnitude={eq.magnitude} />
@ -169,12 +174,8 @@ export default function Home() {
</div> </div>
<p className="mt-20"></p> <p className="mt-20"></p>
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2"> <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight"> <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Find Out More!</h1>
Find Out More! <p className="text-lg md:text-xl text-black drop-shadow-md">Explore more of our website...</p>
</h1>
<p className="text-lg md:text-xl text-black drop-shadow-md">
Explore more of our website...
</p>
</section> </section>
<p className="mt-2"></p> <p className="mt-2"></p>
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2"> <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">