feat(tasarim): her CTA benzeri yüzeyin arkasında masonry piksel zemin (PikselZemin)

Bilal'in isteği (24 Eyl 2026): piksel arka planı her CTA benzeri kısmın
arkasında, büyüklü küçüklü masonry. Tek kaynak PikselZemin (açık kartta
silik mavi, koyu/mavi yüzeyde beyaz); CtaBandi ve PikselCtaYuzeyi de
onu kullanır. Eklenen yüzeyler: /sonuc "listen hazır" kartı, /listem
dört üretim kartı + boş durum + kilit kartı, tadımlık kartı, sıralama-yok
sayfası, meraklısına kapanış kartı, ana sayfa ve /paket ana paket kartı,
kaydet bandı, katalog üstü kompakt satır, arama penceresi kartı.
Kapsam dışı (form, durum kartı, modal düğmesi, 404) DESIGN.md §10.8'de.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-24 12:16:54 +03:00
parent cf992deac8
commit 09c6868089
16 changed files with 98 additions and 33 deletions

View File

@@ -0,0 +1,38 @@
"use client";
import { PixelMasonry } from "@/components/pixel-decor";
import { cn } from "@/lib/utils";
/**
* CTA yüzeylerinin piksel zemini (DESIGN.md §10.8) — tek kaynak. Bilal'in
* kararı (24 Eyl 2026): "piksel arka planları her CTA benzeri kısmın
* arkasında olmalı, masonry gibi büyüklü küçüklü." Kap `relative isolate
* overflow-hidden` olmalı; zemin ilk çocuk olarak konur.
*
* - `acik`: beyaz/açık kart — silik mavi kareler.
* - `koyu`: mavi bant ya da koyu kart — beyaz kareler.
*/
export function PikselZemin({
seed = 7,
ton = "acik",
className,
}: {
/** Aynı ekrandaki iki yüzey farklı desen alsın */
seed?: number;
ton?: "acik" | "koyu";
/** Dikey taşma payı vb. (varsayılan `-inset-y-6`) */
className?: string;
}) {
return (
<div
aria-hidden
className={cn(
"pointer-events-none absolute inset-x-0 -inset-y-6 -z-10",
ton === "acik" ? "text-primary/70" : "text-white",
className,
)}
>
<PixelMasonry seed={seed} />
</div>
);
}