bottom footer fix
This commit is contained in:
Emily Neighbour
parent
3cb2033046
commit
2c033028cf
@ -10,9 +10,9 @@ export default function LearnPage() {
|
||||
}}
|
||||
>
|
||||
{/* Overlay for readability */}
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50 z-0"></div>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-50"></div>
|
||||
|
||||
<main className="flex-1 flex flex-col items-center justify-start pt-16 px-4 relative z-10">
|
||||
<main className="flex-1 flex flex-col items-center justify-start pt-16 px-4 relative z-20">
|
||||
{/* 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">
|
||||
|
||||
@ -1,88 +1,74 @@
|
||||
// components/Footer.tsx
|
||||
import Link from "next/link";
|
||||
import { FaTwitter, FaFacebook, FaYoutube, FaLinkedin } from "react-icons/fa";
|
||||
import { FaFacebook, FaLinkedin, FaTwitter, FaYoutube } from "react-icons/fa";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="bg-[#16424b] text-white pt-12 pb-4 px-6 mt-12">
|
||||
<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-8">
|
||||
{/* Useful Links */}
|
||||
<div className="min-w-[200px] mb-8 md:mb-0 flex-1">
|
||||
<h3 className="font-bold underline text-lg mb-3">Useful links</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.gov.uk/guidance/extreme-weather-and-natural-hazards"
|
||||
className="hover:underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Gov.UK guidance
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://www.dysoninstitute.ac.uk/about-us/governance/privacy-notices/"
|
||||
className="hover:underline">
|
||||
Privacy policy
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://privacy.dyson.com/en/globalcookiepolicy.aspx"
|
||||
className="hover:underline">
|
||||
Cookies policy
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Donate Section */}
|
||||
<div className="min-w-[220px] mb-8 md:mb-0 flex-1">
|
||||
<h3 className="font-bold underline text-lg mb-3">Donate</h3>
|
||||
<p className="mb-4">
|
||||
We are a nonprofit entirely funded by your donations, every penny helps provide life saving information.
|
||||
</p>
|
||||
<Link
|
||||
href="#"
|
||||
className="bg-gray-200 hover:bg-blue-600 hover:text-white text-black font-bold rounded-full px-8 py-2 shadow transition-colors duration-200 inline-block text-center"
|
||||
>
|
||||
Donate Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* Bottom bar */}
|
||||
<div className="max-w-6xl mx-auto mt-8 pt-6 flex flex-col md:flex-row items-center justify-between border-t border-gray-200/30">
|
||||
{/* Bottom left: Copyright */}
|
||||
<span className="text-sm flex items-center">
|
||||
<span className="mr-2">©</span> TremorTracker 2025
|
||||
</span>
|
||||
{/* Bottom right: Social icons */}
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-sm mb-2">Follow us on</span>
|
||||
<div className="flex space-x-3">
|
||||
{/* Replace src with your icon URLs, or use next/image if preferred */}
|
||||
<a href="#" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src="instagram.png"
|
||||
alt="instagram"
|
||||
className="h-7 w-7 rounded-full shadow"
|
||||
/>
|
||||
</a>
|
||||
<a href="#" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src="linkedin.png"
|
||||
alt="linkedin"
|
||||
className="h-7 w-7 rounded-full shadow"
|
||||
/>
|
||||
</a>
|
||||
<a href="#" target="_blank" rel="noopener noreferrer">
|
||||
<img
|
||||
src="x_logo.jpg"
|
||||
alt="X"
|
||||
className="h-7 w-7 rounded-full shadow"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
return (
|
||||
<footer className="bg-[#16424b] text-white pt-12 pb-4 px-6 mt-12 z-0">
|
||||
<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-8">
|
||||
{/* Useful Links */}
|
||||
<div className="min-w-[200px] mb-8 md:mb-0 flex-1">
|
||||
<h3 className="font-bold underline text-lg mb-3">Useful links</h3>
|
||||
<ul className="space-y-2">
|
||||
<li>
|
||||
<Link
|
||||
href="https://www.gov.uk/guidance/extreme-weather-and-natural-hazards"
|
||||
className="hover:underline"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Gov.UK guidance
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://www.dysoninstitute.ac.uk/about-us/governance/privacy-notices/" className="hover:underline">
|
||||
Privacy policy
|
||||
</Link>
|
||||
</li>
|
||||
<li>
|
||||
<Link href="https://privacy.dyson.com/en/globalcookiepolicy.aspx" className="hover:underline">
|
||||
Cookies policy
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* Donate Section */}
|
||||
<div className="min-w-[220px] mb-8 md:mb-0 flex-1">
|
||||
<h3 className="font-bold underline text-lg mb-3">Donate</h3>
|
||||
<p className="mb-4">
|
||||
We are a nonprofit entirely funded by your donations, every penny helps provide life saving information.
|
||||
</p>
|
||||
<Link
|
||||
href="#"
|
||||
className="bg-gray-200 hover:bg-blue-600 hover:text-white text-black font-bold rounded-full px-8 py-2 shadow transition-colors duration-200 inline-block text-center"
|
||||
>
|
||||
Donate Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* Bottom bar */}
|
||||
<div className="max-w-6xl mx-auto mt-8 pt-6 flex flex-col md:flex-row items-center justify-between border-t border-gray-200/30">
|
||||
{/* Bottom left: Copyright */}
|
||||
<span className="text-sm flex items-center">
|
||||
<span className="mr-2">©</span> TremorTracker 2025
|
||||
</span>
|
||||
{/* Bottom right: Social icons */}
|
||||
<div className="flex flex-col items-end">
|
||||
<span className="text-sm mb-2">Follow us on</span>
|
||||
<div className="flex space-x-3">
|
||||
{/* Replace src with your icon URLs, or use next/image if preferred */}
|
||||
<a href="#" target="_blank" rel="noopener noreferrer">
|
||||
<img src="instagram.png" alt="instagram" className="h-7 w-7 rounded-full shadow" />
|
||||
</a>
|
||||
<a href="#" target="_blank" rel="noopener noreferrer">
|
||||
<img src="linkedin.png" alt="linkedin" className="h-7 w-7 rounded-full shadow" />
|
||||
</a>
|
||||
<a href="#" target="_blank" rel="noopener noreferrer">
|
||||
<img src="x_logo.jpg" alt="X" className="h-7 w-7 rounded-full shadow" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user