Resources 1 block design & features
Resources1 is a full-page resources listing block built with shadcn/ui. The top hero section has a dot-pattern muted background and contains a breadcrumb, large headline, supporting paragraph, an email subscription input with inline submit button, and a featured resource card. Below the hero is an "All Reports" section with a checkbox-based category filter form and a responsive three-column grid of resource cards that load progressively via a "Load More" button.
Each resource card is wrapped in a bordered Card component and includes a category label header, an aspect-ratio image, a title, summary text, and a rounded Badge acting as a call-to-action link. The filter form uses pill-shaped labels with inline checkboxes rendered in a horizontal row. The email input features a rounded submit button positioned inside the field on larger screens.
The block is relatively complex with client-side state for filtering and pagination, form validation via zod and react-hook-form, and multiple composed Shadcn UI primitives. The visual style is clean with a muted hero area contrasting against the white listing section below.
On mobile the hero switches to a stacked layout with the featured card below the text content, and the resource cards collapse from three columns to a single column.