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 { TbHexagon } from "react-icons/tb";
import useSWR from "swr";
import BottomFooter from "@components/BottomFooter";
import { createPoster } from "@utils/axiosHelpers";
import getMagnitudeColor from "@utils/getMagnitudeColour";
@ -37,14 +38,9 @@ function MagnitudeNumber({ magnitude }: { magnitude: number }) {
}
export default function Home() {
const { data, error, isLoading } = useSWR(
"/api/earthquakes",
createPoster({ rangeDaysPrev: 6 })
);
const { data, error, isLoading } = useSWR("/api/earthquakes", createPoster({ rangeDaysPrev: 6 }));
// Take 5 most recent
const recents = (data?.earthquakes ?? [])
.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
.slice(0, 5);
const recents = (data?.earthquakes ?? []).sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()).slice(0, 5);
return (
<main className="min-h-screen text-black">
@ -77,7 +73,7 @@ export default function Home() {
</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="/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>
<p className="text-md text-black text-center max-w-xs opacity-90">
View or purchase recently discovered artefacts from seismic events
@ -96,39 +92,53 @@ export default function Home() {
Welcome to Tremor Tracker
</h1>
<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
is seismic education and preparation for all
TremorTracker is a non-profit website and research company, that aims to provide seismic education and aid
preparation
</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-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
in size, from tiny trembles to large quakes, which can cause destruction and even tsunamis. Hundreds of
earthquakes happen every day—but most are too small to feel.
An earthquake is a sudden shaking of the Earth’s surface, triggered by a rapid release of energy deep underground.
This usually happens because the Earth’s outer shell, called the crust, is made up of large pieces known as
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 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">
How do we log earthquakes?
</p>
<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?
</p>
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
<p className="mt-20"></p>
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
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">
What are observatories?
</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">info</p>
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
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>
</div>
</div>
</section>
<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">
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
Recent Earthquake Events
</h1>
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Recent Earthquake Events</h1>
<p className="text-lg md:text-xl text-black drop-shadow-md">
Learn about the most recent earthquake events from around the world:
</p>
@ -152,14 +162,9 @@ export default function Home() {
)}
<div className="flex flex-col gap-4">
{recents.map((eq) => (
<div
key={eq.code}
className="flex items-center justify-between p-4 bg-white rounded-xl shadow border"
>
<div key={eq.code} className="flex items-center justify-between p-4 bg-white rounded-xl shadow border">
<div>
<div className="font-semibold">
Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}
</div>
<div className="font-semibold">Earthquake in {eq.location || (eq.code && eq.code.split("-")[2])}</div>
<div className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div>
</div>
<MagnitudeNumber magnitude={eq.magnitude} />
@ -169,12 +174,8 @@ export default function Home() {
</div>
<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">
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
Find Out More!
</h1>
<p className="text-lg md:text-xl text-black drop-shadow-md">
Explore more of our website...
</p>
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Find Out More!</h1>
<p className="text-lg md:text-xl text-black drop-shadow-md">Explore more of our website...</p>
</section>
<p className="mt-2"></p>
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">