Skip to content

Commit

Permalink
Merge pull request #518 from vidhi-github/footer
Browse files Browse the repository at this point in the history 
modified footer open space.
  • Loading branch information
@Luson045
Luson045 authored Oct 27, 2024
2 parents c615055 + 37c7391 commit 5ebd775
Showing 1 changed file with 44 additions and 44 deletions.
88 changes: 44 additions & 44 deletions client/src/components/Footer.jsx
View file
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

0 comments on commit 5ebd775

Please sign in to comment.