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:
38
src/components/piksel-zemin.tsx
Normal file
38
src/components/piksel-zemin.tsx
Normal 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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user