Merge branch 'master' of ssh://stash.dyson.global.corp:7999/~thowitz/tremor-tracker

package-lock.json

@@ -35,7 +35,7 @@
                 "react-leaflet": "^5.0.0",
                 "react-node": "^1.0.2",
                 "swr": "^2.3.3",
-                "zod": "^3.25.3"
+                "zod": "^3.25.28"
             },
             "devDependencies": {
                 "@eslint/eslintrc": "^3",
@@ -8095,9 +8095,9 @@
             }
         },
         "node_modules/zod": {
-            "version": "3.25.3",
-            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.3.tgz",
-            "integrity": "sha512-VGZqnyYNrl8JpEJRZaFPqeVNIuqgXNu4cXZ5cOb6zEUO1OxKbRnWB4UdDIXMmiERWncs0yDQukssHov8JUxykQ==",
+            "version": "3.25.28",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.28.tgz",
+            "integrity": "sha512-/nt/67WYKnr5by3YS7LroZJbtcCBurDKKPBPWWzaxvVCGuG/NOsiKkrjoOhI8mJ+SQUXEbUzeB3S+6XDUEEj7Q==",
             "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/colinhacks"

package.json

@@ -38,7 +38,7 @@
         "react-leaflet": "^5.0.0",
         "react-node": "^1.0.2",
         "swr": "^2.3.3",
-        "zod": "^3.25.3"
+        "zod": "^3.25.28"
     },
     "devDependencies": {
         "@eslint/eslintrc": "^3",

public/Scientists.csv

@@ -5,7 +5,7 @@ Dr. Izzy Patterson,Senior,None
 Dr. Hiroshi Takeda,Senior,None
 Dr. Miriam Hassan,Senior,None
 Dr. Alice Johnson,Senior,None
-Dr. Natalia Petrova,Junior,Dr. Izzy Patteron
+Dr. Natalia Petrova,Junior,Dr. Izzy Patterson
 Dr. Li Cheng,Junior,Dr. Rajiv Menon
 Dr. Javier Ortega,Junior,Dr. Izzy Patterson
 Dr. Priya Sharma,Junior,Dr. Hiroshi Takeda

public/Users.csv

@@ -1,16 +1,16 @@
 id,createdAt,Name,Email,PasswordHash,Role,Scientist,PurchasedArtefacts,Requests
-1,2024-05-01T09:00:00,Dr. Emily Neighbour Carter,emily.carter@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
+1,2024-05-01T09:00:00,Dr. Emily Neighbour Carter,emily.neighbour@dyson.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 2,2024-05-01T09:05:00,Dr. Rajiv Menon,rajiv.menon@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
-3,2024-05-01T09:10:00,Dr. Izzy Patterson,izzy.patterson@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
+3,2024-05-01T09:10:00,Dr. Izzy Patterson,izzy.patterson@dyson.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 4,2024-05-01T09:15:00,Dr. Hiroshi Takeda,hiroshi.takeda@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 5,2024-05-01T09:20:00,Dr. Miriam Hassan,miriam.hassan@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 6,2024-05-01T09:25:00,Dr. Alice Johnson,alice.johnson@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
-7,2024-05-01T09:30:00,Tim Howitz,tim.howitz@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,ADMIN,null,[],[]
+7,2024-05-01T09:30:00,Tim Howitz,tim.howitz@dyson.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,ADMIN,null,[],[]
 8,2024-05-01T09:35:00,Dr. Natalia Petrova,natalia.petrova@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 9,2024-05-01T09:40:00,Dr. Li Cheng,li.cheng@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 10,2024-05-01T09:45:00,Dr. Javier Ortega,javier.ortega@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 11,2024-05-01T09:50:00,Dr. Priya Sharma,priya.sharma@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
-12,2024-05-01T09:55:00,Dr. Lukeshan Thananchayan,lukeshan.thananchayan@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
+12,2024-05-01T09:55:00,Dr. Lukeshan Thananchayan,lukeshan.thananchayan@dyson.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 13,2024-05-01T10:00:00,Dr. Elena Fischer,elena.fischer@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 14,2024-05-01T10:05:00,Dr. Mohammed Al-Farsi,mohammed.alfarsi@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]
 15,2024-05-01T10:10:00,Dr. Jane Wong,jane.wong@example.com,$2b$10$edPB/.npmb4FgU.rIoliMOE7JZrxYlRsNmbRXBMgqxVXw9LKdbpSW,SCIENTIST,null,[],[]

