Template System v2

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.json	20+	Tarz kuralları
gradients.json	60+	Renk paletleri
fonts.json	75+	Font çiftleri
premium-sections.json	50+	Animasyonlu özel alanlar
heroes.json	200+	Hero layoutları
about.json	150+	Hakkımızda
services.json	150+	Hizmetler
products.json	150+	Ürün section'ları
product-cards.json	100+	Shop kartları (fiyatsız)
product-detail.json	75+	Ürün detay sayfaları
testimonials.json	100+	Müşteri yorumları (YENİ)
gallery.json	100+	Galeri/Portfolio (YENİ)
faq.json	50+	Sık sorulan sorular (YENİ)
partners.json	50+	Logo carousel (YENİ)
pricing.json	75+	Fiyat tabloları (YENİ)
video.json	50+	Video section (YENİ)
process.json	75+	Süreç/Timeline (YENİ)
contact.json	150+	İletişim
cta.json	100+	CTA banner
headers.json	150+	Header/Navigation
mega-menus.json	50+	Mega menu stilleri (DETAYLI)
footers.json	150+	Footer
hover-effects.json	40+	Hover efektleri
backgrounds.json	50+	Animated BG
dark-light.json	Kurallar	Dark/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ı

Sektör

Firma Adı

Firma İçeriği / Ek Bilgiler

Kaç tasarım üretilsin?

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

AI Seçim Yapar

Sektör ve brief'e göre JSON'lardan en uygun layoutları seçer

Yoksa Ekler

Uygun layout bulamazsa yeni bir varyasyon oluşturur ve JSON'a ekler

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

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