Resources 2 block design & features
Resources2 is a resources listing block using Shadcn UI components. The top section displays a heading and subtitle followed by a 12-column grid with a large featured article spanning seven columns and two smaller stacked article cards occupying five columns. Below is a "Latest updates" section with a horizontal Tabs component for category filtering and a list of article rows showing title, category, date, and author avatars.
Featured and secondary cards use full-bleed photography with a grayscale filter that reduces on hover. A gradient overlay sits over each image with white text for the title and metadata. Badges with frosted-glass backgrounds label cards as "Featured Article" or "Latest." The updates list uses border-separated rows with a subtle primary-colored underline on the active tab. Author avatars overlap in a compact stacked arrangement.
The visual approach is image-forward with high contrast between the photo backgrounds and the text overlays. Hover transitions include a slight upward translation and grayscale reduction. The tab filtering is client-side with category state. Overall complexity is moderate with the image-overlay cards adding visual density.
On mobile the featured grid collapses to a single column with cards stacking vertically, and the updates list switches from a row layout to a stacked format.