Skip to main content
Sabo provides several visually distinct components to showcase your product’s features on the marketing homepage. You can choose the one that best fits your content and design preferences.
  • Features Grid
  • Features Bento Grid
  • Features Accordion
The features grid displays a simple, clean grid of features, perfect for highlighting core functionalities with icons and brief descriptions.

​
File Location

The main component for this section is located at:
src/components/marketing/features-grid.tsx

​
Editing the Section Heading

The main title for the features grid section can be changed by editing the content of the <h2> tag inside the FeaturesGrid function.
src/components/marketing/features-grid.tsx
// ...
<h2 className="text-2xl sm:text-3xl ...">
  Celebrate the joy of accomplishment with an app designed to track
  your progress.
</h2>
// ...

​
Understanding the features Array

All content for the grid is managed in the features array at the top of the file. Each object in the array represents one feature card.
​
icon
React.ComponentType
The icon component to display. It should be imported from a library like lucide-react.
​
title
string
The title of the feature.
​
description
string
A brief description of the feature.

​
Customizing Features

To edit a feature, simply modify the corresponding object in the features array.
src/components/marketing/features-grid.tsx
const features = [
  {
    icon: IconFileText,
    title: "Extensive Documentation",
    description:
      "Our boilerplate comes with a comprehensive documentation.",
  },
  // ... more features
];
Each feature card includes a clickable link at the bottom. The destination for this link is set directly within the component’s render logic.To customize it, find the <Link> component inside the features.map loop and change its href attribute. You can also modify the link’s text and icon as needed.
src/components/marketing/features-grid.tsx
// ...
{features.map((feature, index) => {
  return (
    <div key={index} className="...">
      {/* ... Icon, Title, Description */}

      {/* Feature Link */}
      <Link
        href="/your-custom-url" // Change this URL
        className="..."
      >
        Your Link Text // You can change this text
        <ArrowRight className="..." />
      </Link>
    </div>
  );
})}
// ...
For more dynamic links, you can add an href property to each object in the features array. Then, you can update the link like this: <Link href={feature.href}>.