done landing page

layout/Layout.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect, useRef } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { PageTransition } from "@/components/ui/page-transition";
+
+type TransitionContextType = {
+  startTransition: (url: string) => void;
+};
+const TransitionContext = createContext<TransitionContextType>({
+  startTransition: () => {},
+});
+export const usePageTransition = () => useContext(TransitionContext);
+
+export const LayoutWithTransition = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [pendingUrl, setPendingUrl] = useState<string | null>(null);
+  const [direction, setDirection] = useState<"reveal" | "unreveal">("unreveal");
+  const [pageReady, setPageReady] = useState(false);
+
+  const router = useRouter();
+  const pathname = usePathname();
+  const prevPath = useRef<string | null>(null);
+
+  /* --------------------------------------------------------------
+     🔹 User clicks → exit animation (reveal)
+   -------------------------------------------------------------- */
+  const startTransition = (url: string) => {
+    setDirection("reveal"); // going out
+    setPendingUrl(url);
+    setIsOpen(true); // start reveal animation
+  };
+
+  /* --------------------------------------------------------------
+     🔹 When GSAP reveal animation finishes → navigate
+   -------------------------------------------------------------- */
+  const handleAnimationComplete = () => {
+    if (pendingUrl) {
+      router.push(pendingUrl);
+      setPendingUrl(null);
+      setPageReady(false); // reset entry state
+    }
+  };
+
+  /* --------------------------------------------------------------
+     🔹 When route changes (new page load)
+     play "unreveal" after slight delay
+   -------------------------------------------------------------- */
+  useEffect(() => {
+    if (prevPath.current && prevPath.current !== pathname) {
+      // only play unreveal on navigation, not on first load
+      const timer = setTimeout(() => {
+        setDirection("unreveal");
+        setIsOpen(true);
+        setTimeout(() => setIsOpen(false), 1200); // animation duration
+      }, 250); // give React time to render page
+      return () => clearTimeout(timer);
+    }
+    prevPath.current = pathname;
+  }, [pathname]);
+
+  return (
+    <TransitionContext.Provider value={{ startTransition }}>
+      <main className="relative min-h-screen overflow-hidden bg-white">
+        {/* Page content */}
+        <div className="relative z-10">{children}</div>
+
+        {/* Animated overlay */}
+        <PageTransition
+          isOpen={isOpen}
+          direction={direction}
+          onComplete={handleAnimationComplete}
+        />
+      </main>
+    </TransitionContext.Provider>
+  );
+};