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

@@ -2,7 +2,7 @@
import { useState, type ReactNode } from "react";
import { cn } from "@/lib/utils";
import { PixelMasonry } from "@/components/pixel-decor";
import { PikselZemin } from "@/components/piksel-zemin";
import { PikselListe, PikselListeAciklama } from "@/components/piksel-liste";
/**
@@ -39,12 +39,7 @@ export function PikselCtaYuzeyi({
className,
)}
>
<div
aria-hidden
className="pointer-events-none absolute inset-x-0 -inset-y-10 -z-10 text-white"
>
<PixelMasonry seed={seed} />
</div>
<PikselZemin seed={seed} ton="koyu" className="-inset-y-10" />
<div className="grid items-center gap-8 px-5 py-10 sm:px-10 sm:py-12 lg:grid-cols-[minmax(0,1fr)_16rem] lg:gap-12">
<div className="flex min-w-0 flex-col items-center text-center lg:items-start lg:text-left">
{children}