Features

The Features component displays a section showcasing different features or capabilities of a product or service.

Props

The Features component accepts the following props:

• sectionTitle (string, required): The title of the features section.

• sectionSubtitle (string, required): The subtitle or tagline for the features section.

• sectionTitlePara (string, required): A paragraph describing the purpose or goal of the features section.

• features (Feature[], required): An array of objects representing each feature. Each feature object has the following properties:

  • title (string, required): The title or name of the feature.

  • img (string, required): The image path representing the feature.

  • desc (string, required): The description or details of the feature.

Usage Example

<Features
  sectionTitle="Features"
  sectionSubtitle="What makes us different?"
  sectionTitlePara="We are a team of passionate developers who are dedicated to making your life easier. We are constantly working on new features to make your experience better."
  features={[
    {
      "img": "/images/icon/icon-01.svg",
      "title": "Crafted for SaaS",
      "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tortor."
    },
    {
      "img": "/images/icon/icon-02.svg",
      "title": "High-quality Design",
      "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tortor."
    },
    {
      "img": "/images/icon/icon-03.svg",
      "title": "All Essential Sections",
      "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tortor."
    },
    {
      "img": "/images/icon/icon-04.svg",
      "title": "Speed Optimized",
      "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tortor."
    },
    {
      "img": "/images/icon/icon-05.svg",
      "title": "Fully Customizable",
      "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tortor."
    },
    {
      "img": "/images/icon/icon-06.svg",
      "title": "Regular Updates",
      "desc": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In convallis tortor."
    }
  ]}
/>

In the example above, the Features component is used with sample data to render a section showcasing different features. Make sure to replace the prop values with the appropriate data and adjust the image paths based on your project structure.

Styling

The Features component uses Tailwind CSS utility classes for styling. You can customize the component's appearance by modifying these classes or extending them with your own styles.

For more information on Tailwind CSS, refer to the official documentation: https://tailwindcss.com/docs