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

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

@@ -41,3 +41,27 @@ body {
 .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">
+							<p className="text-lg md:text-xl font-sans 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
+								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
-								to make seismic safety and scientific insight accessible to everyone—anywhere on the planet.
 							</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);