# Feature 5

> 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-5).

- Page, with a live preview: https://shadcn.exchange/r/cnippet-blocks/feature-5
- Screenshot: https://shadcn.exchange/shot/cnippet-blocks/feature-5/light.png
- Registry item: https://blocks.cnippet.dev/r/feature-5.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-5.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/utils`

## Files

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

```tsx
"use client";

import {
  BatteryCharging,
  ExternalLink,
  Fuel,
  Headphones,
  LayoutGrid,
  PlusSquare,
} from "lucide-react";
import { cn } from "@/lib/utils";

const featuresRow1 = [
  {
    description: "Comprehensive installation of high-efficiency solar panels.",
    icon: PlusSquare,
    id: "1",
    title: "Solar Panel Installation",
  },
  {
    description:
      "Design and install solar roofing systems that blend seamlessly.",
    icon: LayoutGrid,
    id: "2",
    title: "Custom Solar Roofing",
  },
  {
    description:
      "Solar for businesses to reduce energy costs and carbon footprint.",
    icon: ExternalLink,
    id: "3",
    title: "Commercial Solar Energy",
  },
  {
    description:
      "Tailored solar energy plans designed to meet specific energy.",
    icon: Headphones,
    id: "4",
    title: "Solar Energy Consulting",
  },
];

const featuresRow2 = [
  {
    description: "Solar-powered electric vehicle charging station setups.",
    filled: true,
    icon: Fuel,
    id: "5",
    title: "EV Charging Station",
  },
  {
    description: "Efficient battery storage solutions to store excess energy.",
    filled: true,
    icon: BatteryCharging,
    id: "6",
    title: "Solar Energy Consulting",
  },
];

export function Feature5() {
  return (
    <section className="w-full bg-white py-16 md:py-24">
      <div className="mx-auto w-full max-w-6xl px-6">
        {/* Header - Centered */}
        <div className="mb-16 text-center">
          <div className="mb-6 inline-flex items-center gap-2 font-semibold text-gray-700 text-sm dark:text-gray-300">
            <svg
              className="h-4 w-4 text-[#ff6b35]"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path d="M13 3L4 14h7v7l9-11h-7V3z" />
            </svg>
            HELIO FEATURES
          </div>

          <h2 className="font-bold text-4xl text-gray-900 leading-tight md:text-5xl dark:text-gray-100">
            We provide the best solar
            <br />
            services{" "}
            <span className="font-normal text-[#ff6b35] italic">
              all-around
            </span>
          </h2>
        </div>

        {/* Features Grid */}
        <div className="overflow-hidden rounded-sm border border-gray-200 dark:border-neutral-700">
          {/* Row 1 - 4 columns */}
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4">
            {featuresRow1.map((feature, index) => (
              <div
                className={cn(
                  "flex flex-col p-8",
                  index !== featuresRow1.length - 1 &&
                    "border-gray-200 lg:border-r dark:border-neutral-700",
                  index < 2 &&
                    "border-gray-200 sm:border-r lg:border-r dark:border-neutral-700",
                  index === 1 && "sm:border-r-0 lg:border-r",
                  "border-gray-200 border-b sm:border-b lg:border-b dark:border-neutral-700",
                )}
                key={feature.id}
              >
                {/* Icon */}
                <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-xl border border-gray-200 bg-white dark:border-neutral-700">
                  <feature.icon
                    className="h-6 w-6 text-neutral-800"
                    strokeWidth={1.5}
                  />
                </div>

                {/* Content */}
                <h3 className="mb-2 font-semibold text-gray-900 text-lg dark:text-gray-100">
                  {feature.title}
                </h3>

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

          {/* Row 2 - 2 columns centered */}
          <div className="grid grid-cols-1 sm:grid-cols-2">
            {featuresRow2.map((feature, index) => (
              <div
                className={cn(
                  "flex flex-col items-center p-8 text-center",
                  index === 0 &&
                    "border-gray-200 sm:border-r dark:border-neutral-700",
                  index !== featuresRow2.length - 1 &&
                    "border-gray-200 border-b sm:border-b-0 dark:border-neutral-700",
                )}
                key={feature.id}
              >
                {/* Icon - Filled style */}
                <div className="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-neutral-100">
                  <feature.icon
                    className="h-6 w-6 text-neutral-800"
                    strokeWidth={1.5}
                  />
                </div>

                {/* Content */}
                <h3 className="mb-2 font-semibold text-gray-900 text-lg dark:text-gray-100">
                  {feature.title}
                </h3>

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

export default Feature5;
```