Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

modified footer open space. #518

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

modified footer open space. #518

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 44 additions & 44 deletions client/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,22 +86,21 @@ const Footer = () => {
// };

return (
<footer className="bg-gradient-to-r from-[#1f2937] via-[#133859] to-[#1f2937] p-8 text-white">
<footer className="bg-gradient-to-r from-[#b6dbfc] via-[#8faed9] to-[#b6dbfc] p-8 text-white shadow-lg shadow-black">
<div className="container mx-auto">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{/* Company Section */}
<div className="space-y-4">
<div className="flex flex-wrap justify-between space-x-4">
{/* Med Space Section */}
<div className="space-y-4 w-full md:w-auto">
<Link
to="/"
className="flex items-center gap-2 group transition-all duration-300 ease-in-out transform hover:scale-105"
>
{/* Adjusted hover text colors */}
<img
src="../favicon.png"
className="h-10 w-10 transition-transform duration-300 group-hover:rotate-6"
alt="AgroTech AI Logo"
/>
<span className="text-2xl font-bold bg-gradient-to-r from-[#b6dbfc] to-[#b6dbfc] bg-clip-text text-transparent group-hover:from-[#133859] group-hover:to-[#b6dbfc] transition-all duration-300">
<span className="text-2xl font-bold bg-gradient-to-r from-[#1f2937] to-[#b6dbfc] bg-clip-text text-transparent group-hover:from-[#133859] group-hover:to-[#b6dbfc] transition-all duration-300">
Med Space
</span>
</Link>
Expand All @@ -112,9 +111,9 @@ const Footer = () => {
</p>
</div>

{/* Company Links */}
<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-[#b6dbfc] after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full'>
{/* About Section */}
<div className="space-y-4 w-full md:w-auto">
<h3 className="text-lg font-semibold mb-4 relative inline-block after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-[#b6dbfc] after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full">
About
</h3>
<ul className="space-y-2">
Expand All @@ -128,7 +127,7 @@ const Footer = () => {
<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-[#b6dbfc]">
<span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-[#1f2937]">
{link.name}
</span>
</span>
Expand All @@ -138,14 +137,14 @@ const Footer = () => {
</ul>
</div>

{/* Quick Links */}
<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-[#b6dbfc] after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full'>
{/* Services Section */}
<div className="space-y-4 w-full md:w-auto">
<h3 className="text-lg font-semibold mb-4 relative inline-block after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-[#b6dbfc] after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full">
Services
</h3>
<ul className="space-y-2">
{servicesLinks.map((link) => (
<li key={link.name} className="w-full">
<li key={link.name}>
<Link to={link.path} className="flex items-center group">
<span className="mr-2 transition-transform duration-300 group-hover:translate-x-1">
›
Expand All @@ -154,7 +153,7 @@ const Footer = () => {
<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-[#b6dbfc]">
<span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-[#1f2937]">
{link.name}
</span>
</span>
Expand All @@ -164,10 +163,35 @@ const Footer = () => {
</ul>
</div>

{/* Connect with Us and Legal */}
<div>
{/* Social Media Links */}
<h3 className='text-lg font-semibold mb-4 relative inline-block after:content-[""] after:absolute after:w-0 after:h-0.5 after:bg-[#b6dbfc] after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full'>
{/* Contact Us Section */}
<div className="space-y-4 w-full md:w-auto">
<h3 className="text-lg font-semibold mb-4 relative inline-block after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-[#b6dbfc] after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full">
Contact Us
</h3>
<ul className="space-y-2">
{contactUsLinks.map((item) => (
<li key={item.name}>
<Link to={item.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">
{item.name}
</span>
<span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-[#1f2937]">
{item.name}
</span>
</span>
</Link>
</li>
))}
</ul>
</div>

{/* Follow Us Section */}
<div className="space-y-4 w-full md:w-auto">
<h3 className="text-lg font-semibold mb-4 relative inline-block after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-[#b6dbfc] after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full">
Follow us on
</h3>
<div className="flex space-x-4 mb-6">
Expand All @@ -194,13 +218,13 @@ const Footer = () => {
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>

{/* Google Translate Section */}
<div className="flex items-center mt-6">
<img
src="/google.png"
Expand All @@ -209,30 +233,6 @@ const Footer = () => {
/>
<GoogleTranslate />
</div>

{/* Legal Links */}
<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-[#b6dbfc] after:left-0 after:-bottom-1 after:transition-all after:duration-300 hover:after:w-full text-yellow'>
Contact Us
</h3>
<ul className="space-y-2">
{contactUsLinks.map((item) => (
<li key={item.name}>
<Link to={item.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">
{item.name}
</span>
<span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0 text-[#b6dbfc]">
{item.name}
</span>
</span>
</Link>
</li>
))}
</ul>
</div>
</div>

Expand Down