learn page format alignment

src/app/learn/page.tsx

@@ -1,43 +1,48 @@
-// app/learn/page.tsx
 "use client";
 import BottomFooter from "@components/BottomFooter";
 
 export default function LearnPage() {
 	return (
-		<div className="min-h-screen bg-blue-50 flex flex-col">
+		<div
-			{/* (Optional) Navbar */}
+			className="min-h-screen bg-fixed bg-cover bg-center flex flex-col relative"
-			{/* <Navbar /> */}
+			style={{
+				backgroundImage: "url('/earthquakeRelief.jpg')", // adjust path as needed
+			}}
+		>
+			{/* Overlay for readability */}
+			<div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
 
-			<main className="flex-1 flex flex-col items-center justify-start pt-12 px-4">
+			<main className="flex-1 flex flex-col items-center justify-start pt-16 px-4 relative z-10">
-				<h1 className="text-4xl font-bold mb-4 text-blue-800 text-center">Earthquakes</h1>
+				{/* Title & subtitle OVER the background (not in the content box) */}
-				<p className="max-w-2xl text-lg text-gray-700 mb-6 text-center">
+				<h1 className="text-4xl font-bold mb-4 text-white text-center drop-shadow-lg">Earthquakes</h1>
-					<span className="font-bold">In this page, you can learn all about what earthquakes are, and how to keep safe!</span>
+				<p className="max-w-2xl text-lg text-white mb-8 text-center font-bold drop-shadow">
+					In this page, you can learn all about what earthquakes are, and how best to keep safe!
 				</p>
-				<div className="max-w-3xl text-base text-gray-600 text-left space-y-8">
+
+				{/* Content box: all following info INSIDE */}
+				<div className="max-w-4xl w-full bg-white bg-opacity-90 rounded-xl shadow-2xl mx-auto mb-12 p-8 md:p-10">
 					{/* Section 1 */}
-					<section>
+					<section className="mb-8">
 						<p>
-							<span className="font-semibold text-blue-800">What are earthquakes?</span>
+							<span className="font-bold text-black md:text-xl">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>
+					<section className="mb-8">
 						<p>
-							<span className="font-semibold text-blue-800">What are the types of earthquakes?</span>
+							<span className="font-bold text-black md:text-xl">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>
+							<span className="font-bold text-black md:text-xl">How can I be prepared?</span>
 						</p>
 						{/* MAIN BULLET POINTS */}
 						<ul className="list-disc list-inside pl-6 space-y-2">

src/app/page.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import Link from "next/link";
+
 import BottomFooter from "@components/BottomFooter";
 
 export default function Home() {
@@ -16,10 +17,7 @@ export default function Home() {
 			</div>
 			<p className="mt-2"></p>
 			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
-				<Link
+				<Link href="/earthquakes" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					href="/earthquakes"
-					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>
 					<p className="text-md text-black text-center max-w-xs opacity-90">
@@ -36,10 +34,7 @@ export default function Home() {
 						Find recently active observatories, and newly opened/closed sites
 					</p>
 				</Link>
-				<Link
+				<Link href="/shop" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					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" />
 					<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">
@@ -59,11 +54,16 @@ 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 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>
-							<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">
+								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>
 							<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">
 								How do we log earthquakes?
@@ -107,30 +107,21 @@ export default function Home() {
 			</section>
 			<p className="mt-2"></p>
 			<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
-				<Link
+				<Link href="/contact-us" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					href="/contact-us"
-					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>
 					<p className="text-md text-black text-center max-w-xs opacity-90">
 						Visit our socials or leave us a message via phone or email.
 					</p>
 				</Link>
-				<Link
+				<Link href="/our-mission" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					href="/our-mission"
-					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>
 					<p className="text-md text-black text-center max-w-xs opacity-90">
 						Find out more about our purpose and the features we offer.
 					</p>
 				</Link>
-				<Link
+				<Link href="/the-team" className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300">
-					href="/the-team"
-					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>
 					<p className="text-md text-black text-center max-w-xs opacity-90">