Update
This commit is contained in:
66
resources/js/pages/home/partials/FAQ.jsx
Normal file
66
resources/js/pages/home/partials/FAQ.jsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
|
||||
|
||||
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: "What's available now?",
|
||||
a: 'All 200+ meme templates and 200+ backgrounds are completely free! Create unlimited memes using our library.',
|
||||
},
|
||||
{
|
||||
q: 'Why is video export slow?',
|
||||
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!',
|
||||
},
|
||||
{
|
||||
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!',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="bg-muted/30">
|
||||
<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>
|
||||
<p className="text-muted-foreground text-lg">Everything you need to know about creating viral memes</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-background rounded-2xl border p-6 sm:p-8">
|
||||
<Accordion type="single" collapsible className="w-full" defaultValue="item-1">
|
||||
{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">{faq.a}</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default FAQ;
|
||||
75
resources/js/pages/home/partials/Features.jsx
Normal file
75
resources/js/pages/home/partials/Features.jsx
Normal file
@@ -0,0 +1,75 @@
|
||||
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;
|
||||
49
resources/js/pages/home/partials/Hero.jsx
Normal file
49
resources/js/pages/home/partials/Hero.jsx
Normal file
@@ -0,0 +1,49 @@
|
||||
const Hero = () => {
|
||||
return (
|
||||
<section className="relative">
|
||||
{/* Subtle grid background */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
|
||||
|
||||
<div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
|
||||
<div className="space-y-4 text-center">
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
{/* Main heading */}
|
||||
<div className="space-y-0">
|
||||
<h1 className="font-display text-6xl font-black tracking-tight sm:text-7xl lg:text-8xl">
|
||||
<span className="text-foreground">MEME</span>
|
||||
<span className="text-muted-foreground">AI</span>
|
||||
<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>
|
||||
</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>
|
||||
<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>
|
||||
<div className="text-muted-foreground text-sm">Backgrounds</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-foreground text-3xl font-bold sm:text-4xl">MP4</div>
|
||||
<div className="text-muted-foreground text-sm">Export</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
Reference in New Issue
Block a user