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>

components/layout/index.js

@@ -12,7 +12,7 @@ function Layout({ children, title, name }) {
                     {children}
                 </section>
             </main>
-            <footer className="bg-[#F5F5F5] mt-[100px] pt-[44px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
+            <footer className="bg-[#F5F5F5] pt-[44px] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
                 <div className='padding-responsive'>
                     <Footer />
                 </div>