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-04 20:35:03 +08:00
parent 292d817e97
commit c8882e31e6
13 changed files with 364 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/pages/home/home.tsx
View File

@@ -11,7 +11,7 @@ const Home = () => {
<div className="to-muted/10 w-full bg-gradient-to-b from-transparent dark:from-transparent dark:to-neutral-900">
<Editor />
</div>
<div className="space-y-20">
<div className="space-y-16">
<Hero />
<Features />
<FAQ />

20
resources/js/pages/home/partials/FAQ.jsx
View File

@@ -3,36 +3,28 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/
const FAQ = () => {
const faqData = [
{
q: 'How does the platform work?',
a: 'Choose from 400+ free meme templates and backgrounds, customize with the video editor, and export as MP4. AI features coming soon!',
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's available now?",
a: 'All 200+ meme templates and 200+ backgrounds are completely free! Create unlimited memes using our library.',
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!',
},
{
q: 'Why is video export slow?',
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.',
},
{
q: 'What AI features are coming?',
a: "Soon you'll be able to generate custom captions and backgrounds using AI. Enter any text prompt and get tailored content!",
},
{
q: 'What can I do with the video editor?',
a: 'Play/pause your meme, drag to position text, meme templates, and backgrounds anywhere on the canvas, then export as MP4.',
},
{
q: 'What video format do you export?',
a: 'We export high-quality MP4 videos optimized for all social media platforms in 9:16 format.',
},
{
q: 'How will credits work?',
a: 'Once launched, credits will unlock AI features for generating custom captions and backgrounds. All current features remain free!',
},
{
q: 'Is there a mobile app?',
a: 'Our web app is fully responsive and works perfectly on mobile devices. Create memes anywhere with the same features!',
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.",
},
{
q: 'How often do you add new content?',
@@ -41,7 +33,7 @@ const FAQ = () => {
];
return (
<section className="bg-muted/30">
<section className="">
<div className="mx-auto max-w-4xl 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">Frequently Asked Questions</h2>

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

@@ -5,18 +5,18 @@ const Features = () => {
{
icon: Heart,
title: 'Make video memes for free',
description: 'Access 200+ meme and background libraries without paying a cent',
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!',
description: 'Easy video editor with editable text, background, memes, built into the web. No additional software required.',
},
{
icon: Download,
title: 'Export in minutes',
description: 'Download high-quality 720p MP4 videos optimized for TikTok, Youtube Shorts, Instagram Reels, and more',
description: 'Download high-quality 720p MP4 videos optimized for TikTok, Youtube Shorts, Instagram Reels, and more.',
},
{
icon: Smartphone,
@@ -32,7 +32,7 @@ const Features = () => {
{
icon: Bot,
title: 'AI Caption & Backgrounds',
description: 'Smart caption and background generation coming soon',
description: 'Smart caption and background generation coming soon.',
comingSoon: true,
},
];
@@ -40,11 +40,6 @@ const Features = () => {
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

32
resources/js/pages/home/partials/Hero.jsx
View File

@@ -1,3 +1,6 @@
import CountUp from '@/components/reactbits/CountUp/CountUp';
import ShinyText from '@/components/reactbits/ShinyText/ShinyText';
const Hero = () => {
return (
<section className="from-muted/50 relative bg-gradient-to-b to-transparent dark:from-neutral-900 dark:to-transparent">
@@ -17,19 +20,40 @@ const Hero = () => {
<span className="text-foreground">GEN</span>
</h1>
<h2 className="text-muted-foreground mx-auto max-w-4xl text-xl leading-relaxed font-light sm:text-2xl lg:text-3xl">
Create viral memes in seconds for free!
<h2 className="">
<ShinyText
text="Create viral memes in seconds for free"
disabled={false}
speed={3}
className="text-muted-foreground mx-auto max-w-4xl text-xl leading-relaxed font-light sm:text-2xl lg:text-3xl"
/>
</h2>
</div>
{/* Stats */}
<div className="flex flex-wrap justify-center gap-8 sm:gap-12">
<div className="text-center">
<div className="text-foreground text-3xl font-bold sm:text-4xl">200+</div>
<CountUp
from={0}
to={200}
separator=","
direction="up"
duration={1}
className="text-foreground text-3xl font-bold sm:text-4xl"
postFix="+"
/>{' '}
<div className="text-muted-foreground text-sm">Meme Templates</div>
</div>
<div className="text-center">
<div className="text-foreground text-3xl font-bold sm:text-4xl">200+</div>
<CountUp
from={0}
to={200}
separator=","
direction="up"
duration={1}
className="text-foreground text-3xl font-bold sm:text-4xl"
postFix="+"
/>
<div className="text-muted-foreground text-sm">Backgrounds</div>
</div>
<div className="text-center">