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/DesignerDetail.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, lazy, Suspense } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
+import { EntityBreadcrumb } from '@/components/navigation/EntityBreadcrumb';
 import { Header } from '@/components/layout/Header';
 import { getBannerUrls } from '@/lib/cloudflareImageUtils';
 import { Button } from '@/components/ui/button';
@@ -181,6 +182,15 @@ export default function DesignerDetail() {
       <Header />
       
       <main className="container mx-auto px-4 py-8 max-w-7xl">
+        {/* Breadcrumb Navigation */}
+        <EntityBreadcrumb 
+          segments={[
+            { label: 'Designers', href: '/designers' },
+            { label: designer.name }
+          ]}
+          className="mb-4"
+        />
+        
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/designers')}>

src/pages/ManufacturerDetail.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, lazy, Suspense } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
+import { EntityBreadcrumb } from '@/components/navigation/EntityBreadcrumb';
 import { Header } from '@/components/layout/Header';
 import { trackPageView } from '@/lib/viewTracking';
 import { getBannerUrls } from '@/lib/cloudflareImageUtils';
@@ -191,6 +192,15 @@ export default function ManufacturerDetail() {
       <Header />
       
       <main className="container mx-auto px-4 py-8 max-w-7xl">
+        {/* Breadcrumb Navigation */}
+        <EntityBreadcrumb 
+          segments={[
+            { label: 'Manufacturers', href: '/manufacturers' },
+            { label: manufacturer.name }
+          ]}
+          className="mb-4"
+        />
+        
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/manufacturers')}>

src/pages/OperatorDetail.tsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, lazy, Suspense } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
+import { EntityBreadcrumb } from '@/components/navigation/EntityBreadcrumb';
 import { Header } from '@/components/layout/Header';
 import { trackPageView } from '@/lib/viewTracking';
 import { getBannerUrls } from '@/lib/cloudflareImageUtils';
@@ -220,6 +221,15 @@ export default function OperatorDetail() {
       <Header />
       
       <main className="container mx-auto px-4 py-8 max-w-7xl">
+        {/* Breadcrumb Navigation */}
+        <EntityBreadcrumb 
+          segments={[
+            { label: 'Operators', href: '/operators' },
+            { label: operator.name }
+          ]}
+          className="mb-4"
+        />
+        
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button variant="ghost" onClick={() => navigate('/operators')}>

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')}>

src/pages/RideDetail.tsx

@@ -3,6 +3,7 @@ import { useParams, useNavigate, Link } from 'react-router-dom';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';
 import { CompanyPreviewCard } from '@/components/preview/CompanyPreviewCard';
 import { ParkPreviewCard } from '@/components/preview/ParkPreviewCard';
+import { EntityBreadcrumb } from '@/components/navigation/EntityBreadcrumb';
 import { Header } from '@/components/layout/Header';
 import { getBannerUrls } from '@/lib/cloudflareImageUtils';
 import { trackPageView } from '@/lib/viewTracking';
@@ -197,8 +198,25 @@ export default function RideDetail() {
   return (
     <div className="min-h-screen bg-background">
       <Header />
-      
+
       <main className="container mx-auto px-4 py-8 max-w-7xl">
+        {/* Breadcrumb Navigation */}
+        <EntityBreadcrumb 
+          segments={[
+            { label: 'Parks', href: '/parks' },
+            { 
+              label: ride.park.name, 
+              href: `/parks/${ride.park.slug}`,
+              showPreview: true,
+              previewType: 'park',
+              previewSlug: ride.park.slug
+            },
+            { label: 'Rides', href: `/parks/${ride.park.slug}#rides` },
+            { label: ride.name }
+          ]}
+          className="mb-4"
+        />
+        
         {/* Back Button and Edit Button */}
         <div className="flex items-center justify-between mb-6">
           <Button