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

@@ -1,4 +1,4 @@
import { Heart } from "lucide-react";
import { Heart, Wallet } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { Link } from "react-router-dom";
import { useI18n } from "../i18n";
@@ -107,11 +107,14 @@ export function WalletButton({
wallet.openLoginModal();
}}
className={[
"inline-flex h-10 items-center justify-center rounded-full border border-ark-gold/50 bg-ark-gold px-4 text-sm font-bold text-black outline-none transition hover:bg-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
compact ? "w-full" : "",
"inline-flex h-10 items-center justify-center gap-2 rounded-full border border-ark-gold bg-ark-gold px-4 text-sm font-bold text-black outline-none transition hover:bg-ark-gold2 focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg",
compact ? "w-full" : "min-w-[124px] shrink-0 whitespace-nowrap",
].join(" ")}
>
{wallet.status === "loading" ? t("loading") : t("walletConnect")}
<Wallet className="h-4 w-4" strokeWidth={2.5} aria-hidden />
<span>
{wallet.status === "loading" ? t("loading") : t("walletConnect")}
</span>
</button>
);
}