Resources Grid

A grid of resource cards, each with an icon, title, and download action. Use it to present a full library of guides and templates in one tidy section.

import { Button } from '@/components/ui/button';
import {
  Download,
  ArrowRight,
  FileText,
  FileSpreadsheet,
  Film,
} from 'lucide-react';
import { Badge } from '@/components/ui/badge';

export default function PortfolioResourcesGrid() {
  const resources = [
    {
      id: 1,
      title: 'UX Research Templates',
      description:
        'A collection of 10 ready-to-use templates for conducting effective user research sessions.',
      icon: <FileSpreadsheet className="h-10 w-10" />,
      badge: 'Templates',
      image:
        'https://images.unsplash.com/photo-1581291518857-4e27b48ff24e?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
      downloadText: 'Download Templates',
    },
    {
      id: 2,
      title: 'Website Project Estimator',
      description:
        'An interactive tool to help accurately scope and price your next web development project.',
      icon: <FileText className="h-10 w-10" />,
      badge: 'Spreadsheet',
      image:
        'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3',
      downloadText: 'Get Estimator',
    },
    {
      id: 3,
      title: 'UI Design Process Guide',
      description:
        'A comprehensive walkthrough of my professional UI design workflow from concept to handoff.',
      icon: <FileText className="h-10 w-10" />,
      badge: 'PDF Guide',
      image:
        'https://images.unsplash.com/photo-1561070791-2526d30994b5?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3',
      downloadText: 'Download Guide',
    },
    {
      id: 4,
      title: 'Portfolio Case Study Template',
      description:
        'Structure your design case studies effectively with this proven format and examples.',
      icon: <Film className="h-10 w-10" />,
      badge: 'Template',
      image:
        'https://images.unsplash.com/photo-1576153192396-180ecef2a715?q=80&w=1774&auto=format&fit=crop&ixlib=rb-4.0.3',
      downloadText: 'Download Template',
    },
  ];

  return (
    <div className="container mx-auto px-4 py-12 md:py-16">
      <div className="mx-auto max-w-4xl text-center">
        <h2 className="text-3xl font-bold tracking-tight md:text-4xl">
          Free Resources & Tools
        </h2>
        <p className="text-muted-foreground mx-auto mt-3 max-w-2xl md:text-lg">
          Download these free resources to help with your next project or level
          up your professional skills.
        </p>
      </div>

      <div className="mt-10 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
        {resources.map((resource) => (
          <div
            key={resource.id}
            className="group bg-card relative flex flex-col overflow-hidden rounded-lg border transition-all hover:shadow-md"
          >
            {/* Resource image */}
            <div className="relative aspect-[16/9] w-full overflow-hidden">
              <img
                src={resource.image}
                alt={resource.title}
                className="object-cover transition-transform duration-300 group-hover:scale-105"
              />

              {/* Resource type badge */}
              <Badge className="absolute top-3 right-3">{resource.badge}</Badge>
            </div>

            {/* Content */}
            <div className="flex flex-1 flex-col p-5">
              <div className="text-primary mb-3">{resource.icon}</div>

              <h3 className="mb-2 text-lg font-semibold">{resource.title}</h3>

              <p className="text-muted-foreground mb-4 flex-1 text-sm">
                {resource.description}
              </p>

              <Button
                asChild
                variant="outline"
                className="group mt-auto w-full"
              >
                <a href="#">
                  <Download className="mr-2 h-4 w-4" />
                  {resource.downloadText}
                </a>
              </Button>
            </div>
          </div>
        ))}
      </div>

      <div className="mt-10 text-center">
        <Button asChild variant="link" className="group">
          <a href="#">
            Browse all resources
            <ArrowRight className="ml-1 h-4 w-4 transition-transform group-hover:translate-x-1" />
          </a>
        </Button>
      </div>
    </div>
  );
}

About this block

Resources Grid opens with a centered heading and a short supporting sentence, then flows into a four-column card grid. Each card holds a 16:9 cover image with a type badge pinned to its top-right corner, a large icon below the fold, a title, a one-sentence description, and an outline download button that spans the full card width. A "Browse all resources" link sits below the grid to send visitors to a fuller catalog.

Every piece of content in the grid is independent. You can swap the cover images, relabel the badges, change the icon for each file type, rewrite the descriptions, and point each download button at a real file. The four cards shown are a starting count; add or remove entries to match however many resources you publish.

When to use

Reach for this block when you want to present a library of several files at once rather than spotlighting a single item. It suits a fintech or banking product site where visitors expect to find rate sheets, compliance guides, onboarding checklists, and spreadsheet calculators gathered in one place. The grid layout lets readers scan all available files at a glance, which is an advantage over a plain list when the files have meaningfully different cover imagery or types.

A natural flow around it on a Portfolio page:

Before

Featured Work Highlights to establish credibility before asking visitors to download
About And Skills to frame who is sharing these resources and why

After

A gated download placed immediately after to capture leads from visitors who want more depth than the free files provide
Contact Sections so readers can follow up once they have reviewed the materials

What you can display

Any set of files you want visitors to find quickly and download without friction works well here. A few directions that fit the grid format:

Financial planning kits. Group rate calculators, budget spreadsheets, and compliance checklists under clear type badges so users know the file format before they click.
Onboarding document packs. Surface account setup guides, API quick-start PDFs, and integration cheat sheets together so new customers can grab everything in one visit.
Report and research bundles. Publish quarterly outlook PDFs, benchmark studies, and data export templates as a curated library that reinforces your authority in the category.

Tip: keep badge labels to one or two words (PDF, Spreadsheet, Template) so the type is readable at small sizes on mobile screens.

About this block

When to use

A natural flow around it on a Portfolio page:

Before

Featured Work Highlights to establish credibility before asking visitors to download
About And Skills to frame who is sharing these resources and why

After

A gated download placed immediately after to capture leads from visitors who want more depth than the free files provide
Contact Sections so readers can follow up once they have reviewed the materials

What you can display

Any set of files you want visitors to find quickly and download without friction works well here. A few directions that fit the grid format:

Financial planning kits. Group rate calculators, budget spreadsheets, and compliance checklists under clear type badges so users know the file format before they click.
Onboarding document packs. Surface account setup guides, API quick-start PDFs, and integration cheat sheets together so new customers can grab everything in one visit.
Report and research bundles. Publish quarterly outlook PDFs, benchmark studies, and data export templates as a curated library that reinforces your authority in the category.

Tip: keep badge labels to one or two words (PDF, Spreadsheet, Template) so the type is readable at small sizes on mobile screens.

Resources Grid

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display