thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

learn page format alignment

Browse Source
This commit is contained in:
Emily Neighbour 2025-05-28 22:27:58 +01:00
parent c1d686b012
commit 3cb2033046
3 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/earthquakeRelief.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

39
src/app/learn/page.tsx
View File

@ -1,48 +1,53 @@
// app/learn/page.tsx
"use client"; "use client";
import BottomFooter from "@components/BottomFooter"; import BottomFooter from "@components/BottomFooter";
export default function LearnPage() { export default function LearnPage() {
return ( 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> </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 1 */}
<section> <section className="mb-8">
<p> <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 /> <br />
Earthquakes are a shaking of the earth's surface caused by a sudden release of energy underground. They can range in 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 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. happen every day—but most are too small to feel.
</p> </p>
</section> </section>
{/* Section 2 */} {/* Section 2 */}
<section> <section className="mb-8">
<p> <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 /> <br />
Regions near plate boundaries, such as around the Pacific Ocean ("The Ring of Fire"), experience the most activity. Regions near plate boundaries, such as around the Pacific Ocean ("The Ring of Fire"), experience the most activity.
</p> </p>
</section> </section>
{/* Section 3 */} {/* Section 3 */}
<section> <section>
<p> <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> </p>
{/* MAIN BULLET POINTS */} {/* MAIN BULLET POINTS */}
<ul className="list-disc list-inside pl-6 space-y-2"> <ul className="list-disc list-inside pl-6 space-y-2">
<li> <li>
<span className="font-bold text-gray-800">Assemble an emergency kit:</span> <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 This should be stored in your earthquake emergency zone. It may be useful, as in an earthquake, you may lose
electricity or water supplies. electricity or water supplies.
{/* SUB BULLETS */} {/* SUB BULLETS */}

37
src/app/page.tsx
View File

@ -1,5 +1,6 @@
import Image from "next/image"; import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import BottomFooter from "@components/BottomFooter"; import BottomFooter from "@components/BottomFooter";
export default function Home() { export default function Home() {
@ -16,10 +17,7 @@ export default function Home() {
</div> </div>
<p className="mt-2"></p> <p className="mt-2"></p>
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2"> <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" /> <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> <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"> <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 Find recently active observatories, and newly opened/closed sites
</p> </p>
</Link> </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" /> <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> <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"> <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 Welcome to Tremor Tracker
</h1> </h1>
<p className="text-lg md:text-xl font-sans 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 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>
<p className="mt-20"></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-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="mt-20"></p>
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10"> <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? How do we log earthquakes?
@ -107,30 +107,21 @@ export default function Home() {
</section> </section>
<p className="mt-2"></p> <p className="mt-2"></p>
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2"> <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" /> <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> <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"> <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. Visit our socials or leave us a message via phone or email.
</p> </p>
</Link> </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" /> <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> <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"> <p className="text-md text-black text-center max-w-xs opacity-90">
Find out more about our purpose and the features we offer. Find out more about our purpose and the features we offer.
</p> </p>
</Link> </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" /> <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> <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"> <p className="text-md text-black text-center max-w-xs opacity-90">
@ -139,7 +130,7 @@ export default function Home() {
</Link> </Link>
</div> </div>
<p className="mt-10"></p> <p className="mt-10"></p>
<section style={{ height: 500}} className="text-black"> <section style={{ height: 500 }} className="text-black">
<div className="w-full relative overflow-hidden z=10"> <div className="w-full relative overflow-hidden z=10">
<div className=""> <div className="">
<Image height={1000} width={2000} alt="Background Image" src="/scientists.png"></Image> <Image height={1000} width={2000} alt="Background Image" src="/scientists.png"></Image>