Update
This commit is contained in:
@@ -5,27 +5,28 @@ const FAQDiscord = () => {
|
||||
const faqData = [
|
||||
{
|
||||
q: 'How can I create a meme video?',
|
||||
a: 'Use the video editor on top to start making your meme! Edit your caption, background and meme. Once satisfied, press the Export button to download your video!',
|
||||
},
|
||||
{
|
||||
q: 'What features are available now?',
|
||||
a: 'At the moment, All 200+ meme templates and 200+ backgrounds are completely free! We will be adding more memes and backgrounds to the library soon!',
|
||||
a: 'Use the video editor on top to start making your meme!<br><br>Edit your caption, background and meme. Once satisfied, press the Export button to download your video!',
|
||||
},
|
||||
|
||||
{
|
||||
q: 'Why is video export slow for me?',
|
||||
a: 'Video processing happens entirely in your browser using advanced web technology. Export speed depends on your video content complexity and device performance. High-end devices export quickly, while older/slower devices may take longer or even crash. If your phone is too slow, try using a faster device like a desktop computer for better performance.',
|
||||
a: "Video processing happens entirely in your browser using advanced web technology.<br><br> Export speed depends on your video content complexity and device performance. High-end devices export quickly, while older/slower devices may take longer or even crash. <br><br>If your phone is too slow, it's probably a potato. Try using a faster device like a desktop computer for better performance.",
|
||||
},
|
||||
{
|
||||
q: 'What is a potato device?',
|
||||
a: `Potato devices are old, dated computers, laptops, phones or tablets with little RAM and CPU power - typically devices from before ${new Date().getFullYear() - 6} (pre-${new Date().getFullYear() - 6}).<br><br>These devices are usually too weak for the modern web and may not work properly with our video editor, or may crash during video processing.`,
|
||||
},
|
||||
{
|
||||
q: 'What video format do you export?',
|
||||
a: 'We export high-quality MP4 videos optimized for all social media platforms in 9:16 format, which is compatible for TikTok, Youtube Shorts, Instagram Reels, and more.',
|
||||
a: 'We export high-quality MP4 videos optimized for all social media platforms in 9:16 format.<br><br>This is compatible for TikTok, Youtube Shorts, Instagram Reels, and more.',
|
||||
},
|
||||
{
|
||||
q: 'Is there a mobile app?',
|
||||
a: "Our web app is fully responsive and works perfectly on mobile devices. Do you want a mobile app? We'll see what can be done. Let us know in our Discord group.",
|
||||
a: "Our web app is fully responsive and works perfectly on mobile devices.<br><br>Do you want a mobile app? We'll see what can be done. Let us know in our Discord group.",
|
||||
},
|
||||
{
|
||||
q: 'How often do you add new content?',
|
||||
a: 'We just started building this platform and will gradually add more meme templates and backgrounds over time, so everyone can continue using it for free with fresh content! Want a certain content? Let us know in our Discord group.',
|
||||
a: 'We just started building this platform and will gradually add more meme templates and backgrounds over time, so everyone can continue using it for free with fresh content!<br><br>Want a certain content? Let us know in our Discord group.',
|
||||
},
|
||||
{
|
||||
q: 'I have more questions!',
|
||||
@@ -49,7 +50,9 @@ const FAQDiscord = () => {
|
||||
{faqData.map((faq, index) => (
|
||||
<AccordionItem key={index} value={`item-${index + 1}`} className="border-b last:border-b-0">
|
||||
<AccordionTrigger className="py-4 text-left font-medium hover:no-underline">{faq.q}</AccordionTrigger>
|
||||
<AccordionContent className="text-muted-foreground pb-4 leading-relaxed text-balance">{faq.a}</AccordionContent>
|
||||
<AccordionContent className="text-muted-foreground pb-4 leading-relaxed text-balance">
|
||||
<div dangerouslySetInnerHTML={{ __html: faq.a }} />
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
|
||||
@@ -4,28 +4,31 @@ const Features = () => {
|
||||
const features = [
|
||||
{
|
||||
icon: Video,
|
||||
title: 'Web-powered Video Editor',
|
||||
description: 'Easy video editor with editable text, background, memes, built into the web. No additional software required.',
|
||||
title: 'No installation needed',
|
||||
description: 'Easy video editor with editable text, background, memes, built into the web.',
|
||||
gradient: 'bg-gradient-to-br from-transparent to-blue-500/5 dark:to-blue-400/10 hover:bg-gradient-to-tl',
|
||||
order: 3,
|
||||
},
|
||||
{
|
||||
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',
|
||||
order: 1,
|
||||
},
|
||||
|
||||
{
|
||||
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',
|
||||
order: 2,
|
||||
},
|
||||
{
|
||||
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',
|
||||
order: 4,
|
||||
},
|
||||
{
|
||||
icon: Library,
|
||||
@@ -33,6 +36,7 @@ const Features = () => {
|
||||
description: 'Soon we will be adding more memes and backgrounds to the library!',
|
||||
comingSoon: true,
|
||||
gradient: 'bg-gradient-to-br from-transparent to-orange-500/5 dark:to-orange-400/10 hover:bg-gradient-to-tl',
|
||||
order: 5,
|
||||
},
|
||||
];
|
||||
|
||||
@@ -40,26 +44,28 @@ const Features = () => {
|
||||
<section className="">
|
||||
<div className="mx-auto max-w-6xl space-y-10 px-4 sm:px-6 lg:px-8">
|
||||
<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 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">
|
||||
Coming Soon!
|
||||
{features
|
||||
.sort((a, b) => a.order - b.order)
|
||||
.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
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">
|
||||
Coming Soon!
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-4">
|
||||
<feature.icon className="text-foreground h-8 w-8" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mb-4">
|
||||
<feature.icon className="text-foreground h-8 w-8" />
|
||||
<h3 className="text-foreground mb-2 text-xl font-semibold">{feature.title}</h3>
|
||||
|
||||
<p className="text-muted-foreground leading-relaxed">{feature.description}</p>
|
||||
</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>
|
||||
|
||||
@@ -8,7 +8,7 @@ const Hero = () => {
|
||||
{/* Badge */}
|
||||
<div className="bg-background/50 inline-flex items-center gap-2 rounded-full border px-3 py-1 text-sm backdrop-blur-sm">
|
||||
<div className="h-2 w-2 rounded-full bg-green-500"></div>
|
||||
<span className="text-muted-foreground">Free meme videos • No signup required</span>
|
||||
<span className="text-muted-foreground">Instant meme videos • No signup required</span>
|
||||
</div>
|
||||
|
||||
{/* Main heading */}
|
||||
@@ -19,7 +19,7 @@ const Hero = () => {
|
||||
</h1>
|
||||
|
||||
<h2 className="text-muted-foreground mx-auto max-w-4xl text-xl leading-relaxed font-light sm:text-2xl lg:text-3xl">
|
||||
Simple, fast, and free meme video editor
|
||||
Fast and simple meme video editor
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user