learn page format alignment
This commit is contained in:
Emily Neighbour
parent
c1d686b012
commit
3cb2033046
BIN
public/earthquakeRelief.jpg
Normal file
BIN
public/earthquakeRelief.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 319 KiB |
@ -1,43 +1,48 @@
|
||||
// app/learn/page.tsx
|
||||
"use client";
|
||||
import BottomFooter from "@components/BottomFooter";
|
||||
|
||||
export default function LearnPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-blue-50 flex flex-col">
|
||||
{/* (Optional) Navbar */}
|
||||
{/* <Navbar /> */}
|
||||
<div
|
||||
className="min-h-screen bg-fixed bg-cover bg-center flex flex-col relative"
|
||||
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">
|
||||
<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>
|
||||
<main className="flex-1 flex flex-col items-center justify-start pt-16 px-4 relative z-10">
|
||||
{/* Title & subtitle OVER the background (not in the content box) */}
|
||||
<h1 className="text-4xl font-bold mb-4 text-white text-center drop-shadow-lg">Earthquakes</h1>
|
||||
<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>
|
||||
<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>
|
||||
<section className="mb-8">
|
||||
<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 />
|
||||
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>
|
||||
<section className="mb-8">
|
||||
<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 />
|
||||
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>
|
||||
<span className="font-bold text-black md:text-xl">How can I be prepared?</span>
|
||||
</p>
|
||||
{/* MAIN BULLET POINTS */}
|
||||
<ul className="list-disc list-inside pl-6 space-y-2">
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
import BottomFooter from "@components/BottomFooter";
|
||||
|
||||
export default function Home() {
|
||||
@ -16,10 +17,7 @@ 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="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
||||
>
|
||||
<Link 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" />
|
||||
<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">
|
||||
@ -36,10 +34,7 @@ export default function Home() {
|
||||
Find recently active observatories, and newly opened/closed sites
|
||||
</p>
|
||||
</Link>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
||||
>
|
||||
<Link 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" />
|
||||
<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">
|
||||
@ -59,11 +54,16 @@ export default function Home() {
|
||||
Welcome to Tremor Tracker
|
||||
</h1>
|
||||
<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 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="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="text-lg md:text-3xl font-bold text-white w-4/6 mx-auto drop-shadow-md z-10">
|
||||
How do we log earthquakes?
|
||||
@ -107,30 +107,21 @@ export default function Home() {
|
||||
</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="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
||||
>
|
||||
<Link 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" />
|
||||
<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="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
||||
>
|
||||
<Link 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" />
|
||||
<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="icon-link flex flex-col items-center p-6 rounded-xl transition-colors duration-300"
|
||||
>
|
||||
<Link 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" />
|
||||
<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">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user