feat: apply figma browse mobile redesign

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>
+  );
+}