Template System v2

Plan v11 - Maker UI İyileştirmeleri

Onay Bekliyor

KRİTİK VURGULAR

MEGA MENU ZORUNLU
Her tasarımda mega menu olacak. İnsanları şımartıyor, profesyonellik hissi veriyor. Dropdown'lar zengin içerikli, görsel destekli olmalı.
DARK/LIGHT KUSURSUZ
Dark mode kusursuz çalışmalı. Hiçbir element açık/koyu karışık olmamalı. FOUC yok, geçişler smooth, localStorage persist.

Kesinleşen Kararlar

Genel
  • VIP hizmet, token önemli değil
  • AI tüm seçenekleri görür
  • Tasarım sayısı: 1-2-3
  • Premium Section zorunlu
Girdiler
  • Sektör = text input
  • Ek bilgi = textarea (1000+)
  • Tarz = kart seçimi
  • AI brief'e göre karar verir
Zorunlu
  • Mega Menu
  • Dark/Light mode
  • Design consistency
  • FontAwesome Pro 7

Mega Menu Detayları

Full-Width Stiller
  • • Grid with images
  • • Featured + links
  • • Icon grid
  • • Tabbed navigation
  • • Card showcase
Sidebar Stiller
  • • Slide from left
  • • Accordion sidebar
  • • Icon sidebar
  • • Multi-level
  • • Dashboard style
Overlay Stiller
  • • Full-screen overlay
  • • Centered modal
  • • Split overlay
  • • Animated reveal
  • • Search-focused
Mega menu linkler ortalanmış olmalı (position absolute, left 50%, translateX -50%)

Dark/Light Mode Kuralları (Kusursuz)

🌙 Dark Mode Renkleri
Background:
slate-900, slate-950
Text:
white, slate-100
Secondary:
slate-400
Border:
slate-700, slate-800
Card BG:
slate-800, slate-900
☀️ Light Mode Renkleri
Background:
white, gray-50
Text:
gray-900, slate-900
Secondary:
gray-600
Border:
gray-200, slate-200
Card BG:
white, gray-50
FOUC Önleme: <head> içinde inline script ile tema kontrolü
State Yönetimi: Alpine.js x-data + localStorage persist
Toggle Butonu: Header'da görünür, smooth transition
❌ YASAK: Dark modda açık BG, light modda koyu BG karışımı

Tenant Analizi - Eksik Section'lar

Mevcut tenant sitelerinde olmayan ama olması gereken section'lar:

Testimonials
Müşteri yorumları - HİÇBİRİNDE YOK
Team
Ekip tanıtımı - TR'de kullanılmıyor, EKLENMİYOR
Gallery/Portfolio
Görsel galeri - HİÇBİRİNDE YOK
FAQ
Sık sorulan sorular - HİÇBİRİNDE YOK
Partners/Clients
Logo carousel - HİÇBİRİNDE YOK
Pricing
Fiyat tablosu - HİÇBİRİNDE YOK
Awards/Certs
Ödüller/sertifikalar - HİÇBİRİNDE YOK
Newsletter
Bülten kayıt - TR'de kullanılmıyor, EKLENMİYOR
Video Section
Video tanıtım - HİÇBİRİNDE YOK
Map Section
Harita bölümü - Contact içinde olabilir
Process/Timeline
Süreç adımları - Sadece 1 temada
Features Grid
Özellik kutuları - Services ile karışıyor

JSON Dosyaları (Güncellenmiş)

Dosya Adet Açıklama
styles.json20+Tarz kuralları
gradients.json60+Renk paletleri
fonts.json75+Font çiftleri
premium-sections.json50+Animasyonlu özel alanlar
heroes.json200+Hero layoutları
about.json150+Hakkımızda
services.json150+Hizmetler
products.json150+Ürün section'ları
product-cards.json100+Shop kartları (fiyatsız)
product-detail.json75+Ürün detay sayfaları
testimonials.json100+Müşteri yorumları (YENİ)
gallery.json100+Galeri/Portfolio (YENİ)
faq.json50+Sık sorulan sorular (YENİ)
partners.json50+Logo carousel (YENİ)
pricing.json75+Fiyat tabloları (YENİ)
video.json50+Video section (YENİ)
process.json75+Süreç/Timeline (YENİ)
contact.json150+İletişim
cta.json100+CTA banner
headers.json150+Header/Navigation
mega-menus.json50+Mega menu stilleri (DETAYLI)
footers.json150+Footer
hover-effects.json40+Hover efektleri
backgrounds.json50+Animated BG
dark-light.jsonKurallarDark/Light mode (DETAYLI)
TOPLAM 2400+ seçenek (24 JSON)

