FreeBlocks

Hero Sections Card

Use this component as a catalog card for hero block collections, template bundles, or landing-page section galleries.

ReactTailwind CSSHeroBlocks

23+ blocks

Launch with a hero that converts

Hero Sections

23+ blocks

A reusable hero card pattern for modern startup landing pages.

Overview

A large preview card for grouping modern hero section blocks in a component marketplace.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

No additional packages required after Tailwind CSS setup.

Usage

tsx

<HeroSectionsCard />

Hero Sections Card.tsx

tsx

export function HeroSectionsCard() {
  return (
    <div className="overflow-hidden rounded-xl border border-white/10 bg-zinc-950 text-white">
      <div className="relative flex h-48 items-center justify-center overflow-hidden border-b border-white/10 bg-white/[0.04]">
        <div className="absolute inset-0 grid grid-cols-4 gap-px opacity-30">
          {Array.from({ length: 16 }).map((_, index) => (
            <div key={index} className="bg-zinc-950" />
          ))}
        </div>
        <div className="relative max-w-xs text-center">
          <p className="mb-2 inline-flex rounded-full border border-lime-300/25 bg-lime-300/10 px-2 py-1 text-[10px] font-semibold text-lime-200">
            23+ blocks
          </p>
          <h3 className="text-2xl font-black">
            Launch with a hero that converts
          </h3>
        </div>
      </div>
      <div className="p-5">
        <div className="flex items-center gap-3">
          <h3 className="text-xl font-bold">Hero Sections</h3>
          <span className="rounded-full border border-white/10 px-2 py-0.5 text-xs text-zinc-400">
            23+ blocks
          </span>
        </div>
        <p className="mt-2 text-sm leading-relaxed text-zinc-400">
          A reusable hero card pattern for modern startup landing pages.
        </p>
      </div>
    </div>
  );
}