From 079c35d2a07f3edb31d000b10a52cfd80d75efbf Mon Sep 17 00:00:00 2001
From: Tony-ArtZ <adarshgku@gmail.com>
Date: Mon, 7 Oct 2024 00:09:44 +0530
Subject: [PATCH] [FIX] #3 : Improve Footer UI

---
 Contributing/README.md   |   7 +++
 app/components/Footer.js | 120 +++++++++++++++++++++++++++------------
 2 files changed, 91 insertions(+), 36 deletions(-)

diff --git a/Contributing/README.md b/Contributing/README.md
index a2532bf..40600c1 100644
--- a/Contributing/README.md
+++ b/Contributing/README.md
@@ -60,3 +60,10 @@ Welcome to the FarmRuler project! We appreciate your contributions. Please add y
 - **LinkedIn:** [LinkedIn Profile](https://www.linkedin.com/in/hamzathul)
 - **Info:** Enthusiastic full Stack developer with a strong interest and passion for coding.
 
+### <img src="https://github.com/hamzathul.png" alt="Photo" width="120" height="120" style="border-radius: 50%;">
+**Name:** [Adarsh Upadhyay](https://github.com/Tony-ArtZ)
+
+- **GitHub:** [GitHub Profile](https://github.com/Tony-ArtZ)
+- **LinkedIn:** [LinkedIn Profile](https://www.linkedin.com/in/adarsh-upadhyay-8b8a55232/)
+- **Info:** Aspiring full stack developer with a knack for game dev and art
+
diff --git a/app/components/Footer.js b/app/components/Footer.js
index d74416d..3764d0c 100644
--- a/app/components/Footer.js
+++ b/app/components/Footer.js
@@ -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:info@farmruler.com"
+              className="text-sm hover:text-green-500 transition-colors duration-200"
+            >
+              info@farmruler.com
+            </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;
\ No newline at end of file
+export default Footer;