responsive page home and list

components/layout/footer/menu/HeadMenu.js

@@ -0,0 +1,21 @@
+import ArrowDownF from "@/components/icons/ArrowDownF"
+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]"
+            onClick={() => changeMenu(name)}
+        >
+            <p className="text-[#262866] text-[14px] font-medium">{title}</p>
+            <div className={`
+                transition-all duration-500
+                ${isOpen ? 'rotate-180' : 'rotate-0'}
+            `}>
+                <ArrowDownF />
+            </div>
+        </Button>
+    )
+}
+
+export default HeadMenu

components/layout/footer/menu/ListMenu.js

@@ -0,0 +1,25 @@
+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
+      ${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
+            ${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'} 
+            text-[16px] w-fit
+            `}
+        >{item}</li>
+      ))}
+    </ul>
+  )
+}
+
+export default ListMenu