# Feature 07

> Problem-framing trio: a badge and serif headline with a muted second half above three cards, each an orb icon in concentric rings with a soft radial glow, a title and a short description. Cards fade up in sequence, stilled under reduced motion.

A shadcn/ui block from the [@hirael](https://hirael.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/hirael/feature-07).

- Page, with a live preview: https://shadcn.exchange/r/hirael/feature-07
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/hirael/feature-07-light-a7e666047cfbb2ff.png
- Registry item: https://hirael.com/r/feature-07.json
- Categories: blocks, feature
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://hirael.com/r/feature-07.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `badge`

## Files

### `registry/hirael/bases/radix/blocks/feature-07/feature-07.tsx`

```tsx
// Feature 07 from Hirael <https://hirael.com/blocks/features/feature-07>
// MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael

import type * as React from 'react';
import { EyeOff, FileWarning, RefreshCcw } from 'lucide-react';

import { cn } from '@/lib/utils';
import { Badge } from '@/registry/hirael/bases/radix/ui/badge';

const ENTER =
  'animate-in fade-in slide-in-from-bottom-4 duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both motion-reduce:animate-none';

const stagger = (index: number, step = 60, offset = 0): React.CSSProperties => ({
  animationDelay: `${offset + index * step}ms`,
});

const CHALLENGES = [
  {
    icon: FileWarning,
    title: 'YAML sprawl',
    description:
      'Pipelines grow into hundred-line files nobody wants to touch. One wrong indent and the whole run fails.',
  },
  {
    icon: RefreshCcw,
    title: 'Rerun and hope',
    description:
      'A red build with no context turns debugging into rerunning. The failing step should be obvious at a glance.',
  },
  {
    icon: EyeOff,
    title: 'No shared picture',
    description: 'Only the person who wrote the config knows how it flows. Everyone else reads logs after the fact.',
  },
];

const Feature07 = () => {
  return (
    <section
      data-slot="feature"
      className="flex w-full flex-col justify-center gap-12 bg-background px-6 py-16 md:px-10 md:py-24"
    >
      <div data-slot="feature-header" className="mx-auto flex max-w-3xl flex-col gap-4 text-center">
        <Badge
          variant="outline"
          className="mx-auto animate-in duration-500 ease-[cubic-bezier(0.22,1,0.36,1)] fill-mode-both fade-in slide-in-from-bottom-4 motion-reduce:animate-none"
        >
          The problem
        </Badge>
        <h2
          style={stagger(1)}
          className={cn(ENTER, 'font-serif text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl')}
        >
          Work you can&apos;t see <span className="text-muted-foreground">is work you can&apos;t trust</span>
        </h2>
        <p
          style={stagger(2)}
          className={cn(ENTER, 'mx-auto text-sm leading-relaxed text-muted-foreground md:text-base')}
        >
          Configuration as text scales badly once pipelines branch, fan out and gate deployments. The shape of the
          workflow disappears into the file.
        </p>
      </div>

      <div className="mx-auto grid w-full max-w-6xl grid-cols-1 gap-3 md:grid-cols-3">
        {CHALLENGES.map((challenge, i) => (
          <div
            key={challenge.title}
            data-slot="feature-card"
            style={stagger(i, 60, 180)}
            className={cn(
              ENTER,
              'group relative flex flex-col items-center gap-6 overflow-hidden rounded-xs border border-border bg-background px-8 pt-10 pb-8 text-center',
            )}
          >
            <div
              data-slot="feature-card-orb"
              className="relative mx-auto flex size-32 items-center justify-center rounded-full border border-border bg-background shadow-xs outline outline-offset-4 outline-border"
            >
              <div
                aria-hidden
                className="absolute inset-0 z-10 scale-120 bg-radial from-foreground/20 via-foreground/5 to-transparent blur-xl"
              />
              <challenge.icon aria-hidden className="relative z-20 size-12 text-primary" />
            </div>
            <div className="flex flex-col gap-1.5">
              <h3 className="text-lg font-medium text-foreground">{challenge.title}</h3>
              <p className="text-sm leading-relaxed text-muted-foreground">{challenge.description}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
};

export default Feature07;
```