page home responsive & change component element & page blog item

components/layout/footer/menu/HeadMenu.js

@@ -4,7 +4,7 @@ import { Button } from "@mui/material"
 function HeadMenu({ title, name, isOpen, changeMenu }) {
     return (
         <Button
-            className="!flex !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
+            className="!flex lg:!hidden !items-center !justify-between !w-full !py-[8px] !px-[4px] !border !border-solid !border-transparent !rounded-bl-none !rounded-br-none !border-b-[#E5E5E5]"
             onClick={() => changeMenu(name)}
         >
             <p className="text-[#262866] text-[14px] font-medium">{title}</p>

components/layout/footer/menu/ListMenu.js

@@ -3,14 +3,14 @@ import React from 'react'
 function ListMenu({ list, isOpen }) {
   return (
     <ul className={`
-      mt-3 lg:mt-0 w-full lg:w-fit flex flex-col overflow-hidden transition-all duration-500 gap-3
+      mt-3 lg:mt-0 w-full lg:w-fit lg:!max-h-fit flex flex-col overflow-hidden transition-all duration-500 gap-3
       ${isOpen ? 'max-h-[150px]' : 'max-h-0'}
     `}>
       {list.map((item, idx) => (
         <li
           key={idx}
           className={`
-            relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
+            relative cursor-pointer after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
             ${idx === 0 ?
               'hidden lg:flex text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' :
               'text-[#616161] border-transparent font-normal'}