t-{id} Tema Yapisi
Multi-Tenant Tema Sistemi - Kapsamli Referans Dokumani
1. Felsefe
t-{id} = Tenant temasi. Sadece ozel dosyalar burada.
simple = Fallback (mevcut, zaten var). t-{id}'de yoksa buradan alir.
Ornek: t-3/homepage.blade.php var -> onu kullan, t-3/blog/show.blade.php yok -> simple'dan al
2. View Path Oncelik Sirasi
KRITIK!DOGRU Oncelik Sirasi (ThemeService.php)
resources/views/themes/{tema}/{view}
Ana tema klasoru - TEK DOSYA PRENSIBI - ONCELIKLI!
Modules/{Modul}/views/themes/{tema}/{view}
Modul ici tema - Fallback (resources'da yoksa)
Modules/{Modul}/views/themes/simple/{view}
Simple tema fallback - MODUL ICINDE
{modul}::front.{view}
Son care - Modul front klasoru
3. Container Pattern (ixtif Standardi)
Basit Anlatim
Tum sayfalarda ayni container genisligi kullanilmali. ixtif.com header genisligi referans alinmistir.
DOGRU: ixtif Standardi
{{-- TUM sayfalar bu container'i kullanmali --}} <div class="container mx-auto px-4 sm:px-4 md:px-2"> ... </div> // Mobil (0-767px): px-4 (16px) // Tablet (768px+): px-4 (16px) // Desktop (md/768px+): px-2 (8px) - daha dar padding
YANLIS: Eski Genis Padding
{{-- YANLIS! Fazla padding, tutarsiz --}} <div class="container mx-auto px-3 sm:px-6 md:px-8 lg:px-12 xl:px-16 2xl:px-20"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> {{-- DOGRU! --}} <div class="container mx-auto px-4 sm:px-4 md:px-2">
4. Minimal Subheader Pattern
Basit Anlatim
Gradient header KALDIRILDI! Yerine minimal subheader: Breadcrumb + H1 baslik, gri arkaplan.
DOGRU: Minimal Subheader
{{-- MINIMAL SUBHEADER --}} <section class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700"> <div class="container mx-auto px-4 sm:px-4 md:px-2 py-4"> {{-- Breadcrumb --}} <nav class="text-sm text-gray-500 dark:text-gray-400 mb-2"> @foreach($breadcrumbsArray as $index => $crumb) ... @endforeach </nav> {{-- H1 Baslik --}} <h1 class="text-2xl md:text-3xl font-bold font-heading text-gray-900 dark:text-white"> {{ $title }} </h1> </div> </section>
5. Breakpoint Sistemi
Basit Anlatim
Header ve navigasyon icin xl (1280px) breakpoint kullaniyoruz. lg (1024px) kullanmak tablet boyutlarinda sorunlara yol acar!
Tailwind Breakpoint'leri
| Class | Piksel | Kullanim |
|---|---|---|
sm: | 640px | Buyuk telefonlar |
md: | 768px | Tablet dikey |
lg: | 1024px | Tablet yatay / Kucuk laptop |
xl: | 1280px | HEADER BREAKPOINT! |
2xl: | 1536px | Buyuk ekranlar |
6. Grid Sistemi (Modul Tipine Gore)
Basit Anlatim
Grid yapisi modul tipine gore degisir. Gorsel agirlikli modullerde 2 kolon, text agirlikli modullerde 1 kolon mobilde daha okunabilir.
Gorsel Agirlikli Moduller
Sadece gorsel + baslik, az text
| Service | grid-cols-2 md:grid-cols-3 |
| Portfolio | grid-cols-2 md:grid-cols-3 |
| Galeri | grid-cols-2 md:grid-cols-3 lg:grid-cols-4 |
Text Agirlikli Moduller
Baslik + aciklama + tarih + okuma suresi
| Blog | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| Page | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
| Announcement | grid-cols-1 md:grid-cols-2 lg:grid-cols-3 |
7. Typography (Prose Styling)
DOGRU: Prose Styling
{{-- Icerik alanlari icin --}} <div class="prose prose-base max-w-none font-body dark:prose-invert prose-headings:font-heading prose-headings:text-gray-900 prose-p:text-gray-600 dark:prose-p:text-gray-300 prose-a:text-primary-600 hover:prose-a:underline"> @parsewidgets($body ?? '') </div>
8. PWA + instant.page + Service Worker
Basit Anlatim
Sayfalar daha hizli acilir, site uygulama olarak yuklenebilir ve offline calisabilir. Tum bunlar otomatik olarak hem t-3 hem simple temalarda aktif.
instant.page
Link'lere mouse ile geldiginde sayfa arka planda onceden yuklenir.
PWA Manifest
Tarayicida "Uygulamayi Yukle" butonu gosterir.
Service Worker
Sayfalari onbellege alir, offline destek saglar.
9. UI/UX Standartlari
Basit Anlatim
Sitede dinamizm ve guzellik icin hover efektleri, animasyonlu gradient text, ikon gecisleri kullanilir. Ancak ASLA scale/zoom/ziplama efekti KULLANMA - sadece renk, border ve shadow degisimi!
Lazy Loading
Tum gorsellerde loading="lazy" attribute kullan. Hero haric!
YASAK Hover Efektleri
hover:scale-*, hover:-translate-y-* - KULLANMA!
Sadece: hover:border-primary-500, hover:shadow-lg
10. Header Yapisi
Header Katmanlari
Top Bar
Telefon, WhatsApp, calisma saatleri
Main Header (sticky)
Logo, navigasyon, dark mode toggle
Mobile Menu (xl:hidden)
x-show ile acilir/kapanir
11. Settings Pattern
Iletisim Ayarlari
| Key | Aciklama |
|---|---|
contact_phone_1 | Ana telefon (sabit) |
contact_phone_2 | Mobil telefon |
contact_whatsapp_1 | WhatsApp numarasi |
contact_email_1 | E-posta |
12. Logo Service
LogoService Kullanimi
@php
$logoService = app(\App\Services\LogoService::class);
$logos = $logoService->getLogos();
@endphp
@if($logos['has_light'] && $logos['has_dark'])
<img src="{{ $logos['light_logo_url'] }}" class="dark:hidden h-10">
<img src="{{ $logos['dark_logo_url'] }}" class="hidden dark:block h-10">
@endif
13. Leonardo AI Gorsel Uretim Sistemi
11 Altin Kural Formulu + Site Renk Entegrasyonu
Basit Anlatim (Herkes Icin)
Leonardo AI, siteler icin profesyonel gorseller ureten yapay zeka sistemidir. Basit bir aciklama verirsin ("Forklift depo ici"), sistem bunu 11 Altin Kural ile gercek fotograf gibi gorunen detayli bir talimata cevirir.
Neden Onemli? AI urettigi belli olmayan, profesyonel, markasiz gorseller. Stok fotograf satin almaya gerek yok. Her gorsel tenant'a ozel, sektore uygun.
11 ALTIN KURAL FORMULU
AI urettigi BELLI OLMAYAN, gercek fotograf gibi gorunen gorseller icin ZORUNLU kurallar
Photo Type
AI'yi fotograf moduna sokar
"Photo of", "Editorial photograph of", "Documentary shot of"
Subject + Action
Mikro hikaye - konu NE YAPIYOR
YANLIS: "forklift"
DOGRU: "forklift operator maneuvering pallets"
Environment + Time/Season
Mekan + zaman/mevsim
"industrial warehouse on foggy winter morning"
Camera Angle
Cekim acisi + amac
"low angle emphasizing power", "eye-level for intimacy"
Composition
Kompozisyon teknigi
"rule of thirds", "golden ratio", "leading lines"
Lighting
Detayli isik kurulumu
"golden hour side light", "Rembrandt 3:1 ratio"
Camera + Lens + DoF
Spesifik ekipman + bokeh
"Canon EOS R5, 85mm f/1.4L, creamy bokeh"
Film Stock
KRITIK!Analog film referansi - AI gorunumunu KIRAR
"Kodak Portra 400 warm", "Fuji Velvia vivid"
Imperfections
EN KRITIK!Kusurlar - MUKEMMEL = SAHTE!
"lens dust", "slight vignetting", "film grain", "micro chromatic aberration"
Mood + Emotion
Atmosfer + duygu
"quiet determination", "nostalgic warmth", "tense anticipation"
Post-Processing
YENI!Renk grading - AI steril gorunumunu KIRAR
"cinematic teal and orange", "lifted blacks", "crushed shadows"
Site Renkleri + Logo Entegrasyonu
Nasil Calisir? Site logosundaki ana renkler analiz edilir ve gorsellerde DETAYLARDA kullanilir.
Ornek: UNIMAD Madencilik
Logo Renkleri:
Prompt'a Eklenen: "with subtle blue and orange accent details matching brand colors, industrial equipment with blue safety markings"
ONEMLI!
- - Zorla tum gorseli marka rengine boyama!
- - Sadece DETAYLARDA (aksesuar, isik vurgusu, cizgi, arka plan detayi)
- - Dogal gorunsun, "branded" olmasin
- - Uygun OLMAYAN gorsellerde renk zorlama (ornegin dogal manzara)
Gorsel Turleri ve Boyutlar
Hero Gorseli
| Boyut: | 1472x832 |
| Oran: | Yatay (16:9 yakin) |
| Kullanim: | Anasayfa, Landing page |
| Style: | cinematic |
Hizmet Gorseli
| Boyut: | 1024x1024 |
| Oran: | Kare (1:1) |
| Kullanim: | Service kartlari |
| Style: | stock_photo |
Blog/Portfolio
| Boyut: | 1472x832 |
| Oran: | Yatay |
| Kullanim: | Icerik kartlari |
| Style: | cinematic / dynamic |
Prompt Ornekleri
BASIT (Kullanici girer):
"Forklift depo ici"
11 KURAL (Sistem uretir):
Photo of forklift operator carefully maneuvering loaded pallets through narrow aisle, industrial warehouse on foggy winter morning with condensation on windows, low angle emphasizing power and scale, rule of thirds with subject at intersection, golden hour side light with long shadows, shot on Canon EOS R5 85mm f/1.4L creamy bokeh, Kodak Portra 400 warm tones, subtle lens dust and slight vignetting with micro chromatic aberration, conveying industrial efficiency and focused concentration, cinematic teal and orange grading with lifted blacks. Generic unbranded equipment, no manufacturer logos. NO text NO watermarks.
BASIT:
"Acik ocak madencilik"
11 KURAL + MARKA RENKLERI:
Editorial photograph of open pit mining operation with heavy machinery extracting minerals, vast quarry landscape at golden hour with dust particles catching warm light, high angle drone perspective showing scale of operation, leading lines from access roads drawing eye to excavation center, dramatic side lighting with long shadows across terraced walls, shot on Sony A7RV 24-70mm f/2.8 moderate DoF for environmental context, Kodak Ektar 100 saturated vivid colors, atmospheric dust particles and slight lens flare with natural film grain, conveying industrial power and determined progress, warm vintage tones with subtle blue and orange accents in safety equipment and machinery details matching brand colors. Generic mining equipment, no company logos visible. NO text NO labels.
Claude Gorsel Uretim Talimati
ONEMLI!Gorselleri Claude uretecek - Leonardo AI API uzerinden
Media tablosuna eklenecek - Spatie Media Library ile
11 Altin Kural uygulanacak - AIPromptEnhancer ile otomatik
Site renkleri kullanilacak - Logo analizi ile detaylarda
Uretim Sirasi
- Hero gorseli (anasayfa, 1472x832)
- Hizmet gorselleri (her hizmet icin, 1024x1024)
- Portfolyo gorselleri (varsa)
- Blog/Icerik gorselleri
Kayit Islemi
- MediaLibraryItem olustur
- generation_source: 'ai_generated'
- Model'in hero koleksiyonuna ekle
- AI kredi kullanimi kaydet
Teknik Detaylar (Gelistiriciler Icin)
| Service Class: | App\Services\Media\LeonardoAIService |
| Prompt Enhancer: | Modules\AI\App\Services\AIPromptEnhancer |
| Auto Cover Job: | Modules\MediaManagement\App\Jobs\GenerateAICover |
| Leonardo Model: | lucid-origin |
| GPT Model (Enhancer): | gpt-4o |
| Helper Function: | generate_ai_cover($model, 'Baslik', 'type') |
Kullanim Ornegi
// Service modulu icin otomatik hero gorseli $service = Service::create(['title' => 'Forklift Kiralama']); // Queue'ya otomatik AI gorsel uretimi ekle generate_ai_cover($service, $service->title, 'service'); // Veya manuel tetikleme GenerateAICover::dispatch( Service::class, $service->id, 'Forklift Kiralama', 'service' )->onQueue('muzibu_my_playlist');
YASAK - AI Trigger Words
Bu kelimeler AI urettigi BELLI EDER - ASLA KULLANMA:
photorealistic
hyper-realistic
8K
ultra HD
4K resolution
highly detailed
masterpiece
perfect
Yeni Tema Dosyasi Checklist
EK A: Page Modulu Kullanimi
Statik sayfalar, hakkimizda, iletisim vb.Basit Anlatim
Page modulu, sitedeki statik sayfalari yonetir: Hakkimizda, Iletisim, Gizlilik Politikasi, Sozlesmeler vb. Her sayfa bagimsiz bir URL'e sahiptir ve SEO ayarlari yapilabilir.
Veritabani Alanlari
| Alan | Tip | Aciklama |
|---|---|---|
title | JSON (multi-lang) | Sayfa basligi |
slug | JSON (multi-lang) | URL slug'i |
body | JSON (multi-lang) | HTML icerik (TinyMCE) |
css | TEXT | Ozel CSS (opsiyonel) |
js | TEXT | Ozel JS (opsiyonel) |
is_active | BOOLEAN | Aktif/Pasif |
is_homepage | BOOLEAN | Anasayfa mi? |
Media Koleksiyonlari
hero- Kapak gorseli (1 adet)gallery- Galeri (max 50 adet)
URL Yapisi
/sayfalar/{slug}
Slug admin'den degistirilebilir (ModuleSlugService)
Leonardo AI Gorsel Uretimi
Page icin hero gorseli Claude tarafindan uretilir:
// Ornek: "Hakkimizda" sayfasi icin generate_ai_cover($page, 'Hakkimizda - Sirket Tanitimi', 'page'); // Boyut: 1472x832 (hero) // Style: cinematic // 11 Altin Kural otomatik uygulanir
EK B: Service Modulu Kullanimi
Hizmetlerimiz, urunler, cozumlerBasit Anlatim
Service modulu, sirketin sundugu hizmetleri sergiler. Her hizmetin ayri sayfasi, gorseli ve kategorisi olabilir. "Hizmetlerimiz" sayfasinda kart gorunumunde listelenir.
Veritabani Alanlari
| Alan | Tip | Aciklama |
|---|---|---|
title | JSON (multi-lang) | Hizmet adi |
slug | JSON (multi-lang) | URL slug'i |
body | JSON (multi-lang) | Detayli aciklama (HTML) |
is_active | BOOLEAN | Aktif/Pasif |
service_category_id | INTEGER | Kategori ID (nullable) |
Media Koleksiyonlari
hero- Hizmet gorseli (1 adet, KARE 1024x1024)gallery- Ek gorseller (max 50)
URL Yapisi
/hizmetlerimiz/{slug}
Varsayilan: /hizmetlerimiz, degistirilebilir
Kategori Sistemi
Hizmetler kategorilere ayrilabilir:
- ServiceCategory modeli ile yonetilir
- Her hizmet tek kategoriye ait olabilir (nullable)
- Kategorisiz hizmetler de desteklenir
Leonardo AI Gorsel Uretimi
Her hizmet icin KARE (1024x1024) gorsel uretilir:
// Ornek hizmetler icin gorsel uretimi generate_ai_cover($service, 'Forklift Kiralama', 'service'); generate_ai_cover($service, 'Transpalet Bakimi', 'service'); generate_ai_cover($service, 'Lojistik Danismanlik', 'service'); // Boyut: 1024x1024 (KARE - kart gorunumu icin) // Style: stock_photo // Site renkleri: Detaylarda kullanilir
Icerik Girisi Ornegi (UNIMAD)
Baslik (title):
"Madencilik Hizmetleri"
Slug (otomatik):
"madencilik-hizmetleri"
Icerik (body) - TinyMCE ile girilir:
Sirketimiz, acik ocak madencilik, yeraltı madenciligi, mineral isleme ve cevher zenginlestirme alanlarinda profesyonel hizmetler sunmaktadir...
EK C: Blog Modulu Kullanimi
Haberler, makaleler, duyurularBasit Anlatim
Blog modulu, haber, makale ve icerik paylasimi icin kullanilir. Zamanlanmis yayinlama, kategori, etiket, SSS (FAQ) ve HowTo schema destegi vardir. SEO icin en zengin modul.
Veritabani Alanlari
| Alan | Tip | Aciklama |
|---|---|---|
title | JSON | Yazi basligi |
slug | JSON | URL slug'i |
body | JSON | Ana icerik (HTML) |
excerpt | JSON | Kisa ozet (SEO icin) |
published_at | DATETIME | Yayinlanma tarihi (zamanlanabilir) |
is_featured | BOOLEAN | One cikan mi? |
is_active | BOOLEAN | Aktif/Taslak |
blog_category_id | INTEGER | Kategori ID |
faq_data | JSON | SSS verileri (FAQ Schema) |
howto_data | JSON | Nasil yapilir adimları (HowTo Schema) |
Media
hero- Kapak (1472x832)gallery- Galeri
Iliskiler
category()- Kategoritags()- Etiketler (MorphToMany)
URL
/blog/{slug}
/blog/category/{cat}
Yayinlanma Durumu Mantigi
YAYINDA
is_active = true
published_at = null veya gecmis
ZAMANLANMIS
is_active = true
published_at = gelecek tarih
TASLAK
is_active = false
Leonardo AI Gorsel Uretimi
Blog yaziları icin YATAY (1472x832) kapak gorseli:
// Her blog icin kapak gorseli generate_ai_cover($blog, 'Madencilik Sektorunde Yenilikler', 'blog'); // Boyut: 1472x832 (yatay, 16:9 yakin) // Style: cinematic veya dynamic // Icerige uygun tema otomatik belirlenir
EK D: Icerik Girisi Workflow
Basit Anlatim
Kullanici icerik metnini verir, Claude sisteme girer, gorsel uretir ve media tablosuna kaydeder.
Kullanici Icerik Verir
Hizmet/sayfa/blog icin baslik ve icerik metni saglanir
"Madencilik Hizmetleri - Acik ocak ve yeraltı madenciliginde uzman cozumler..."
Claude Admin'e Girer
Livewire component uzerinden veritabanina kaydeder
Service::create(['title' => [...], 'body' => [...], 'is_active' => true])
Leonardo AI Gorsel Uretir
11 Altin Kural ile prompt olusturulur, Leonardo API'ye gonderilir
generate_ai_cover($service, 'Madencilik Hizmetleri', 'service')
Media Tablosuna Kaydedilir
Spatie Media Library ile model'e attach edilir
$service->addMediaFromUrl($imageUrl)
->usingFileName('service-' . $service->id . '.webp')
->withCustomProperties(['generation_source' => 'ai_generated'])
->toMediaCollection('hero');
SEO Ayarlari (Opsiyonel)
Meta title, description, OG tags otomatik veya manuel ayarlanir
Modul Karsilastirma Tablosu
| Ozellik | Page | Service | Blog |
|---|---|---|---|
| Kategori | |||
| Etiketler (Tags) | |||
| Zamanlanmis Yayin | |||
| FAQ Schema | |||
| HowTo Schema | |||
| Anasayfa Olabilir | |||
| Gorsel Boyutu | 1472x832 | 1024x1024 | 1472x832 |