Features Layout Showcase
Compare different feature section layouts. Scroll down to see all available styles.
Grid Layout (Updated)
✨ Enhanced card grid with colorful icons, improved spacing, and smooth hover effects
Bento Grid
🍱 Irregular grid layout inspired by Apple - First item is larger, creating visual hierarchy
AI 驱动生成
先进的 AI 根据您的描述创建完美的涂色页
可打印质量
高分辨率黑白线稿，专为打印优化
儿童友好设计
简单清晰的轮廓，完美适合 3-8 岁儿童
即时下载
PNG 格式，适用于 A4 或 Letter 尺寸打印
Minimal Icon Grid
🎯 Clean, borderless design - Perfect for displaying many features without visual clutter
AI 驱动生成
先进的 AI 根据您的描述创建完美的涂色页
可打印质量
高分辨率黑白线稿，专为打印优化
儿童友好设计
简单清晰的轮廓，完美适合 3-8 岁儿童
即时下载
PNG 格式，适用于 A4 或 Letter 尺寸打印
Split Layout (Icons)
📖 Alternating left/right design - Best for detailed explanations with large icons
AI 驱动生成
先进的 AI 根据您的描述创建完美的涂色页
可打印质量
高分辨率黑白线稿，专为打印优化
儿童友好设计
简单清晰的轮廓，完美适合 3-8 岁儿童
即时下载
PNG 格式，适用于 A4 或 Letter 尺寸打印
Split Layout with Image Carousel
NEW🖼️ Image carousel with navigation controls - Perfect for browsing through multiple screenshots
Carousel Navigation
Display multiple screenshots or mockups with smooth transitions. Click the arrows on the edges to navigate through images, or use the indicators at the bottom.
Single Image Display
When you only have one image, the carousel automatically hides navigation controls and shows just the image with the same beautiful styling.
Split Layout with Stacked Cards
NEW🃏 Stacked cards with flip interaction - Click on the cards to flip through images
Stacked Card Interaction
Cards are stacked together with a 3D effect. Click anywhere on the visible cards to flip through images. The current card is always shown on top.
Multiple Cards Support
Stack up to several cards together. Each click cycles through the stack with smooth animations. Great for showing different states or variations of your product.
Floating 3D Cards
🎮 Interactive 3D tilt effect - Mouse tracking creates engaging parallax experience
AI 驱动生成
先进的 AI 根据您的描述创建完美的涂色页
可打印质量
高分辨率黑白线稿，专为打印优化
儿童友好设计
简单清晰的轮廓，完美适合 3-8 岁儿童
即时下载
PNG 格式，适用于 A4 或 Letter 尺寸打印
Feature Showcase (Alternating)
🔁 Alternating text-and-image sections with checklist and CTA — great for storytelling
Modern i18n and Theming
First-class internationalization and theme support out of the box. Build truly global experiences.
- Locale-aware routing with next-intl
- Dark/light mode with system preference
- Consistent design tokens via Tailwind
Polished Components
Production-ready components with delightful micro-interactions and responsive layouts.
- Accessible, keyboard friendly
- Framer Motion animations
- Composable, type-safe APIs
Image Carousel (Standalone)
NEW🖼️ Use the image carousel directly to showcase multiple screenshots without the split layout
Stacked Cards (Standalone)
NEW🃏 A compact, interactive way to flip through visual states or variations
Quick Comparison
🎨 Grid (Updated)
Traditional layout with modern enhancements. Best for: Standard feature showcases.
🍱 Bento Grid
Asymmetric design creates interest. Best for: Highlighting primary feature.
🎯 Minimal
Clean and efficient. Best for: Many features, professional/enterprise sites.
📖 Split Layout (Icons)
Detailed storytelling with large icons. Best for: In-depth feature explanations.
🖼️ Split (Carousel)
Image carousel with navigation. Best for: Browsing multiple screenshots, step-by-step guides.
🃏 Split (Stacked)
Stacked cards with flip interaction. Best for: Showing variations, before/after, different states.
🎮 Floating 3D
Most interactive and modern. Best for: Tech/SaaS products, wow factor.
🔁 Feature Showcase
Alternating sections with checklists. Best for: Story-driven product pages.
🖼️ Carousel (Standalone)
Image-focused viewer. Best for: Multiple screenshots without extra text.
🃏 Stacked Cards
Flip-through visual stack. Best for: Variations, before/after, quick states.
🚀 How to Use
To change the homepage features section, edit app/[locale]/page.tsx:
// Import the style you want
import { FeaturesBento } from '@/components/marketing';
// Replace line ~119
<FeaturesBento features={features} />