fix: desktop homepage responsive polish and nav tweaks

- Banner: scale down and center on desktop (md:max-w-[680px] lg:max-w-[800px])
  so it no longer fills the whole screen.
- Align section widths to one responsive container (820/1080/1180): wrap the
  Official row and match Popular to Latest, fixing left-edge/width mismatches.
- RecommendedCard: stop the carousel card from shrinking back to 246.4px at xl.
- Popular download button now matches the file bubble's filled round
  DownloadCloud button for visual consistency.
- Header nav vertical padding py-1 -> py-0.5; swap Favorites before Popular
  across desktop nav and mobile menu to match the bottom tab order.
- Official carousel: hide the left arrow at the start and the right arrow at
  the end instead of always showing both.

All changes are md/lg/xl-scoped; mobile layout is unchanged.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/layouts/PublicLayout.tsx

@@ -529,7 +529,7 @@ export function PublicLayout() {
             </div>
 
             <nav
-              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-1 min-[1200px]:flex lg:gap-5"
+              className="header-nav-scroll hidden min-w-0 flex-1 items-center justify-center gap-4 overflow-x-auto overflow-y-hidden py-0.5 min-[1200px]:flex lg:gap-5"
               aria-label={t("mainNav")}
             >
               <Link
@@ -560,13 +560,6 @@ export function PublicLayout() {
               >
                 {t("latest")}
               </Link>
-              <Link
-                to={popularHref}
-                className={navClassName(na("browsePopular"))}
-                aria-current={na("browsePopular") ? "page" : undefined}
-              >
-                {t("popular")}
-              </Link>
               <Link
                 to="/favorites"
                 className={navClassName(na("favorites"))}
@@ -574,6 +567,13 @@ export function PublicLayout() {
               >
                 {t("favorites")}
               </Link>
+              <Link
+                to={popularHref}
+                className={navClassName(na("browsePopular"))}
+                aria-current={na("browsePopular") ? "page" : undefined}
+              >
+                {t("popular")}
+              </Link>
             </nav>
 
             <div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1200px]:flex-none">
@@ -667,14 +667,6 @@ export function PublicLayout() {
             >
               {t("latest")}
             </Link>
-            <Link
-              to={popularHref}
-              className={mobileMenuNavClassName(na("browsePopular"))}
-              aria-current={na("browsePopular") ? "page" : undefined}
-              onClick={() => setOpen(false)}
-            >
-              {t("popular")}
-            </Link>
             <Link
               to="/favorites"
               className={mobileMenuNavClassName(na("favorites"))}
@@ -683,6 +675,14 @@ export function PublicLayout() {
             >
               {t("favorites")}
             </Link>
+            <Link
+              to={popularHref}
+              className={mobileMenuNavClassName(na("browsePopular"))}
+              aria-current={na("browsePopular") ? "page" : undefined}
+              onClick={() => setOpen(false)}
+            >
+              {t("popular")}
+            </Link>
           </div>
         ) : null}
       </header>