Limit the Use Cases tools row to the three catalog articles, make it mouse-draggable instead of auto-advancing, and put card titles on Bricolage Grotesque so they match the design.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/sections/RelatedArticles/RelatedArticles.container.tsx

@@ -20,6 +20,7 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
     heading,
   }) => {
     const messages = useMessages();
+    const isUseCases = variant === "useCases";
     // Memoize filtered posts to prevent unnecessary re-computations
     const filteredPosts = useMemo(
       () => relatedPosts.filter((post) => post.slug !== currentPostSlug),
@@ -29,6 +30,8 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
     const [currentIndex, setCurrentIndex] = useState(0);
     const [progress, setProgress] = useState(0);
     const isMobile = useIsMobile();
+    const autoScroll = !isUseCases && isMobile;
+    const manualScroll = isUseCases || !isMobile;
 
     // Memoize the mouse down handler to prevent unnecessary re-renders
     const handleMouseDown = useCallback(
@@ -57,14 +60,15 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
     // Memoize transform style to prevent unnecessary recalculations
     const transformStyle = useMemo(
       () => ({
-        transform: isMobile
-          ? `translateX(calc(50% - 130px - ${currentIndex * 260}px))`
-          : "none",
-        scrollBehavior: (!isMobile
+        transform:
+          !isUseCases && isMobile
+            ? `translateX(calc(50% - 130px - ${currentIndex * 260}px))`
+            : "none",
+        scrollBehavior: (manualScroll
           ? "smooth"
           : "auto") as React.CSSProperties["scrollBehavior"],
       }),
-      [isMobile, currentIndex],
+      [isMobile, currentIndex, isUseCases, manualScroll],
     );
 
     // Memoize progress bar style calculation
@@ -80,9 +84,9 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
       [currentIndex, progress],
     );
 
-    // Auto-advance every 3 seconds (only on mobile)
+    // Auto-advance every 3 seconds (blog carousel on small viewports only)
     useEffect(() => {
-      if (filteredPosts.length <= 1 || !isMobile) return;
+      if (!autoScroll || filteredPosts.length <= 1) return;
 
       const interval = setInterval(() => {
         setProgress(0);
@@ -90,11 +94,11 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
       }, 3000);
 
       return () => clearInterval(interval);
-    }, [filteredPosts.length, isMobile]);
+    }, [autoScroll, filteredPosts.length]);
 
     // Progress animation (only on mobile)
     useEffect(() => {
-      if (filteredPosts.length <= 1 || !isMobile) return;
+      if (!autoScroll || filteredPosts.length <= 1) return;
 
       const progressInterval = setInterval(() => {
         setProgress((prev) => {
@@ -106,18 +110,18 @@ const RelatedArticlesContainer = memo<RelatedArticlesProps>(
       }, 30); // 30ms intervals for smooth animation
 
       return () => clearInterval(progressInterval);
-    }, [currentIndex, filteredPosts.length, isMobile]);
+    }, [autoScroll, currentIndex, filteredPosts.length]);
 
-    const useCasesHeadingLines =
-      variant === "useCases"
-        ? messages.pages.useCases.relatedArticles.title
-        : undefined;
+    const useCasesHeadingLines = isUseCases
+      ? messages.pages.useCases.relatedArticles.title
+      : undefined;
 
     return (
       <RelatedArticlesView
         filteredPosts={filteredPosts}
         slugOrder={slugOrder}
         isMobile={isMobile}
+        manualScroll={manualScroll}
         transformStyle={transformStyle}
         getProgressStyle={getProgressStyle}
         onMouseDown={handleMouseDown}