terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply figma responsive home design
All checks were successful
Deploy to Frontend Servers / deploy (push) Successful in 49s
Details

Browse Source
This commit is contained in:
TerryM
2026-05-17 19:38:43 +08:00
parent 5b67279734
commit 2c76039c44
13 changed files with 69 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/FigmaBanner.tsx
View File

@@ -1,16 +1,16 @@
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`,
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="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">
<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`}