Initial frontend import

src/components/FigmaBanner.tsx

@@ -0,0 +1,37 @@
+const FIGMA_ASSET_BASE = "/assets/ark-library/figma";
+
+export const recommendationCoverFallbacks = [
+  `${FIGMA_ASSET_BASE}/recommendation-1.png`,
+  `${FIGMA_ASSET_BASE}/recommendation-2.png`,
+  `${FIGMA_ASSET_BASE}/recommendation-3.png`,
+  `${FIGMA_ASSET_BASE}/recommendation-4.png`,
+  `${FIGMA_ASSET_BASE}/recommendation-5.png`,
+] as const;
+
+export function FigmaBanner() {
+  return (
+    <picture className="block overflow-hidden border border-[#2a2a32] bg-black shadow-[0_24px_70px_rgba(0,0,0,0.18)] max-md:-mx-4 max-md:rounded-none max-md:border-x-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>
+  );
+}