Ensures proper page rendering and scrolling by cleaning up Lenis styles, enabling Join page content scroll, and refactoring Header visibility logic.

Author: rishabhvyas17

client/src/components/Header.jsx

@@ -9,10 +9,6 @@ export default function Header() {
   // Hook from react-router-dom to get the current URL path
   const location = useLocation();
 
-  // Hide header on full-screen pages that have their own navigation
-  const isApplyPage = location.pathname === '/join' || location.pathname === '/apply';
-  if (isApplyPage) return null;
-
   // Effect to add a scroll listener when the component mounts
   useEffect(() => {
     const handleScroll = () => {
@@ -25,6 +21,11 @@ export default function Header() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
+  // Hide header on full-screen pages that have their own navigation
+  // IMPORTANT: This must be AFTER all hooks to comply with React's rules of hooks
+  const isApplyPage = location.pathname === '/join' || location.pathname === '/apply';
+  if (isApplyPage) return null;
+
   // Function to handle navigation clicks, primarily for closing the mobile menu
   const handleNavClick = () => {
     setIsMenuOpen(false);

client/src/pages/HomePage.jsx

@@ -22,6 +22,12 @@ export default function HomePage() {
     return () => {
       cancelAnimationFrame(rafId);
       lenis.destroy();
+      // Lenis sets overflow:hidden on html/body and uses CSS transforms for scrolling.
+      // Its destroy() doesn't always restore these during React's async cleanup,
+      // causing the next page to render "blank" (content hidden by overflow:hidden).
+      document.documentElement.style.overflow = '';
+      document.body.style.overflow = '';
+      window.scrollTo(0, 0);
     };
   }, []);
 

client/src/pages/JoinPage.jsx

@@ -17,7 +17,7 @@ export default function JoinUs() {
   return (
     // FIX: Changed from 'fixed' to 'absolute' to ensure natural scrolling
     // Added 'min-h-screen' and 'bg-black' to cover everything
-    <div className="absolute inset-0 z-[100] w-full min-h-screen bg-black text-white flex flex-col">
+    <div className="fixed inset-0 z-[100] w-full min-h-screen bg-black text-white flex flex-col overflow-y-auto">
 
       {/* Background Texture - Fixed Position so it stays while scrolling */}
       <div className="fixed inset-0 opacity-[0.03] pointer-events-none"