charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-07-07 21:17:00 +08:00
parent 23fa3aec04
commit 6a66f96d22
31 changed files with 227 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
resources/js/pages/home/partials/Features.jsx
View File

@@ -1,54 +1,53 @@
import { Bot, Download, Heart, Library, Smartphone, Video } from 'lucide-react';
import { Download, Heart, Library, Smartphone, Video } from 'lucide-react';
const Features = () => {
const features = [
{
icon: Heart,
title: 'Make video memes for free',
description: 'Access 200+ meme and background libraries without paying a cent!',
},
{
icon: Video,
title: 'Web-powered Video Editor',
description: 'Easy video editor with editable text, background, memes, built into the web. No additional software required.',
gradient: 'bg-gradient-to-br from-transparent to-blue-500/5 dark:to-blue-400/10 hover:bg-gradient-to-tl',
},
{
icon: Heart,
title: 'Built-in over 200+ memes, for now',
description: 'Access meme and background with our editor without paying a cent.',
gradient: 'bg-gradient-to-br from-transparent to-pink-500/5 dark:to-pink-400/10 hover:bg-gradient-to-tl',
},
{
icon: Download,
title: 'Export in minutes',
description: 'Download high-quality 720p MP4 videos optimized for TikTok, Youtube Shorts, Instagram Reels, and more.',
gradient: 'bg-gradient-to-br from-transparent to-green-500/5 dark:to-green-400/10 hover:bg-gradient-to-tl',
},
{
icon: Smartphone,
title: 'Works Everywhere',
description: 'Create on desktop, tablet, or mobile! Potato devices not recommended though.',
gradient: 'bg-gradient-to-br from-transparent to-purple-500/5 dark:to-purple-400/10 hover:bg-gradient-to-tl',
},
{
icon: Library,
title: 'Meme Library Updates',
description: 'Soon we will be adding more memes and backgrounds to the library!',
comingSoon: true,
},
{
icon: Bot,
title: 'AI Caption & Backgrounds',
description: 'Smart caption and background generation coming soon.',
comingSoon: true,
gradient: 'bg-gradient-to-br from-transparent to-orange-500/5 dark:to-orange-400/10 hover:bg-gradient-to-tl',
},
];
return (
<section className="">
<div className="mx-auto max-w-6xl space-y-10 px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3 lg:gap-4">
<div className="flex flex-wrap justify-center 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"
className={`group hover:bg-muted/50 relative h-auto min-h-[275px] w-[275px] rounded-2xl border p-6 shadow-lg ${feature.gradient} 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 uppercase">
Coming Soon
<div className="bg-foreground text-background absolute -top-2 -right-2 rounded-full px-2 py-1 text-xs font-medium">
Coming Soon!
</div>
)}