src/app/api/import-scientists/route.ts

@@ -2,8 +2,9 @@ import { parse } from "csv-parse/sync";
 import fs from "fs/promises";
 import { NextResponse } from "next/server";
 import path from "path";
-import { prisma } from "@utils/prisma";
+
 import { getRandomNumber } from "@utils/maths";
+import { prisma } from "@utils/prisma";
 
 const csvFilePath = path.resolve(process.cwd(), "public/scientists.csv");
 

src/app/contact-us/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 import Image from "next/image";
 import React, { useState } from "react";
+import BottomFooter from "@components/BottomFooter";
 
 const ContactUs = () => {
 	const [formData, setFormData] = useState({
@@ -144,6 +145,7 @@ const ContactUs = () => {
 					</div>
 				</div>
 			</div>
+            <BottomFooter />
 		</div>
 	);
 };

src/app/earthquakes/page.tsx

@@ -38,6 +38,7 @@ export default function Earthquakes() {
 				button2Name="Search Earthquakes"
 			></Sidebar>
 			{/* <SidebarTest></SidebarTest> */}
+            
 		</div>
 	);
 }

src/app/globals.css

@@ -38,6 +38,30 @@ body {
     @apply text-xs text-neutral-600 !important;
 }
 
-.mapboxgl-popup-content p + p {
+.mapboxgl-popup-content p+p {
     @apply text-neutral-500 !important;
 }
+
+.icon-link {
+    /* default styles if needed */
+}
+
+.icon-link:hover,
+.icon-link:focus {
+    background-color: #16424b;
+}
+
+.icon-link:hover h3,
+.icon-link:focus h3,
+.icon-link:hover p,
+.icon-link:focus p {
+    color: #fff !important;
+}
+
+.icon-link:hover h3,
+.icon-link:hover p,
+.icon-link:focus h3,
+.icon-link:focus p {
+    color: #111;
+    /* or black */
+}

src/app/learn/page.tsx

@@ -0,0 +1,92 @@
+// app/learn/page.tsx
+"use client";
+import Navbar from "@/components/Navbar"; 
+import BottomFooter from "@components/BottomFooter";
+
+export default function LearnPage() {
+  return (
+    <div className="min-h-screen bg-blue-50 flex flex-col">
+      {/* (Optional) Navbar */}
+      {/* <Navbar /> */}
+
+      <main className="flex-1 flex flex-col items-center justify-start pt-12 px-4">
+        <h1 className="text-4xl font-bold mb-4 text-blue-800 text-center">
+          Earthquakes
+        </h1>
+        <p className="max-w-2xl text-lg text-gray-700 mb-6 text-center">
+          <span className="font-bold">In this page, you can learn all about what earthquakes are, and how to keep safe!</span>
+        </p>
+        <div className="max-w-3xl text-base text-gray-600 text-left space-y-8">
+
+          {/* Section 1 */}
+          <section>
+            <p>
+              <span className="font-semibold text-blue-800">What are earthquakes?</span>
+              <br />
+              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.
+            </p>
+          </section>
+
+          {/* Section 2 */}
+          <section>
+            <p>
+              <span className="font-semibold text-blue-800">What are the types of earthquakes?</span>
+              <br />
+              Regions near plate boundaries, such as around the Pacific Ocean ("The Ring of Fire"), experience the most activity.
+            </p>
+          </section>
+
+          {/* Section 3 */}
+          <section>
+            <p>
+              <span className="font-semibold text-blue-800">How can I be prepared?</span>
+            </p>
+            {/* MAIN BULLET POINTS */}
+            <ul className="list-disc list-inside pl-6 space-y-2">
+              <li>
+                <span className="font-bold text-gray-800">Assemble an emergency kit:</span> 
+                This should be stored in your earthquake emergency zone. It may be useful, as in an earthquake, you may lose electricity or water supplies.
+                {/* SUB BULLETS */}
+                <ul className="list-disc list-inside pl-6 mt-1 space-y-1 text-gray-700">
+                  <li>First aid kit and emergency medication</li>
+                  <li>Food (non-perishable)</li>
+                  <li>Bottled water</li>
+                  <li>Torch (flashlight)</li>
+                  <li>Satellite phone</li>
+                  <li>Warm clothing and blankets</li>
+                </ul>
+              </li>
+              <li>
+                <span className="font-bold text-gray-800">Practice the Drop, Cover, and Hold On drill!</span> 
+                This helps you protect yourself from falling objects during an earthquake.
+                {/* Embed YouTube video */}
+                <div className="mt-2 flex justify-center">
+                  <iframe
+                    width="350"
+                    height="200"
+                    className="rounded shadow"
+                    src="https://www.youtube.com/embed/-MKMiFWK6Xk"
+                    title="Drop, Cover, and Hold On - Official Earthquake Drill Video"
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                    allowFullScreen
+                  />
+                </div>
+              </li>
+              <li>
+                <span className="font-bold text-gray-800">Identify a safe zone:</span> 
+                This should be a sturdy place where all members of your household can shelter, such as under a strong table, in a structurally sound room, or your local community’s shared space.
+              </li>
+              <li>
+                <span className="font-bold text-gray-800">Discuss what to do:</span>  
+                Share this information with your family and friends! Talk about what each person would do in an emergency.
+              </li>
+            </ul>
+          </section>
+        </div>
+      </main>
+      <BottomFooter />
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,10 +1,11 @@
 import Image from "next/image";
 import Link from "next/link";
+import BottomFooter from "@components/BottomFooter";
 
 export default function Home() {
 	return (
 		<main className="min-h-screen text-black">
-			<div className="w-full relative overflow-hidden">
+			<div className="w-full relative">
 				<div className="">
 					<Image height={2000} width={2000} alt="Background Image" src="/lava_flows.jpg"></Image>
 				</div>
@@ -17,7 +18,7 @@ export default function Home() {
 			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
 				<Link
 					href="/earthquakes"
-					className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
 					<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
@@ -27,7 +28,7 @@ export default function Home() {
 				</Link>
 				<Link
 					href="/observatories"
-					className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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" />
 					<h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
@@ -37,7 +38,7 @@ export default function Home() {
 				</Link>
 				<Link
 					href="/shop"
-					className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
 					<h3 className="text-xl font-bold text-black mb-4">Artefacts</h3>
@@ -48,18 +49,17 @@ export default function Home() {
 			</div>
 			<p className="mt-18"></p>
 			<section className="min-h-screen text-black">
-				<div className="w-full relative overflow-hidden z-40">
+				<div className="w-full relative z-40">
 					<div className="">
 						<Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg"></Image>
 					</div>
 					<div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
 						<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
-							<h1 className="text-4xl md:text-5xl font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
+							<h1 className="text-4xl md:text-5xl font-sans font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
 								Welcome to Tremor Tracker
 							</h1>
-							<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">
-								TremorTracker empowers communities with real-time earthquake monitoring, and the latest research. Our mission is
-								to make seismic safety and scientific insight accessible to everyone—anywhere on the planet.
+							<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
 							</p>
 							<p className="mt-20"></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>
@@ -109,7 +109,7 @@ export default function Home() {
 			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
 				<Link
 					href="/contact-us"
-					className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
 					<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
@@ -119,7 +119,7 @@ export default function Home() {
 				</Link>
 				<Link
 					href="/our-mission"
-					className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
 					<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
@@ -129,7 +129,7 @@ export default function Home() {
 				</Link>
 				<Link
 					href="/the-team"
-					className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 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="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
 					<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3>
@@ -139,11 +139,12 @@ export default function Home() {
 				</Link>
 			</div>
 			<p className="mt-10"></p>
-			<section style={{ height: 500, overflow: "hidden" }} className="text-black">
+			<section style={{ height: 500}} className="text-black">
 				<div className="w-full relative overflow-hidden z=10">
 					<div className="">
 						<Image height={1000} width={2000} alt="Background Image" src="/scientists.png"></Image>
 					</div>
+                    <BottomFooter />
 				</div>
 			</section>
 		</main>

src/components/BottomFooter.tsx

@@ -0,0 +1,88 @@
+// components/Footer.tsx
+import Link from "next/link";
+import { FaTwitter, FaFacebook, FaYoutube, FaLinkedin } from "react-icons/fa";
+
+export default function Footer() {
+  return (
+    <footer className="bg-[#16424b] text-white pt-12 pb-4 px-6 mt-12">
+      <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-8">
+        {/* Useful Links */}
+        <div className="min-w-[200px] mb-8 md:mb-0 flex-1">
+          <h3 className="font-bold underline text-lg mb-3">Useful links</h3>
+          <ul className="space-y-2">
+            <li>
+              <Link
+                href="https://www.gov.uk/guidance/extreme-weather-and-natural-hazards"
+                className="hover:underline"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Gov.UK guidance
+              </Link>
+            </li>
+            <li>
+              <Link href="https://www.dysoninstitute.ac.uk/about-us/governance/privacy-notices/" 
+              className="hover:underline">
+                Privacy policy
+              </Link>
+            </li>
+            <li>
+              <Link href="https://privacy.dyson.com/en/globalcookiepolicy.aspx" 
+              className="hover:underline">
+                Cookies policy
+              </Link>
+            </li>
+          </ul>
+        </div>
+        {/* Donate Section */}
+        <div className="min-w-[220px] mb-8 md:mb-0 flex-1">
+          <h3 className="font-bold underline text-lg mb-3">Donate</h3>
+          <p className="mb-4">
+            We are a nonprofit entirely funded by your donations, every penny helps provide life saving information.
+          </p>
+          <Link
+            href="#"
+            className="bg-gray-200 hover:bg-blue-600 hover:text-white text-black font-bold rounded-full px-8 py-2 shadow transition-colors duration-200 inline-block text-center"
+          >
+            Donate Now
+          </Link>
+        </div>
+      </div>
+      {/* Bottom bar */}
+      <div className="max-w-6xl mx-auto mt-8 pt-6 flex flex-col md:flex-row items-center justify-between border-t border-gray-200/30">
+        {/* Bottom left: Copyright */}
+        <span className="text-sm flex items-center">
+          <span className="mr-2">&#169;</span> TremorTracker 2025
+        </span>
+        {/* Bottom right: Social icons */}
+        <div className="flex flex-col items-end">
+          <span className="text-sm mb-2">Follow us on</span>
+          <div className="flex space-x-3">
+            {/* Replace src with your icon URLs, or use next/image if preferred */}
+            <a href="#" target="_blank" rel="noopener noreferrer">
+              <img
+                src="instagram.png"
+                alt="instagram"
+                className="h-7 w-7 rounded-full shadow"
+              />
+            </a>
+            <a href="#" target="_blank" rel="noopener noreferrer">
+              <img
+                src="linkedin.png"
+                alt="linkedin"
+                className="h-7 w-7 rounded-full shadow"
+              />
+            </a>
+            <a href="#" target="_blank" rel="noopener noreferrer">
+              <img
+                src="x_logo.jpg"
+                alt="X"
+                className="h-7 w-7 rounded-full shadow"
+              />
+            </a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

src/components/navbar.tsx

@@ -19,10 +19,11 @@ export default function Navbar({}: // currencySelector,
 	const setSelectedCurrency = useStoreActions((actions) => actions.currency.setSelectedCurrency);
 	const navOptions = useMemo(() => ["Earthquakes", "Observatories", "Shop"], []);
 	// const navOptions = useMemo(() => ["Earthquakes"], []);
-	const aboutDropdown = ["Contact Us", "Our Mission", "The Team"];
+	const aboutDropdown = ["Contact Us", "Our Mission", "The Team", "Learn"];
 	// { label: "Our Mission", path: "/our-mission" },
 	// { label: "The Team", path: "/the-team" },
 	// { label: "Contact Us", path: "/contact-us" }]
+    // { label: "Learn", path: "/learn" }]
 	const router = useRouter();
 
 	const [isModalOpen, setIsModalOpen] = useState(false);