page blogs title and head and list article & change footer hover mode

components/layout/Footer.js

@@ -9,6 +9,7 @@ import LocationF from "../icons/LocationF";
 import CalendarAddF from "../icons/CalendarAddF";
 import StethoscopeF from "../icons/StethoscopeF";
 import Logo from "@/app/component/Logo";
+import { Button } from "@mui/material";
 
 const socialMedias = [
     <Linkedin />,
@@ -34,7 +35,11 @@ function Footer() {
         <div>
             <div className="flex items-center justify-center gap-[100px]">
                 {head.map((item, idx) => (
-                    <div key={idx} className="flex items-center justify-start gap-1">
+                    <div
+                        key={idx}
+                        className="flex items-center cursor-pointer justify-start gap-1 p-[6px] hover:bg-[#F7F7F7] hover:transition-all 
+                        transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-transparent hover:bg-none hover:border-[#FDBD9F]"
+                    >
                         {item.icon}
                         <p className="text-[#2F2F2F] text-[16px] font-medium">{item.text}</p>
                     </div>