Dosya Yapısı 

public/design/data/
├── // Temel
├── styles.json
├── gradients.json
├── fonts.json
├── dark-light.json
│
├── // Premium (Animasyonlu)
├── premium-sections.json
├── mega-menus.json
│
├── // Layoutlar
├── heroes.json
├── headers.json
├── footers.json
│
├── // İçerik Section'ları
├── about.json
├── services.json
├── products.json
├── product-cards.json
├── product-detail.json
├── testimonials.json
├── gallery.json
├── faq.json
├── partners.json
├── pricing.json
├── video.json
├── process.json
├── contact.json
├── cta.json
│
├── // Efektler
├── hover-effects.json
└── backgrounds.json

UI Görünümü

TARZ SEÇİMİ
Mevcut /design/sectors/ kartları

UI İyileştirmeleri (25 Ocak 2026)

Maker Sayfası (/templates/maker/)
  • Tarz kartları h-64 yüksekliğinde (daha büyük)
  • Expand butonu sol üstte (seçim ile çakışmaz)
  • Modal önizleme 3/5 görsel + 2/5 detay
  • Modal içinde orantılı font boyutları
  • Heroes, Headers, Footers'a expand butonu
  • Tercihler bölümüne "Üzerine Yazma" açıklaması
Önizleme Detayları
  • Her tarz için gerçek site minyatürü
  • CSS ipuçları panel (sağ taraf)
  • Kaçınılacaklar listesi (kırmızı)
  • Uygun sektörler listesi (mor)
  • Stok fotoğraf API entegrasyonu (Pexels)
  • Hero önizlemelerine gerçek görsel
