page home responsive & change component element & page blog item

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>