reveals

components/Layout.tsx

@@ -40,7 +40,10 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <div className="min-h-screen flex flex-col font-sans">
-      <header
+      <motion.header
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ duration: 1, ease: [0.22, 1, 0.36, 1] }}
         className={`fixed top-0 left-0 right-0 z-[100] transition-all duration-300 flex items-center py-1 ${
           isScrolled
             ? 'bg-white/80 backdrop-blur-lg border-b border-slate-200'
@@ -93,7 +96,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
           </button>
         </div>
-      </header>
+      </motion.header>
 
       {/* Mobile Menu Overlay */}
       <AnimatePresence>
@@ -144,7 +147,13 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         <ArrowUp size={20} strokeWidth={2.5} />
       </button>
 
-      <footer className="bg-slate-900 text-slate-300 py-16 md:py-24">
+      <motion.footer
+        initial={{ opacity: 0 }}
+        whileInView={{ opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 1 }}
+        className="bg-slate-900 text-slate-300 py-16 md:py-24"
+      >
         <div className="container-custom">
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 mb-16">
             <div className="lg:col-span-2">
@@ -190,7 +199,7 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             </p>
           </div>
         </div>
-      </footer>
+      </motion.footer>
     </div>
   );
 };