From f73131dc03b3c039ed39f18069d77e3b968a7dee Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Fri, 29 May 2026 12:49:22 +0800
Subject: [PATCH] style: apply prettier formatting to fix format:check

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/App.tsx                                   |  69 +--
 src/components/BackToTop.tsx                  |   4 +-
 .../messageStream/MessageStream.tsx           |   5 +-
 src/layouts/PublicLayout.tsx                  |   7 +-
 src/pages/Categories/index.tsx                |   5 +-
 src/pages/Home/index.tsx                      | 460 +++++++++---------
 6 files changed, 274 insertions(+), 276 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index c661b21..42799df 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,41 +25,44 @@ export default function App() {
     <I18nProvider>
       <MotionProvider>
         <ToastProvider>
-        <AdminRouterModeProvider value="absolute">
-        <ImageLightboxProvider>
-          <VideoPlayerProvider>
-            <BrowserRouter>
-              <Routes>
-                <Route element={<PublicLayout />}>
-                  <Route path="/" element={<Home />} />
-                  <Route path="/browse" element={<Browse />} />
-                  <Route path="/categories" element={<CategoriesPage />} />
-                  <Route
-                    path="/official-recommendations"
-                    element={<OfficialRecommendationsPage />}
-                  />
-                  <Route path="/category/:slug" element={<CategoryPage />} />
-                  <Route path="/search" element={<SearchPage />} />
-                  <Route path="/resource/:id" element={<PostRedirect />} />
-                  <Route path="/about" element={<AboutPage />} />
-                  <Route path="/favorites" element={<Favorites />} />
-                </Route>
+          <AdminRouterModeProvider value="absolute">
+            <ImageLightboxProvider>
+              <VideoPlayerProvider>
+                <BrowserRouter>
+                  <Routes>
+                    <Route element={<PublicLayout />}>
+                      <Route path="/" element={<Home />} />
+                      <Route path="/browse" element={<Browse />} />
+                      <Route path="/categories" element={<CategoriesPage />} />
+                      <Route
+                        path="/official-recommendations"
+                        element={<OfficialRecommendationsPage />}
+                      />
+                      <Route
+                        path="/category/:slug"
+                        element={<CategoryPage />}
+                      />
+                      <Route path="/search" element={<SearchPage />} />
+                      <Route path="/resource/:id" element={<PostRedirect />} />
+                      <Route path="/about" element={<AboutPage />} />
+                      <Route path="/favorites" element={<Favorites />} />
+                    </Route>
 
-                {adminEnabled ? (
-                  AdminRouteTree()
-                ) : (
-                  <Route
-                    path={`${adminUiPrefix}/*`}
-                    element={<Navigate to="/" replace />}
-                  />
-                )}
+                    {adminEnabled ? (
+                      AdminRouteTree()
+                    ) : (
+                      <Route
+                        path={`${adminUiPrefix}/*`}
+                        element={<Navigate to="/" replace />}
+                      />
+                    )}
 
-                <Route path="*" element={<Navigate to="/" replace />} />
-              </Routes>
-            </BrowserRouter>
-          </VideoPlayerProvider>
-        </ImageLightboxProvider>
-        </AdminRouterModeProvider>
+                    <Route path="*" element={<Navigate to="/" replace />} />
+                  </Routes>
+                </BrowserRouter>
+              </VideoPlayerProvider>
+            </ImageLightboxProvider>
+          </AdminRouterModeProvider>
         </ToastProvider>
       </MotionProvider>
     </I18nProvider>
diff --git a/src/components/BackToTop.tsx b/src/components/BackToTop.tsx
index 99afa8f..26e4475 100644
--- a/src/components/BackToTop.tsx
+++ b/src/components/BackToTop.tsx
@@ -30,9 +30,7 @@ export function BackToTop() {
           animate={{ opacity: 1, scale: 1, y: 0 }}
           exit={{ opacity: 0, scale: 0.8, y: 8 }}
           transition={{ type: "spring", stiffness: 380, damping: 26 }}
-          onClick={() =>
-            window.scrollTo({ top: 0, behavior: "smooth" })
-          }
+          onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
           className="fixed bottom-[94px] right-4 z-30 flex h-11 w-11 items-center justify-center rounded-full bg-ark-gold text-black shadow-lg shadow-black/40 outline-none transition hover:bg-ark-gold2 active:scale-95 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:bottom-8 md:right-8"
           aria-label={t("backToTop")}
           title={t("backToTop")}
diff --git a/src/components/messageStream/MessageStream.tsx b/src/components/messageStream/MessageStream.tsx
index 39ff232..42091bc 100644
--- a/src/components/messageStream/MessageStream.tsx
+++ b/src/components/messageStream/MessageStream.tsx
@@ -71,8 +71,9 @@ export function MessageStream({ scope }: MessageStreamProps) {
   // When arriving with a `#post-<id>` hash (e.g. from a recommended card),
   // scroll to that bubble — loading more pages until it shows up — then give
   // it a brief highlight so the user can see where they landed.
-  const targetPostId =
-    hash.startsWith("#post-") ? hash.slice("#post-".length) : "";
+  const targetPostId = hash.startsWith("#post-")
+    ? hash.slice("#post-".length)
+    : "";
   const handledTargetRef = useRef<string>("");
 
   useEffect(() => {
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index bbda386..ae96daa 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -1,12 +1,7 @@
 import { ChevronDown, Menu, Search as SearchIcon, X } from "lucide-react";
 import { AnimatePresence, m } from "framer-motion";
 import { useEffect, useRef, useState } from "react";
-import {
-  Link,
-  useLocation,
-  useNavigate,
-  useOutlet,
-} from "react-router-dom";
+import { Link, useLocation, useNavigate, useOutlet } from "react-router-dom";
 import { pageTransition } from "../motion";
 import { ArkLogoMark } from "../components/ArkLogoMark";
 import { BackToTop } from "../components/BackToTop";
diff --git a/src/pages/Categories/index.tsx b/src/pages/Categories/index.tsx
index 4327e24..bd902b9 100644
--- a/src/pages/Categories/index.tsx
+++ b/src/pages/Categories/index.tsx
@@ -80,10 +80,7 @@ export function CategoriesPage() {
       <div className="mt-7 grid grid-cols-3 gap-2 md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
         {isLoading
           ? Array.from({ length: 14 }).map((_, i) => (
-              <Skeleton
-                key={i}
-                className="h-[88px] rounded-xl"
-              />
+              <Skeleton key={i} className="h-[88px] rounded-xl" />
             ))
           : cats.map((category, index) => (
               <Reveal
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 5a70ee9..5bb6aff 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -271,267 +271,271 @@ export function Home() {
       </section>
 
       <Reveal delay={0}>
-      <section id="categories" className="scroll-mt-16 md:scroll-mt-24">
-        <div className="px-4 md:px-0">
-          <SectionHeader
-            title={t("categorySection")}
-            viewAllTo="/categories"
-            viewAllLabel={t("viewAll")}
-          />
-        </div>
-
-        <div className="md:hidden">
-          <div
-            ref={categoryRowRef}
-            className="flex snap-x snap-mandatory items-start overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-            style={{ height: `${mobileCategoryHeight}px` }}
-            aria-label={t("categorySection")}
-          >
-            {categoryPages.map((page, pageIndex) => (
-              <div
-                key={`category-page-${pageIndex}`}
-                className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4"
-              >
-                {page.map((c) => (
-                  <Link
-                    key={c.id}
-                    to={`/category/${encodeURIComponent(c.slug)}`}
-                    className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
-                  >
-                    <CategoryIcon
-                      iconKey={c.iconKey}
-                      categorySlug={c.slug}
-                      className="h-9 w-9 shrink-0 text-ark-gold"
-                    />
-                    <div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
-                      {cleanCategoryDisplayName(c.name)}
-                    </div>
-                  </Link>
-                ))}
-              </div>
-            ))}
+        <section id="categories" className="scroll-mt-16 md:scroll-mt-24">
+          <div className="px-4 md:px-0">
+            <SectionHeader
+              title={t("categorySection")}
+              viewAllTo="/categories"
+              viewAllLabel={t("viewAll")}
+            />
           </div>
 
-          {categoryPages.length > 1 ? (
+          <div className="md:hidden">
             <div
-              className="flex h-[30px] items-center justify-center gap-1.5"
-              aria-label="Category pagination"
+              ref={categoryRowRef}
+              className="flex snap-x snap-mandatory items-start overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              style={{ height: `${mobileCategoryHeight}px` }}
+              aria-label={t("categorySection")}
             >
-              {categoryPages.map((_, index) => (
+              {categoryPages.map((page, pageIndex) => (
+                <div
+                  key={`category-page-${pageIndex}`}
+                  className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4"
+                >
+                  {page.map((c) => (
+                    <Link
+                      key={c.id}
+                      to={`/category/${encodeURIComponent(c.slug)}`}
+                      className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                    >
+                      <CategoryIcon
+                        iconKey={c.iconKey}
+                        categorySlug={c.slug}
+                        className="h-9 w-9 shrink-0 text-ark-gold"
+                      />
+                      <div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
+                        {cleanCategoryDisplayName(c.name)}
+                      </div>
+                    </Link>
+                  ))}
+                </div>
+              ))}
+            </div>
+
+            {categoryPages.length > 1 ? (
+              <div
+                className="flex h-[30px] items-center justify-center gap-1.5"
+                aria-label="Category pagination"
+              >
+                {categoryPages.map((_, index) => (
+                  <button
+                    key={`category-dot-${index}`}
+                    type="button"
+                    aria-label={`Go to category page ${index + 1}`}
+                    aria-current={activeCategoryPage === index}
+                    onClick={() => {
+                      const row = categoryRowRef.current;
+                      if (!row) return;
+                      row.scrollTo({
+                        left: row.clientWidth * index,
+                        behavior: "smooth",
+                      });
+                      setActiveCategoryPage(index);
+                    }}
+                    className={`h-1.5 rounded-full transition-all ${
+                      activeCategoryPage === index
+                        ? "w-6 bg-ark-gold"
+                        : "w-1.5 bg-[#7C7C7C]"
+                    }`}
+                  />
+                ))}
+              </div>
+            ) : null}
+          </div>
+
+          <div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
+            {figmaOrderedCategories.map((c, index) => (
+              <Reveal key={c.id} delay={Math.min(index, 8) * 0.05}>
+                <Link
+                  to={`/category/${encodeURIComponent(c.slug)}`}
+                  className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                >
+                  <CategoryIcon
+                    iconKey={c.iconKey}
+                    categorySlug={c.slug}
+                    className="h-9 w-9 shrink-0 text-ark-gold"
+                  />
+                  <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
+                    {cleanCategoryDisplayName(c.name)}
+                  </div>
+                </Link>
+              </Reveal>
+            ))}
+          </div>
+        </section>
+      </Reveal>
+
+      <Reveal>
+        <section id="official" className="scroll-mt-16 md:scroll-mt-24">
+          <div className="px-4 md:px-0">
+            <SectionHeader
+              title={t("officialSection")}
+              viewAllTo="/official-recommendations"
+              viewAllLabel={t("viewAll")}
+            />
+          </div>
+          <div className="relative">
+            <div
+              ref={recRowRef}
+              className="flex gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pr-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
+            >
+              {rec.map((r, index) => (
+                <div key={r.id}>
+                  <Reveal delay={Math.min(index, 8) * 0.05}>
+                    <RecommendedCard r={r} visualIndex={index} useFigmaDesign />
+                  </Reveal>
+                </div>
+              ))}
+            </div>
+            <div
+              className="flex h-[30px] items-center justify-center gap-1.5 md:hidden"
+              aria-label="Recommended pagination"
+            >
+              {Array.from({ length: recommendedDotCount }).map((_, index) => (
                 <button
-                  key={`category-dot-${index}`}
+                  key={`recommended-dot-${index}`}
                   type="button"
-                  aria-label={`Go to category page ${index + 1}`}
-                  aria-current={activeCategoryPage === index}
+                  aria-label={`Go to recommendation page ${index + 1}`}
+                  aria-current={activeRecommendedDot === index}
                   onClick={() => {
-                    const row = categoryRowRef.current;
+                    const row = recRowRef.current;
                     if (!row) return;
+                    const maxScroll = Math.max(
+                      0,
+                      row.scrollWidth - row.clientWidth,
+                    );
                     row.scrollTo({
-                      left: row.clientWidth * index,
+                      left:
+                        recommendedDotCount === 1
+                          ? 0
+                          : (maxScroll * index) / (recommendedDotCount - 1),
                       behavior: "smooth",
                     });
-                    setActiveCategoryPage(index);
                   }}
                   className={`h-1.5 rounded-full transition-all ${
-                    activeCategoryPage === index
+                    activeRecommendedDot === index
                       ? "w-6 bg-ark-gold"
                       : "w-1.5 bg-[#7C7C7C]"
                   }`}
                 />
               ))}
             </div>
-          ) : null}
-        </div>
-
-        <div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
-          {figmaOrderedCategories.map((c, index) => (
-            <Reveal key={c.id} delay={Math.min(index, 8) * 0.05}>
-              <Link
-                to={`/category/${encodeURIComponent(c.slug)}`}
-                className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
-              >
-                <CategoryIcon
-                  iconKey={c.iconKey}
-                  categorySlug={c.slug}
-                  className="h-9 w-9 shrink-0 text-ark-gold"
-                />
-                <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
-                  {cleanCategoryDisplayName(c.name)}
-                </div>
-              </Link>
-            </Reveal>
-          ))}
-        </div>
-      </section>
+            {canScrollRec ? (
+              <>
+                <button
+                  type="button"
+                  onClick={() => scrollRec(-1)}
+                  className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+                  aria-label="Previous recommendations"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => scrollRec(1)}
+                  className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+                  aria-label="Next recommendations"
+                >
+                  <ChevronRight className="h-5 w-5" />
+                </button>
+              </>
+            ) : null}
+          </div>
+        </section>
       </Reveal>
 
       <Reveal>
-      <section id="official" className="scroll-mt-16 md:scroll-mt-24">
-        <div className="px-4 md:px-0">
-          <SectionHeader
-            title={t("officialSection")}
-            viewAllTo="/official-recommendations"
-            viewAllLabel={t("viewAll")}
-          />
-        </div>
-        <div className="relative">
-          <div
-            ref={recRowRef}
-            className="flex gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pr-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
-          >
-            {rec.map((r, index) => (
-              <div key={r.id}>
-                <Reveal delay={Math.min(index, 8) * 0.05}>
-                  <RecommendedCard r={r} visualIndex={index} useFigmaDesign />
-                </Reveal>
-              </div>
-            ))}
-          </div>
-          <div
-            className="flex h-[30px] items-center justify-center gap-1.5 md:hidden"
-            aria-label="Recommended pagination"
-          >
-            {Array.from({ length: recommendedDotCount }).map((_, index) => (
-              <button
-                key={`recommended-dot-${index}`}
-                type="button"
-                aria-label={`Go to recommendation page ${index + 1}`}
-                aria-current={activeRecommendedDot === index}
-                onClick={() => {
-                  const row = recRowRef.current;
-                  if (!row) return;
-                  const maxScroll = Math.max(
-                    0,
-                    row.scrollWidth - row.clientWidth,
-                  );
-                  row.scrollTo({
-                    left:
-                      recommendedDotCount === 1
-                        ? 0
-                        : (maxScroll * index) / (recommendedDotCount - 1),
-                    behavior: "smooth",
-                  });
-                }}
-                className={`h-1.5 rounded-full transition-all ${
-                  activeRecommendedDot === index
-                    ? "w-6 bg-ark-gold"
-                    : "w-1.5 bg-[#7C7C7C]"
-                }`}
-              />
-            ))}
-          </div>
-          {canScrollRec ? (
-            <>
-              <button
-                type="button"
-                onClick={() => scrollRec(-1)}
-                className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-                aria-label="Previous recommendations"
-              >
-                <ChevronLeft className="h-5 w-5" />
-              </button>
-              <button
-                type="button"
-                onClick={() => scrollRec(1)}
-                className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-                aria-label="Next recommendations"
-              >
-                <ChevronRight className="h-5 w-5" />
-              </button>
-            </>
-          ) : null}
-        </div>
-      </section>
-      </Reveal>
-
-      <Reveal>
-      <section id="latest" className="scroll-mt-16 md:scroll-mt-24">
-        <div className="px-4 md:px-0">
-          <SectionHeader
-            title={t("latestSection")}
-            viewAllTo="/browse"
-            viewAllLabel={t("viewAll")}
-          />
-        </div>
-        <div className="flex flex-col gap-3 md:hidden">
-          {latestPosts.slice(0, 5).map((post) => (
-            <MessageBubble key={post.id} post={post} />
-          ))}
-        </div>
-        <div className="relative hidden md:block">
-          <div
-            ref={latestRowRef}
-            className="mt-7 flex gap-4 overflow-x-auto overflow-y-hidden pb-5 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-          >
-            {latest.map((r) => (
-              <div key={r.id} className="w-[340px] shrink-0 xl:w-[352px]">
-                <LatestUpdateRow r={r} iconKey={iconKeyForResource(r)} />
-              </div>
-            ))}
-            {Array.from({ length: latestPlaceholderCount }).map((_, index) => (
-              <div
-                key={`latest-coming-soon-${index}`}
-                className="w-[340px] shrink-0 xl:w-[352px]"
-              >
-                <ComingSoonLatestUpdateRow index={latest.length + index} />
-              </div>
-            ))}
-          </div>
-          {canScrollLatest ? (
-            <>
-              <button
-                type="button"
-                onClick={() => scrollLatest(-1)}
-                className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-                aria-label="Previous latest updates"
-              >
-                <ChevronLeft className="h-5 w-5" />
-              </button>
-              <button
-                type="button"
-                onClick={() => scrollLatest(1)}
-                className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-                aria-label="Next latest updates"
-              >
-                <ChevronRight className="h-5 w-5" />
-              </button>
-            </>
-          ) : null}
-        </div>
-      </section>
-      </Reveal>
-
-      {hasPopular ? (
-        <Reveal>
-        <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
+        <section id="latest" className="scroll-mt-16 md:scroll-mt-24">
           <div className="px-4 md:px-0">
             <SectionHeader
-              title={t("popularSection")}
-              viewAllTo="/browse?sort=popular"
+              title={t("latestSection")}
+              viewAllTo="/browse"
               viewAllLabel={t("viewAll")}
             />
           </div>
           <div className="flex flex-col gap-3 md:hidden">
-            {popularPosts.slice(0, 5).map((post) => (
+            {latestPosts.slice(0, 5).map((post) => (
               <MessageBubble key={post.id} post={post} />
             ))}
           </div>
-          <div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
-            {popular.map((r) => (
-              <LatestUpdateRow
-                key={r.id}
-                r={r}
-                iconKey={iconKeyForResource(r)}
-              />
-            ))}
-            {Array.from({ length: popularPlaceholderCount }).map((_, index) => (
-              <ComingSoonLatestUpdateRow
-                key={`popular-coming-soon-${index}`}
-                index={popular.length + index}
-              />
-            ))}
+          <div className="relative hidden md:block">
+            <div
+              ref={latestRowRef}
+              className="mt-7 flex gap-4 overflow-x-auto overflow-y-hidden pb-5 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+            >
+              {latest.map((r) => (
+                <div key={r.id} className="w-[340px] shrink-0 xl:w-[352px]">
+                  <LatestUpdateRow r={r} iconKey={iconKeyForResource(r)} />
+                </div>
+              ))}
+              {Array.from({ length: latestPlaceholderCount }).map(
+                (_, index) => (
+                  <div
+                    key={`latest-coming-soon-${index}`}
+                    className="w-[340px] shrink-0 xl:w-[352px]"
+                  >
+                    <ComingSoonLatestUpdateRow index={latest.length + index} />
+                  </div>
+                ),
+              )}
+            </div>
+            {canScrollLatest ? (
+              <>
+                <button
+                  type="button"
+                  onClick={() => scrollLatest(-1)}
+                  className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+                  aria-label="Previous latest updates"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                </button>
+                <button
+                  type="button"
+                  onClick={() => scrollLatest(1)}
+                  className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+                  aria-label="Next latest updates"
+                >
+                  <ChevronRight className="h-5 w-5" />
+                </button>
+              </>
+            ) : null}
           </div>
         </section>
+      </Reveal>
+
+      {hasPopular ? (
+        <Reveal>
+          <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
+            <div className="px-4 md:px-0">
+              <SectionHeader
+                title={t("popularSection")}
+                viewAllTo="/browse?sort=popular"
+                viewAllLabel={t("viewAll")}
+              />
+            </div>
+            <div className="flex flex-col gap-3 md:hidden">
+              {popularPosts.slice(0, 5).map((post) => (
+                <MessageBubble key={post.id} post={post} />
+              ))}
+            </div>
+            <div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
+              {popular.map((r) => (
+                <LatestUpdateRow
+                  key={r.id}
+                  r={r}
+                  iconKey={iconKeyForResource(r)}
+                />
+              ))}
+              {Array.from({ length: popularPlaceholderCount }).map(
+                (_, index) => (
+                  <ComingSoonLatestUpdateRow
+                    key={`popular-coming-soon-${index}`}
+                    index={popular.length + index}
+                  />
+                ),
+              )}
+            </div>
+          </section>
         </Reveal>
       ) : null}
     </div>
-- 
2.49.1