reveals

components/Layout.tsx

@@ -5,6 +5,7 @@ import React, { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { motion, AnimatePresence } from 'framer-motion';
+import { Reveal } from './Reveal';
 
 const Layout = ({ children }: { children: React.ReactNode }) => {
   const pathname = usePathname();
@@ -39,16 +40,14 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
 
   return (
     <div className="min-h-screen flex flex-col font-sans">
-      <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/90 backdrop-blur-lg border-b border-slate-200 shadow-sm' 
-            : 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
-        }`}
-      >
+      <Reveal direction="down" fullWidth className="fixed top-0 left-0 right-0 z-[100]">
+        <header
+          className={`transition-all duration-300 flex items-center py-1 ${
+            isScrolled
+              ? 'bg-white/90 backdrop-blur-lg border-b border-slate-200 shadow-sm'
+              : 'bg-gradient-to-b from-white/80 via-white/40 to-transparent'
+          }`}
+        >
         <div className="container-custom flex justify-between items-center w-full relative z-10">
           <Link
             href="/"
@@ -96,7 +95,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             {isMobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
           </button>
         </div>
-      </motion.header>
+        </header>
+      </Reveal>
 
       {/* Mobile Menu Overlay */}
       <AnimatePresence>
@@ -147,13 +147,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
         <ArrowUp size={20} strokeWidth={2.5} />
       </button>
 
-      <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"
-      >
+      <Reveal fullWidth>
+        <footer 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">
@@ -200,7 +195,8 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
             </p>
           </div>
         </div>
-      </motion.footer>
+        </footer>
+      </Reveal>
     </div>
   );
 };