feat: apply figma browse mobile redesign

src/pages/Browse/index.tsx

@@ -8,7 +8,7 @@ export function Browse() {
   const q = sp.get("q") || "";
   return (
     <section className="space-y-3">
-      <h1 className="mx-auto max-w-full px-3 text-2xl font-bold md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
+      <h1 className="mx-auto max-w-full px-4 text-2xl font-bold md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
         {q ? `${t("search")}: ${q}` : t("all")}
       </h1>
       <MessageStream scope={{ kind: "all" }} />

src/pages/Favorites/index.tsx

@@ -0,0 +1,38 @@
+import { Heart } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useI18n } from "../../i18n";
+
+export default function Favorites() {
+  const { t } = useI18n();
+
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-5 px-4 py-12 text-center">
+      <div className="flex h-20 w-20 items-center justify-center rounded-full border border-ark-gold/30 bg-ark-gold/5">
+        <Heart
+          className="h-10 w-10 text-ark-gold/70"
+          strokeWidth={1.8}
+          aria-hidden
+        />
+      </div>
+
+      <h1 className="text-2xl font-semibold text-neutral-100 md:text-3xl">
+        {t("favorites")}
+      </h1>
+
+      <p className="text-base font-medium text-ark-gold2 md:text-lg">
+        {t("favoritesComingSoon")}
+      </p>
+
+      <p className="max-w-md text-sm leading-relaxed text-neutral-400 md:text-base">
+        {t("favoritesComingSoonDesc")}
+      </p>
+
+      <Link
+        to="/"
+        className="mt-4 inline-flex h-11 items-center justify-center rounded-full border border-ark-gold/60 bg-ark-gold/10 px-6 text-sm font-medium text-ark-gold transition hover:bg-ark-gold/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+      >
+        {t("backToHome")}
+      </Link>
+    </div>
+  );
+}