@@ -5853,43 +5853,130 @@ function DopamineRewardLoop({ compact = false, style }: Props) {
58535853 );
58545854}
58555855
5856+ function PopArtFlower({ petal, center, className }: { petal: string; center: string; className?: string }) {
5857+ // A Warhol-Flowers style silkscreen bloom — the repeated object of the serial
5858+ // wall, drawn once and recoloured per edition tile.
5859+ return (
5860+ <svg aria-hidden="true" className={className} viewBox="0 0 64 64">
5861+ <g fill={petal}>
5862+ <circle cx="24" cy="24" r="13" />
5863+ <circle cx="40" cy="24" r="13" />
5864+ <circle cx="24" cy="40" r="13" />
5865+ <circle cx="40" cy="40" r="13" />
5866+ </g>
5867+ <circle cx="32" cy="32" fill={center} r="7" />
5868+ </svg>
5869+ );
5870+ }
5871+
58565872function PopArtObjectArchive({ compact = false, style }: Props) {
5857- const halftone = "radial-gradient(circle, var(--sample-text) 0 12%, transparent 13%)";
5858- const editions = [style.palette.accent, style.palette.accent2, style.palette.accent3, style.palette.surface] as const;
5873+ // "Serial pop wall": a Warhol / Haring / Guggenheim-Pop museum edition shop.
5874+ // A silkscreen wall repeats one flower object across a colour-permuted edition
5875+ // grid (with one Ben-Day halftone tile) above a museum-shop edition rail and a
5876+ // halftone caption rail. The gallery-wall skeleton keeps it distinct from its
5877+ // cute/casual neighbours kawaii (product collection grid), kitsch (novelty
5878+ // storefront) and comic-book-style (paneled cover shelf).
5879+ const ink = "#17151a";
5880+ const halftone = `radial-gradient(circle, ${ink} 0 30%, transparent 34%)`;
5881+ const flowers: Array<{ petal: string; center: string; bg: string }> = [
5882+ { petal: "var(--sample-primary)", center: "var(--sample-accent-3)", bg: "var(--sample-accent)" },
5883+ { petal: "var(--sample-accent-3)", center: "var(--sample-primary)", bg: "var(--sample-accent-2)" },
5884+ { petal: "var(--sample-accent)", center: "var(--sample-primary)", bg: "var(--sample-accent-3)" },
5885+ { petal: "var(--sample-accent-2)", center: "var(--sample-accent-3)", bg: "var(--sample-primary)" },
5886+ { petal: "var(--sample-base)", center: "var(--sample-primary)", bg: "var(--sample-text)" },
5887+ { petal: "var(--sample-primary)", center: "var(--sample-accent)", bg: "var(--sample-base)" },
5888+ { petal: "var(--sample-accent-3)", center: "var(--sample-accent-2)", bg: "var(--sample-accent)" },
5889+ ];
5890+ const editionsRail: Array<[string, string, string]> = [
5891+ ["flowers serigraph", "ed. 250", "$95"],
5892+ ["ben-day tote", "shop", "$38"],
5893+ ["soup can mug", "shop", "$24"],
5894+ ["pop pin set", "ed. 500", "$12"],
5895+ ];
58595896
58605897 return (
58615898 <SampleFrame compact={compact} style={style}>
5862- <div className="grid h-full grid-rows-[auto_1fr_auto] gap-3">
5863- <SampleNav brand="Edition Wall" compact={compact} icons={[<IconSearch key="search" size={compact ? 11 : 13} />]} links={["Works", "Store", "Visit"]} sub="archive shop" />
5864- <div className={cn("grid min-h-0 gap-3", compact ? "grid-cols-[0.78fr_1.22fr]" : "grid-cols-[0.64fr_1.36fr]")}>
5865- <section className="border-[3px] border-[var(--sample-border)] bg-[var(--sample-accent)] p-4 text-[var(--sample-base)]">
5866- <p className="text-[10px] font-black uppercase tracking-[0.15em]">POP OBJECT ARCHIVE</p>
5867- <h3 className={cn("mt-3 font-display font-black uppercase leading-[0.78]", compact ? "text-3xl" : "text-6xl")} style={{ fontFamily: "var(--st-font-display)", letterSpacing: "0em" }}>
5868- SERIAL POP WALL
5869- </h3>
5870- <p className="mt-4 border-t-[3px] border-[var(--sample-border)] pt-3 text-[9px] font-black uppercase tracking-[0.12em]">museum shop wall</p>
5871- </section>
5872- <section className="grid min-h-0 grid-cols-[1fr_0.72fr] gap-3">
5873- <div className="grid grid-cols-2 gap-2">
5874- {editions.map((color, index) => (
5875- <div className="relative border-[3px] border-[var(--sample-border)] p-3" key={`${color}-${index}`} style={{ backgroundColor: color }}>
5876- <span className="absolute inset-3 rounded-full border-[3px] border-[var(--sample-border)] bg-[rgb(var(--st-surface-rgb)_/_0.72)]" />
5877- <span className="absolute bottom-3 right-3 h-8 w-8 rounded-full bg-[var(--sample-accent-3)]" style={{ backgroundImage: halftone, backgroundSize: "8px 8px" }} />
5878- <span className="relative z-10 text-[9px] font-black uppercase tracking-[0.12em]">repeated object</span>
5879- <span className="relative z-10 mt-14 block text-[8px] font-black uppercase tracking-[0.1em]">object edition grid</span>
5899+ <div
5900+ className={cn("absolute inset-0 min-w-0 overflow-hidden text-[var(--sample-text)]", compact ? "p-3" : "p-4 sm:p-5")}
5901+ style={{
5902+ "--sample-accent": "#19b6d8",
5903+ "--sample-accent-2": "#2f4fd6",
5904+ "--sample-accent-3": "#ffcf1a",
5905+ "--sample-base": "#f6efe0",
5906+ "--sample-border": "#17151a",
5907+ "--sample-border-soft": "rgba(23,21,26,0.14)",
5908+ "--sample-muted": "#8f8a86",
5909+ "--sample-primary": "#ff2d87",
5910+ "--sample-surface": "#ffffff",
5911+ "--sample-text": "#17151a",
5912+ "--st-base-rgb": "246 239 224",
5913+ "--st-surface-rgb": "255 255 255",
5914+ "--st-text-rgb": "23 21 26",
5915+ "--st-primary-rgb": "255 45 135",
5916+ "--st-accent-rgb": "25 182 216",
5917+ "--st-accent-2-rgb": "47 79 214",
5918+ "--st-accent-3-rgb": "255 207 26",
5919+ "--st-border-rgb": "23 21 26",
5920+ background: "linear-gradient(180deg, #f8f2e6, #f4ecdd)",
5921+ } as SampleVariables}
5922+ >
5923+ <div className="relative grid h-full min-h-0 min-w-0 grid-rows-[auto_1fr_auto_auto] gap-2.5">
5924+ {/* ── gallery masthead ── */}
5925+ <header className="flex items-center gap-2">
5926+ <div className="min-w-0 leading-none">
5927+ <span className="block text-[11px] font-black uppercase tracking-[0.04em] text-[var(--sample-text)]" style={{ fontFamily: "var(--st-font-display)" }}>Edition Wall</span>
5928+ <span className="block text-[6.5px] font-black uppercase tracking-[0.2em] text-[var(--sample-primary)]">POP OBJECT ARCHIVE</span>
5929+ </div>
5930+ <span className="ml-auto flex items-center gap-2 text-[7px] font-black uppercase tracking-[0.12em] text-[var(--sample-muted)]">
5931+ <span>museum shop wall</span>
5932+ <IconSearch size={compact ? 11 : 12} />
5933+ </span>
5934+ </header>
5935+
5936+ {/* ── serial pop wall / object edition grid ── */}
5937+ <section aria-label="object edition grid" className="relative min-h-0 overflow-hidden rounded-[6px] ring-2 ring-[var(--sample-border)]">
5938+ <div className="grid h-full grid-cols-4 grid-rows-2 gap-[2px] bg-[var(--sample-border)]">
5939+ {flowers.map(({ petal, center, bg }, index) => (
5940+ <div aria-label="repeated object" className="relative grid place-items-center overflow-hidden" key={index} style={{ backgroundColor: bg }}>
5941+ <PopArtFlower center={center} className="h-[76%] w-[76%]" petal={petal} />
58805942 </div>
58815943 ))}
5944+ <div aria-label="halftone block" className="grid place-items-center bg-[var(--sample-accent-3)]" style={{ backgroundImage: halftone, backgroundSize: compact ? "9px 9px" : "12px 12px" }}>
5945+ <span className="rounded-full bg-[var(--sample-text)] px-1.5 py-0.5 text-[6px] font-black uppercase tracking-[0.1em] text-[var(--sample-base)]">ben-day</span>
5946+ </div>
58825947 </div>
5883- <div className="grid min-h-0 grid-rows-[1fr_auto] gap-2 border-[3px] border-[var(--sample-border)] bg-[var(--sample-surface)] p-3">
5884- <div className="min-h-0 bg-[var(--sample-accent-3)]" style={{ backgroundImage: halftone, backgroundSize: compact ? "10px 10px" : "14px 14px" }} />
5885- <span className="mt-2 block text-[9px] font-black uppercase tracking-[0.12em]">halftone block</span>
5948+ <div className="absolute left-2 top-2 max-w-[70%] bg-[var(--sample-text)] px-2 py-1">
5949+ <p className="text-[6px] font-black uppercase tracking-[0.16em] text-[var(--sample-accent-3)]">serial silkscreen · 1 of 7</p>
5950+ <h3 aria-label="SERIAL POP WALL" className="font-black uppercase leading-[0.82] text-[var(--sample-base)]" style={{ fontFamily: "var(--st-font-display)", fontSize: compact ? "17px" : "24px" }}>
5951+ SERIAL
5952+ <br />
5953+ POP WALL
5954+ </h3>
58865955 </div>
58875956 </section>
5888- </div>
5889- <div className="grid grid-cols-3 border-[3px] border-[var(--sample-border)] text-[9px] font-black uppercase tracking-[0.12em]">
5890- {["halftone caption rail", "museum shop wall", "object edition grid"].map((label) => (
5891- <span className="border-r-[3px] border-[var(--sample-border)] px-3 py-2 last:border-r-0" key={label}>{label}</span>
5892- ))}
5957+
5958+ {/* ── museum shop edition rail ── */}
5959+ <div className={cn("grid grid-cols-4 gap-2", compact && "hidden")}>
5960+ {editionsRail.map(([name, meta, price], index) => (
5961+ <div className="flex items-center gap-1.5 rounded-[10px] bg-white px-1.5 py-1 ring-1 ring-[var(--sample-border-soft)]" key={name}>
5962+ <span className="h-5 w-5 shrink-0 rounded-[6px] ring-1 ring-[var(--sample-border)]" style={{ backgroundColor: [flowers[0].bg, flowers[2].bg, flowers[3].bg, flowers[1].bg][index], backgroundImage: index === 1 ? halftone : undefined, backgroundSize: "6px 6px" }} />
5963+ <span className="min-w-0">
5964+ <span className="block truncate text-[7.5px] font-black lowercase text-[var(--sample-text)]">{name}</span>
5965+ <span className="flex items-center gap-1">
5966+ <span className="text-[6px] font-black uppercase tracking-[0.08em] text-[var(--sample-muted)]">{meta}</span>
5967+ <span className="text-[7px] font-black text-[var(--sample-primary)]">{price}</span>
5968+ </span>
5969+ </span>
5970+ </div>
5971+ ))}
5972+ </div>
5973+
5974+ {/* ── halftone caption rail ── */}
5975+ <div aria-label="halftone caption rail" className="flex items-center gap-2 overflow-hidden rounded-full bg-[var(--sample-text)] px-3 py-1.5">
5976+ <span aria-hidden="true" className="h-3 w-8 shrink-0 rounded-full" style={{ backgroundImage: `radial-gradient(circle, var(--sample-accent-3) 0 34%, transparent 38%)`, backgroundSize: "5px 5px" }} />
5977+ <span className="truncate text-[7px] font-black uppercase tracking-[0.12em] text-[var(--sample-base)]">object edition grid · hand-pulled screenprint · museum shop wall</span>
5978+ <span className="ml-auto shrink-0 rounded-full bg-[var(--sample-primary)] px-2.5 py-1 text-[7.5px] font-black uppercase text-white">shop editions</span>
5979+ </div>
58935980 </div>
58945981 </div>
58955982 </SampleFrame>
0 commit comments