Template System v2

Plan v8 - Kapsamlı JSON Sistemi

Onay Bekliyor

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