# Feature 4

> Feature

A shadcn/ui block from the [@cnippet-blocks](https://blocks.cnippet.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet-blocks/feature-4).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/feature-4
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/feature-4/light.png
- Registry item: https://blocks.cnippet.dev/r/feature-4.json
- Categories: feature
- Listed: 2026-11-01, source last changed 2026-11-01

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/cnippet-blocks/feature-4.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: `@cnippet/badge`, `@cnippet/utils`

## Files

### `registry/default/sections/feature-4.tsx`

```tsx
"use client";

import { Grid3X3, Send, Settings2, Zap } from "lucide-react";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

const features = [
  {
    description:
      "Lorem ipsum dolor sit amet, lorem consectetur adipiscing elit. Ipsum Phasellus sodales leo id commodo",
    icon: Grid3X3,
    iconColor: "text-violet-500",
    id: "1",
    title: "Add Feature Here",
  },
  {
    description:
      "Lorem ipsum dolor sit amet, lorem consectetur adipiscing elit. Ipsum Phasellus sodales leo id commodo",
    icon: Settings2,
    iconColor: "text-emerald-500",
    id: "2",
    title: "Add Feature Here",
  },
  {
    description:
      "Lorem ipsum dolor sit amet, lorem consectetur adipiscing elit. Ipsum Phasellus sodales leo id commodo",
    icon: Zap,
    iconColor: "text-rose-500",
    id: "3",
    title: "Add Feature Here",
  },
  {
    description:
      "Lorem ipsum dolor sit amet, lorem consectetur adipiscing elit. Ipsum Phasellus sodales leo id commodo",
    icon: Send,
    iconColor: "text-cyan-400",
    id: "4",
    title: "Add Feature Here",
  },
];

export function Feature4() {
  return (
    <section className="relative w-full overflow-hidden bg-[#0f1419] py-16 md:py-24">
      {/* Decorative gradient circles */}
      <div className="pointer-events-none absolute bottom-0 left-0 h-64 w-64">
        <svg
          className="h-full w-full opacity-60"
          fill="none"
          viewBox="0 0 256 256"
        >
          <circle
            cx="80"
            cy="200"
            fill="none"
            r="100"
            stroke="url(#gradient1)"
            strokeWidth="2"
          />
          <circle
            cx="100"
            cy="220"
            fill="none"
            r="60"
            stroke="url(#gradient2)"
            strokeWidth="2"
          />
          <defs>
            <linearGradient id="gradient1" x1="0%" x2="100%" y1="0%" y2="100%">
              <stop offset="0%" stopColor="#8b5cf6" />
              <stop offset="100%" stopColor="#06b6d4" />
            </linearGradient>
            <linearGradient id="gradient2" x1="0%" x2="100%" y1="0%" y2="100%">
              <stop offset="0%" stopColor="#06b6d4" />
              <stop offset="100%" stopColor="#8b5cf6" />
            </linearGradient>
          </defs>
        </svg>
      </div>

      <div className="pointer-events-none absolute right-0 bottom-0 h-64 w-64">
        <svg
          className="h-full w-full opacity-60"
          fill="none"
          viewBox="0 0 256 256"
        >
          <circle
            cx="176"
            cy="200"
            fill="none"
            r="100"
            stroke="url(#gradient3)"
            strokeWidth="2"
          />
          <circle
            cx="156"
            cy="220"
            fill="none"
            r="60"
            stroke="url(#gradient4)"
            strokeWidth="2"
          />
          <defs>
            <linearGradient id="gradient3" x1="0%" x2="100%" y1="0%" y2="100%">
              <stop offset="0%" stopColor="#06b6d4" />
              <stop offset="100%" stopColor="#8b5cf6" />
            </linearGradient>
            <linearGradient id="gradient4" x1="0%" x2="100%" y1="0%" y2="100%">
              <stop offset="0%" stopColor="#8b5cf6" />
              <stop offset="100%" stopColor="#06b6d4" />
            </linearGradient>
          </defs>
        </svg>
      </div>

      <div className="relative z-10 mx-auto w-full max-w-6xl px-6">
        {/* Header - Two column */}
        <div className="mb-12 grid grid-cols-1 gap-8 lg:grid-cols-2">
          {/* Left */}
          <div>
            <span className="mb-4 block font-semibold text-emerald-400 text-sm uppercase tracking-wider">
              FEATURE SECTION
            </span>

            <h2 className="font-bold text-4xl text-white leading-tight md:text-5xl">
              Provide powerful
              <br />
              solutions at all times.
            </h2>
          </div>

          {/* Right */}
          <div className="flex items-end lg:justify-end">
            <p className="max-w-md text-base text-neutral-400">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. sodales
              leo id commodo.{" "}
              <Badge
                className="ml-1 inline-flex rounded-full border-neutral-600 bg-neutral-800/50 px-3 py-1 font-normal text-neutral-300 text-sm"
                variant="outline"
              >
                Vestibulum lobortis ligula vehicula.
              </Badge>
            </p>
          </div>
        </div>

        {/* Feature Cards */}
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {features.map((feature) => (
            <div
              className="rounded-2xl border border-neutral-800 bg-[#1a1f26] p-6 transition-colors hover:border-neutral-700"
              key={feature.id}
            >
              {/* Icon */}
              <div className="mb-6">
                <feature.icon className={cn("h-6 w-6", feature.iconColor)} />
              </div>

              {/* Content */}
              <h3 className="mb-3 font-semibold text-lg text-white">
                {feature.title}
              </h3>

              <p className="text-neutral-500 text-sm leading-relaxed">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

export default Feature4;
```