Arkie-Library-Frontend/src/components/FigmaBanner.tsx

const FIGMA_ASSET_BASE = "/assets/ark-library/figma";

export const officialRecommendationCoverFallbacks = [
  `${FIGMA_ASSET_BASE}/official-recommendation-1.png`,
  `${FIGMA_ASSET_BASE}/official-recommendation-2.png`,
  `${FIGMA_ASSET_BASE}/official-recommendation-3.png`,
  `${FIGMA_ASSET_BASE}/official-recommendation-4.png`,
  `${FIGMA_ASSET_BASE}/official-recommendation-5.png`,
] as const;

export function FigmaBanner() {
  return (
    <picture className="-mx-4 block overflow-hidden border border-[#2a2a32] bg-black shadow-[0_24px_70px_rgba(0,0,0,0.18)] min-[440px]:-mx-5 sm:-mx-6 md:mx-0 md:rounded-xl">
      <source
        media="(max-width: 439px)"
        srcSet={`${FIGMA_ASSET_BASE}/banner-375.png`}
      />
      <source
        media="(max-width: 575px)"
        srcSet={`${FIGMA_ASSET_BASE}/banner-440.png`}
      />
      <source
        media="(max-width: 767px)"
        srcSet={`${FIGMA_ASSET_BASE}/banner-576.png`}
      />
      <img
        src={`${FIGMA_ASSET_BASE}/banner-desktop.png`}
        alt=""
        className="h-auto w-full object-cover"
        width={1280}
        height={290}
        loading="eager"
        decoding="async"
      />
    </picture>
  );
}