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/pages/ParkDetail.tsx

@@ -2,6 +2,7 @@ import { useState, lazy, Suspense, useEffect } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
 import { CompanyPreviewCard } from '@/components/preview/CompanyPreviewCard';
+import { EntityBreadcrumb } from '@/components/navigation/EntityBreadcrumb';
 import { Header } from '@/components/layout/Header';
 import { getBannerUrls } from '@/lib/cloudflareImageUtils';
 import { trackPageView } from '@/lib/viewTracking';
@@ -193,6 +194,15 @@ export default function ParkDetail() {
       <Header />
       
       <main className="container mx-auto px-4 py-8 max-w-7xl">
+        {/* Breadcrumb Navigation */}
+        <EntityBreadcrumb 
+          segments={[
+            { label: 'Parks', href: '/parks' },
+            { label: park.name }
+          ]}
+          className="mb-4"
+        />
+        
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/parks')}>