feat: add feedback system with modal, api endpoints, and stats tracking

components/landing/footer.tsx

@@ -1,6 +1,10 @@
+"use client";
+
+import { useState } from "react";
 import { TOGETHER_LINK } from "@/lib/utils";
-import { Github } from "lucide-react";
+import { Github, MessageSquare } from "lucide-react";
 import Link from "next/link";
+import { FeedbackModal } from "@/components/feedback-modal";
 
 function XIcon({ className }: { className?: string }) {
   return (
@@ -11,39 +15,52 @@ function XIcon({ className }: { className?: string }) {
 }
 
 export function Footer() {
+  const [showFeedback, setShowFeedback] = useState(false);
+
   return (
-    <footer className="h-8 border-t border-border/50 bg-background flex items-center justify-between px-6 text-[10px] text-muted-foreground select-none">
-      <div className="flex items-center gap-4">
-        <span>
-          Made & powered by{" "}
+    <>
+      <footer className="h-8 border-t border-border/50 bg-background flex items-center justify-between px-6 text-[10px] text-muted-foreground select-none">
+        <div className="flex items-center gap-4">
+          <span>
+            Made & powered by{" "}
+            <Link
+              href={TOGETHER_LINK}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:text-white transition-colors text-white"
+            >
+              Together.ai
+            </Link>
+          </span>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            onClick={() => setShowFeedback(true)}
+            className="flex items-center gap-1.5 px-2 py-0.5 rounded-full border border-border/50 hover:border-border hover:text-white transition-colors cursor-pointer"
+          >
+            <MessageSquare className="w-3 h-3" />
+            Got ideas? Tell us
+          </button>
           <Link
-            href={TOGETHER_LINK}
+            href="https://github.com/nutlope/make-comics"
             target="_blank"
             rel="noopener noreferrer"
-            className="hover:text-white transition-colors text-white"
+            className="hover:text-white transition-colors"
           >
-            Together.ai
+            <Github className="w-3.5 h-3.5" />
           </Link>
-        </span>
-      </div>
-      <div className="flex items-center gap-3">
-        <Link
-          href="https://github.com/nutlope/make-comics"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hover:text-white transition-colors"
-        >
-          <Github className="w-3.5 h-3.5" />
-        </Link>
-        <Link
-          href="https://x.com/nutlope"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="hover:text-white transition-colors"
-        >
-          <XIcon className="w-3.5 h-3.5" />
-        </Link>
-      </div>
-    </footer>
+          <Link
+            href="https://x.com/nutlope"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="hover:text-white transition-colors"
+          >
+            <XIcon className="w-3.5 h-3.5" />
+          </Link>
+        </div>
+      </footer>
+
+      <FeedbackModal isOpen={showFeedback} onClose={() => setShowFeedback(false)} />
+    </>
   );
 }

components/landing/hero-section.tsx

@@ -1,8 +1,31 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { TOGETHER_LINK } from "@/lib/utils";
 
 export function LandingHero() {
+  const [pagesLast24h, setPagesLast24h] = useState<number | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch("/api/stats")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        if (!cancelled && data && typeof data.pagesLast24h === "number") {
+          setPagesLast24h(data.pagesLast24h);
+        }
+      })
+      .catch(() => {});
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  const roundedCount =
+    pagesLast24h !== null && pagesLast24h >= 10
+      ? Math.floor(pagesLast24h / 10) * 10
+      : null;
+
   return (
     <header className="relative py-8 sm:py-12 md:py-16 lg:py-0">
       <div className="relative z-10">
@@ -28,6 +51,16 @@ export function LandingHero() {
             Describe your scene, choose a style, and let AI render professional
             comic panels instantly.
           </p>
+
+          {roundedCount !== null && (
+            <p className="text-muted-foreground leading-relaxed max-w-md mx-auto lg:mx-0 tracking-[-0.02em] px-4 sm:px-0 text-sm mt-2">
+              More than{" "}
+              <span className="text-indigo font-semibold">
+                {roundedCount.toLocaleString()}
+              </span>{" "}
+              comic pages have been generated in the last 24 hours.
+            </p>
+          )}
         </div>
       </div>
     </header>