Template Maker UX İyileştirme Planı

Mevcut Sorunlar

Görsel Karmaşa

• 30+ section hepsi açık görünüyor
• Scroll yapmak yorucu
• Hangi section'ı seçtiğini kaybetmek kolay

Bilgi Eksikliği

• Bir stil seçince ne ile kombine etmeli?
• Hangi sektöre hangi stil uygun?
• Seçimler birbiriyle uyumlu mu?

Yönlendirme Yok

• "Nereden başlamalıyım?" sorusu
• Öncelik sırası belirsiz
• Zorunlu/opsiyonel ayrımı yok

Mobil Deneyim

• Uzun sayfa mobilde kullanışsız
• Sidebar zaten gizli
• Touch hedefleri küçük

Çözüm: Accordion + Akıllı Öneriler

Yeni Sayfa Yapısı

1. Ana Tasarım Tarzı ZORUNLU

2 seçili

İçerik burada görünür (açık durumda)

Akıllı Öneri

"Claymorphism" seçtin → Glassmorphism ve Playful de güzel gider!

2. Renk Paleti Opsiyonel

Seçim yok

3. Header

Transparent seçili

Gelişmiş Seçenekler 12 bölüm

Detaylı Uygulama Planı

Faz 1: Accordion Yapısı

1

Section Gruplandırma

Mevcut 30+ section'ı mantıksal gruplara ayır:

Temel (Açık)

• Proje Bilgileri
• Ana Tasarım Tarzı
• Renk Paleti

Yapı (Kapalı)

• Header
• Hero
• Footer

Bölümler (Kapalı)

• Services, About, FAQ...
• Testimonials, Pricing...

Gelişmiş (Gizli)

• Efektler, Animasyonlar
• Pagination, Modals...

2

Collapse/Expand Mekanizması

Alpine.js x-collapse kullanarak smooth geçişler

<div x-data="{ open: false }">
  <button @click="open = !open">Section Başlık</button>
  <div x-show="open" x-collapse>
    İçerik...
  </div>
</div>

3

Seçim Özeti Header'da

Kapalı section'ın header'ında ne seçildiği görünsün

Header Kategorisi Transparent + Sticky seçili

Faz 2: Akıllı Öneri Sistemi

1

Stil Uyumluluk Matrisi

styles.json'a "pairs_well_with" alanı ekle:

{
  "id": "claymorphism",
  "name": "Claymorphism",
  "pairs_well_with": ["glassmorphism", "playful", "soft-pastel"],
  "conflicts_with": ["brutalist", "corporate"],
  "best_for_sectors": ["Apps", "Startups", "Kids", "Gamification"]
}

2

Seçim Sonrası Öneri Kutusu

Bir stil seçildiğinde ilgili section'ın altında öneri göster:

Bu seçimle şunlar da güzel gider:

Kaçın: Brutalist, Corporate

3

Sektör Bazlı Başlangıç

Sektör girildiyse otomatik öneri:

"Hukuk Bürosu" için önerilen başlangıç:

Corporate Elegant Navy + Gold

Faz 3: Wizard Modu (Opsiyonel)

1

Adım Adım Mod

Yeni kullanıcılar için guided experience:

Sektör Stil Renkler Header Hero

2

Mod Seçimi

Sayfa başında kullanıcıya sor:

Kolay Mod

Adım adım rehberlik, sadece temel seçenekler

Uzman Mod

Tüm seçenekler, tam kontrol

Gerekli JSON Değişiklikleri

styles.json'a Eklenecek Alanlar

{
  "id": "claymorphism",
  "name": "Claymorphism",
  "description": "3D clay/plasticine look...",

  // YENİ ALANLAR
  "pairs_well_with": ["glassmorphism", "playful", "soft-pastel", "bento"],
  "conflicts_with": ["brutalist", "corporate", "minimal"],
  "recommended_colors": ["violet", "pink", "cyan", "amber"],
  "recommended_headers": ["transparent", "floating"],
  "recommended_heroes": ["centered-3d", "split-illustration"],
  "difficulty": "intermediate",  // beginner, intermediate, advanced
  "popularity": 85,              // trending score
  "best_for_sectors": ["Apps", "Startups", "Kids", "Gamification"]
}

Yeni: section-groups.json

{
  "groups": [
    {
      "id": "essential",
      "name": "Temel Seçimler",
      "icon": "fa-star",
      "default_open": true,
      "sections": ["proje", "styles", "colors"]
    },
    {
      "id": "structure",
      "name": "Sayfa Yapısı",
      "icon": "fa-layer-group",
      "default_open": false,
      "sections": ["headers", "heroes", "footers", "layout"]
    },
    {
      "id": "content",
      "name": "İçerik Bölümleri",
      "icon": "fa-puzzle-piece",
      "default_open": false,
      "sections": ["services", "about", "testimonials", "faq", "pricing", "contact"]
    },
    {
      "id": "advanced",
      "name": "Gelişmiş Seçenekler",
      "icon": "fa-sliders",
      "default_open": false,
      "hidden_by_default": true,
      "sections": ["effects", "animations", "modals", "pagination", "darkmode", "cookie"]
    }
  ]
}

Uygulama Önceliği

1

Accordion Yapısı

Section'ları collapse/expand yapma - En kritik değişiklik

Hemen

2

Akıllı Öneriler

pairs_well_with sistemi ve öneri kutuları

Sonra

3

Wizard Modu

Adım adım mod - İsteğe bağlı iyileştirme

Opsiyonel