Stok API: PEXELS_API_KEY, UNSPLASH_ACCESS_KEY, PIXABAY_API_KEY (.env'de mevcut)
Son Düzeltmeler (25 Ocak 2026)
  • Tüm önizleme bölümleri lg:grid-cols-3
  • Header kartları h-32, Hero h-48, Footer h-32
  • Sidebar navigation - dashboard görünümü
  • Overlay navigation - fullscreen menu
  • Footer önizleme fontları büyütüldü (text-[7-9px])
  • Centered header - logo ortada, menüler yanlarda
  • 10 header tipi için modal önizleme
  • 10 footer tipi için modal önizleme
  • Gerçek header/footer tasarımları (wireframe değil)
  • "Tasarım Tercihleri" bölümü sadeleştirildi
Opsiyonel Ayarlar Kuralı

Tüm tasarım tercihleri (header, hero, footer, renkler vb.) opsiyoneldir.

  • Kullanıcı seçim yaparsa → AI o seçime uygun tasarım üretir
  • Kullanıcı seçim yapmazsa → AI sektör ve brief'e göre en uygun olanı seçer
  • UI'da "(Üzerine Yazma)" gibi korkutucu etiketler YOK
  • Sadece zorunlu alan: Sektör bilgisi
Genişletme Modalı Kuralı (25 Ocak 2026)

Her seçenek kartında genişletme butonu olmalıdır.

  • Tüm bölümlerde (tarz, font, header, hero, footer, tercihler) expand butonu
  • Buton sol üstte, hover'da görünür (opacity-0 → group-hover:opacity-100)
  • Modal: büyük önizleme (3/5) + detay paneli (2/5)
  • Font önizlemesi: AaBbCc, farklı ağırlıklar, alfabe, örnek paragraf
  • Tercih önizlemesi: köşe/gölge/boşluk/animasyon interaktif demo
  • @click.stop ile seçim tıklamasından ayrı çalışır

Önizleme Tutarlılığı Kuralları (25 Ocak 2026)

Her önizleme sadece ilgili bölümü gerçek gösterir, diğerleri placeholder (wireframe) olarak görünür. Bu sayede kullanıcı seçtiği bileşene odaklanabilir.

Header Önizlemesi
GERÇEK Header
Placeholder İçerik
Placeholder Footer
Hero Önizlemesi
Placeholder Header
GERÇEK Hero
Placeholder Footer
Footer Önizlemesi
Placeholder Header
Placeholder İçerik
GERÇEK Footer
Placeholder Yapısı
getPlaceholderHeader()
h-16 bar, logo + nav wireframe
getPlaceholderContent()
h-64 hero + h-48 cards wireframe
getPlaceholderFooter()
h-20 bar, logo + social wireframe
Bu pattern tüm section önizlemelerine uygulanmalı: Header, Hero, Footer, About, Services, vs.

Genel Tasarım Kuralları (Tüm Promptlarda Olacak)

Bu kurallar v2 ve v3 promptlarından çıkarılmış, HER tasarımda uygulanması zorunlu kurallardır.

ZORUNLU ÖZELLİKLER

Mega Menu
Her sitede zorunlu, profesyonellik hissi
Dark/Light
Kusursuz, FOUC yok, localStorage
FA Pro 7
Local dosya, CDN YASAK
WCAG AA
Minimum 4.5:1 kontrast

TİPOGRAFİ KURALLARI

✓ YAPILACAK
  • • Tek font çifti tüm sitede
  • • Hiyerarşi: H1 (5xl) > H2 (3xl) > H3 (xl) > Body
  • • Gradient text sadece başlıklarda
  • • Curated font listesinden seç
✗ YASAK
  • • Generic fontlar (Arial, Times, system-ui)
  • • Section bazlı font değişimi
  • • Body text'te gradient
  • • Aynı font çiftini farklı projelerde

RENK KURALLARI

✓ YAPILACAK
  • • Tek palet: PRIMARY, SECONDARY, ACCENT
  • • Tek gradient ailesi (ör: blue-purple)
  • • Dark: slate-900/950, text: white/slate-100
  • • Light: white/gray-50, text: gray-900
✗ YASAK
  • • Section bazlı renk şeması
  • • Açık üzerine açık text
  • • Koyu üzerine koyu text
  • • Proje ortasında yeni renk ekleme

LAYOUT KURALLARI

Container
max-w-7xl (1280px)
text-heavy: max-w-4xl
Padding
px-3 → sm:px-6 → lg:px-12 → 2xl:px-20
Section Spacing
py-16 → md:py-24 → lg:py-32
Tüm sectionlarda aynı

HOVER & ANİMASYON KURALLARI

✓ YAPILACAK
  • • İkon: far → fas weight değişimi
  • • Border animasyonu (gradient border)
  • • İç içerik animasyonu
  • • Transition: 0.3s ease
✗ YASAK
  • • Kart scale (hover:scale-105)
  • • Kart translateY (yukarı kayma)
  • • Shadow-only hover
  • • Rotation efektleri

GENEL KAÇINILACAKLAR

• Template fabrikası görünümü
• AI abstract mesh backgrounds
• CDN FontAwesome kullanımı
• Aynı kombinasyonu tekrar etme
• Mega menü linkleri sola dayalı
• Versiyon üzerine yazma (v1, v2, v3)
• İnce font ağırlıkları (light, thin)
• Tutarsız border-radius
• Dark modda açık BG karışımı

v4 Prompt (Yeni)

/design/prompt/?v=v4

Temel Özellikler
  • @frontend-design skill referansı
  • Mega Menu zorunluluğu
  • Dark/Light mode kuralları
  • FontAwesome Pro 7 (LOCAL)
  • WCAG AA kontrast
Hover Kuralları
  • İkon: thin → solid (fa-light → fa-solid)
  • Border, color, opacity animasyonları
  • İç içerik hareketi OK
  • Kart scale YASAK
  • Kart translateY YASAK
İkon Hover Pattern
<div class="group">
    <i class="fa-light fa-icon group-hover:hidden"></i>
    <i class="fa-solid fa-icon hidden group-hover:block"></i>
</div>

JSON Dinamik Yapısı (Hedef)

Amaç: Tasarımlar JSON'lardan kendine uygun olanları seçer veya yeni ekler. Sürekli genişleyen bir kütüphane.

Çalışma Prensibi

1
AI Seçim Yapar
Sektör ve brief'e göre JSON'lardan en uygun layoutları seçer
2
Yoksa Ekler
Uygun layout bulamazsa yeni bir varyasyon oluşturur ve JSON'a ekler
3
Kütüphane Büyür
Her yeni tasarımla seçenekler artar, sistem zenginleşir

JSON Yapı Örneği

{
  "id": "hero-split-video",
  "name": "Split Video Hero",
  "description": "Sol metin, sağ video",
  "css_hints": {
    "layout": "grid grid-cols-2",
    "height": "min-h-screen"
  },
  "sectors": ["Tech", "Startup"],
  "avoid": ["Static industries"],
  "added_date": "2026-01-25"
}
Avantaj 1
Tekrar kullanım - Aynı layout farklı projelerde
Avantaj 2
Tutarlılık - CSS hints sayesinde standart
Avantaj 3
Büyüyen kütüphane - Her tasarım katkı sağlar

JSON URL Referans Sistemi (25 Ocak 2026 - YENİ!)

Maker sayfasında tüm detayları göstermek yerine, AI'ın JSON dosyalarına gidip kendisinin seçim yapması sağlanıyor.

Eski Sistem (Sorunlu)

❌ Maker UI'da 150 hero items gösteriliyordu
❌ Prompt'a tüm detaylar ekleniyordu (çok uzun)
❌ AI seçim yapamıyordu, her şey veriliyordu

Yeni Sistem (JSON URL Referans)

✓ Maker UI'da sadece kategoriler gösteriliyor
✓ Prompt'a JSON URL'leri veriliyor
✓ AI URL'e gidip sektöre uygun seçim yapıyor

Prompt'a Eklenen JSON Tablosu

Dosya URL İçerik
heroes.json {domain}/templates/data/heroes.json 150 hero tipi
styles.json {domain}/templates/data/styles.json Tasarım tarzları
headers.json {domain}/templates/data/headers.json Header stilleri
footers.json {domain}/templates/data/footers.json Footer stilleri
fonts.json {domain}/templates/data/fonts.json Font çiftleri
Önemli: URL'ler dinamik olarak window.location.origin ile oluşturuluyor. Hangi domain'de çalışırsa o domain kullanılıyor.

Maker UI Son Güncellemeler (26 Ocak 2026 - YENİ!)

Template Maker sayfasına eklenen yeni özellikler ve iyileştirmeler.

Alpine.js Stabilizasyonu

Sorun
  • Alpine.js 3.x.x floating version kullanılıyordu
  • JSON data yükleme race condition
  • Sayfa yenilemelerinde section'lar bozuluyordu
Çözüm
  • Alpine.js 3.14.8 sabitlendi
  • Promise.all ile paralel JSON yükleme
  • dataLoaded/dataError flag'leri eklendi

JSON Dosya Symlink'leri

Dosya isimlendirme tutarsızlıkları symlink ile çözüldü:

scrollanim.json → scroll-animations.json
announcement.json → announcement-bar.json
auth.json → auth-pages.json
cookie.json → cookie-gdpr.json
darkmode.json → dark-mode.json
errorpages.json → error-pages.json
mobilemenu.json → mobile-menu.json
tabs.json → tabs-accordions.json

Section Renk Düzeltmeleri

Dark arka planda görünmeyen section renkleri düzeltildi:

Dark Mode
#1e293b → #6366f1
Mobil Menü
#475569 → #f472b6
Footers
#475569 → #94a3b8
Proje
#64748b → #94a3b8

Modal İçi Navigasyon

Önizleme modalında itemler arası geçiş özelliği:

Ok Butonları
Sol/Sağ ile önceki/sonraki item
Klavye Desteği
← → tuşları + ESC ile kapat
Seç Butonu
"Bunu Seç" + seçili durumu gösterir
Eklenen State Değişkenleri:
previewList, previewIndex, previewType, previewItem

Kart Açıklama Düzenlemesi

Önceki
Kartların altında başlık + açıklama
Fazla yer kaplıyordu
Şimdi
Kartlarda sadece başlık (ortalı)
Açıklama modal'da prompt üstünde

Versiyon Çakışma Önleme

Çoklu Claude oturumlarında versiyon çakışmasını önlemek için:

Lock Sistemi
/public/readme/version-lock.sh dosyası eklendi
Atomik Oluşturma
mkdir -p ile tek seferde klasör + dosya

v4 Prompt JSON Zorunluluk Güncellemesi

Sorun: Önceki temalar JSON'ları kullanmıyordu. Hepsi aynı "gradient + ortada text" hero patterniydi.

ZORUNLU JSON'lar (Her tasarımda):
heroes
premium
fonts
headers
footers
İÇERİK BAZLI JSON'lar (Brief'e göre):
services
testimonials
faq
gallery
pricing
statistics
partners
video
✅ KARAR AĞACI: Brief'i oku → İçerik listesi çıkar → Her içerik için JSON fetch et
✅ css_structure: JSON'daki class'lar BİREBİR uygulanacak
✅ RAPORLAMA: prompt.html'de TÜM kullanılan JSON ID'leri listelenecek

Yapılacaklar (24 JSON + 1 UI)

Toplam 2400+ seçenek oluşturulacak
1. styles.json
2. gradients.json
3. fonts.json
4. dark-light.json
5. premium-sections.json
6. mega-menus.json
7. heroes.json
8. headers.json
9. footers.json
10. about.json
11. services.json
12. products.json
13. product-cards.json
14. product-detail.json
15. testimonials.json
16. gallery.json
17. faq.json
18. partners.json
19. pricing.json
20. video.json
21. process.json
22. contact.json
23. cta.json
24. hover-effects.json
25. backgrounds.json
26. /design/sectors/index.html güncelle