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.The icon component to display. It should be imported from a library like lucide-react.
The title of the feature.
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
];
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.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}>.
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:src/components/marketing/features-bento-grid.tsx
Understanding the features Array
Each feature object in the array has the following properties: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.
The title of the feature card.
A short description of the feature displayed below the title.
A URL that the card’s “Learn more” link points to.
The text for the call-to-action link. Default: "Learn more"
A React component to display as the card’s background. This allows for dynamic and interactive backgrounds.
Custom Tailwind CSS classes to control the card’s position and size within the grid.
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:
- Define a separate data array: Create an array (like
files in the example) that contains the data needed only for your background component.
- 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.
src/components/marketing/features-bento-grid.tsx
// 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>
),
},
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: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.src/components/marketing/features-accordion.tsx
// ...
<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.A unique identifier for the tab.
The title of the feature, displayed in the tab trigger.
The detailed description shown when the tab is active.
The path to the image that appears next to the description. Images should be placed in the public directory.
src/components/marketing/features-accordion.tsx
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:
src/app/(marketing)/page.tsx
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.
