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

home page bits again

Browse Source
This commit is contained in:
Emily Neighbour 2025-05-12 12:58:01 +01:00
parent 7be535c27a
commit 481fadec3c
2 changed files with 117 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/earthquakesMap.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 182 KiB

195
src/app/page.tsx
View File

@ -1,5 +1,5 @@
import Image from 'next/image'; import Image from "next/image";
import Link from 'next/link'; import Link from "next/link";
export default function Home() { export default function Home() {
return ( return (
@ -13,49 +13,82 @@ export default function Home() {
<Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png"></Image> <Image className="mx-auto" height={300} width={1000} alt="Title Image" src="/tremortrackertext.png"></Image>
</div> </div>
</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 href="/earthquakes" className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"> <Link
<Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" /> href="/earthquakes"
<h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3> className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
<p className="text-md text-black text-center max-w-xs opacity-90"> >
Log new earthquakes with their required details or search past seismic events <Image height={100} width={100} src="/earthquake.png" alt="Education Icon" className="h-40 w-40 mb-4" />
</p> <h3 className="text-xl font-bold text-black mb-4">Earthquakes</h3>
</Link> <p className="text-md text-black text-center max-w-xs opacity-90">
<Link href="/observatories" className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"> Log new earthquakes with their required details or search past seismic events
<Image height={100} width={100} src="/observatory.jpg" alt="Research Icon" className="h-40 w-40 mb-4" /> </p>
<h3 className="text-xl font-bold text-black mb-4">Observatories</h3> </Link>
<p className="text-md text-black text-center max-w-xs opacity-90"> <Link
Find recently active observatories, and newly opened/closed sites href="/observatories"
</p> className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
</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"> <Image height={100} width={100} src="/observatory.jpg" alt="Research 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">Observatories</h3>
<h3 className="text-xl font-bold text-black mb-4">Artifacts</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 recently active observatories, and newly opened/closed sites
View or purchase recently discovered artifacts from seismic events </p>
</p> </Link>
</Link> <Link
</div> href="/shop"
<p className="mt-18"></p> className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
<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-black drop-shadow-lg mb-4 tracking-tight"> <Image height={100} width={100} src="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
Welcome to Tremor Tracker <h3 className="text-xl font-bold text-black mb-4">Artifacts</h3>
</h1> <p className="text-md text-black text-center max-w-xs opacity-90">
<p className="text-lg md:text-xl text-black w-4/6 mx-auto drop-shadow-md"> View or purchase recently discovered artifacts from seismic events
TremorTracker empowers communities with real-time earthquake monitoring, preparedness guidance, and the latest research. Our mission is to make seismic safety and scientific insight accessible to everyone—anywhere on the planet. </p>
</p> </Link>
</section> </div>
<p className="mt-19"></p> <p className="mt-18"></p>
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2"> <section className="min-h-screen text-black">
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight"> <div className="w-full relative overflow-hidden z-40">
Recent Earthquake Events <div className="">
</h1> <Image height={2500} width={2000} alt="Background Image" src="/earthquakesMap.jpg"></Image>
<p className="text-lg md:text-xl text-black drop-shadow-md"> </div>
Learn about the most recent earthquake events from around the world: <div className="border absolute top-0 inset-0 bg-gradient-to-b from-transparent via-black/10 to-black/40">
</p> <section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
</section> <h1 className="text-4xl md:text-5xl font-bold text-white drop-shadow-lg mb-4 tracking-tight z-10">
<p className="mt-6"></p> 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>
<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="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?
</p>
<p className="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
What information are we interested in?
</p>
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</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 are observatories? What do they do?
</p>
<p className="text-lg md:text-xl text-white w-4/6 mx-auto drop-shadow-md z-10">info</p>
</section>
</div>
</div>
</section>
<p className="mt-20"></p>
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Recent Earthquake Events</h1>
<p className="text-lg md:text-xl text-black drop-shadow-md">
Learn about the most recent earthquake events from around the world:
</p>
</section>
<p className="mt-6"></p>
<div className="mx-auto w-5/6 px-2 border border-black divide-y bg-white bg-opacity-90 rounded-xl shadow-md"> <div className="mx-auto w-5/6 px-2 border border-black divide-y bg-white bg-opacity-90 rounded-xl shadow-md">
{["Earthquake 1", "Earthquake 2", "Earthquake 3", "Earthquake 4", "Earthquake 5"].map((name) => ( {["Earthquake 1", "Earthquake 2", "Earthquake 3", "Earthquake 4", "Earthquake 5"].map((name) => (
<div className="px-5 py-5" key={name}> <div className="px-5 py-5" key={name}>
@ -65,43 +98,49 @@ export default function Home() {
))} ))}
</div> </div>
<p className="mt-40"></p> <p className="mt-40"></p>
<section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2"> <section className="relative z-10 flex flex-col items-start text-left w-5/6 mx-auto px-2 -mt-5 mb-2">
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight"> <h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Contact Information</h1>
Contact Information <p className="text-lg md:text-xl text-black drop-shadow-md">
</h1> Learn about Tremor Tracker's mission, our team or contact us directly:
<p className="text-lg md:text-xl text-black drop-shadow-md"> </p>
Learn about Tremor Tracker's mission, our team or contact us directly: </section>
</p> <p className="mt-2"></p>
</section> <div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2">
<p className="mt-2"></p> <Link
<div className="flex flex-col md:flex-row md:justify-evenly gap-6 mt-2"> href="/contact-us"
<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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-40 w-40 mb-4"/> >
<h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3> <Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-40 w-40 mb-4" />
<p className="text-md text-black text-center max-w-xs opacity-90"> <h3 className="text-xl font-bold text-black mb-4">Contact us directly</h3>
Visit our socials or leave us a message via phone or email. <p className="text-md text-black text-center max-w-xs opacity-90">
</p> Visit our socials or leave us a message via phone or email.
</Link> </p>
<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"> </Link>
<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-40 w-40 mb-4"/> <Link
<h3 className="text-xl font-bold text-black mb-4">Our Mission</h3> href="/our-mission"
<p className="text-md text-black text-center max-w-xs opacity-90"> className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
Find out more about our purpose and the features we offer. >
</p> <Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-40 w-40 mb-4" />
</Link> <h3 className="text-xl font-bold text-black mb-4">Our Mission</h3>
<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"> <p className="text-md text-black text-center max-w-xs opacity-90">
<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-40 w-40 mb-4"/> Find out more about our purpose and the features we offer.
<h3 className="text-xl font-bold text-black mb-4">Meet the Team</h3> </p>
<p className="text-md text-black text-center max-w-xs opacity-90"> </Link>
Learn about our team leads and their responsibilities. <Link
</p> href="/the-team"
</Link> className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300"
</div> >
<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-40 w-40 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">
Learn about our team leads and their responsibilities.
</p>
</Link>
</div>
<p className="mt-10"></p> <p className="mt-10"></p>
</main> </main>
); );
// return ( // return (
// <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> // <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
// <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start"> // <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">