neatening

src/app/contact-us/page.tsx

@@ -98,7 +98,7 @@ const ContactUs = () => {
 	};
 
 	return (
-		<div className="h-full relative text-white border border-black overflow-hidden">
+		<div className="min-h-screen relative text-white border border-black ">
 			{/* Lava Flood Overlay */}
 			{lavaActive && (
 				<div className="lava-flood-overlay lava-active fixed inset-0 z-[60] flex items-center justify-center">
@@ -106,7 +106,7 @@ const ContactUs = () => {
 						src="/lava.jpg"
 						alt="Lava flood"
 						draggable={false}
-						className="w-full h-full object-cover opacity-80 pointer-events-none"
+						className="w-full min-h-screen object-cover opacity-80 pointer-events-none"
 					/>
 				</div>
 			)}
@@ -117,7 +117,7 @@ const ContactUs = () => {
 						src="/pulsatingMap.jpg"
 						alt="Pulsating Map"
 						draggable={false}
-						className="w-full h-full object-cover opacity-80 pointer-events-none"
+						className="w-full min-h-screen object-cover opacity-80 pointer-events-none"
 					/>
 				</div>
 			)}
@@ -153,7 +153,7 @@ const ContactUs = () => {
 				src="/tsunamiWaves.jpg"
 			/>
 			{/* Overlay for readability */}
-			<div className="absolute overflow-hidden w-full h-full bg-gradient-to-b from-black/80 via-black/40 to-black/20 flex flex-col items-center z-20">
+			<div className="relative w-full min-h-screen bg-gradient-to-b from-black/80 via-black/40 to-black/20 flex flex-col items-center z-20">
 				{/* Container */}
 				<div className="max-w-4xl mx-auto p-5 mt-20">
 					{/* Header */}

src/app/earthquakes/page.tsx

@@ -127,7 +127,7 @@ export default function Earthquakes() {
                         .map(
                             (x: Earthquake): GeologicalEvent => ({
                                 id: x.code,
-                                title: `Earthquake in ${x.code.split("-")[2]}`,
+                                title: `Earthquake in ${x.location || (x.code && x.code.split("-")[2])}`,
                                 magnitude: x.magnitude,
                                 longitude: x.longitude,
                                 latitude: x.latitude,

src/app/our-mission/page.tsx

@@ -1,20 +1,21 @@
 "use client";
 import Image from "next/image";
+import BottomFooter from "@components/BottomFooter";
 
 function OurMission() {
 	return (
 		<div
-			className="relative h-full bg-fixed bg-cover bg-center text-white "
+			className="relative bg-fixed bg-cover bg-center text-white "
 			style={{ backgroundImage: "url('destruction.jpg')", overflow: "hidden" }}
 		>
 			{/* Overlay for Readability */}
-			<div className="absolute inset-0 bg-black bg-opacity-50"></div>
+			{/*<div className="absolute inset-0 bg-black bg-opacity-50"></div>*/}
 			{/* Centered content */}
-			<div className="relative z-20 flex flex-col items-center justify-center h-full py-auto">
+			<div className="relative z-20 flex flex-col items-center justify-center py-auto">
 				{/* Title & Mission Statement */}
 				<div className="mb-10 flex flex-col items-center">
-					<h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg">Our Mission</h1>
+					<h1 className="text-4xl font-bold text-center tracking-tight mb-2 drop-shadow-lg text-black">Our Mission</h1>
-					<p className="text-lg text-center max-w-2xl text-white drop-shadow-md">Earthquake awareness accessible for everyone</p>
+					<p className="text-lg text-center max-w-2xl text-gray-800 drop-shadow-md">Earthquake awareness accessible for everyone</p>
 				</div>
 				{/* Content Area */}
 				<div className="max-w-5xl w-full p-8 bg-white bg-opacity-90 shadow-xl rounded-3xl">
@@ -23,6 +24,15 @@ function OurMission() {
 						and why earthquakes occur to enable better preparation and recovery. Education, cutting-edge research, and innovative
 						technology combine together.
 					</p>
+                    <div className="flex justify-center mb-6">
+                        <Image
+                            src="/logo.png"
+                            width={100} // Adjust as needed
+                            height={100} // Adjust as needed
+                             alt="Tremor Tracker Logo"
+                            className="h-200  w-200 object-contain"
+                        />
+                    </div>
 					<p className="text-xl text-black leading-relaxed mb-8 max-w-3xl mx-auto">
 						We combine scientific insights with public awareness, delivering resources, tools, and real-time updates to enhance
 						preparedness for earthquakes in order to save lives, improve recovery efficiency, and build resilience against seismic
@@ -53,6 +63,7 @@ function OurMission() {
 					</div>
 				</div>
 			</div>
+            <BottomFooter />
 		</div>
 	);
 }

src/app/page.tsx

@@ -69,14 +69,14 @@ export default function Home() {
           href="/observatories"
           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" />
+          <Image height={100} width={100} src="/observe.png" alt="Research Icon" className="h-40 w-40 mb-4" />
           <h3 className="text-xl font-bold text-black mb-4">Observatories</h3>
           <p className="text-md text-black text-center max-w-xs opacity-90">
             Find recently active observatories, and newly opened/closed sites
           </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="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
+          <Image height={100} width={100} src="/artefact.png" alt="Technology 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

src/app/the-team/page.tsx

@@ -1,4 +1,5 @@
 "use client";
+import BottomFooter from "@components/BottomFooter";
 const teamMembers = [
     {
         name: "Tim Howitz",
@@ -29,11 +30,17 @@ const teamMembers = [
         image: "/Lukeshanthescientist.PNG",
     },
 ];
+
 export default function Page() {
     return (
+        <>
             <div
                 className="min-h-screen relative flex flex-col items-center justify-center px-4 py-30"
-			style={{ backgroundImage: "url('tectonicPlates.png')", backgroundSize: "cover", backgroundPosition: "center" }}
+                style={{
+                    backgroundImage: "url('tectonicPlates.png')",
+                    backgroundSize: "cover",
+                    backgroundPosition: "center"
+                }}
             >
                 {/* Overlay */}
                 <div className="absolute inset-0 bg-black bg-opacity-50 pointer-events-none"></div>
@@ -69,5 +76,9 @@ export default function Page() {
                     ))}
                 </div>
             </div>
+
+            {/* Footer goes OUTSIDE the flex/padded container, so it spans full width */}
+            <BottomFooter />
+        </>
     );
 }