fix(tasarim): piksel zemin yalnız CTA yüzeylerinde, kabın ölçüsüne göre, küçük kare yok
Bilal (24 Eyl 2026): ana sayfa CTA'sında doku hiç görünmüyordu, bazı kartlarda çok azdı; sonra "çok fazla piksel, küçük olanlar hiç olmasın" ve "/sonuc'taki kartın arkasına da piksel koymuşsun; pikseller CTA'larda olacak sadece". - Kök neden: PixelMasonry sabit 420×120 çizimi kaplayacak şekilde ölçekleniyordu; yüksek kartlarda görünen kısım boş banda düşüyordu. Artık kabın gerçek ölçüsüne göre üretiliyor (ResizeObserver), yalnız kenar çerçevesinde, orta boş; `haric` verilen öğenin (24'lük piksel tablosu) çevresi her genişlikte boş. Sunucuda boş, ölçülünce belirir. - Küçük (tek hücre) kare yok: 4×4 makro hücrede 2–4 hücrelik kareler, iri olan seyrek ve silik. Ölçüm: kapanış kartı 1280 px'te 58 kare (tabloya binen 0), 375 px'te 27 kare. - Beyaz içerik kartlarından zemin geri alındı (tadımlık, /listem üretim ve kilit kartları, boş durum, sıralama-yok, meraklısına, paket kartları, kaydet bandı, katalog üstü kompakt satır, /sonuc "listen hazır"). Kalanlar: CtaBandi, PikselCtaYuzeyi, arama penceresi kartı. PikselZemin'in açık tonu kaldırıldı. DESIGN.md §10.8 güncellendi. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
@@ -23,7 +23,6 @@ import { authClient } from "@/lib/auth-client";
|
||||
import { olay, siraKovasi } from "@/lib/analitik";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { CtaBandi } from "@/components/cta-bandi";
|
||||
import { PikselZemin } from "@/components/piksel-zemin";
|
||||
import { onbellekliJsonGetir } from "@/lib/istek-cache";
|
||||
import { useTercihProfili } from "@/features/liste/hooks/use-tercih-profili";
|
||||
import type { SihirbazFacetleri } from "@/types/yokatlas";
|
||||
@@ -374,11 +373,10 @@ export function CtaSiraForm({
|
||||
<section
|
||||
aria-labelledby={baslikId}
|
||||
className={cn(
|
||||
"relative isolate overflow-hidden rounded-2xl border p-4 transition-colors duration-200 sm:p-5",
|
||||
"rounded-2xl border p-4 transition-colors duration-200 sm:p-5",
|
||||
profil ? "border-primary/20 bg-primary/5" : "border-slate-200 bg-white",
|
||||
)}
|
||||
>
|
||||
<PikselZemin seed={53} />
|
||||
<div className="grid">
|
||||
<div
|
||||
ref={profil ? undefined : formRef}
|
||||
|
||||
@@ -8,7 +8,6 @@ import { animate } from "motion/mini";
|
||||
import { useReducedMotion } from "motion/react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { CtaBandi } from "@/components/cta-bandi";
|
||||
import { PikselZemin } from "@/components/piksel-zemin";
|
||||
import { useGorunumOlayi } from "@/components/use-gorunum-olayi";
|
||||
import { olay, olayBirKez, siraKovasi } from "@/lib/analitik";
|
||||
import type { SihirbazFacetleri } from "@/types/yokatlas";
|
||||
@@ -263,8 +262,7 @@ export function SihirbazBolumu({
|
||||
edilmez; panel yalnızca funnel CTA'larını gösterir, üretim ve
|
||||
listenin kendisi /listem'de yaşar. */}
|
||||
{raporVar ? (
|
||||
<section className="relative isolate mt-16 overflow-hidden rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<PikselZemin seed={21} />
|
||||
<section className="mt-16 rounded-2xl border border-slate-200 bg-white p-8 text-center sm:p-12">
|
||||
<h2 className="font-heading text-2xl font-bold sm:text-3xl">
|
||||
24 tercihlik listen hazır
|
||||
</h2>
|
||||
|
||||
@@ -4,7 +4,6 @@
|
||||
// sayfayı tazele (URL değişmez); yoksa kapıyı aç. Sıra bilgisi localStorage'daki
|
||||
// TercihProfili ile tüm uygulamada ortak, sunucu tablosu çerezden okur.
|
||||
|
||||
import { PikselZemin } from "@/components/piksel-zemin";
|
||||
import { useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
@@ -43,8 +42,7 @@ export function SiraGerekli() {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="relative isolate mx-auto flex max-w-2xl flex-col items-center overflow-hidden px-4 py-24 text-center">
|
||||
<PikselZemin seed={37} />
|
||||
<main className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
|
||||
<h1 className="font-heading text-3xl font-bold text-balance text-slate-900 sm:text-4xl">
|
||||
Önce sıralamanı gir
|
||||
</h1>
|
||||
|
||||
Reference in New Issue
Block a user