learn icon added to homepage

This commit is contained in:
Emily Neighbour 2025-06-01 11:26:51 +01:00
parent 0ae4d6145c
commit 5e22cef64b
2 changed files with 10 additions and 3 deletions

BIN
public/learn.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

View File

@ -180,26 +180,33 @@ export default function Home() {
<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">
<Image height={100} width={100} src="/contactUs.jpg" alt="Education Icon" className="h-20 w-20 mb-4" />
<Image height={100} width={100} src="/contactUs.jpg" alt="Contact Us 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">
<Image height={100} width={100} src="/mission.jpg" alt="Research Icon" className="h-20 w-20 mb-4" />
<Image height={100} width={100} src="/mission.jpg" alt="Our Mission 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">
<Image height={100} width={100} src="/team.jpg" alt="Technology Icon" className="h-20 w-20 mb-4" />
<Image height={100} width={100} src="/team.jpg" alt="Team 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">
Learn about our team leads and their responsibilities.
</p>
</Link>
<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="/learn.jpg" alt="Learn Icon" className="h-20 w-20 mb-4" />
<h3 className="text-xl font-bold text-black mb-4">Learn</h3>
<p className="text-md text-black text-center max-w-xs opacity-90">
Find out more about earthquakes, what causes them and how to prepare.
</p>
</Link>
</div>
<p className="mt-10"></p>
<section style={{ height: 500 }} className="text-black">