41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
|
import { ReactNode, useEffect } from 'react';
|
||
|
|
import Header from './Header';
|
||
|
|
import Footer from './Footer';
|
||
|
|
import LeadMagnet from './LeadMagnet';
|
||
|
|
import { useLocation } from 'react-router-dom';
|
||
|
|
import { motion, AnimatePresence } from 'motion/react';
|
||
|
|
|
||
|
|
interface LayoutProps {
|
||
|
|
children: ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Layout({ children }: LayoutProps) {
|
||
|
|
const { pathname } = useLocation();
|
||
|
|
|
||
|
|
// Scroll to top on route change
|
||
|
|
useEffect(() => {
|
||
|
|
window.scrollTo(0, 0);
|
||
|
|
}, [pathname]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen flex flex-col bg-white selection:bg-brand/10 selection:text-brand">
|
||
|
|
<Header />
|
||
|
|
<main className="flex-grow">
|
||
|
|
<AnimatePresence mode="wait">
|
||
|
|
<motion.div
|
||
|
|
key={pathname}
|
||
|
|
initial={{ opacity: 0, y: 10 }}
|
||
|
|
animate={{ opacity: 1, y: 0 }}
|
||
|
|
exit={{ opacity: 0, y: -10 }}
|
||
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</motion.div>
|
||
|
|
</AnimatePresence>
|
||
|
|
</main>
|
||
|
|
<LeadMagnet />
|
||
|
|
<Footer />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|