page home responsive & change component element & page blog item

components/layout/footer/LogoNamad.js

@@ -9,8 +9,8 @@ const Namads = [
 function LogoNamad() {
     return (
         <ul className="flex items-center gap-3">
-            {Namads.map(src => (
-                <li>
+            {Namads.map((src, idx) => (
+                <li key={idx}>
                     <Image
                         alt="logo"
                         width={48}

components/layout/footer/index.js

@@ -71,11 +71,11 @@ function Footer() {
                 </div>
 
                 {/* Center */}
-                <div className="w-full">
+                <div className="w-full lg:w-fit">
                     <HeadMenu title={footerR[0]} isOpen={openMenu.right} name='right' changeMenu={changeMenu} />
                     <ListMenu list={footerR} isOpen={openMenu.right} />
                 </div>
-                <div className="w-full">
+                <div className="w-full lg:w-fit">
                     <HeadMenu title={footerL[0]} isOpen={openMenu.left} name='left' changeMenu={changeMenu} />
                     <ListMenu list={footerL} isOpen={openMenu.left} />
                 </div>
@@ -89,7 +89,7 @@ function Footer() {
                         {socialMedias.map((item, idx) => (
                             <li
                                 key={idx}
-                                className="p-2.5 bg-[#EAECFA] rounded-full w-fit"
+                                className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
                             >
                                 <Link
                                     href='/'

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'}