📦 NEW: add total roadmaps generated ticker

package.json

@@ -73,6 +73,7 @@
     "dayjs": "^1.11.10",
     "dotenv": "^16.4.5",
     "embla-carousel-react": "^8.0.0",
+    "framer-motion": "^11.1.7",
     "html-to-image": "^1.11.11",
     "input-otp": "^1.2.0",
     "lucide-react": "^0.358.0",

src/actions/roadmaps.ts

@@ -389,3 +389,8 @@ export const findSavedNodeDetails = async (
     throw new Error("Failed to find saved node details");
   }
 };
+
+export const getTotalRoadmapsGenerated = async () => {
+  const totalRoadmaps = await db.roadmap.count();
+  return totalRoadmaps;
+};

src/app/page.tsx

@@ -1,4 +1,3 @@
-// import Confetti from "@/components/landing/roadmap-confetti";
 import RoadmapHero from "@/components/landing/roadmap-hero";
 import RoadmapFeatures from "@/components/landing/roadmap-features";
 import RoadmapTestimonial from "@/components/testimonials/roadmap-testimonial";
@@ -9,7 +8,6 @@ import RoadmapFooter from "@/components/landing/roadmap-footer";
 export default function Home() {
   return (
     <>
-      {/* <Confetti /> */}
       <RoadmapHero />
       <RoadmapFeatures />
       <RoadmapTestimonial />

src/components/landing/roadmap-hero.tsx

@@ -1,5 +1,4 @@
 import DotPattern from "@/components/ui/dot-pattern";
-import { buttonVariants } from "@/components/ui/button";
 import MarqueeDemo from "@/components/ui/marque-wrapper";
 import { cn } from "@/lib/utils";
 import { clerkClient } from "@clerk/nextjs";
@@ -8,6 +7,20 @@ import Image from "next/image";
 import Link from "next/link";
 import { Link as LinkWithViewTransitions } from "next-view-transitions";
 import NeubrutalismButton from "@/components/ui/neobrutalism-button";
+import TextTicker from "@/components/marketing/text-ticker";
+import { getTotalRoadmapsGenerated } from "@/actions/roadmaps";
+
+async function ToalUserTicker() {
+  const totalRoadmapCount = await getTotalRoadmapsGenerated();
+  return (
+    <div className="text-2xl font-semibold tabular-nums tracking-tight">
+      <div className="flex flex-row gap-2">
+        <TextTicker value={totalRoadmapCount} />
+        Roadmaps Generated!
+      </div>
+    </div>
+  );
+}
 
 async function UserAvatars() {
   const users = await clerkClient.users.getUserList();
@@ -98,6 +111,7 @@ export default function RoadmapHero() {
           ))}
         </div>
         <UserAvatars />
+        <ToalUserTicker />
       </div>
       <div className="flex flex-col items-center gap-4 mb-6">
         <p className="flex items-center text-sm">

src/components/marketing/text-ticker.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useInView, useMotionValue, useSpring } from "framer-motion";
+
+export default function TextTicker({
+  value,
+  direction = "up",
+}: {
+  value: number;
+  direction?: "up" | "down";
+}) {
+  const ref = useRef<HTMLSpanElement>(null);
+  const motionValue = useMotionValue(direction === "down" ? value : 0);
+  const springValue = useSpring(motionValue, {
+    damping: 100,
+    stiffness: 100,
+  });
+  const isInView = useInView(ref, { once: true, margin: "-100px" });
+
+  useEffect(() => {
+    if (isInView) {
+      motionValue.set(direction === "down" ? 0 : value);
+    }
+  }, [motionValue, isInView]);
+
+  useEffect(
+    () =>
+      springValue.on("change", (latest) => {
+        if (ref.current) {
+          ref.current.textContent = Intl.NumberFormat("en-US").format(
+            latest.toFixed(0),
+          );
+        }
+      }),
+    [springValue],
+  );
+
+  return <span ref={ref} />;
+}