Update

app/Http/Controllers/FrontMediaController.php

@@ -14,7 +14,7 @@ public function init(Request $request)
     {
         $meme = Meme::with('meme_media', 'background_media')->where('status', MemeGenerator::STATUS_COMPLETED)->inRandomOrder()->first();
 
-        $meme_media = MemeGenerator::getSuitableMemeMedia($meme, 2);
+        $meme_media = MemeGenerator::getSuitableMemeMedia($meme, 15);
 
         return response()->json([
             'success' => [
@@ -72,14 +72,14 @@ public function searchMemes(Request $request)
                     // Search in name and description using ILIKE for partial matches
                     $q->where('name', 'ILIKE', "%{$query}%")
                         ->orWhere('description', 'ILIKE', "%{$query}%")
-                      // Search in JSON arrays using PostgreSQL JSON operators
+                        // Search in JSON arrays using PostgreSQL JSON operators
                         ->orWhereRaw('keywords::text ILIKE ?', ["%{$query}%"])
                         ->orWhereRaw('action_keywords::text ILIKE ?', ["%{$query}%"])
                         ->orWhereRaw('emotion_keywords::text ILIKE ?', ["%{$query}%"])
                         ->orWhereRaw('misc_keywords::text ILIKE ?', ["%{$query}%"]);
                 })
                 ->orderByRaw('
-                    CASE 
+                    CASE
                         WHEN name ILIKE ? THEN 1
                         WHEN description ILIKE ? THEN 2
                         WHEN keywords::text ILIKE ? THEN 3
@@ -116,7 +116,7 @@ public function searchBackgrounds(Request $request)
             $backgrounds = BackgroundMedia::where('status', 'completed')
                 ->where('prompt', 'ILIKE', "%{$query}%")
                 ->orderByRaw('
-                    CASE 
+                    CASE
                         WHEN prompt ILIKE ? THEN 1
                         ELSE 2
                     END, prompt ASC

resources/js/components/ui/button.tsx

@@ -8,7 +8,8 @@ const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
-      variant: {
+          variant: {
+          white: "bg-white text-black shadow-xs hover:bg-accent hover:text-accent-foreground",
         default:
           "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
         destructive:

resources/js/modules/editor/partials/canvas/video-preview.jsx

@@ -277,7 +277,7 @@ const VideoPreview = ({
                                             }}
                                         >
                                             <Button
-                                                variant="secondary"
+                                                variant="white"
                                                 id="open-text-editor"
                                                 className="h-16 w-16 rounded-full shadow-xl"
                                                 onClick={() => {

resources/js/modules/editor/partials/editor-header.jsx

@@ -12,7 +12,7 @@ const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = fal
     };
 
     return (
-        <div className={cn('flex w-full items-center justify-center', className)}>
+        <div className={cn('flex w-full items-center justify-center gap-2', className)}>
             <img alt="MEMEFA.ST LOGO" className="h-10 w-10" src="logo/memefast-logo-144.png"></img>
 
             <div className="font-display ml-0 text-lg tracking-wide md:ml-3 md:text-xl">

resources/js/pages/home/home.tsx

@@ -1,9 +1,9 @@
 import AuthUser from '@/modules/auth/auth-user';
+import { useEffect, useState } from 'react';
 import FAQDiscord from './partials/FAQDiscord.jsx';
 import Features from './partials/Features.jsx';
 import Footer from './partials/Footer.jsx';
 import Hero from './partials/Hero.jsx';
-import { useEffect, useState } from 'react';
 
 const Home = ({ faqData }) => {
     const [isClient, setIsClient] = useState(false);
@@ -30,7 +30,7 @@ const Home = ({ faqData }) => {
                     </div>
                 )}
             </div>
-            <div className="space-y-16">
+            <div className="space-y-16 pt-6">
                 <Hero />
                 <Features />
                 <FAQDiscord faqData={faqData} />

resources/js/pages/home/partials/Hero.jsx

@@ -4,7 +4,7 @@ import { usePage } from '@inertiajs/react';
 const Hero = () => {
     const { stats } = usePage().props;
     return (
-        <section className="from-muted/50 relative bg-gradient-to-b to-transparent dark:from-neutral-900 dark:to-transparent">
+        <section className="relative bg-gradient-to-b to-transparent dark:from-neutral-900 dark:to-transparent">
             <div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
                 <div className="space-y-4 text-center">
                     {/* Badge */}