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

home page finishes

Browse Source
This commit is contained in:
Emily Neighbour 2025-05-31 22:59:24 +01:00
parent ca80a2e043
commit 88ef137449
1 changed files with 186 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/app/page.tsx
View File

@ -1,11 +1,12 @@
"use client";
import useSWR from "swr";
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";
import { TbHexagon } from "react-icons/tb";
// formats the date
function getRelativeDate(dateString: string): string {
@ -41,9 +42,7 @@ export default function Home() {
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">
@ -95,39 +94,54 @@ 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 preparation
for all
</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, 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 and even triggering tsunamis.
While hundreds of earthquakes occur around the world every day, most are too small to be felt. There are several
types of earthquakes: 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. This process is called “logging” or recording earthquakes, and
it helps track seismic activity globally. We then log earthquake data to allow it to be accessed by the general
public. This information includes the name, location, magnitude, type, depth, etc.
</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 our scientists monitor and study seismic activity. These
observatories are equipped with sensitive instruments, like seismometers and computers, 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. Scientists at the observatory log this data and use it 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>
@ -151,29 +165,19 @@ 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="text-sm text-gray-500">
{getRelativeDate(eq.date)}
</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} />
</div>
))}
</div>
</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">
Contact Information
</h1>
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Contact Information</h1>
<p className="text-lg md:text-xl text-black drop-shadow-md">
Learn about Tremor Tracker's mission, our team or contact us directly:
</p>
@ -214,7 +218,6 @@ export default function Home() {
</main>
);
// return (
// <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
// <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">