Components
Loading preview...
Feature Section A responsive and theme-adaptive component designed to showcase a product's key features. It includes a main title, a subtitle, a grid of features with icons, and a final call-to-action card. It's built to be highly reusable by accepting all content through props.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/feature-section-1"use client" // Required for Framer Motion
import {
Heart,
WifiOff,
ShieldCheck,
BatteryCharging,
Network,
} from "lucide-react"
import { motion } from "framer-motion"
import { FeatureSection } from "@/components/ui/feature-section-1"
// Animation variants for the container and items
const containerVariants = {
hidden: { opacity: 0 },
visible: {
opacity: 1,
transition: {
staggerChildren: 0.1,
},
},
}
const itemVariants = {
hidden: { y: 20, opacity: 0 },
visible: {
y: 0,
opacity: 1,
transition: {
duration: 0.5,
ease: "easeInOut",
},
},
}
export default function FeatureSectionDemo() {
// Define the data to be passed into the component
const featureData = {
mainIcon: <Heart className="h-8 w-8" />,
title: "Offline Emergency Connect",
subtitle: "Stay connected during emergencies, even when networks are down.",
features: [
{
icon: <WifiOff className="h-6 w-6" />,
title: "Works Offline",
description:
"Send and receive messages even when cellular networks and internet connections are unavailable.",
},
{
icon: <ShieldCheck className="h-6 w-6" />,
title: "Emergency-Only",
description:
"Connect with only the people you choose, for emergency situations and check-ins.",
},
{
icon: <BatteryCharging className="h-6 w-6" />,
title: "Battery Efficient",
description:
"Designed to conserve battery life while maintaining connectivity with nearby devices.",
},
{
icon: <Network className="h-6 w-6" />,
title: "Mesh Network",
description:
"Messages can hop through nearby devices to reach contacts beyond direct range.",
},
],
callToAction: {
title: "Be Prepared for Emergencies",
description:
"One-time purchase of $10 with a $5 monthly subscription for ongoing service and maintenance.",
appleUrl: "#",
googleUrl: "#",
},
}
return (
// Wrap the component with motion.div for animations
<motion.div initial="hidden" animate="visible" variants={containerVariants}>
<motion.div variants={itemVariants}>
<FeatureSection {...featureData} />
</motion.div>
</motion.div>
)
}