Section: Directory Hero

A specialized hero section for directory-style pages. Features a search bar, category filters, and a results count. Use this as the entry point for tool directories, resource collections, or marketplace listings.

Props

Name	Type	Required	Description	Default
`title`	string	Yes	Directory title	—
`description`	string	No	Subtitle or tagline	—
`searchPlaceholder`	string	No	Search input placeholder text	`"Search..."`
`showSearch`	boolean	No	Show the search bar	`true`
`showCount`	boolean	No	Show total items count	`true`
`className`	string	No	Custom CSS class	—

How It Works

The directory hero provides a search interface that filters the Items Grid section on the same page. When a user types in the search bar, items are filtered client-side by title, description, and tags.

Minimal Example

{
  "type": "directory-hero",
  "title": "AI Tools Directory"
}

Full Example

{
  "type": "directory-hero",
  "title": "The Best AI Tools for Developers",
  "description": "Discover 200+ AI-powered tools to accelerate your workflow. Updated weekly.",
  "searchPlaceholder": "Search tools by name or category...",
  "showSearch": true,
  "showCount": true
}

Common Patterns

Tool Directory

{
  "type": "directory-hero",
  "title": "Developer Tools",
  "description": "Curated collection of tools for modern developers.",
  "searchPlaceholder": "Search by name, category, or use case..."
}

Resource Library

{
  "type": "directory-hero",
  "title": "Learning Resources",
  "description": "Free tutorials, courses, and guides for web development.",
  "searchPlaceholder": "Search resources...",
  "showCount": true
}

Page Structure

A typical directory page uses this section flow:

{
  "config": {
    "sections": [
      {
        "type": "directory-hero",
        "title": "AI Tools Directory",
        "description": "Find the perfect AI tool for your needs.",
        "searchPlaceholder": "Search tools..."
      },
      {
        "type": "items-grid"
      }
    ]
  }
}

The directory hero at the top provides search and filtering, while the Items Grid below displays the actual item cards. Items are created as separate item type pages in the same project.

SEO Tips

Include keywords in the title — "Best AI Tools for Marketing" ranks better than "Tool Directory"
Description as meta hook — The description often appears in search snippets
Item count builds credibility — "Browse 500+ tools" signals comprehensive coverage

Items Grid — Display the directory items
Page Type: Item — Create individual directory entries