Update

app/Http/Controllers/FrontHomeController.php

@@ -2,7 +2,10 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\BackgroundMedia;
+use App\Models\MemeMedia;
 use Illuminate\Support\Facades\App;
+use Illuminate\Support\Facades\Cache;
 use Inertia\Inertia;
 
 class FrontHomeController extends Controller
@@ -13,6 +16,16 @@ public function index()
             return Inertia::render('comingsoon');
         }
 
-        return Inertia::render('home/home');
+        // Cache the counts for 1 day to reduce server calls
+        $stats = Cache::remember('home_stats', 60 * 60 * 24, function () {
+            return [
+                'meme_count' => MemeMedia::count(),
+                'background_count' => BackgroundMedia::count(),
+            ];
+        });
+
+        return Inertia::render('home/home', [
+            'stats' => $stats,
+        ]);
     }
 }

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

@@ -28,6 +28,10 @@ const FAQDiscord = () => {
             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!<br><br>Want a certain content? Let us know in our Discord group.',
         },
+        {
+            q: 'I found a bug!',
+            a: "Great, report it into the Discord group and we'll fix it as soon as possible!",
+        },
         {
             q: 'I have more questions!',
             a: 'Great! Join our Discord group and ask away!',

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

@@ -1,6 +1,6 @@
 import { Switch } from '@/components/ui/switch';
 import { useTheme } from '@/hooks/useTheme';
-import { Sun, Moon } from 'lucide-react';
+import { Moon, Sun } from 'lucide-react';
 
 const Footer = () => {
     const currentYear = new Date().getFullYear();
@@ -12,35 +12,41 @@ const Footer = () => {
                 <div className="border-t pt-8">
                     <div className="flex flex-col items-center justify-between space-y-4 sm:flex-row sm:space-y-0">
                         <div className="text-muted-foreground text-sm">© {currentYear} MEMEFAST. All rights reserved.</div>
+                        <div className="text-muted-foreground text-sm">
+                            Made by{' '}
+                            <a href="https://x.com/charlestehio" target="_blank" rel="noopener noreferrer">
+                                @charlestehio
+                            </a>
+                        </div>
                         <div className="flex flex-col items-center space-y-4 sm:flex-row sm:space-y-0 sm:space-x-6">
                             {/* Theme Toggle */}
                             <div className="flex items-center space-x-2">
-                                <Sun className="h-4 w-4 text-muted-foreground" />
+                                <Sun className="text-muted-foreground h-4 w-4" />
                                 <Switch id="dark-mode" checked={isDark} onCheckedChange={toggleTheme} />
-                                <Moon className="h-4 w-4 text-muted-foreground" />
+                                <Moon className="text-muted-foreground h-4 w-4" />
                             </div>
-                            
+
                             {/* Navigation Links */}
                             <div className="flex space-x-6">
-                            <a href="/" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                                <a href="/" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                                Home
+                                    Home
-                            </a>
-                            <a href="/terms" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                                Terms
-                            </a>
-                            <a href="/privacy" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
-                                Privacy
-                            </a>
-                            {import.meta.env.VITE_DISCORD_LINK && (
-                                <a
-                                    href={import.meta.env.VITE_DISCORD_LINK}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                    className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-                                >
-                                    Discord
                                 </a>
-                            )}
+                                <a href="/terms" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                                    Terms
+                                </a>
+                                <a href="/privacy" className="text-muted-foreground hover:text-foreground text-sm transition-colors">
+                                    Privacy
+                                </a>
+                                {import.meta.env.VITE_DISCORD_LINK && (
+                                    <a
+                                        href={import.meta.env.VITE_DISCORD_LINK}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                                    >
+                                        Discord
+                                    </a>
+                                )}
                             </div>
                         </div>
                     </div>

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

@@ -1,6 +1,8 @@
 import CountUp from '@/components/reactbits/CountUp/CountUp';
+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">
             <div className="relative mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
@@ -28,29 +30,29 @@ const Hero = () => {
                         <div className="text-center">
                             <CountUp
                                 from={0}
-                                to={200}
+                                to={stats?.meme_count || 200}
                                 separator=","
                                 direction="up"
                                 duration={1}
                                 className="text-foreground text-3xl font-bold sm:text-4xl"
-                                postFix="+"
+                                postFix=""
                             />{' '}
                             <div className="text-muted-foreground text-sm">Meme Templates</div>
                         </div>
                         <div className="text-center">
                             <CountUp
                                 from={0}
-                                to={200}
+                                to={stats?.background_count || 200}
                                 separator=","
                                 direction="up"
                                 duration={1}
                                 className="text-foreground text-3xl font-bold sm:text-4xl"
-                                postFix="+"
+                                postFix=""
                             />
                             <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-foreground text-3xl font-bold sm:text-4xl">720p</div>
                             <div className="text-muted-foreground text-sm">Export</div>
                         </div>
                     </div>