Each result card shows name, category, image, and distinguishing data point

Result cards are the scanning surface where users decide which listing to click into. A card showing only a name and image forces users to open every result to compare them, destroying the point of a listing grid. A card with name, category, image, and at least one distinguishing signal (rating, distance, price, hours) lets users triage 20+ listings in seconds. This is a content-integrity and user-experience failure simultaneously: thin cards bury the directory's data value and tank click-through to detail pages.

Design ListingCard to always render four fields: image, name, category, and a distinguishing data point appropriate for the directory type (rating for restaurants, price for rentals, distance for services). Edit components/ListingCard.tsx:

<Image src={listing.imageUrl} alt={listing.name} width={300} height={200} />
<h3>{listing.name}</h3>
<p>{listing.category}</p>
<span>⭐ {listing.rating} · {listing.distance} km</span>

Fall back to a placeholder image when imageUrl is null.

• ID: card-content

• Severity: high

• What to look for: Enumerate all relevant files and Examine a result card in the listings grid. Verify that it displays: (1) listing name (required, prominent), (2) category or type (required), (3) image (required, visual), (4) a distinguishing data point such as rating, distance, price, or hours (required). Check multiple result cards to ensure consistency.

• Pass criteria: At least 1 implementation must be present. Every result card displays name, category, image, and at least one distinguishing data point (rating, distance, price, hours, address, etc.). Information is clear and readable.

• Fail criteria: Any of the four elements is missing from result cards (no image, no category, no distinguishing point), or the distinguishing point is not relevant/useful.

• Skip (N/A) when: Results/listing grid is not implemented. Signal: no listing cards found.

• Detail on fail: "Result cards show only name and image. Missing category, rating, and other distinguishing info." or "Category shown but no image. Cards lack visual interest and are hard to scan."

• Remediation: Design comprehensive result cards:

  // components/ListingCard.tsx
  import Image from 'next/image'
  
  export function ListingCard({ listing }) {
    return (
      <div className="border rounded-lg overflow-hidden">
        <Image
          src={listing.imageUrl}
          alt={listing.name}
          width={300}
          height={200}
          className="w-full h-48 object-cover"
        />
        <div className="p-4">
          <h3 className="font-bold text-lg">{listing.name}</h3>
          <p className="text-sm text-gray-600">{listing.category}</p>
          <div className="flex justify-between items-center mt-2">
            <span className="text-sm">⭐ {listing.rating}</span>
            <span className="text-sm">{listing.distance} km away</span>
          </div>
        </div>
      </div>
    )
  }
  

  Adjust fields based on your directory type (restaurant, real estate, services, etc.). The key is providing enough context for users to make a quick decision.