Add breadcrumb and transitions

Introduce breadcrumb navigation component and integrate into detail pages with hover previews; add PageTransition to App for smooth navigations and loading animations.

src/components/layout/PageTransition.tsx

@@ -0,0 +1,34 @@
+import { ReactNode, useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+
+interface PageTransitionProps {
+  children: ReactNode;
+}
+
+export function PageTransition({ children }: PageTransitionProps) {
+  const location = useLocation();
+  const [displayLocation, setDisplayLocation] = useState(location);
+  const [transitionStage, setTransitionStage] = useState<'fade-in' | 'fade-out'>('fade-in');
+
+  useEffect(() => {
+    if (location !== displayLocation) {
+      setTransitionStage('fade-out');
+    }
+  }, [location, displayLocation]);
+
+  const onAnimationEnd = () => {
+    if (transitionStage === 'fade-out') {
+      setTransitionStage('fade-in');
+      setDisplayLocation(location);
+    }
+  };
+
+  return (
+    <div
+      className={`${transitionStage === 'fade-out' ? 'animate-fade-out' : 'animate-fade-in'}`}
+      onAnimationEnd={onAnimationEnd}
+    >
+      {children}
+    </div>
+  );
+}