Add page component transitions

package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
+    "framer-motion": "^12.35.0",
     "gsap": "^3.14.2",
     "lucide-react": "^0.564.0",
     "react": "^19.2.0",

src/components/AppLayout.tsx

@@ -1,8 +1,6 @@
-/* Layout that each page will follow */
 import '../css/app-layout.css';
 import { Outlet } from 'react-router-dom';
-
-import Navbar from './navbar/Navbar.tsx';
+import Navbar from './navbar/Navbar';
 
 export default function AppLayout() {
     return (

src/components/Carousel.tsx

@@ -8,21 +8,23 @@ type CarouselProps = {
 export default function Carousel({ type }: CarouselProps) {
     return (
         <>
-            <div>
-                <h2 className="carousel-title">{type}</h2>
-                <div className="carousel">
-                    <Organization
-                        title="Math Club"
-                        desc="The RPI Math Faculty approved and Union affiliated math club!"
-                    />
-                    <Organization
-                        title="Math Club"
-                        desc="The RPI Math Faculty approved and Union affiliated math club!"
-                    />
-                    <Organization
-                        title="Math Club"
-                        desc="The RPI Math Faculty approved and Union affiliated math club!"
-                    />
+            <div className="carousel-container">
+                <div>
+                    <span className="carousel-title">{type}</span>
+                    <div className="carousel">
+                        <Organization
+                            title="Math Club"
+                            desc="The RPI Math Faculty approved and Union affiliated math club!"
+                        />
+                        <Organization
+                            title="Math Club"
+                            desc="The RPI Math Faculty approved and Union affiliated math club!"
+                        />
+                        <Organization
+                            title="Math Club"
+                            desc="The RPI Math Faculty approved and Union affiliated math club!"
+                        />
+                    </div>
                 </div>
             </div>
         </>

src/components/navbar/NavbarLink.tsx

@@ -1,13 +1,38 @@
-import { NavLink } from 'react-router-dom';
+import { NavLink, useNavigate } from 'react-router-dom';
+import type { MouseEvent } from 'react';
 
 type NavbarLinkProps = {
     label: string;
     nav: string;
 };
 
 export default function NavbarLink({ label, nav }: NavbarLinkProps) {
+    const navigate = useNavigate();
+
+    const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault();
+
+        const content = document.querySelector('.app-content');
+        if (!content) {
+            navigate(nav);
+            return;
+        }
+
+        content.classList.add('page-transition');
+        setTimeout(() => {
+            navigate(nav);
+        }, 300);
+        setTimeout(() => {
+            content.classList.remove('page-transition');
+        }, 400);
+    };
+
     return (
-        <NavLink to={nav} className={({ isActive }) => `navlink ${isActive ? 'active-navlink' : ''}`}>
+        <NavLink
+            to={nav}
+            onClick={handleClick}
+            className={({ isActive }) => `navlink ${isActive ? 'active-navlink' : ''}`}
+        >
             {label}
         </NavLink>
     );

src/css/app-layout.css

@@ -8,5 +8,15 @@
 
 .app-content {
     padding: 3rem;
-    width: 75%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    transition:
+        transform 0.4s ease,
+        opacity 0.4s ease;
+}
+
+.app-content.page-transition {
+    transform: scale(0.95);
+    opacity: 0.1;
 }

src/css/carousel.css

@@ -4,6 +4,12 @@
     gap: 4rem;
 }
 
+.carousel-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
 .carousel {
     width: 100%;
     background: var(--carousel-bg);