No-results state shows clear message with suggestions, not blank page

A blank results grid after a zero-match search reads as a broken page. Users do not infer your filters are too narrow — they infer this site is down or this directory doesn't have what I need and bounce. A deliberate empty state with a message naming what was searched, an explanation of why zero matched, and clear next-action buttons (clear filters, view all, browse categories) recovers the session and keeps the user inside the funnel instead of back in Google typing a competitor's name.

When results.length === 0, render a dedicated empty-state component with a heading, an explanation, and at least two recovery actions (clear filters, browse categories). Edit components/ListingGrid.tsx:

if (results.length === 0) {
  return (
    <div className="text-center py-12">
      <h3>No results found</h3>
      <button onClick={onClearFilters}>View all listings</button>
      <Link href="/categories">Explore popular categories</Link>
    </div>
  )
}

• ID: directory-search-discovery.pagination-url.empty-state

• Severity: high

• What to look for: Enumerate all relevant files and Perform a search or apply filters that return zero results. Check whether the page displays a clear message like "No results found for 'xyz'" or "No listings match your criteria." Look for helpful suggestions such as "Try adjusting your filters," "View all listings," or "Explore popular categories." Verify this is not a blank page or error state.

• Pass criteria: No more than 0 violations are acceptable. When there are no results, a clear, user-friendly message is displayed. Suggestions for next steps (relax filters, view all, explore categories) are provided.

• Fail criteria: A blank page is shown, or a generic/technical error message, or no guidance for the user.

• Skip (N/A) when: Search is not implemented or results always exist. Signal: no search/filter functionality found.

• Detail on fail: "Empty results show only the search term with no message or suggestions. User is left confused." or "Blank page shown with no indication of why results are missing."

• Remediation: Render a helpful empty state:

  // components/ListingGrid.tsx
  export function ListingGrid({ results, filters, onClearFilters }) {
    if (results.length === 0) {
      return (
        <div className="text-center py-12">
          <h3 className="text-xl font-semibold mb-2">No results found</h3>
          <p className="text-gray-600 mb-6">
            We couldn't find any listings matching your criteria.
          </p>
          <div className="space-y-3">
            <button onClick={onClearFilters} className="block w-full btn btn-primary">
              View all listings
            </button>
            <button className="block w-full btn btn-secondary">
              Explore popular categories
            </button>
          </div>
        </div>
      )
    }
  
    return <div className="grid grid-cols-3 gap-4">{/* results */}</div>
  }