Feature Grid The Feature Grid component is designed to elegantly showcase a list of features or benefits. It includes a prominent heading with a customizable wavy underline on a specific word, a descriptive paragraph, and a responsive three-column grid of features that adapts seamlessly to different screen sizes. The component is built with reusability in mind, allowing all text content and links to be passed in as props.
import { FeatureGrid } from '@/components/ui/feature-grid-1'; // Adjust path as needed
/**
* A demo component to showcase the FeatureGrid.
*/
export default function FeatureGridDemo() {
const featureList = [
'Unlimited forms',
'Unlimited submissions',
'Collect payments',
'Collect signatures',
'Collect file uploads',
'Custom "Thank You" page',
'Self email notifications',
'Redirect on completion',
'Conditional logic & calculations',
'Prevent duplicate submissions',
'Password protect forms',
'Close forms on limit or date',
'Answer piping',
'45+ languages & RTL support',
'Google Sheets integration',
'Notion integration',
'Airtable integration',
'Zapier integration',
'Make integration',
'Webhooks',
];
return (
<div className="bg-background">
<FeatureGrid
title="Build beautiful forms for free"
highlightedText="free"
description={
<>
Paywalls getting in the way? Not anymore. Tally gives you unlimited
forms and submissions, completely free, as long as you stay within
our{' '}
<a href="#" className="underline text-primary underline-offset-4">
fair usage guidelines
</a>
.
</>
}
features={featureList}
moreLink={{
href: '#',
text: 'And many, many more',
}}
/>
</div>
);
}