From 5c10bce740999dbcd2c186f3bf18084e2fa385b1 Mon Sep 17 00:00:00 2001
From: moh <mf@planetmutlu.com>
Date: Sun, 20 Sep 2026 19:46:58 +0200
Subject: [PATCH] IMPROVED - Replace per-title hero entrance with a unified
 page transition

- Add (site)/template.tsx: one framer-motion enter animation (fade + rise +
  blur) that runs on every navigation, so moving between dock pages has a
  clean transition.
- Disable the staggered .hero-rise entrance now that the template handles it.
---
 app/[locale]/(site)/template.tsx | 27 +++++++++++++++++++++++++++
 app/globals.css                  |  7 ++++---
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 app/[locale]/(site)/template.tsx

diff --git a/app/[locale]/(site)/template.tsx b/app/[locale]/(site)/template.tsx
new file mode 100644
index 0000000..c4a3e9e
--- /dev/null
+++ b/app/[locale]/(site)/template.tsx
@@ -0,0 +1,27 @@
+"use client";
+
+import { motion, useReducedMotion } from "framer-motion";
+import { usePathname } from "next/navigation";
+import type { ReactNode } from "react";
+
+/**
+ * Next.js re-mounts a `template` on every navigation, so this wrapper runs its
+ * enter animation each time the visitor moves between pages (via the dock or
+ * any link) — giving one unified page transition instead of per-element
+ * entrance animations.
+ */
+export default function SiteTemplate({ children }: { children: ReactNode }) {
+  const reducedMotion = useReducedMotion();
+  const pathname = usePathname();
+
+  return (
+    <motion.div
+      key={pathname}
+      initial={reducedMotion ? false : { opacity: 0, y: 18, filter: "blur(10px)" }}
+      animate={{ opacity: 1, y: 0, filter: "blur(0px)" }}
+      transition={reducedMotion ? { duration: 0 } : { duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
+    >
+      {children}
+    </motion.div>
+  );
+}
diff --git a/app/globals.css b/app/globals.css
index 9ff5a70..3a7237e 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -422,10 +422,11 @@ html[lang="ar"] .eyebrow {
     }
   }
 
-  /* ---- Hero entrance (pure CSS so it never flashes blank before hydration) ---- */
+  /* ---- Hero entrance ----
+     Per-element rise is disabled: the site `template.tsx` now runs one unified
+     page-transition animation on every navigation instead. ---- */
   .hero-rise {
-    opacity: 0;
-    animation: hero-rise-in 0.62s cubic-bezier(0.22, 1, 0.36, 1) both;
+    opacity: 1;
   }
 
   .hero-content > *:nth-child(1) {