> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Features

> Learn how to customize the three different feature display sections available in Sabo.

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.

<Tabs>
  <Tab title="Features Grid">
    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:

    ```bash theme={null}
    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.

    ```tsx src/components/marketing/features-grid.tsx theme={null}
    // ...
    <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.

    <ParamField path="icon" type="React.ComponentType">
      The icon component to display. It should be imported from a library like `lucide-react`.
    </ParamField>

    <ParamField path="title" type="string">
      The title of the feature.
    </ParamField>

    <ParamField path="description" type="string">
      A brief description of the feature.
    </ParamField>

    #### Customizing Features

    To edit a feature, simply modify the corresponding object in the `features` array.

    ```tsx src/components/marketing/features-grid.tsx theme={null}
    const features = [
      {
        icon: IconFileText,
        title: "Extensive Documentation",
        description:
          "Our boilerplate comes with a comprehensive documentation.",
      },
      // ... more features
    ];
    ```

    #### Customizing the Feature Link

    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.

    ```tsx src/components/marketing/features-grid.tsx theme={null}
    // ...
    {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>
      );
    })}
    // ...
    ```

    <Tip>
      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}>`.
    </Tip>
  </Tab>

  <Tab title="Features Bento Grid">
    The bento grid provides a modern, asymmetrical layout to showcase key features in a visually engaging way.

    #### File Location

    The main component for this section is located at:

    ```bash theme={null}
    src/components/marketing/features-bento-grid.tsx
    ```

    #### Understanding the `features` Array

    Each feature object in the array has the following properties:

    <ParamField path="Icon" type="React.ComponentType">
      The icon component to display at the top of the card. This can be any React component, but is typically an icon imported from a library like `lucide-react`.
    </ParamField>

    <ParamField path="name" type="string">
      The title of the feature card.
    </ParamField>

    <ParamField path="description" type="string">
      A short description of the feature displayed below the title.
    </ParamField>

    <ParamField path="href" type="string">
      A URL that the card's "Learn more" link points to.
    </ParamField>

    <ParamField path="cta" type="string">
      The text for the call-to-action link. **Default**: `"Learn more"`
    </ParamField>

    <ParamField path="background" type="JSX.Element">
      A React component to display as the card's background. This allows for dynamic and interactive backgrounds.
    </ParamField>

    <ParamField path="className" type="string">
      Custom Tailwind CSS classes to control the card's position and size within the grid.
    </ParamField>

    #### Understanding Backgrounds with Their Own Data

    Typically, a card's background is a simple visual element. However, you can also use complex components for backgrounds that require their own data source, separate from the main `features` array.

    A good example in the boilerplate is one of the cards that uses a `<Marquee>` component as its background to scroll through a list of items. The data for this list comes from a dedicated `files` array, defined specifically for this purpose.

    **The Pattern:**

    1. **Define a separate data array:** Create an array (like `files` in the example) that contains the data needed *only* for your background component.
    2. **Use the data in the `background` prop:** Inside the `features` array, when defining your card, pass a component to the `background` prop. This component should then use the separate data array you created in step 1.

    ```tsx src/components/marketing/features-bento-grid.tsx theme={null}
    // 1. A separate data array for the background component
    const files = [
      { name: "item-1.pdf", body: "Description for item 1" },
      { name: "item-2.xlsx", body: "Description for item 2" },
    ];

    // ... inside the main features array
    {
      // ... card properties like Icon, name, etc.
      background: (
        // 2. The background component uses the 'files' array
        <Marquee>
          {files.map((f, idx) => (
            <figure key={idx}>{/* ... */}</figure>
          ))}
        </Marquee>
      ),
    },
    ```

    You can follow this pattern to create any custom background component that needs its own data source.
  </Tab>

  <Tab title="Features Accordion">
    The features accordion displays features in an interactive, tabbed interface that automatically cycles, with a corresponding image for each feature.

    #### File Location

    The main component for this section is located at:

    ```bash theme={null}
    src/components/marketing/features-accordion.tsx
    ```

    #### Editing the Section Heading

    The main title for the accordion section can be changed by editing the content of the `<h2>` tag inside the `FeaturesAccordion` function.

    ```tsx src/components/marketing/features-accordion.tsx theme={null}
    // ...
    <div className="mx-auto max-w-2xl text-center">
      <h2 className="text-3xl font-medium tracking-tight sm:text-4xl">
        Everything you need, nothing you don't.
      </h2>
    </div>
    // ...
    ```

    #### Managing Feature Tabs

    All of the content for the accordion tabs—including the title, description, and associated image—is managed in the `featureTabs` array at the top of the file.

    <ParamField path="id" type="string">
      A unique identifier for the tab.
    </ParamField>

    <ParamField path="title" type="string">
      The title of the feature, displayed in the tab trigger.
    </ParamField>

    <ParamField path="description" type="string">
      The detailed description shown when the tab is active.
    </ParamField>

    <ParamField path="image" type="string">
      The path to the image that appears next to the description. Images should be placed in the `public` directory.
    </ParamField>

    To customize the content, simply edit the objects within this array.

    ```tsx src/components/marketing/features-accordion.tsx theme={null}
    const featureTabs = [
      {
        id: "collaboration",
        title: "Real-time Collaboration",
        description: "Work together with your team in real-time...",
        image: "/feature-1.png",
      },
      // ... more tabs
    ];
    ```

    #### Configuring Animation and Behavior

    The component includes props to control its animation.

    * **`autoPlayInterval`**: Sets the time in milliseconds between automatic tab switches. The default is `5000` (5 seconds). You can change this value by passing it as a prop where the component is used.

      For example, to change the interval to 7 seconds, you would modify it in `src/app/(marketing)/page.tsx`:

      ```tsx src/app/(marketing)/page.tsx theme={null}
      import { FeaturesAccordion } from "@/components/marketing/features-accordion";

      export default function HomePage() {
        return (
          <main>
            {/* ...other sections */}
            <FeaturesAccordion autoPlayInterval={7000} />
            {/* ...other sections */}
          </main>
        );
      }
      ```

    * **Responsive Behavior**: On mobile screens (less than 768px wide), the layout automatically switches from a side-by-side view to a stacked view (image above text) for better readability. This is handled internally and requires no configuration.
  </Tab>
</Tabs>