feat(home): align desktop cards with Figma actions

- Update desktop header actions to match Figma: remove the standalone desktop favorites button and style the wallet connect pill with the wallet icon while allowing localized labels to expand.
- Replace favorite action with the Figma bookmark SVG and hover state; replace download cloud with the provided Figma SVG.
- Align official recommendation cards with the Figma card structure, colors, and bottom action row.
- Rework popular rows to the Figma desktop rhythm with 90px rows, wide thumbnails, rank area, and right-side action buttons.
- Add a dedicated desktop LatestUpdateCard for Figma-style latest-update masonry cards with flexible text-driven heights instead of fixed card heights.
This commit is contained in:
TerryM
2026-06-03 08:18:05 +08:00
parent 4f0d8925a4
commit be638e32c9
8 changed files with 464 additions and 65 deletions

View File

@@ -645,19 +645,6 @@ export function PublicLayout() {
</nav>
<div className="flex min-w-0 flex-1 items-center justify-end gap-2 min-[1000px]:flex-none">
<Link
to={lp("/favorites")}
aria-label={t("favorites")}
title={t("favorites")}
aria-current={na("favorites") ? "page" : undefined}
className={`hidden h-10 w-10 shrink-0 items-center justify-center rounded-full border bg-[#1a1b20] outline-none transition hover:border-ark-gold/50 hover:text-ark-gold focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg md:inline-flex ${
na("favorites")
? "border-ark-gold/70 text-ark-gold"
: "border-ark-line text-neutral-200"
}`}
>
<Heart size={18} strokeWidth={2} />
</Link>
<div ref={desktopSearchRef} className="hidden md:block">
<button
type="button"