92 lines
4.1 KiB
TypeScript
92 lines
4.1 KiB
TypeScript
|
// app/learn/page.tsx
|
|||
|
|
"use client";
|
|||
|
|
import Navbar from "@/components/Navbar";
|
|||
|
|
import BottomFooter from "@components/BottomFooter";
|
|||
|
|
|
|||
|
|
export default function LearnPage() {
|
|||
|
|
return (
|
|||
|
|
<div className="min-h-screen bg-blue-50 flex flex-col">
|
|||
|
|
{/* (Optional) Navbar */}
|
|||
|
|
{/* <Navbar /> */}
|
|||
|
|
|
|||
|
|
<main className="flex-1 flex flex-col items-center justify-start pt-12 px-4">
|
|||
|
|
<h1 className="text-4xl font-bold mb-4 text-blue-800 text-center">
|
|||
|
|
Earthquakes
|
|||
|
|
</h1>
|
|||
|
|
<p className="max-w-2xl text-lg text-gray-700 mb-6 text-center">
|
|||
|
|
<span className="font-bold">In this page, you can learn all about what earthquakes are, and how to keep safe!</span>
|
|||
|
|
</p>
|
|||
|
|
<div className="max-w-3xl text-base text-gray-600 text-left space-y-8">
|
|||
|
|
|
|||
|
|
{/* Section 1 */}
|
|||
|
|
<section>
|
|||
|
|
<p>
|
|||
|
|
<span className="font-semibold text-blue-800">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>
|
|||
|
|
<p>
|
|||
|
|
<span className="font-semibold text-blue-800">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>
|
|||
|
|
</p>
|
|||
|
|
{/* MAIN BULLET POINTS */}
|
|||
|
|
<ul className="list-disc list-inside pl-6 space-y-2">
|
|||
|
|
<li>
|
|||
|
|
<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 electricity or water supplies.
|
|||
|
|
{/* SUB BULLETS */}
|
|||
|
|
<ul className="list-disc list-inside pl-6 mt-1 space-y-1 text-gray-700">
|
|||
|
|
<li>First aid kit and emergency medication</li>
|
|||
|
|
<li>Food (non-perishable)</li>
|
|||
|
|
<li>Bottled water</li>
|
|||
|
|
<li>Torch (flashlight)</li>
|
|||
|
|
<li>Satellite phone</li>
|
|||
|
|
<li>Warm clothing and blankets</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<span className="font-bold text-gray-800">Practice the Drop, Cover, and Hold On drill!</span>
|
|||
|
|
This helps you protect yourself from falling objects during an earthquake.
|
|||
|
|
{/* Embed YouTube video */}
|
|||
|
|
<div className="mt-2 flex justify-center">
|
|||
|
|
<iframe
|
|||
|
|
width="350"
|
|||
|
|
height="200"
|
|||
|
|
className="rounded shadow"
|
|||
|
|
src="https://www.youtube.com/embed/-MKMiFWK6Xk"
|
|||
|
|
title="Drop, Cover, and Hold On - Official Earthquake Drill Video"
|
|||
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
|||
|
|
allowFullScreen
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<span className="font-bold text-gray-800">Identify a safe zone:</span>
|
|||
|
|
This should be a sturdy place where all members of your household can shelter, such as under a strong table, in a structurally sound room, or your local community’s shared space.
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<span className="font-bold text-gray-800">Discuss what to do:</span>
|
|||
|
|
Share this information with your family and friends! Talk about what each person would do in an emergency.
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
<BottomFooter />
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|