Components
Loading preview...
highly reusable and is styled with Tailwind CSS for a modern look. For icons, I'm using lucide-react, a very popular and lightweight icon library. Everything is bundled into a single file so you can easily drop it into any React project.
@dhiluxui
npx shadcn@latest add https://21st.dev/r/dhileepkumargm/core-featuresimport React from 'react';
import { Zap, ShieldCheck, CloudCog } from 'lucide-react';
import FeatureCard from '@/components/ui/core-features'; // Import the component
/**
* The main App component to display and demonstrate the FeatureCard.
* @returns {JSX.Element} The rendered app layout.
*/
export default function DemoOne() {
const features = [
{
icon: <Zap size={28} />,
title: "Blazing Fast Performance",
description: "Optimized for speed and efficiency to deliver an unparalleled user experience on any device.",
badgeText: "New",
href: "#performance"
},
{
icon: <ShieldCheck size={28} />,
title: "Ironclad Security",
description: "Built with security as a priority, ensuring your data is always safe and protected.",
href: "#security"
},
{
icon: <CloudCog size={28} />,
title: "Seamless Cloud Integration",
description: "Effortlessly connect with your favorite cloud services for easy data sync and backups.",
badgeText: "Beta",
href: "#integration"
}
];
return (
<div className="min-h-screen w-full bg-gray-50 font-sans text-gray-900 dark:bg-gray-900 dark:text-white">
<div className="container mx-auto px-4 py-16">
{/* Header */}
<header className="mb-12 text-center">
<h1 className="text-4xl font-extrabold tracking-tight lg:text-5xl">
Core Features
</h1>
<p className="mx-auto mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-300">
Discover the powerful features that make our platform the best choice for your needs.
</p>
</header>
{/* Grid of Feature Cards */}
<div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
{features.map((feature, index) => (
<div key={index} className="flex justify-center">
<FeatureCard
icon={feature.icon}
title={feature.title}
description={feature.description}
badgeText={feature.badgeText}
href={feature.href}
/>
</div>
))}
</div>
</div>
</div>
);
}