Skip to content

Commit

Permalink
Merge pull request #92 from jayanththalla/b
Browse files Browse the repository at this point in the history 
Footer UI is changed
  • Loading branch information
@manikumarreddyu
manikumarreddyu authored Oct 4, 2024
2 parents 715f494 + 5206694 commit 6f1b754
Showing 1 changed file with 110 additions and 101 deletions.
211 changes: 110 additions & 101 deletions frontend/src/components/Footer.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,122 +1,131 @@
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 className="flex flex-col">
<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} className="w-full">
<Link to={link.path} 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">{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>
)
}
</footer>
);
};

export default Footer;

0 comments on commit 6f1b754

Please sign in to comment.