feat: apply figma browse mobile redesign

src/layouts/PublicLayout.tsx

@@ -266,6 +266,8 @@ export function PublicLayout() {
 
   const na = (which: PublicNavWhich) =>
     navIsActive(pathname, search, hash, which);
+  const footerInContentFlow =
+    pathname === "/browse" || pathname.startsWith("/category/");
 
   const goSearch = () => {
     const s = q.trim();
@@ -276,7 +278,7 @@ export function PublicLayout() {
   };
 
   return (
-    <div className="min-h-full flex flex-col pb-20 md:pb-0">
+    <div className="min-h-full flex flex-col">
       <header className="sticky top-0 z-40 bg-[#08070c] backdrop-blur-md md:border-b md:border-ark-line md:bg-ark-nav/98">
         <div className="flex h-[64px] items-center justify-between bg-[#08070c] px-[20px] py-[12px] md:hidden">
           <Link
@@ -528,23 +530,33 @@ export function PublicLayout() {
         ) : null}
       </header>
 
-      <main className="mx-auto w-full max-w-[1280px] flex-1 px-4 py-6 min-[440px]:px-5 sm:px-6 md:px-9 md:py-10 xl:px-0">
+      <main
+        className={`mx-auto w-full max-w-[1280px] px-4 pt-6 min-[440px]:px-5 sm:px-6 md:px-9 md:pt-10 xl:px-0 ${
+          footerInContentFlow ? "pb-0" : "flex-1 pb-6 md:pb-10"
+        }`}
+      >
         <Outlet />
       </main>
 
-      <footer className="mt-auto border-t border-ark-line bg-ark-nav/90 mb-20 md:mb-0">
-        <div className="mx-auto flex max-w-[1280px] flex-wrap gap-x-6 gap-y-2 px-4 py-6 text-sm text-neutral-400 min-[440px]:px-5 sm:px-6 md:px-9 xl:px-0">
+      <footer
+        className={`bg-transparent md:border-t md:border-ark-line md:bg-ark-nav/90 ${
+          footerInContentFlow ? "mt-3" : "mt-auto"
+        }`}
+      >
+        <div className="mx-auto flex h-[52px] max-w-[358px] items-center justify-center px-4 py-4 text-[13px] leading-5 md:h-auto md:max-w-[1280px] md:justify-start md:px-9 md:py-6 md:text-sm xl:px-0">
           <Link
             to="/about"
-            className="rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+            className={`rounded-sm outline-none hover:text-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg ${
+              na("about") ? "text-ark-gold" : "text-[#A8A9AE]"
+            }`}
           >
             {t("footerAbout")}
           </Link>
         </div>
       </footer>
 
-      <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 border-t border-ark-line bg-ark-nav/95 backdrop-blur">
-        <div className="grid grid-cols-4 gap-1 px-1 py-2 text-center text-[11px]">
+      <nav className="sticky inset-x-0 bottom-0 z-40 bg-[#0C0D0F]/90 backdrop-blur md:hidden">
+        <div className="grid h-[78px] grid-cols-4 gap-3 px-5 py-4 text-center text-[13px] leading-[18px]">
           <BottomNavIcon
             to="/"
             label={t("home")}
@@ -560,13 +572,10 @@ export function PublicLayout() {
             }
           />
           <BottomNavIcon
-            to="/browse?sort=recommended"
-            label={t("official")}
-            icon="heart"
-            active={
-              pathname === "/browse" &&
-              new URLSearchParams(search).get("sort") === "recommended"
-            }
+            to="/favorites"
+            label={t("favorites")}
+            icon="bookmark"
+            active={pathname === "/favorites"}
           />
           <BottomNavIcon
             to="/browse?sort=latest"
@@ -593,7 +602,7 @@ function BottomNavIcon({
 }: {
   to: string;
   label: string;
-  icon: "home" | "document" | "heart" | "update";
+  icon: "home" | "document" | "bookmark" | "update";
   active: boolean;
 }) {
   const src = active
@@ -603,19 +612,16 @@ function BottomNavIcon({
     <Link
       to={to}
       className={[
-        "flex flex-col items-center gap-1 rounded-lg py-1 outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
-        active ? "text-ark-gold" : "text-neutral-400",
+        "flex min-w-0 flex-col items-center gap-1 rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
+        active ? "text-ark-gold" : "text-[#908F92]",
       ].join(" ")}
     >
       <img
         src={src}
         alt=""
-        className={[
-          "mx-auto h-7 w-7 object-contain",
-          active ? "opacity-100" : "opacity-55",
-        ].join(" ")}
-        width={28}
-        height={28}
+        className="mx-auto h-6 w-6 object-contain"
+        width={24}
+        height={24}
         loading="lazy"
         decoding="async"
       />