Update

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

@@ -0,0 +1,65 @@
+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">
+                <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">Instant 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">FAST</span>
+                        </h1>
+
+                        <h2 className="text-muted-foreground mx-auto max-w-4xl text-xl leading-relaxed font-light sm:text-2xl lg:text-3xl">
+                            Fast and simple meme video editor
+                        </h2>
+                    </div>
+
+                    {/* Stats */}
+                    <div className="flex flex-wrap justify-center gap-8 sm:gap-12">
+                        <div className="text-center">
+                            <CountUp
+                                from={0}
+                                to={stats?.meme_count || 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">
+                            <CountUp
+                                from={0}
+                                to={stats?.background_count || 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">
+                            <div className="text-foreground text-3xl font-bold sm:text-4xl">720p</div>
+                            <div className="text-muted-foreground text-sm">Export</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    );
+};
+
+export default Hero;