-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #32 from Tony-ArtZ/main
[FIX] #3 : Improve Footer UI
- Loading branch information
Showing
2 changed files
with
91 additions
and
36 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,41 +1,89 @@ | ||
| import React from 'react'; | ||
| import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from 'react-icons/fa'; | ||
| import { | ||
| FaFacebook, | ||
| FaTwitter, | ||
| FaInstagram, | ||
| FaLinkedin, | ||
| FaLeaf, | ||
| FaEnvelope, | ||
| } from "react-icons/fa"; | ||
|
|
||
| const Footer = () => { | ||
| return ( | ||
| <footer className="bg-gray-800 text-white py-8"> | ||
| <div className="container mx-auto px-4"> | ||
| <div className="flex flex-col md:flex-row justify-between items-center"> | ||
| <div className="mb-4 md:mb-0"> | ||
| <h1 className="text-2xl font-bold">FarmRuler</h1> | ||
| <p className="text-sm">© 2023 FarmRuler. All rights reserved.</p> | ||
| </div> | ||
| <div className="flex space-x-4"> | ||
| <a href="https://facebook.com" target="_blank" rel="noopener noreferrer"> | ||
| <FaFacebook className="text-2xl hover:text-gray-400" /> | ||
| </a> | ||
| <a href="https://twitter.com" target="_blank" rel="noopener noreferrer"> | ||
| <FaTwitter className="text-2xl hover:text-gray-400" /> | ||
| </a> | ||
| <a href="https://instagram.com" target="_blank" rel="noopener noreferrer"> | ||
| <FaInstagram className="text-2xl hover:text-gray-400" /> | ||
| </a> | ||
| <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer"> | ||
| <FaLinkedin className="text-2xl hover:text-gray-400" /> | ||
| </a> | ||
| </div> | ||
| </div> | ||
| <div className="mt-4 flex flex-col md:flex-row justify-between items-center"> | ||
| <div className="flex space-x-4"> | ||
| <a href="/about" className="hover:text-gray-400">About Us</a> | ||
| <a href="/contact" className="hover:text-gray-400">Contact</a> | ||
| <a href="/privacy" className="hover:text-gray-400">Privacy Policy</a> | ||
| <a href="/terms" className="hover:text-gray-400">Terms of Service</a> | ||
| </div> | ||
| </div> | ||
| const socialIcons = [ | ||
| { Icon: FaFacebook, href: "https://facebook.com", label: "Facebook" }, | ||
| { Icon: FaTwitter, href: "https://twitter.com", label: "Twitter" }, | ||
| { Icon: FaInstagram, href: "https://instagram.com", label: "Instagram" }, | ||
| { Icon: FaLinkedin, href: "https://linkedin.com", label: "LinkedIn" }, | ||
| ]; | ||
|
|
||
| const links = [ | ||
| { href: "/about", text: "About Us" }, | ||
| { href: "/contact", text: "Contact" }, | ||
| { href: "/privacy", text: "Privacy Policy" }, | ||
| { href: "/terms", text: "Terms of Service" }, | ||
| ]; | ||
|
|
||
| return ( | ||
| <footer className="bg-gray-900 text-gray-300 py-10"> | ||
| <div className="container mx-auto px-6"> | ||
| <div className="flex flex-col md:flex-row justify-between items-center mb-8 space-y-6 md:space-y-0"> | ||
| {/* Brand Section */} | ||
| <div className="flex items-center space-x-3 transform hover:scale-105 transition-transform duration-300"> | ||
| <FaLeaf className="text-green-500 text-5xl" /> | ||
| <div> | ||
| <h1 className="text-3xl font-semibold">FarmRuler</h1> | ||
| <p className="text-sm text-gray-400"> | ||
| Empowering sustainable agriculture | ||
| </p> | ||
| </div> | ||
| </footer> | ||
| ); | ||
| </div> | ||
| {/* Social Media Icons */} | ||
| <div className="flex space-x-6"> | ||
| {socialIcons.map(({ Icon, href, label }) => ( | ||
| <a | ||
| key={href} | ||
| href={href} | ||
| aria-label={label} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| className="text-2xl text-gray-300 hover:text-green-500 transition-colors duration-200 transform hover:scale-110" | ||
| > | ||
| <Icon /> | ||
| </a> | ||
| ))} | ||
| </div> | ||
| </div> | ||
| {/* Links Section */} | ||
| <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0"> | ||
| <nav className="flex flex-wrap justify-center md:justify-start gap-6"> | ||
| {links.map(({ href, text }) => ( | ||
| <a | ||
| key={href} | ||
| href={href} | ||
| className="text-sm hover:text-green-500 transition-colors duration-200 transform hover:scale-105" | ||
| > | ||
| {text} | ||
| </a> | ||
| ))} | ||
| </nav> | ||
| <div className="flex items-center"> | ||
| <FaEnvelope className="text-green-500 mr-2" /> | ||
| <a | ||
| href="mailto:[email protected]" | ||
| className="text-sm hover:text-green-500 transition-colors duration-200" | ||
| > | ||
| [email protected] | ||
| </a> | ||
| </div> | ||
| </div> | ||
| {/* Footer Bottom Section */} | ||
| <div className="mt-8 pt-6 border-t border-gray-700 text-center"> | ||
| <p className="text-xs text-gray-400"> | ||
| © 2023 FarmRuler. All rights reserved. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </footer> | ||
| ); | ||
| }; | ||
|
|
||
| export default Footer; | ||
| export default Footer; |