Founderflow Logo

Features Section Customization

Complete guide to customizing the features section in your Founderflow Boilerplate. Learn how to modify layouts, add new features, and create compelling feature showcases.

Overview

⭐

Features Section System

The features section showcases your product's key capabilities and benefits. It's highly customizable with multiple layout options, interactive elements, and content management capabilities.

✓

Multiple Layouts

Grid, list, card, and masonry layouts

✓

Interactive Elements

Hover effects, animations, and micro-interactions

✓

Content Management

Easy content updates and feature additions

✓

Visual Customization

Icons, images, colors, and styling options

✓

Responsive Design

Adapts to all screen sizes and devices

✓

Accessibility

ARIA labels, keyboard navigation, and screen reader support

Feature Layouts

Grid Layout

Classic grid layout with feature cards:

components/landing/features/GridFeatures.tsx
export default function GridFeatures() {
const features = [
{ title: 'Feature 1', description: 'Description', icon: 'Icon1' },
{ title: 'Feature 2', description: 'Description', icon: 'Icon2' }
];
return (
<section className="py-20">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center mb-12">
Our Features
</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature, index) => (
<div key={index} className="text-center p-6">
<div className="w-12 h-12 mx-auto mb-4">
<feature.icon className="w-full h-full" />
</div>
<h3 className="text-xl font-semibold mb-2">
{feature.title}
</h3>
<p className="text-gray-600">
{feature.description}
</p>
</div>
))}
</div>
</div>
</section>
);
}

List Layout

Vertical list layout with alternating content:

components/landing/features/ListFeatures.tsx
export default function ListFeatures() {
return (
<section className="py-20">
<div className="container mx-auto px-4">
<div className="space-y-16">
{features.map((feature, index) => (
<div key={index} className="grid md:grid-cols-2 gap-8 items-center">
<div className={`{index % 2 === 0 ? 'md:order-1' : 'md:order-2'}`}>
<h3 className="text-2xl font-bold mb-4">
{feature.title}
</h3>
<p className="text-gray-600">
{feature.description}
</p>
</div>
<div className={`{index % 2 === 0 ? 'md:order-2' : 'md:order-1'}`}>
<feature.icon className="w-full h-64" />
</div>
</div>
))}
</div>
</div>
</section>
);
}

Feature Configuration

Feature Data Structure

Define your features in a structured format:

lib/config/features.ts
export interface Feature {
id: string;
title: string;
description: string;
icon: string;
image?: string;
benefits?: string[];
category?: string;
}
export const features: Feature[] = [
{
id: 'feature-1',
title: 'Powerful Analytics',
description: 'Get detailed insights into your business performance',
icon: 'ChartBar',
benefits: ['Real-time data', 'Custom reports', 'Export options'],
category: 'analytics'
},
{
id: 'feature-2',
title: 'Easy Integration',
description: 'Connect with your favorite tools and services',
icon: 'Puzzle',
benefits: ['API access', 'Webhooks', 'SDKs'],
category: 'integration'
}
];

Dynamic Feature Loading

Load features dynamically from your CMS or API:

components/landing/features/DynamicFeatures.tsx
import { useEffect, useState } from 'react';
import { Feature } from '@/lib/config/features';
export default function DynamicFeatures() {
const [features, setFeatures] = useState<Feature[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchFeatures = async () => {
try {
const response = await fetch('/api/features');
const data = await response.json();
setFeatures(data);
} catch (error) {
console.error('Error fetching features:', error);
} finally {
setLoading(false);
}
};
fetchFeatures();
}, []);
if (loading) return <div>Loading...</div>;
return (
<section className="py-20">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center mb-12">
Our Features
</h2>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map((feature) => (
<FeatureCard key={feature.id} feature={feature} />
))}
</div>
</div>
</section>
);
}

Next Steps

Now that you understand features customization, explore these related areas:

Header Customization

Learn how to customize your header component.

Hero Customization

Customize your hero section layout and content.