home page finishes

src/app/page.tsx

@@ -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 ?? [])
+	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 (
 		<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
+								TremorTracker is a non-profit website and research company, that aims to provide seismic education and preparation
-                is seismic education and preparation for all
+								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
+								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, the crust, is made up of large pieces known as tectonic
-                earthquakes happen every day—but most are too small to feel.
+								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="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. 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">
-              <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 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">
+				<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">
 					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
+						<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 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 className="text-sm text-gray-500">{getRelativeDate(eq.date)}</div>
-              </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">
+				<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Contact Information</h1>
-          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">