From 47f7d9d63687cd64d4ef32543cac96719c8128ca Mon Sep 17 00:00:00 2001
From: Jayanth <jayanththalla33@gmail.com>
Date: Fri, 4 Oct 2024 22:20:43 +0530
Subject: [PATCH] Footer UI is changed

---
 frontend/src/components/Footer.jsx | 210 +++++++++++++++--------------
 1 file changed, 108 insertions(+), 102 deletions(-)

diff --git a/frontend/src/components/Footer.jsx b/frontend/src/components/Footer.jsx
index 6ff2950c..12eb4934 100644
--- a/frontend/src/components/Footer.jsx
+++ b/frontend/src/components/Footer.jsx
@@ -1,122 +1,128 @@
+import React from 'react';
 import { Link } from "react-router-dom";
-import { FaHome, FaGithub, FaRegCopyright, FaDiscord, FaTwitter, FaLinkedinIn } from 'react-icons/fa';
-
 import playstore from "../assets/favicon2.png";
-// import bgHero from "../assets/bgHero.png";
+import { FaHome, FaGithub, FaRegCopyright, FaDiscord, FaTwitter, FaLinkedinIn } from 'react-icons/fa';
 
 const Footer = () => {
     const currentYear = new Date().getFullYear();
 
     return (
-        <div className='bg-gradient-to-r from-[#11cb46] via-[#3ff132] to-[#04ba10]  p-6'>
-            <div className='md:flex'>
-                <div className="md:w-1/2 md:-mt-10 sm:mt-1 sm:w-full content-center">
-                    <div className="mt-1 sm:mt-2 md:mt-10 flex flex-col md:items-start">
-                        <div className="flex items-center sm:w-full">
-                            <Link to="/" className="flex items-center gap-1">
-                                <img src={playstore} className="h-8" alt="AgroTech AI Logo" />
-                                <span className="ml-4 text-2xl font-semibold whitespace-nowrap text-white">
-                                    AgroTech AI
-                                </span>
-                            </Link>
-                        </div>
-                        <p className="mt-2 text-white text-justify text-sm md:text-base md:text-left  lg:w-1/2 sm:w-full pr-2">
-                            AgroTech AI platform provides various Machine Learning models for predictions.
+        <footer className='bg-gradient-to-r from-emerald-500 via-green-500 to-lime-500 p-8 text-white'>
+            <div className='container mx-auto'>
+                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8'>
+                    <div className="space-y-4">
+                        <Link to="/" className="flex items-center gap-2 group transition-all duration-300 ease-in-out transform hover:scale-105">
+                            <img src={playstore} className="h-10 w-10 transition-transform duration-300 group-hover:rotate-12" alt="AgroTech AI Logo" />
+                            <span className="text-2xl font-bold bg-gradient-to-r from-white to-white bg-clip-text text-transparent group-hover:from-lime-200 group-hover:to-white transition-all duration-300">
+                                AgroTech AI
+                            </span>
+                        </Link>
+                        <p className="text-sm leading-relaxed max-w-xs">
+                            AgroTech AI platform provides cutting-edge Machine Learning models for agricultural predictions and insights.
                         </p>
                     </div>
-                </div>
-                <div className='md:w-3/4 md:flex'>
-                    <div className='md:w-1/3'>
-                        <p className='text-white font-bold mt-8 md:mt-0'>Company</p>
-                        <ul className='text-white py-1'>
-                            <li className='py-0.5 cursor-pointer hover:text-green-600'>
-                                <Link to='/'>About Us</Link>
-                            </li>
-                            <li className='py-0.5 cursor-pointer hover:text-green-600'>
-                                <Link to='/'>Contact Us</Link>
-                            </li>
+
+                    <div>
+                        <h3 className='text-lg font-semibold mb-4 relative inline-block after:content-[""] after:absolute after:w-0 after:h-0.5 after:bg-lime-200 after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full'>Company</h3>
+                        <ul className='space-y-2'>
+                            {['About Us', 'Contact Us'].map((item) => (
+                                <li key={item}>
+                                    <Link to='/' className='flex items-center group'>
+                                        <span className="mr-2 transition-transform duration-300 group-hover:translate-x-1">›</span>
+                                        <span className="relative overflow-hidden">
+                                            <span className="inline-block transition-transform duration-300 group-hover:-translate-y-full">{item}</span>
+                                            <span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-lime-200">{item}</span>
+                                        </span>
+                                    </Link>
+                                </li>
+                            ))}
                         </ul>
                     </div>
-                    <div className='md:w-1/3'>
-                        <p className='text-white font-bold text-md'>Quick Links</p>
-                        <ul className='text-white py-1 cursor-pointer'>
-                            {/* <li className='py-1 cursor-pointer hover:text-green-800'>
-                                <Link className='flex items-center gap-1' to='/crop'>
-                                    Crop Recommendation 
-                                </Link>
-                            </li> */}
-                            {/* <li className='py-1 cursor-pointer hover:text-green-800'>
-                                <Link className='flex items-center gap-1' to='/fertilizer'>
-                                    Fertilizer Recommendation
-                                </Link>
-                            </li> */}
-                            {/* <li className='py-0.5 cursor-pointer hover:text-green-600'>
-                                <Link className='flex items-center gap-1' to='/soil'>
-                                    Soil Quality 
-                                </Link>
-                            </li> */}
-                            <li className='py-0.5 cursor-pointer hover:text-green-600'>
-                                <Link className='flex items-center gap-1' to='/prices'>
-                                    Price Prediction
-                                </Link>
-                            </li>
-                            <li className='py-0.5 cursor-pointer hover:text-green-600'>
-                                <Link className='flex items-center gap-1' to="/forecast">
-                                   Forecast
-                                </Link>
-                            </li>
+
+                    <div>
+                        <h3 className='text-lg font-semibold mb-4 relative inline-block after:content-[""] after:absolute after:w-0 after:h-0.5 after:bg-lime-200 after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full'>Quick Links</h3>
+                        <ul className='space-y-2'>
+                            {[
+                                { name: 'Crop Recommendation', path: '/crop' },
+                                { name: 'Fertilizer Recommendation', path: '/fertilizer' },
+                                { name: 'Soil Quality', path: '/soil' },
+                                { name: 'Price Prediction', path: '/prices' },
+                                { name: 'Forecast', path: '/forecast' },
+                                { name: 'Disease ', path: '/disease' },
+                            ].map((link) => (
+                                <li key={link.name}>
+                                    <Link to={link.path} className='flex items-center group'>
+                                        <span className="mr-2 opacity-0 transition-all duration-300 group-hover:opacity-100 group-hover:translate-x-1">›</span>
+                                        <span className="relative overflow-hidden">
+                                            <span className="inline-block transition-transform duration-300 group-hover:-translate-y-full">{link.name}</span>
+                                            <span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-lime-200">{link.name}</span>
+                                        </span>
+                                    </Link>
+                                </li>
+                            ))}
                         </ul>
                     </div>
-                    {/* <div className='md:w-1/3'>
-                        <p className='text-white font-bold'>Legal Pages</p>
-                        <ul className='text-white py-4 cursor-pointer'>
-                            <li className='py-1 cursor-pointer hover:text-green-800'>
-                                <Link to='/'>Privacy Policy</Link>
-                            </li>
-                            <li className='py-1 cursor-pointer hover:text-green-800'>
-                                <Link to='/'>Terms and Conditions</Link>
-                            </li>
-                            <li className='py-1 cursor-pointer hover:text-green-800'>
-                                <Link to='/'>Cookie Policy</Link>
-                            </li>
-                        </ul>
-                    </div> */}
-                    {/* Connect with us section */}
-                    <div className='md:w-1/3'>
-                        <p className='text-white font-bold mb-2'>Connect with us</p>
+
+                    <div>
+                        <h3 className='text-lg font-semibold mb-4 relative inline-block after:content-[""] after:absolute after:w-0 after:h-0.5 after:bg-lime-200 after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full'>Connect with us</h3>
                         <div className='flex space-x-4 mt-4'>
-                            <a href="/" className='social text-white hover:text-green-600 hover:border-green-600 transition-transform duration-300'>
-                                <FaGithub size={15} />
-                            </a>
-                            <a href="/" className='social text-white hover:text-green-600 hover:border-green-600 transition-transform duration-300'>
-                                <FaDiscord size={15} />
-                            </a>
-                            <a href="/" className='social text-white hover:text-green-600 hover:border-green-600 transition-transform duration-300'>
-                                <FaTwitter size={15} />
-                            </a>
-                            <a href="/" className='social text-white hover:text-green-600 hover:border-green-600 transition-transform duration-300'>
-                                <FaLinkedinIn size={15} />
-                            </a>
+                            {[ 
+                                { Icon: FaGithub, link: '/', color: '#333' },
+                                { Icon: FaDiscord, link: '/', color: '#7289DA' },
+                                { Icon: FaTwitter, link: '/', color: '#1DA1F2' },
+                                { Icon: FaLinkedinIn, link: '/', color: '#0077B5' },
+                            ].map(({ Icon, link, color }, index) => (
+                                <a
+                                    key={index}
+                                    href={link}
+                                    className="p-2 rounded-full transition-all duration-300 transform hover:scale-110 hover:rotate-12"
+                                    style={{ 
+                                        backgroundColor: 'white',
+                                        color: color,
+                                        boxShadow: '0 0 0 0 rgba(255,255,255,0.7)'
+                                    }}
+                                    onMouseEnter={(e) => {
+                                        e.currentTarget.style.backgroundColor = color;
+                                        e.currentTarget.style.color = 'white';
+                                        e.currentTarget.style.boxShadow = `0 0 0 8px rgba(255,255,255,0.3)`;
+                                    }}
+                                    onMouseLeave={(e) => {
+                                        e.currentTarget.style.backgroundColor = 'white';
+                                        e.currentTarget.style.color = color;
+                                        e.currentTarget.style.boxShadow = '0 0 0 0 rgba(255,255,255,0.7)';
+                                    }}
+                                    aria-label={`Social media link ${index + 1}`}
+                                >
+                                    <Icon size={20} />
+                                </a>
+                            ))}
                         </div>
+
+                        <h3 className='text-lg font-semibold mt-6 mb-4 relative inline-block after:content-[""] after:absolute after:w-0 after:h-0.5 after:bg-lime-200 after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full'>Legal</h3>
+                        <ul className='space-y-2'>
+                            {['Privacy Policy', 'Terms and Conditions', 'Cookie Policy'].map((item) => (
+                                <li key={item}>
+                                    <Link to='/' className='flex items-center group'>
+                                        <span className="mr-2 transition-transform duration-300 group-hover:translate-x-1">›</span>
+                                        <span className="relative overflow-hidden">
+                                            <span className="inline-block transition-transform duration-300 group-hover:-translate-y-full">{item}</span>
+                                            <span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-lime-200">{item}</span>
+                                        </span>
+                                    </Link>
+                                </li>
+                            ))}
+                        </ul>
                     </div>
                 </div>
-            </div>
-            {/* <div className='block items-center m-auto mt-2'>
-                <div className='flex gap-4 justify-center '>
-                    <a href="https://github.com/manikumarreddyu/AGRO-AI" className="hover:scale-110 hover:shadow-[0_0_10px_2px_green] transition-transform duration-300 ease-in-out flex items-center justify-center p-2 rounded-full">
-                        <FaGithub size={35} className="text-white" />
-                    </a>
-                    <Link to='/' className="hover:scale-110 hover:shadow-[0_0_10px_2px_green] transition-transform duration-300 ease-in-out flex items-center justify-center p-2 text-white rounded-full focus:outline-none">
-                        <FaHome size={35} />
-                    </Link>
+                <div className='mt-8 pt-8 border-t border-white/30 text-center'>
+                    <p className='flex items-center justify-center text-sm'>
+                        Copyright <FaRegCopyright className="mx-2" /> {currentYear}
+                        <span className="font-bold ml-2 bg-white text-emerald-600 px-2 py-1 rounded transition-all duration-300 hover:bg-emerald-600 hover:text-white">AgroTech AI</span>
+                    </p>
                 </div>
-            </div> */}
-            <div className='mt-4 text-white flex justify-center space-x-2 text-md lg:text-md xl:text-md'>
-                Copyright <FaRegCopyright className="mx-0.5 my-1.5" /> {currentYear} <span className="font-bold">AgroTech AI</span>
             </div>
-        </div>
-    )
-}
-
-export default Footer;
+        </footer>
+    );
+};
 
+export default Footer;
\ No newline at end of file