home page start
This commit is contained in:
parent
be60b811a9
commit
8ef6cccc40
@ -1,4 +1,4 @@
|
|||||||
import Image from "next/image";
|
import Image from 'next/image';
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
@ -12,20 +12,39 @@ 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-18"></p>
|
||||||
<div className="mx-auto mt-20 w-4/6 px-2 border border-black divide-y">
|
<section className="relative z-10 flex flex-col items-center text-center w-full px-4 py-14 mt-6">
|
||||||
{["Earthquake 1", "Earthquake 2", "Earthquake 3"].map((name) => (
|
<h1 className="text-4xl md:text-5xl font-extrabold text-black drop-shadow-lg mb-4 tracking-tight">
|
||||||
|
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>
|
||||||
|
</section>
|
||||||
|
<p className="mt-19"></p>
|
||||||
|
<section className="relative z-10 flex flex-col items-start text-left w-4/6 mx-auto px-2 -mt-5 mb-2">
|
||||||
|
<h1 className="text-3xl md:text-3xl font-extrabold 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">
|
||||||
|
See the most recent earthquake events from around the world.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
<p className="mt-6"></p>
|
||||||
|
<div className="mx-auto w-4/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) => (
|
||||||
<div className="px-5 py-5" key={name}>
|
<div className="px-5 py-5" key={name}>
|
||||||
<p className="ml-3">{name}</p>
|
<p className="ml-3">{name}</p>
|
||||||
<p></p>
|
<p></p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
<p className="mt-96">Spacer</p>
|
<p className="mt-20">Spacer</p>
|
||||||
<p className="mt-96">Spacer</p>
|
<p className="mt-20">Spacer</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">
|
||||||
|
|||||||
@ -40,7 +40,7 @@ export default function Page() {
|
|||||||
{/* Header */}
|
{/* Header */}
|
||||||
<div className="relative z-10 flex flex-col items-center mb-1">
|
<div className="relative z-10 flex flex-col items-center mb-1">
|
||||||
<h1 className="text-4xl font-bold text-center text-white mb-4 tracking-tight drop-shadow-lg">
|
<h1 className="text-4xl font-bold text-center text-white mb-4 tracking-tight drop-shadow-lg">
|
||||||
Meet Our Team
|
Meet the Team
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg text-center max-w-2xl text-white mb-12 drop-shadow-md">
|
<p className="text-lg text-center max-w-2xl text-white mb-12 drop-shadow-md">
|
||||||
Our world-class scientists and engineers drive innovation across the globe. Meet our four department heads:
|
Our world-class scientists and engineers drive innovation across the globe. Meet our four department heads:
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user