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/content/ContentContainer/ContentContainer.container.tsx

@@ -74,8 +74,8 @@ const ContentContainerContainer = memo<ContentContainerProps>(
 
     const titleClasses =
       size === "xs"
-        ? `font-bricolage font-medium text-[18px] leading-[22px] transition-colors ${titleColor}`
-        : `font-bricolage font-medium text-xx-small-display sm:text-x-small-display md:text-[32px] md:leading-[110%] lg:text-medium-display xl:text-x-large-display transition-colors ${titleColor}`;
+        ? `font-bricolage-grotesque font-medium text-[18px] leading-[22px] transition-colors ${titleColor}`
+        : `font-bricolage-grotesque font-medium text-xx-small-display sm:text-x-small-display md:text-[32px] md:leading-[110%] lg:text-medium-display xl:text-x-large-display transition-colors ${titleColor}`;
 
     const descriptionClasses =
       size === "xs"

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}

app/components/sections/RelatedArticles/RelatedArticles.types.ts

@@ -25,6 +25,7 @@ export interface RelatedArticlesViewProps {
   filteredPosts: BlogPost[];
   slugOrder: string[];
   isMobile: boolean;
+  manualScroll: boolean;
   transformStyle: React.CSSProperties;
   getProgressStyle: (_index: number) => React.CSSProperties;
   onMouseDown?: (_e: React.MouseEvent<HTMLDivElement>) => void;

app/components/sections/RelatedArticles/RelatedArticles.view.tsx

@@ -5,6 +5,7 @@ export function RelatedArticlesView({
   filteredPosts,
   slugOrder,
   isMobile,
+  manualScroll,
   transformStyle,
   getProgressStyle,
   onMouseDown,
@@ -76,12 +77,13 @@ export function RelatedArticlesView({
                 ? "lg:gap-[var(--spacing-scale-012)] lg:pl-[var(--spacing-scale-024)]"
                 : ""
             } ${
-              !isMobile
+              manualScroll
                 ? "overflow-x-auto scrollbar-hide cursor-grab active:cursor-grabbing"
                 : ""
             }`}
+            data-testid="related-articles-track"
             style={transformStyle}
-            onMouseDown={!isMobile ? onMouseDown : undefined}
+            onMouseDown={manualScroll ? onMouseDown : undefined}
           >
             {filteredPosts.map((relatedPost) => (
               <div
@@ -100,8 +102,7 @@ export function RelatedArticlesView({
           </div>
         </div>
 
-        {/* Progress bars - only show on mobile */}
-        {isMobile && (
+        {isMobile && !isUseCases && (
           <div className="flex justify-center gap-[var(--measures-spacing-008)] px-[var(--measures-spacing-064)]">
             {filteredPosts.map((relatedPost, index) => (
               <div