improved footer and added transition on feature cards

src/Pages/AboutPage.jsx

@@ -62,14 +62,14 @@ const AboutPage = () => {
  <div id='about-us' style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
  <h5 className="font-semibold text-center text-xl pb-2 lg:pb-6 text-green-500 mt-24 sm:mt-32 sm:text-[2rem]">Our Features</h5>
  <div className='about-us-block lg:px-16'>
- <div className='about-us-community' onMouseOver={() => setNurseHovered(true)} onMouseLeave={() => setNurseHovered(false)}>
+ <div className='about-us-community transition-background duration-300 ease-linear' onMouseOver={() => setNurseHovered(true)} onMouseLeave={() => setNurseHovered(false)}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
  <img src={nurseHovered ? nurse : nursehover} alt="" style={{ marginLeft: '1rem', marginTop: '1rem', width: '3rem' }} />
  <div className='about-us-blk-text'>Instant Care</div>
  </div>
  <p className='about-us-blk-para'>Experience seamless booking with Instant Care. Quickly schedule qualified nurses for in-home assistance, ensuring convenience and peace of mind for you and your loved ones.</p>
  </div>
- <div className='about-us-product' onMouseOver={() => setCareerHovered(true)} onMouseLeave={() => setCareerHovered(false)}>
+ <div className='about-us-product transition-background duration-300 ease-linear' onMouseOver={() => setCareerHovered(true)} onMouseLeave={() => setCareerHovered(false)}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
  <img src={careerHovered ? careerhover : career} alt="" style={{ marginLeft: '1rem', marginTop: '1rem', width: '3rem' }} />
  <div className='about-us-blk-text'>Nurse Careers</div>
@@ -78,14 +78,14 @@ const AboutPage = () => {
  </div>
  </div>
  <div className='about-us-block lg:px-16'>
- <div className='about-us-location' onMouseOver={() => setPlaceHovered(true)} onMouseLeave={() => setPlaceHovered(false)}>
+ <div className='about-us-location transition-background duration-300 ease-linear' onMouseOver={() => setPlaceHovered(true)} onMouseLeave={() => setPlaceHovered(false)}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
  <img src={placeHovered ? anywherehover : anywhere} alt="" style={{ marginLeft: '1rem', marginTop: '1rem', width: '3rem' }} />
  <div className='about-us-blk-text'>Nationwide Reach</div>
  </div>
  <p className='about-us-blk-para'>Our commitment to healthcare accessibility means we're expanding Nationwide Reach. Now serving more cities across India, providing quality care wherever you are.</p>
  </div>
- <div className='about-us-event' onMouseOver={() => setSupport(true)} onMouseLeave={() => setSupport(false)}>
+ <div className='about-us-event transition-background duration-300 ease-linear' onMouseOver={() => setSupport(true)} onMouseLeave={() => setSupport(false)}>
  <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
  <img src={support ? anytimehover : anytime} alt="" style={{ marginLeft: '1rem', marginTop: '1rem', width: '3rem' }} />
  <div className='about-us-blk-text'>Support Hub</div>

src/components/Footer/Footer.jsx

@@ -1,17 +1,15 @@
 import React from "react";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faLinkedin, faGithub } from "@fortawesome/free-brands-svg-icons";
 
 function Footer() {
  return (
  <>
  <div>
  <footer className="bg-zinc-100 footer">
- <div className="mx-auto w-full max-w-screen-xl">
- <h1 className="font-bold py-5 px-4 md:px-10 lg:px-20 text-3xl">Nacto Care</h1>
- <div className="grid grid-cols-2 gap-8 px-4 md:px-10 lg:px-20 py-6 lg:py-8 md:grid-cols-4">
+ <div className="mx-auto w-3/4 py-6">
+ <h1 className="font-bold text-3xl border-b-2 border-gray-300 pb-6">Nacto Care</h1>
+ <div className="grid grid-cols-2 gap-8 mt-8 md:grid-cols-4">
  <div>
- <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase footer-heading">
+ <h2 className="mb-6 text-sm text-gray-900 uppercase footer-heading font-bold">
  Company
  </h2>
  <ul className="text-gray-500 font-medium">
@@ -38,24 +36,10 @@ function Footer() {
  </ul>
  </div>
  <div>
- <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase footer-heading">
+ <h2 className="mb-6 text-sm font-bold text-gray-900 uppercase footer-heading">
  Help center
  </h2>
  <ul className="text-gray-500 font-medium">
- <li className="mb-4">
- <a href="https://www.linkedin.com/company/nactore-organization/about/" className="hover:underline" target="_blank">
- <FontAwesomeIcon icon={faLinkedin} style={{ color: '#0077b5', paddingRight: '10px' }}/>
- Linkedin
-
- </a>
- </li>
- <li className="mb-4">
- <a href="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/Nactore-Org/Nacto-Care" className="hover:underline" target="_blank">
- <FontAwesomeIcon icon={faGithub} style={{ color: '#24292e', paddingRight: '10px' }} />
- GitHub
-
- </a>
- </li>
  <li className="mb-4">
  <a href="/contact" className="hover:underline">
  Contact Us
@@ -74,7 +58,7 @@ function Footer() {
  </ul>
  </div>
  <div>
- <h2 className="mb-6 text-sm font-semibold text-gray-900 uppercase footer-heading">
+ <h2 className="mb-6 text-sm font-bold text-gray-900 uppercase footer-heading">
  Legal
  </h2>
  <ul className="text-gray-500 font-medium">
@@ -100,6 +84,23 @@ function Footer() {
  </li>
  </ul>
  </div>
+ <div >
+ <h2 className="mb-6 text-sm font-bold text-gray-900 uppercase footer-heading">
+ Connect
+ </h2>
+ <ul className="text-gray-500 flex items-center gap-5 font-medium">
+ <li className="w-[20%] md:w-[15%] sm:w-[10%] lg:w-[15%] xlg:w-[9%]">
+ <a href="https://www.linkedin.com/company/nactore-organization/about/" className="hover:underline" target="_blank" title="LinkedIn">
+ <img src="./assets/LinkedInIcon.svg" alt="LinkedIn logo" /> 
+ </a>
+ </li>
+ <li className="w-[20%] md:w-[15%] sm:w-[10%] lg:w-[15%] xlg:w-[9%] max-w-7">
+ <a href="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/Nactore-Org/Nacto-Care" className="hover:underline" target="_blank" title="Github">
+ <img src="./assets/GithubIcon.svg" alt="Github logo" /> 
+ </a>
+ </li>
+ </ul>
+ </div>
  </div>
  <div className="px-4 py-4 flex items-center justify-center">
  © {new Date().getFullYear().toString()} Nactore Organization, Building for democracy with care