Compare commits

..

2 Commits

Author SHA1 Message Date
DeathKaioken
b1efd5c345 Merge branch 'dev' of https://git.profit-planet.partners/Seazn/profit-planet-frontend into dev 2025-10-03 22:12:07 +02:00
DeathKaioken
1eeafee58e add: Page Transition Effect 2025-10-03 22:11:24 +02:00
2 changed files with 44 additions and 0 deletions

View File

@ -4,6 +4,7 @@ import React from 'react';
import Header from './nav/Header';
import Footer from './Footer';
import GlobalAnimatedBackground from '../background/GlobalAnimatedBackground';
import PageTransitionEffect from './animation/pageTransitionEffect';
// Utility to detect mobile devices
function isMobileDevice() {
@ -33,10 +34,17 @@ export default function PageLayout({
</div>
)}
<<<<<<< HEAD
{/* Main content now participates in normal document flow */}
<div className="flex-1 relative z-10 w-full flex flex-col">
<PageTransitionEffect>{children}</PageTransitionEffect>
</div>
=======
{/* Main content grows to fill available space */}
<main className="flex-1 relative z-10 w-full overflow-y-auto">
{children}
</main>
>>>>>>> 6ebe4eed3d7f8ef6bedea5dcf742bc73462a8af8
{showFooter && (
<div className="relative z-50 flex-shrink-0">

View File

@ -0,0 +1,36 @@
'use client';
import { motion, AnimatePresence } from 'framer-motion';
import { usePathname } from 'next/navigation';
import React from 'react';
const PageTransitionEffect = ({ children }: { children: React.ReactNode }) => {
const pathname = usePathname();
const variants = {
hidden: { opacity: 0, x: 0, y: 20 },
enter: { opacity: 1, x: 0, y: 0 },
exit: { opacity: 0, x: 0, y: -20 },
};
return (
<AnimatePresence
mode="wait"
onExitComplete={() => window.scrollTo(0, 0)}
>
<motion.div
key={pathname}
variants={variants}
initial="hidden"
animate="enter"
exit="exit"
transition={{ type: 'tween', duration: 0.3 }}
className="flex-1 w-full flex flex-col"
>
{children}
</motion.div>
</AnimatePresence>
);
};
export default PageTransitionEffect;