feat: Create ParkOwner card component

src/App.tsx

@@ -14,6 +14,7 @@ import RideDetail from "./pages/RideDetail";
 import Rides from "./pages/Rides";
 import Manufacturers from "./pages/Manufacturers";
 import Designers from "./pages/Designers";
+import ParkOwners from "./pages/ParkOwners";
 import Auth from "./pages/Auth";
 import Profile from "./pages/Profile";
 import UserSettings from "./pages/UserSettings";
@@ -44,6 +45,7 @@ function AppContent() {
                 <Route path="/rides" element={<Rides />} />
                 <Route path="/manufacturers" element={<Manufacturers />} />
                 <Route path="/designers" element={<Designers />} />
+                <Route path="/owners" element={<ParkOwners />} />
                 <Route path="/auth" element={<Auth />} />
                 <Route path="/profile" element={<Profile />} />
                 <Route path="/profile/:username" element={<Profile />} />

src/components/park-owners/ParkOwnerCard.tsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Building2, Star, MapPin } from 'lucide-react';
+import { Company } from '@/types/database';
+
+interface ParkOwnerCardProps {
+  company: Company;
+}
+
+const ParkOwnerCard = ({ company }: ParkOwnerCardProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/owners/${company.slug}/parks/`);
+  };
+
+  const getCompanyIcon = () => {
+    return <Building2 className="h-5 w-5" />;
+  };
+
+  return (
+    <Card className="cursor-pointer hover:shadow-lg transition-all duration-200 hover:-translate-y-1 group">
+      <CardHeader className="pb-3">
+        <div className="flex items-start justify-between">
+          <div className="flex items-center space-x-3">
+            <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
+              {company.logo_url ? (
+                <img 
+                  src={company.logo_url} 
+                  alt={`${company.name} logo`}
+                  className="w-8 h-8 object-contain"
+                />
+              ) : (
+                getCompanyIcon()
+              )}
+            </div>
+            <div className="flex-1 min-w-0">
+              <CardTitle className="text-lg font-semibold truncate">
+                {company.name}
+              </CardTitle>
+              <div className="flex items-center gap-2 mt-1">
+                <Badge variant="secondary" className="text-xs">
+                  Property Owner
+                </Badge>
+                {company.founded_year && (
+                  <span className="text-xs text-muted-foreground">
+                    Est. {company.founded_year}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </CardHeader>
+      
+      <CardContent className="pt-0">
+        {company.description && (
+          <p className="text-sm text-muted-foreground mb-4 line-clamp-2">
+            {company.description}
+          </p>
+        )}
+        
+        <div className="space-y-2 mb-4">
+          {company.headquarters_location && (
+            <div className="flex items-center text-sm text-muted-foreground">
+              <MapPin className="h-4 w-4 mr-2 flex-shrink-0" />
+              <span className="truncate">{company.headquarters_location}</span>
+            </div>
+          )}
+          
+          <div className="flex items-center text-sm text-muted-foreground">
+            <Star className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span>
+              {company.average_rating > 0 
+                ? `${company.average_rating.toFixed(1)} rating`
+                : 'No ratings yet'
+              }
+              {company.review_count > 0 && (
+                <span className="ml-1">
+                  ({company.review_count} review{company.review_count !== 1 ? 's' : ''})
+                </span>
+              )}
+            </span>
+          </div>
+        </div>
+        
+        <Button 
+          onClick={handleClick}
+          className="w-full"
+          variant="outline"
+        >
+          View Owned Parks
+        </Button>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default ParkOwnerCard;

src/pages/ParkOwners.tsx

@@ -0,0 +1,175 @@
+import React, { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { Header } from '@/components/layout/Header';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search, Filter, Building2 } from 'lucide-react';
+import { supabase } from '@/integrations/supabase/client';
+import ParkOwnerCard from '@/components/park-owners/ParkOwnerCard';
+import { Company } from '@/types/database';
+
+const ParkOwners = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [sortBy, setSortBy] = useState('name');
+  const [filterBy, setFilterBy] = useState('all');
+
+  const { data: parkOwners, isLoading } = useQuery({
+    queryKey: ['park-owners'],
+    queryFn: async () => {
+      // Get companies that are property owners
+      const { data, error } = await supabase
+        .from('companies')
+        .select('*')
+        .in('id', 
+          await supabase
+            .from('parks')
+            .select('property_owner_id')
+            .not('property_owner_id', 'is', null)
+            .then(({ data }) => data?.map(park => park.property_owner_id) || [])
+        )
+        .order('name');
+
+      if (error) throw error;
+      return data as Company[];
+    },
+  });
+
+  const filteredAndSortedOwners = React.useMemo(() => {
+    if (!parkOwners) return [];
+
+    let filtered = parkOwners.filter(owner => {
+      const matchesSearch = owner.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                          (owner.description && owner.description.toLowerCase().includes(searchTerm.toLowerCase()));
+      
+      if (filterBy === 'all') return matchesSearch;
+      if (filterBy === 'with-rating') return matchesSearch && owner.average_rating > 0;
+      if (filterBy === 'established') return matchesSearch && owner.founded_year;
+      
+      return matchesSearch;
+    });
+
+    // Sort
+    filtered.sort((a, b) => {
+      switch (sortBy) {
+        case 'name':
+          return a.name.localeCompare(b.name);
+        case 'rating':
+          return (b.average_rating || 0) - (a.average_rating || 0);
+        case 'founded':
+          return (b.founded_year || 0) - (a.founded_year || 0);
+        case 'reviews':
+          return (b.review_count || 0) - (a.review_count || 0);
+        default:
+          return 0;
+      }
+    });
+
+    return filtered;
+  }, [parkOwners, searchTerm, sortBy, filterBy]);
+
+  return (
+    <div className="min-h-screen bg-background">
+      <Header />
+      
+      <main className="container mx-auto px-4 py-8">
+        <div className="flex items-center gap-3 mb-8">
+          <div className="p-2 bg-primary/10 rounded-lg">
+            <Building2 className="h-6 w-6 text-primary" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold">Property Owners</h1>
+            <p className="text-muted-foreground">
+              Discover companies that own and manage theme parks
+            </p>
+          </div>
+        </div>
+
+        {/* Search and Filters */}
+        <div className="flex flex-col sm:flex-row gap-4 mb-8">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+            <Input
+              placeholder="Search property owners..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+          
+          <Select value={sortBy} onValueChange={setSortBy}>
+            <SelectTrigger className="w-full sm:w-48">
+              <SelectValue placeholder="Sort by" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="name">Name</SelectItem>
+              <SelectItem value="rating">Rating</SelectItem>
+              <SelectItem value="founded">Founded Year</SelectItem>
+              <SelectItem value="reviews">Review Count</SelectItem>
+            </SelectContent>
+          </Select>
+
+          <Select value={filterBy} onValueChange={setFilterBy}>
+            <SelectTrigger className="w-full sm:w-48">
+              <Filter className="h-4 w-4 mr-2" />
+              <SelectValue placeholder="Filter" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Owners</SelectItem>
+              <SelectItem value="with-rating">With Ratings</SelectItem>
+              <SelectItem value="established">Established</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        {/* Results Count */}
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary">
+              {filteredAndSortedOwners?.length || 0} property owners
+            </Badge>
+            {searchTerm && (
+              <Badge variant="outline">
+                Searching: "{searchTerm}"
+              </Badge>
+            )}
+          </div>
+        </div>
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="text-center py-12">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary mx-auto"></div>
+            <p className="text-muted-foreground mt-4">Loading property owners...</p>
+          </div>
+        )}
+
+        {/* Property Owners Grid */}
+        {!isLoading && filteredAndSortedOwners && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+            {filteredAndSortedOwners.map((owner) => (
+              <ParkOwnerCard key={owner.id} company={owner} />
+            ))}
+          </div>
+        )}
+
+        {/* Empty State */}
+        {!isLoading && filteredAndSortedOwners?.length === 0 && (
+          <div className="text-center py-12">
+            <Building2 className="h-12 w-12 text-muted-foreground mx-auto mb-4" />
+            <h3 className="text-lg font-semibold mb-2">No property owners found</h3>
+            <p className="text-muted-foreground">
+              {searchTerm 
+                ? "Try adjusting your search terms or filters"
+                : "No property owners are currently available"
+              }
+            </p>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+};
+
+export default ParkOwners;