Merge branch 'master' of ssh://stash.dyson.global.corp:7999/~thowitz/tremor-tracker
This commit is contained in:
IZZY
commit
1cdace58b0
BIN
public/earthquakesMap.jpg
Normal file
BIN
public/earthquakesMap.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 182 KiB |
@ -1,5 +1,5 @@
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
@ -15,21 +15,30 @@ 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 href="/earthquakes" className="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
||||
<Link
|
||||
href="/earthquakes"
|
||||
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="/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">
|
||||
Log new earthquakes with their required details or search past seismic events
|
||||
</p>
|
||||
</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">
|
||||
<Link
|
||||
href="/observatories"
|
||||
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" />
|
||||
<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="flex flex-col items-center p-6 hover:bg-white hover:bg-opacity-10 rounded-xl transition-colors duration-300">
|
||||
<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="/artifactIcon.jpg" alt="Technology Icon" className="h-40 w-40 mb-4" />
|
||||
<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">
|
||||
@ -38,19 +47,43 @@ export default function Home() {
|
||||
</Link>
|
||||
</div>
|
||||
<p className="mt-18"></p>
|
||||
<section className="min-h-screen text-black">
|
||||
<div className="w-full relative overflow-hidden 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-black drop-shadow-lg mb-4 tracking-tight">
|
||||
<h1 className="text-4xl md:text-5xl 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-black w-4/6 mx-auto drop-shadow-md">
|
||||
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 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>
|
||||
<p className="mt-19"></p>
|
||||
</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>
|
||||
<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>
|
||||
@ -66,31 +99,38 @@ export default function Home() {
|
||||
</div>
|
||||
<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">
|
||||
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">
|
||||
Contact Information
|
||||
</h1>
|
||||
<h1 className="text-3xl md:text-3xl font-bold text-black drop-shadow-lg mb-3 tracking-tight">Contact Information</h1>
|
||||
<p className="text-lg md:text-xl text-black drop-shadow-md">
|
||||
Learn about Tremor Tracker's mission, our team or contact us directly:
|
||||
</p>
|
||||
</section>
|
||||
<p className="mt-2"></p>
|
||||
<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">
|
||||
<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-40 w-40 mb-4"/>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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 href="/our-mission" 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="/mission.jpg" alt="Research Icon" className="h-40 w-40 mb-4"/>
|
||||
<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"
|
||||
>
|
||||
<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-40 w-40 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 href="/the-team" 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="/team.jpg" alt="Technology Icon" className="h-40 w-40 mb-4"/>
|
||||
<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"
|
||||
>
|
||||
<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.
|
||||
@ -101,7 +141,6 @@ export default function Home() {
|
||||
</main>
|
||||
);
|
||||
|
||||
|
||||
// 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)]">
|
||||
// <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user