thowitz-work/tremor-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bottom footer fix

Browse Source
This commit is contained in:
Emily Neighbour 2025-05-28 22:31:45 +01:00
parent 3cb2033046
commit 2c033028cf
2 changed files with 72 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/learn/page.tsx
View File

@ -10,9 +10,9 @@ export default function LearnPage() {
}} }}
> >
{/* Overlay for readability */} {/* 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) */} {/* 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> <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"> <p className="max-w-2xl text-lg text-white mb-8 text-center font-bold drop-shadow">

152
src/components/BottomFooter.tsx
View File

@ -1,88 +1,74 @@
// components/Footer.tsx // components/Footer.tsx
import Link from "next/link"; 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() { export default function Footer() {
return ( return (
<footer className="bg-[#16424b] text-white pt-12 pb-4 px-6 mt-12"> <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"> <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-8">
{/* Useful Links */} {/* Useful Links */}
<div className="min-w-[200px] mb-8 md:mb-0 flex-1"> <div className="min-w-[200px] mb-8 md:mb-0 flex-1">
<h3 className="font-bold underline text-lg mb-3">Useful links</h3> <h3 className="font-bold underline text-lg mb-3">Useful links</h3>
<ul className="space-y-2"> <ul className="space-y-2">
<li> <li>
<Link <Link
href="https://www.gov.uk/guidance/extreme-weather-and-natural-hazards" href="https://www.gov.uk/guidance/extreme-weather-and-natural-hazards"
className="hover:underline" className="hover:underline"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Gov.UK guidance Gov.UK guidance
</Link> </Link>
</li> </li>
<li> <li>
<Link href="https://www.dysoninstitute.ac.uk/about-us/governance/privacy-notices/" <Link href="https://www.dysoninstitute.ac.uk/about-us/governance/privacy-notices/" className="hover:underline">
className="hover:underline"> Privacy policy
Privacy policy </Link>
</Link> </li>
</li> <li>
<li> <Link href="https://privacy.dyson.com/en/globalcookiepolicy.aspx" className="hover:underline">
<Link href="https://privacy.dyson.com/en/globalcookiepolicy.aspx" Cookies policy
className="hover:underline"> </Link>
Cookies policy </li>
</Link> </ul>
</li> </div>
</ul> {/* Donate Section */}
</div> <div className="min-w-[220px] mb-8 md:mb-0 flex-1">
{/* Donate Section */} <h3 className="font-bold underline text-lg mb-3">Donate</h3>
<div className="min-w-[220px] mb-8 md:mb-0 flex-1"> <p className="mb-4">
<h3 className="font-bold underline text-lg mb-3">Donate</h3> We are a nonprofit entirely funded by your donations, every penny helps provide life saving information.
<p className="mb-4"> </p>
We are a nonprofit entirely funded by your donations, every penny helps provide life saving information. <Link
</p> href="#"
<Link 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"
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>
Donate Now </div>
</Link> </div>
</div> {/* Bottom bar */}
</div> <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 bar */} {/* Bottom left: Copyright */}
<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"> <span className="text-sm flex items-center">
{/* Bottom left: Copyright */} <span className="mr-2">&#169;</span> TremorTracker 2025
<span className="text-sm flex items-center"> </span>
<span className="mr-2">&#169;</span> TremorTracker 2025 {/* Bottom right: Social icons */}
</span> <div className="flex flex-col items-end">
{/* Bottom right: Social icons */} <span className="text-sm mb-2">Follow us on</span>
<div className="flex flex-col items-end"> <div className="flex space-x-3">
<span className="text-sm mb-2">Follow us on</span> {/* Replace src with your icon URLs, or use next/image if preferred */}
<div className="flex space-x-3"> <a href="#" target="_blank" rel="noopener noreferrer">
{/* Replace src with your icon URLs, or use next/image if preferred */} <img src="instagram.png" alt="instagram" className="h-7 w-7 rounded-full shadow" />
<a href="#" target="_blank" rel="noopener noreferrer"> </a>
<img <a href="#" target="_blank" rel="noopener noreferrer">
src="instagram.png" <img src="linkedin.png" alt="linkedin" className="h-7 w-7 rounded-full shadow" />
alt="instagram" </a>
className="h-7 w-7 rounded-full shadow" <a href="#" target="_blank" rel="noopener noreferrer">
/> <img src="x_logo.jpg" alt="X" className="h-7 w-7 rounded-full shadow" />
</a> </a>
<a href="#" target="_blank" rel="noopener noreferrer"> </div>
<img </div>
src="linkedin.png" </div>
alt="linkedin" </footer>
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>
);
} }