A sleek, animated feature section showcasing steps with engaging visuals and smooth transitions.
Features
import { FeatureSteps } from "@/components/blocks/feature-section"
const features = [
{
step: 'Step 1',
title: 'Learn the Basics',
content: 'Start your Web3 journey by learning the basics of blockchain.',
image: 'https://cdn.21st.dev/assets/mirror/ba/ba157d049e59513a30a7d4ec04fc9ea8af159f81cc9e54700ed127889b91d967.jpg'
},
{
step: 'Step 2',
title: 'Deep Dive',
content: 'Dive deep into blockchain fundamentals and smart contract development.',
image: 'https://cdn.21st.dev/assets/mirror/85/85e84077a6db13908b5d28903e8107f131e685fee136869651ae5eccda88a020.jpg'
},
{
step: 'Step 3',
title: 'Build Projects',
content: 'Graduate with hands-on Web3 experience through building decentralized applications.',
image: 'https://cdn.21st.dev/assets/mirror/f6/f6d1e174377ea631cd11224860ab67347e8cc4844ad94d6d2dee6521b8b5dd55.jpg'
},
]
export function FeatureStepsDemo() {
return (
<FeatureSteps
features={features}
title="Your Journey Starts Here"
autoPlayInterval={4000}
imageHeight="h-[500px]"
/>
)
}Part of Serenity UI — browse the full library on 21st.dev.