76 lines
3.0 KiB
JavaScript
76 lines
3.0 KiB
JavaScript
import { Bot, Download, Heart, Library, Smartphone, Video } from 'lucide-react';
|
|
|
|
const Features = () => {
|
|
const features = [
|
|
{
|
|
icon: Heart,
|
|
title: 'Make video memes for free',
|
|
description: 'Access 200+ meme templates and backgrounds without paying a cent',
|
|
},
|
|
{
|
|
icon: Video,
|
|
title: 'Easy Video Editor',
|
|
description: 'Simple video editor with draggable text, background, memes and real-time preview',
|
|
},
|
|
|
|
{
|
|
icon: Download,
|
|
title: 'Instant Export',
|
|
description: 'Download high-quality MP4 videos optimized for TikTok, Youtube Shorts, Instagram Reels, and more',
|
|
},
|
|
{
|
|
icon: Smartphone,
|
|
title: 'Works Everywhere',
|
|
description: 'Create on desktop, tablet, or mobile with responsive design',
|
|
},
|
|
{
|
|
icon: Library,
|
|
title: 'Library Updates',
|
|
description: 'Fresh viral memes and backgrounds updated regularly',
|
|
comingSoon: true,
|
|
},
|
|
{
|
|
icon: Bot,
|
|
title: 'AI Caption & Backgrounds',
|
|
description: 'Smart caption and background generation coming soon',
|
|
comingSoon: true,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className="">
|
|
<div className="mx-auto max-w-6xl space-y-10 px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center">
|
|
<h2 className="text-foreground mb-4 text-3xl font-bold sm:text-4xl lg:text-5xl">Everything you need to create viral memes</h2>
|
|
<p className="text-muted-foreground mx-auto max-w-2xl text-lg">Simple, powerful tools that help creators make engaging content</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 lg:gap-4">
|
|
{features.map((feature, index) => (
|
|
<div
|
|
key={index}
|
|
className="group bg-card hover:bg-muted/50 relative rounded-2xl border p-6 transition-all duration-300 lg:p-8"
|
|
>
|
|
{feature.comingSoon && (
|
|
<div className="bg-foreground text-background absolute -top-2 -right-2 rounded-full px-2 py-1 text-xs font-medium">
|
|
Soon
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-4">
|
|
<feature.icon className="text-foreground h-8 w-8" />
|
|
</div>
|
|
|
|
<h3 className="text-foreground mb-2 text-xl font-semibold">{feature.title}</h3>
|
|
|
|
<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default Features;
|