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

components/layout/header/index.js

@@ -13,8 +13,6 @@ import UserLogin from "@/components/icons/UserLogin";
 function Header({ name }) {
 
     const [isActive, setIsActive] = useState(false);
-    console.log(name);
-
 
     return (
         <div

components/layout/header/list/Row.js

@@ -4,7 +4,7 @@ import Link from "next/link";
 
 function Row({ name }) {
     return (
-        <ul className="hidden lg:flex items-center justify-center gap-[40px]">
+        <ul className="hidden lg:flex items-center justify-center gap-[30px] xl:gap-[40px]">
             {listNav.map(nav => (
                 <li
                     key={nav.id}
@@ -12,9 +12,9 @@ function Row({ name }) {
                     <Link
                         href={nav.link}
                         className={`
-                                ${isActiveURL(nav.link.replace('/', ''), name) ? '!text-[#526CAC]' : 'text-[#525252]'}
-                                    text-[16px] font-medium
-                                `}
+                            ${isActiveURL(nav.link.replace('/', ''), name) ? '!text-[#526CAC]' : 'text-[#525252]'}
+                            text-[16px] font-medium
+                        `}
                     >
                         {nav.name}
                     </Link>

components/layout/header/list/col/index.js

@@ -4,9 +4,6 @@ import Link from "next/link";
 import { isActiveURL } from "@/helper";
 
 function Col({ isActive, setIsActive, name }) {
-
-    console.log(name);
-
     return (
         <div className="flex lg:hidden">
             {/* <Button variant="text" className="!p-0.5">

components/layout/index.js

@@ -1,14 +1,26 @@
+'use client';
+
 import Footer from './footer';
 import Header from './header';
 
+// AOS
+import Aos from "aos";
+import "aos/dist/aos.css";
+import { useEffect } from "react";
+
 function Layout({ children, title, name }) {
+
+    useEffect(() => {
+        Aos.init({ duration: 1000 });
+    }, [])
+
     return (
         <div>
             <main className="w-full min-h-screen">
                 <header className="w-full fixed top-[12px] sm:top-[21px] md:top-[30px] lg:top-[40px] right-1/2 translate-x-1/2 padding-responsive z-[10]">
                     <Header name={name} />
                 </header>
-                <section>
+                <section className='opacity-page'>
                     {children}
                 </section>
             </main>