Update

resources/js/modules/editor/editor.jsx

@@ -174,7 +174,7 @@ const Editor = () => {
 
     return (
         <>
-            <div className="relative mx-auto flex min-h-screen flex-col space-y-2 pt-4" style={{ width: `${responsiveWidth}px` }}>
+            <div className="relative mx-auto flex min-h-[98vh] flex-col space-y-2 pt-4" style={{ width: `${responsiveWidth}px` }}>
                 <EditSidebar isOpen={isEditSidebarOpen} onClose={handleEditClose} />
                 <EditNavSidebar isOpen={isEditNavSidebarOpen} onClose={handleEditNavClose} />
                 <TextSidebar isOpen={isTextSidebarOpen} onClose={handleTextSidebarClose} />

resources/js/pages/home/home.tsx

@@ -8,7 +8,9 @@ import Hero from './partials/Hero.jsx';
 const Home = () => {
     return (
         <div className="min-h-[100vh] bg-neutral-50 pb-10 dark:bg-black">
+            <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">
                 <Hero />
                 <Features />

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

@@ -5,28 +5,28 @@ const Features = () => {
         {
             icon: Heart,
             title: 'Make video memes for free',
-            description: 'Access 200+ meme templates and backgrounds without paying a cent',
+            description: 'Access 200+ meme and background libraries without paying a cent',
         },
         {
             icon: Video,
-            title: 'Easy Video Editor',
+            title: 'Web-powered Video Editor',
-            description: 'Simple video editor with draggable text, background, memes and real-time preview',
+            description: 'Easy video editor with editable text, background, memes, built into the web. No additional software required!',
         },
 
         {
             icon: Download,
-            title: 'Instant Export',
+            title: 'Export in minutes',
-            description: 'Download high-quality 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,
             title: 'Works Everywhere',
-            description: 'Create on desktop, tablet, or mobile with responsive design',
+            description: 'Create on desktop, tablet, or mobile! Potato devices not recommended though.',
         },
         {
             icon: Library,
-            title: 'Library Updates',
+            title: 'Meme Library Updates',
-            description: 'Fresh viral memes and backgrounds updated regularly',
+            description: 'Soon we will be adding more memes and backgrounds to the library!',
             comingSoon: true,
         },
         {
@@ -52,8 +52,8 @@ const Features = () => {
                             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">
+                                <div className="bg-foreground text-background absolute -top-2 -right-2 rounded-full px-2 py-1 text-xs font-medium uppercase">
-                                    Soon
+                                    Coming Soon
                                 </div>
                             )}
 

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

@@ -1,9 +1,6 @@
 const Hero = () => {
     return (
-        <section className="relative">
+        <section className="from-muted/50 relative bg-gradient-to-b to-transparent dark:from-neutral-900 dark:to-transparent">
-            {/* 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 */}