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 seçilebilir
Girdiler
Sektör = text input
Ek bilgiler = textarea (1000+ satır)
Tarz = mevcut kartlar
Zorunlu
Premium Section her tasarımda
Dark/Light mode zorunlu
Design consistency
JSON Dosyaları ve İçerik Sayıları
| Dosya | İçerik | Adet | Açıklama |
|---|---|---|---|
| styles.json | Tarz kuralları | 20+ | Minimal, Modern, Lüks, Tech... + rules + avoid |
| gradients.json | Renk paletleri | 60+ | Soğuk, sıcak, enerjik, doğal tonlar (dark/light uyumlu) |
| fonts.json | Font çiftleri | 75+ | Klasik, Modern, Bold, Friendly, Premium kategorileri |
| premium-sections.json | Animasyonlu özel alanlar | 50+ | Particle, gradient wave, 3D, parallax, GSAP... |
| heroes.json | Hero layoutları | 200+ | Full-screen, split, asymmetric, typography, interactive |
| about.json | Hakkımızda section'ları | 150+ | Timeline, stats, gallery, card, storytelling |
| services.json | Hizmet section'ları | 150+ | Card grid, tab, carousel, interactive, list |
| products.json | Ürün section'ları | 150+ | Grid, showcase, featured, catalog, gallery (fiyatsız tanıtım) |
| product-cards.json | Ürün kartları | 100+ | Shop kartları (fiyatsız), tıklanınca detay sayfasına |
| product-detail.json | Ürün detay sayfaları | 75+ | Ürün içerik sayfası layoutları (galeri, spec, related) |
| testimonials.json | Referans/yorum section'ları | 100+ | Carousel, grid, masonry, quote, video |
| contact.json | İletişim section'ları | 150+ | Split form, map, minimal, multi-step, creative |
| cta.json | CTA banner'ları | 100+ | Full-width, split, minimal, animated, gradient |
| headers.json | Header/Navigation | 150+ | Classic, sticky, mega menu, mobile, transparent |
| footers.json | Footer section'ları | 150+ | Multi-column, minimal, CTA, creative, mega |
| mega-menus.json | Mega menu stilleri | 30+ | Full-width, sidebar, modal, tabbed, dashboard |
| hover-effects.json | Hover efektleri | 40+ | Icon, text, border, shadow, background efektleri |
| backgrounds.json | Animated background'lar | 50+ | Gradient, particle, SVG pattern, mesh, aurora |
| dark-light.json | Dark/Light mode kuralları | Kurallar | Renk eşlemeleri, FOUC önleme, Alpine.js state |
| TOPLAM | 1900+ | seçenek | |
Hizmet vs Ürün Firmaları
Hizmet Satanlar
AI brief'te şunları görürse → services.json kullanır:
Danışmanlık
Hukuk
Sağlık
Ajans
Eğitim
Finans
Ürün Satanlar
AI brief'te şunları görürse → products.json kullanır:
E-ticaret
Üretim
Perakende
Gıda
Moda
Teknoloji
AI, brief'teki içeriğe göre otomatik karar verir. Bazı firmalar ikisini de kullanabilir (hizmet + ürün).
Dark/Light Mode Kuralları (Zorunlu)
🌙 Dark Mode
- • Background:
slate-900, slate-950, gray-900 - • Text:
white, slate-100, slate-200 - • Secondary:
slate-400, slate-500 - • Borders:
slate-700, slate-800
☀️ Light Mode
- • Background:
white, gray-50, slate-50 - • Text:
gray-900, slate-900 - • Secondary:
gray-600, slate-600 - • Borders:
gray-200, slate-200
❌ YASAK:
Dark modda açık background, light modda koyu background
✅ ZORUNLU:
FOUC önleme script'i <head>'de, Alpine.js state + localStorage
Premium Section (Her Tasarımda Zorunlu)
CSS Animasyonları
- • Gradient wave/shift
- • Keyframe animations
- • Transform transitions
- • Backdrop blur
- • SVG morph
JavaScript Kütüphaneleri
- • GSAP + ScrollTrigger
- • Three.js / WebGL
- • Particles.js / tsParticles
- • Lottie animations
- • AOS (scroll)
Efekt Tipleri
- • Particle systems
- • Mesh gradients
- • Glassmorphism
- • Parallax layers
- • Cursor tracking
Design Consistency Kuralları
❌ YANLIŞ
Hero mavi, About yeşil, Services turuncu, Contact mor
✅ DOĞRU
Tüm sitede aynı renk paleti ve gradient ailesi
Tek renk paleti
Primary + Secondary + Accent
Tek gradient ailesi
Aynı ton varyasyonları
Tek button/card stili
Border-radius, shadow tutarlı
FontAwesome Pro 7 Kuralları
Dosya
/assets/libs/fontawesome-pro@7.1.0/css/all.css
LOCAL dosya (CDN değil)
Hover Efekti
fat (thin) →
fas (solid)
Sayfa açılışında thin, hover'da solid
Dosya Yapısı
public/design/ ├── data/ │ ├── styles.json ← 20+ tarz kuralı │ ├── gradients.json ← 60+ renk paleti │ ├── fonts.json ← 75+ font çifti │ ├── premium-sections.json ← 50+ animasyonlu alan │ ├── heroes.json ← 200+ hero │ ├── about.json ← 150+ hakkımızda │ ├── services.json ← 150+ hizmet │ ├── products.json ← 150+ ürün │ ├── testimonials.json ← 100+ referans │ ├── contact.json ← 150+ iletişim │ ├── cta.json ← 100+ CTA banner │ ├── headers.json ← 150+ header/nav │ ├── footers.json ← 150+ footer │ ├── mega-menus.json ← 30+ mega menu │ ├── hover-effects.json ← 40+ hover efekti │ ├── backgrounds.json ← 50+ animated bg │ └── dark-light.json ← dark/light kuralları │ └── sectors/ └── index.html ← Güncellenecek UI
UI Görünümü
TARZ SEÇİMİ
Mevcut /design/sectors/ kartları (değişmiyor)
Yapılacaklar (19 JSON + 1 UI)
1
styles.json
2
gradients.json
3
fonts.json
4
premium-sections.json
5
heroes.json
6
about.json
7
services.json
8
products.json
9
product-cards.json (fiyatsız shop kartları)
10
product-detail.json (ürün içerik sayfaları)
11
testimonials.json
10
contact.json
11
cta.json
12
headers.json
13
footers.json
14
mega-menus.json
15
hover-effects.json
16
backgrounds.json
17
dark-light.json
18
/design/sectors/index.html güncelle