Feature Section

Features 143

About

Feature Grid A responsive grid layout designed to showcase different product features, use cases, or categories. It includes a header with a title and illustration, a grid of categorized items with icons, and a call-to-action button. The component is animated using framer-motion to engage the user as they scroll.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Feature Section to your project and fits it to your theme.

Code

How Feature Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import {
  Palette,
  FlaskConical,
  Megaphone,
  Users,
  Building,
  User,
} from 'lucide-react';
import { FeatureGrid } from '@/components/ui/feature-section'; // Adjust import path as needed

// Demo data for the categories
const featureCategories = [
  {
    icon: <Palette size={24} />,
    title: 'Creators',
    items: [
      { text: 'Sell products online' },
      { text: 'Grow your newsletter' },
      { text: 'Receive contact form messages' },
    ],
  },
  {
    icon: <FlaskConical size={24} />,
    title: 'Product',
    items: [
      { text: 'Gather audience feedback' },
      { text: 'Receive feature requests' },
      { text: 'Conduct user research', href: '#' },
    ],
  },
  {
    icon: <Megaphone size={24} />,
    title: 'Marketing',
    items: [
      { text: 'Generate leads' },
      { text: 'Register users' },
      { text: 'Measure customer satisfaction' },
    ],
  },
  {
    icon: <Users size={24} />,
    title: 'HR',
    items: [
      { text: 'Evaluate employee engagement' },
      { text: 'Receive job applications' },
      { text: 'Create exit surveys' },
    ],
  },
  {
    icon: <Building size={24} />,
    title: 'Office',
    items: [
      { text: 'Organize team events' },
      { text: 'Receive help desk tickets' },
      { text: 'Collect internal suggestions' },
    ],
  },
  {
    icon: <User size={24} />,
    title: 'Personal',
    items: [
      { text: 'Create an online quiz' },
      { text: 'Send an RSVP form' },
      { text: 'Organize a volunteer signup' },
    ],
  },
];

const FeatureGridDemo = () => {
  return (
    <div className="bg-background w-full">
      <FeatureGrid
        title={
          <>
            Designed{' '}
            <span className="relative inline-block">
              for you
              <svg
                viewBox="0 0 120 6"
                className="absolute left-0 bottom-0 -mb-1 w-full"
                aria-hidden="true"
              >
                <path
                  d="M1 4.5C25.46 1.63 78.43 1.39 119 4.5"
                  stroke="#f472b6" // pink-400
                  strokeWidth="2"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  fill="none"
                />
              </svg>
            </span>
          </>
        }
        subtitle="Start from scratch or explore templates created by our community."
        illustrationSrc="https://cdn.21st.dev/assets/mirror/a3/a34227d06c72d53d1933f9ddaa7a0edc5280683112eaa03258ef40cb4261b4b9.png" // Replace with your image link
        categories={featureCategories}
        buttonText="Browse templates"
        buttonHref="#"
      />
    </div>
  );
};

export default FeatureGridDemo;