ZORUNLU ÖZELLİKLER (Her Tasarımda!)
MEGA MENU
- ✅ Her sitede zorunlu
- ✅ Linkler ORTALI (left:50%, translateX:-50%)
- ✅ Zengin içerik: ikonlar, görseller, açıklamalar
- ✅ Dropdown'lar görsel destekli
DARK/LIGHT MODE
- ✅ FOUC önleme scripti head'de İLK
- ✅ tailwind.config: darkMode: 'class'
- ✅ localStorage ile persist
- ✅ Sistem tercihini otomatik algıla
- ✅ Toggle butonu header'da görünür
- ✅ Geçişler smooth (0.3s ease)
FONTAWESOME PRO 7
- ✅ LOCAL dosya: /assets/libs/fontawesome-pro@7.1.0/css/all.css
- ❌ CDN YASAK
- ✅ Default: THIN (fa-light) - ince görünüm
- ✅ Hover: SOLID (fa-solid) - dolgun görünüm
PREMIUM SECTION
- ✅ Her tasarımda en az 1 adet
- ✅ Animasyonlu, interaktif
- ✅ Particles, gradient wave, glassmorphism
- ✅ GSAP, Three.js, Lottie kullanılabilir
DARK MODE - Detaylı Uygulama
A. FOUC Önleme (head'de İLK!)
<script>
(function() {
const theme = localStorage.getItem('theme');
if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
document.documentElement.classList.add('dark');
}
})();
</script>Dark Mode Renkleri
- Sayfa BG: bg-slate-950
- Section: bg-slate-900
- Kart: bg-slate-800
- Text: text-white, text-slate-300
- Border: border-slate-700
Light Mode Renkleri
- Sayfa BG: bg-white, bg-gray-50
- Section: bg-gray-50
- Kart: bg-white
- Text: text-gray-900, text-gray-600
- Border: border-gray-200
Her Element İçin dark: Prefix
<div class="bg-white dark:bg-slate-900 text-gray-900 dark:text-white">
<p class="text-gray-600 dark:text-slate-300">...</p>
</div>HOVER EFEKTLERİ - İzin Verilenler & Yasaklar
✅ İZİN VERİLEN
- • İkon weight değişimi (fa-light → fa-solid)
- • Gradient text animasyonu (SMOOTH!)
- • Border color değişimi
- • Background color shift
- • Shadow artışı (shadow-md → shadow-xl)
- • İç içerik animasyonu (arrow translateX)
- • Opacity değişimi
❌ YASAK (ASLA!)
- • hover:scale-105/110 - Kart büyümesi
- • hover:-translate-y-2 - Yukarı kayma
- • transform: translateY(-Xpx) - Zıplama
- • Kart rotation - Döndürme
- • Underline/çizgi reveal efektleri
- • Element kendi alanı dışına taşma
KURAL: Kart KENDİSİ hareket ETMEZ, sadece İÇİNDEKİLER animasyon yapabilir!
LAYOUT KURALLARI
Container
- max-w-7xl mx-auto (1280px)
- max-w-4xl (text-heavy)
Section Spacing
- py-16 (mobile)
- md:py-24 (tablet)
- lg:py-32 (desktop)
Breakpoints
- md: 768px (hamburger)
- xl: 1280px (nav görünür)
- lg: KULLANILMIYOR!
JSON VERİ KAYNAKLARI
styles.json
31+ tasarım stili
fonts.json
75+ font çifti
heroes.json
200+ hero layout
headers.json
150+ header stili
mega-menus.json
50+ mega menu
footers.json
150+ footer layout
darkmode.json
50+ toggle stili
mobilemenu.json
50+ mobil menü
Tüm JSON'lar: /templates/data/
MAKER SAYFASI - Tamamlanan İşler
- 29 section kategorisi
- Tüm JSON dosyaları bağlı
- Stil önizlemeleri (miniature)
- Modal büyük önizlemeler
- Loading state göstergeleri
- Section renk tutarlılığı
- Alpine.js v3.14.8 (sabit)
- Paralel JSON yükleme
- Cache buster (?t=timestamp)
- Hata durumu gösterimi
Maker: tuufi.com/templates/maker/
GENEL KAÇINILACAKLAR
- ❌ Template fabrikası görünümü
- ❌ AI abstract mesh backgrounds
- ❌ CDN FontAwesome (local kullan!)
- ❌ Generic fontlar (Arial, Inter, Roboto)
- ❌ Mega menü linkleri sola dayalı
- ❌ Dark modda açık BG karışımı
- ❌ Kart scale/translate hover
- ❌ İnce font ağırlıkları (thin, light)
- ❌ Tutarsız border-radius
- ❌ Section bazlı farklı font
- ❌ Eski versiyon üzerine yazma
- ❌ lg: breakpoint header nav için
VERSİYON ÇAKIŞMASI ÖNLEMESİ
Çoklu Claude aynı anda çalışırken versiyon çakışması önlemek için:
- 1. Kilit dosyası kontrol et:
/tmp/claude-*.lock - 2. Kilit varsa max 5 saniye bekle
- 3. Kilidi al
- 4. Mevcut en yüksek versiyonu bul
- 5. Klasörü HEMEN oluştur (atomik)
- 6. Kilidi serbest bırak
KURAL: Versiyon numarasını belirledikten HEMEN SONRA mkdir yap!
ÖNEMLİ HATIRLATMALAR
Prompt Dosyası
Tüm tasarım kuralları:
/public/design/prompt/v4/prompt.txt
Leonardo AI
10 Altın Kural Formülü + Site rengi entegrasyonu kullan
Kontrol Listesi
☑️ Mega Menu
☑️ Dark/Light Mode
☑️ FA Pro 7 Local
☑️ Premium Section
☑️ WCAG AA Kontrast
☑️ İkon Hover (light→solid)
☑️ PWA Ready
☑️ SEO Meta Tags