Feature Section Components
Professional, conversion-optimized feature sections for every use case. From minimal text-only layouts to rich testimonial grids. Built with pure Tailwind CSS and Framer Motion.
Choose the Right Feature Layout
| Component | Best For | Visual Style | Use Case |
|---|---|---|---|
| CardGrid | SaaS products, general features | 3-column icon cards, equal weight | Showcasing 6-8 core features |
| ImageFeatures | Product demos, visual features | Images + text, alternating | Features with visual proof |
| DescriptionImage | In-depth explanations | Zigzag text-image layout | Detailed feature breakdowns |
| CTAFocused | Conversion-driven pages | Cards with dual CTAs | Multiple conversion touchpoints |
| GradientAccent | Modern, premium products | Subtle gradient backgrounds | Contemporary aesthetic |
| IconList | Comprehensive feature lists | Minimal two-column list | 10+ features, scannable |
| Timeline | Process flows, roadmaps | Vertical timeline with steps | Sequential progression |
| Comparison | Upgrade justification, tiers | Before/After side-by-side | Feature differentiation |
| NumberedSteps | "How it works" sections | Large numbers (01, 02, 03) | Step-by-step processes |
| Bento | Modern landing pages | Asymmetric grid layout | Dynamic, visual variety |
| Spotlight | Primary value prop emphasis | 1 large + 3 small cards | Hero feature with support |
| TabSwitcher | Multiple user personas | Tabbed feature categories | Developers, Teams, Enterprise |
| Minimal | Simple products, clarity-first | Text-only, max whitespace | Clean messaging |
| Stats | Data-driven products | Big numbers, animated | Metrics, social proof |
| Testimonial | Trust-building, validation | Feature + customer quote | Customer success stories |
Design Principles
Typography Hierarchy
- • Section headings: text-2xl to text-3xl, font-bold
- • Feature titles: text-base to text-lg, font-semibold
- • Descriptions: text-sm to text-base
- • Small text: text-xs for metadata
Visual Balance
- • Generous whitespace (py-16 to py-24 sections)
- • Consistent icon sizes (w-5 h-5 to w-8 h-8)
- • Grid gaps: gap-6 to gap-8
- • Card padding: p-6 to p-8
Color Usage
- • Primary: blue-600, purple-600, indigo-600
- • Accents: green-500, orange-500 sparingly
- • Neutral: gray-50 to gray-900
- • Dark mode: muted colors, darker grays
Animation Timing
- • Fade in: 0.5-0.6s duration
- • Stagger delay: 0.1s between items
- • Hover: 0.3s transition
- • Scroll-triggered: viewport threshold 0.2
Classic Layouts
CardGrid
Classic 3-column grid with icon cards. Perfect for showcasing 6-8 core features with equal visual weight. Features color-coded icons, hover lift effects, and stagger animations.
CardGrid Component
Powerful Features Built for Teams
Everything you need to build amazing products and scale your business with confidence
Lightning Fast
Optimized for speed with sub-100ms response times across all operations. Built on modern infrastructure.
Bank-Level Security
SOC 2 compliant with end-to-end encryption. Your data is protected with industry-leading security measures.
Team Collaboration
Real-time sync across your entire team. Work together seamlessly with shared workspaces and permissions.
Advanced Analytics
Powerful insights and custom dashboards. Track metrics that matter with real-time data visualization.
99.9% Uptime
Enterprise-grade reliability you can count on. Monitored 24/7 with automatic failover and backups.
SOC 2 Certified
Independently audited security standards. Compliant with GDPR, HIPAA, and major data protection regulations.
Ready to get started?
IconList
Minimal two-column list with small icons. Text-focused, scannable design perfect for comprehensive feature lists (10+ items). No cards or borders—just clean rows.
IconList Component
Everything Included
All the features you need to build, scale, and succeed
Lightning-fast performance with sub-100ms response times
Bank-level encryption and SOC 2 Type II certification
Unlimited team members on all plans
Real-time analytics and custom dashboards
Two-factor authentication and SSO support
Global CDN with 99.99% uptime guarantee
24/7 customer support via chat, email, and phone
Comprehensive REST API with webhooks
Free 14-day trial with no credit card required
Advanced performance monitoring and alerts
And many more features being added every week
Minimal
Ultra-clean text-only design with maximum whitespace. Focus on clarity over decoration—perfect for simple product messaging with large typography and generous negative space.
Minimal Component
Everything you need.
Nothing you don't.
Simple, powerful, and built for the way you work
Fast
Built for speed from the ground up
Secure
Your data is safe with us
Simple
No complexity, just results
Scalable
Grow without limitations
Reliable
Always there when you need it
Beautiful
Design that delights
Join thousands of teams already building with our platform
Visual-Rich Layouts
ImageFeatures
Features paired with image placeholders in alternating layout. Includes benefit lists with checkmarks and scroll-triggered animations. Ideal for product features with visual demonstrations.
ImageFeatures Component
Features That Accelerate Your Work
Built for modern teams who need speed, reliability, and powerful integrations
Real-Time Collaboration
Work together seamlessly with your team. See changes instantly as they happen with live cursors and collaborative editing.
- Live cursor tracking for all team members
- Instant sync across all devices
- Conflict-free editing with CRDT technology
- Comment and annotate directly on content
Advanced Analytics Dashboard
Get deep insights into your business metrics with customizable dashboards and real-time reporting tools.
- Custom dashboard builder
- Real-time data visualization
- Export reports in multiple formats
- Automated insights and recommendations
Seamless Integrations
Connect with over 1,000+ apps and services. Build custom workflows with our powerful API and webhooks.
- Pre-built integrations with popular tools
- Robust REST API with comprehensive docs
- Webhook support for real-time events
- OAuth 2.0 authentication
DescriptionImage
Zigzag alternating text-image layout with large sections per feature. Features badge labels, generous spacing, and CTA buttons per section. Best for in-depth feature explanations.
DescriptionImage Component
Everything You Need to Succeed
Powerful features designed to help you build better products faster
Built for Speed and Scale
Experience lightning-fast performance with our globally distributed infrastructure. Sub-100ms response times across all regions, with automatic scaling to handle traffic spikes. Our CDN ensures your content is always delivered at maximum speed.
Enterprise-Grade Protection
Your data is protected by military-grade encryption and industry-leading security practices. SOC 2 Type II certified, GDPR compliant, and regularly audited by independent security experts. Two-factor authentication and SSO included.
Connect Everything You Use
Seamlessly integrate with over 1,000 popular tools and services. Our comprehensive REST API and webhook system lets you build custom workflows tailored to your needs. OAuth 2.0 authentication ensures secure connections.
Bento
Modern bento box grid with asymmetric layout using CSS Grid. Some cards span multiple columns/rows creating dynamic visual variety. Mix of icon cards, text cards, and gradient accents.
Bento Component
Built for Modern Teams
Everything you need in one powerful platform
Lightning Fast
Sub-100ms response times globally with edge computing
Secure
Bank-level encryption
Collaboration
Real-time sync across teams
Analytics
Deep insights into your metrics
Global Scale
Distributed infrastructure in 50+ regions for maximum uptime and performance
Developer First
Comprehensive APIs and SDKs
GradientAccent
Features with subtle gradient backgrounds and border effects on hover. Tasteful blue-purple color schemes with muted dark mode gradients. Modern aesthetic without overwhelming design.
GradientAccent Component
Built for Modern Teams
Cutting-edge technology that gives you a competitive advantage
AI-Powered Insights
Get intelligent recommendations powered by machine learning. Our AI analyzes patterns to help you make better decisions faster.
Instant Deployment
Deploy to production with a single click. Our automated pipeline handles testing, building, and deployment seamlessly.
Real-Time Updates
See changes reflected instantly across all devices. WebSocket connections ensure everyone stays in sync.
Global Scale
Serve users worldwide with our edge network. Content delivered from the nearest location for maximum speed.
Experience the Difference
Join thousands of teams who have already transformed their workflow
Interactive Layouts
TabSwitcher
Tabbed feature sections with AnimatePresence for smooth transitions. Perfect for multiple user personas (Developers, Designers, Teams, Enterprise). Includes keyboard navigation support.
TabSwitcher Component
Built for Everyone
Powerful features tailored to your role and workflow
Powerful API
Comprehensive REST API with GraphQL support. Build custom integrations with ease.
Fast Build Times
Optimized build pipeline with intelligent caching. Deploy in under 60 seconds.
Type Safety
Full TypeScript support with auto-generated types for your API endpoints.
Ready to get started with for developers?
CTAFocused
Feature cards with dual CTAs (primary + secondary). Action-oriented buttons like "Get Started" and "Watch Demo". Optimized for conversion with multiple touchpoints.
CTAFocused Component
Everything You Need to Build Great Products
Powerful features with zero complexity. Choose what works for you.
Launch in Minutes
Deploy your first project in under 5 minutes with our one-click setup. No complex configuration required.
Track Performance
Real-time analytics dashboard with customizable metrics. Monitor what matters to your business.
Enterprise Security
Bank-level encryption and compliance. SOC 2 Type II certified with automatic security updates.
Lightning Fast
Sub-100ms response times worldwide. Built on globally distributed infrastructure for maximum speed.
Ready to get started?
Join 10,000+ teams already building with our platform
Spotlight
One large hero feature card with 3 smaller supporting features. Main feature includes stats display and gradient glow effects. Clear visual hierarchy emphasizing main value proposition.
Spotlight Component
The Future of Productivity
Powered by cutting-edge technology and built for scale
AI-Powered Automation
Transform your workflow with intelligent automation. Our advanced machine learning models analyze patterns, predict outcomes, and automate repetitive tasks so you can focus on what matters most. Save hours every week while improving accuracy and consistency.
Real-Time Processing
Process data instantly with our high-performance infrastructure
Enterprise Security
Your data protected with military-grade encryption
Global Scale
Deploy worldwide with automatic scaling and redundancy
Process & Timeline Layouts
NumberedSteps
Numbered process steps with large numbers (01, 02, 03...). Supports both horizontal and vertical layouts. Features arrow connectors and gradient number backgrounds. Perfect for "How it works" sections.
NumberedSteps Component
Get Started in 4 Easy Steps
From zero to production in minutes
Create Account
Sign up in seconds with email or social login. No credit card required for free trial.
Configure Setup
Customize your workspace with our guided setup wizard. Import existing data if needed.
Invite Team
Add team members and assign roles. Collaborate in real-time on shared projects.
Start Building
Launch your first project using templates or build from scratch. Deploy instantly.
Timeline
Vertical timeline with connector line and circle markers. Shows progression through numbered steps with completed/incomplete states. Includes scroll-triggered animations.
Timeline Component
How It Works
Get up and running in 5 simple steps. From signup to production in minutes.
Sign Up & Configure
Create your account in seconds. No credit card required for the free trial. Set up your workspace with our guided onboarding process.
Connect Your Tools
Integrate with your existing workflow. Connect Slack, GitHub, Google Drive, and 1,000+ other apps with one-click authentication.
Invite Your Team
Add team members and set permissions. Create shared workspaces with role-based access control. Everyone stays in sync automatically.
Build & Deploy
Start building your first project. Use our templates or create from scratch. Deploy to production with a single click when ready.
Monitor & Scale
Track performance with real-time analytics. Scale automatically as your user base grows. We handle the infrastructure complexity.
Ready to Get Started?
Join thousands of teams building better products
Comparison & Social Proof
Comparison
Before/After or Basic vs Pro comparison table. Side-by-side feature comparison with checkmarks, X marks, and text values. Highlights differences clearly with responsive transformation on mobile.
Comparison Component
Why Upgrade to Pro?
See exactly what you get when you upgrade. More features, better performance, unlimited scale.
Upgrade to Pro Today
Get all premium features with a 30-day money-back guarantee
Stats
Features with big numbers and animated count-up effect. Uses scroll-triggered animations to display metrics like "10M+ Users", "99.99% Uptime". Data-driven social proof.
Stats Component
Trusted by Teams Worldwide
The numbers speak for themselves. Join thousands of successful teams.
Active Users
Trusted by millions of users worldwide across 150+ countries
Response Time
Lightning-fast performance with sub-100ms response times globally
Uptime SLA
Enterprise-grade reliability with 24/7 monitoring and automatic failover
API Calls Daily
Processing millions of requests with zero downtime and maximum efficiency
Want to see these numbers for your own business?
Testimonial
Features paired with customer testimonials. Alternating layout with feature description on one side, customer quote card on other. Includes avatars and credentials for trust-building.
Testimonial Component
Loved by Teams Everywhere
See how real teams are using our features to build better products
Real-Time Collaboration
Work together seamlessly with live updates, shared workspaces, and instant sync across all devices.
"The real-time collaboration has completely transformed how our distributed team works. We've cut meeting time by 50% and ship features twice as fast."
Enterprise Security
Bank-level encryption, SOC 2 certification, and compliance with major data protection regulations.
"Security was our biggest concern when choosing a platform. The SOC 2 compliance and detailed audit logs gave us complete peace of mind."
Team Management
Role-based permissions, team workspaces, and granular access control for organizations of any size.
"Managing 200+ team members across 15 projects used to be a nightmare. Now we have complete visibility and control in one place."
Join 10,000+ Happy Customers
Start building better products today with a 14-day free trial
Implementation Notes
Customization
All components accept a className prop for additional styling. Feature data is hardcoded but can be easily replaced with CMS or API data.
import { CardGrid } from '@/components/feature-sections/CardGrid';
export default function FeaturesPage() {
return <CardGrid className="my-custom-class" />;
}Responsive Behavior
All components use mobile-first responsive design. Grids collapse to single column on mobile, expand to 2-3 columns on tablets, and full width on desktop. Images and text stack appropriately.
Animation Performance
Framer Motion animations use GPU-accelerated properties (transform, opacity). Scroll-triggered animations use Intersection Observer for optimal performance. Stats component includes count-up animation triggered on viewport entry.
Accessibility
Components use semantic HTML (section, h2, h3, ul, li), proper heading hierarchy, ARIA labels where needed, and keyboard navigation for interactive elements like tabs.
Dependencies
Components use only Tailwind CSS and Framer Motion. Icons from lucide-react. No shadcn/ui required.
"dependencies": {
"framer-motion": "^12.23.24",
"lucide-react": "latest"
}Component Selection Guide
When to Use Grid Layouts
- • CardGrid: 6-8 features, equal importance
- • IconList: 10+ features, scannable lists
- • Bento: Visual variety, modern aesthetic
- • GradientAccent: Premium products, contemporary
When to Use Image-Heavy
- • ImageFeatures: Product screenshots, demos
- • DescriptionImage: In-depth explanations
- • Spotlight: One hero feature emphasized
- • Testimonial: Social proof with faces
When to Use Interactive
- • TabSwitcher: Multiple personas/categories
- • CTAFocused: Conversion-driven pages
- • Stats: Data-driven products, metrics
- • Comparison: Tier justification
When to Use Process Flows
- • NumberedSteps: "How it works" sections
- • Timeline: Roadmaps, progression
- • Minimal: Simple products, clarity-first