From 1eeafee58e56279ac15cade3351df3d5317305cf Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Fri, 3 Oct 2025 22:11:24 +0200
Subject: [PATCH] add: Page Transition Effect

---
 src/app/components/PageLayout.tsx             |  3 +-
 .../animation/pageTransitionEffect.tsx        | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 src/app/components/animation/pageTransitionEffect.tsx

diff --git a/src/app/components/PageLayout.tsx b/src/app/components/PageLayout.tsx
index 72cdec9..28430ca 100644
--- a/src/app/components/PageLayout.tsx
+++ b/src/app/components/PageLayout.tsx
@@ -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() {
@@ -35,7 +36,7 @@ export default function PageLayout({
       
       {/* Main content now participates in normal document flow */}
       <div className="flex-1 relative z-10 w-full flex flex-col">
-        {children}
+        <PageTransitionEffect>{children}</PageTransitionEffect>
       </div>
       
       {showFooter && (
diff --git a/src/app/components/animation/pageTransitionEffect.tsx b/src/app/components/animation/pageTransitionEffect.tsx
new file mode 100644
index 0000000..3d0ebe8
--- /dev/null
+++ b/src/app/components/animation/pageTransitionEffect.tsx
@@ -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;