AI KULLANIM KILAVUZU

Bu dokumani kullanarak tenant sitesi nasil gelistirilir?

ONCE BUNU OKU!

Ornek Kullanici Promptu

// Kullanici soyle bir prompt verir:

"Bu sisteme %100 sadik kalarak {domain}.tuufi.com gelistirmelerini bastan sona yap. Tema sistemi analizindeki her seyi tek tek todo olarak hazirla ve yaptiklarin isaretle. Icerikleri service ve page modullerini kullanarak bu dosyadaki gibi veritabanina ekle. Settings ayarlarini uygula. Yapilmasi gereken her seyi hazirla."

AI Bu Promptu Alinca Ne Yapmali?

1

ICERIK DOSYASINI OKU

Tenant icin hazirlanmis {TENANT}_ICERIK.md dosyasini oku. Bu dosya tum sayfa iceriklerini, hizmet aciklamalarini, SSS sorularini icerir.

// Ornek dosya isimleri:
ECRIN_TURIZM_ICERIK.md      // Ecrin Turizm icerikleri
UNIMAD_MADENCILIK_ICERIK.md // UNIMAD icerikleri
YILDIRIM_PANJUR_ICERIK.md   // Panjur icerikleri

2

TODO LISTESI OLUSTUR

Bu dokumandaki tum bolumleri TODO olarak listele. Her adimi tamamladikca isaretle. TodoWrite tool kullan!

// Todo listesi ornegi:
[ ] 1. Tema klasoru olustur (resources/views/themes/t-{id}/)
[ ] 2. Layout dosyalarini olustur (app, header, footer)
[ ] 3. Homepage.blade.php olustur
[ ] 4. Settings ayarlarini yap (site_name, contact_phone_1, vs.)
[ ] 5. Logo yukle (LogoService pattern)
[ ] 6. Page icerikleri DB'ye ekle (Hakkimizda, Iletisim, vs.)
[ ] 7. Service icerikleri DB'ye ekle (Hizmetler)
[ ] 8. Leonardo AI ile gorseller uret
[ ] 9. Dark mode test et
[ ] 10. Cache temizle ve kontrol et

3

TEK DOSYA PRENSIBINE UY

Modules icinde TEMA DOSYASI OLUSTURMA! Her sey resources/views/themes/t-{id}/ icinde olacak.

YAPMA!

Modules/Page/views/themes/t-{id}/

DOGRU!

resources/views/themes/t-{id}/

4

ICERIKLERI VERITABANINA EKLE

Homepage haric TUM icerikler veritabanindan cekilecek. Page ve Service modullerini kullanarak icerikleri DB'ye ekle.

// Tenant DB'sine baglan ve icerikleri ekle:

// 1. Pages tablosuna:
INSERT INTO pages (title, slug, body, is_active) VALUES
('Hakkimizda', 'hakkimizda', '<HTML ICERIK>', 1),
('Iletisim', 'iletisim', '<HTML ICERIK>', 1);

// 2. Services tablosuna:
INSERT INTO services (title, slug, body, is_active) VALUES
('Hizmet Adi', 'hizmet-slug', '<HTML ICERIK>', 1);

// Body alani Tailwind HTML icermeli!

5

SETTINGS AYARLARINI YAP

Tenant settings tablosuna gerekli ayarlari ekle. Fallback deger KULLANMA!

// Settings tablosuna ekle:
site_name           = 'Ecrin Turizm'
site_slogan         = 'Profesyonel Tur Hizmetleri'
contact_phone_1     = '+90 XXX XXX XX XX'
contact_whatsapp_1  = '90XXXXXXXXXX'
contact_email       = 'info@ecrinturizm.com'
contact_address     = 'Adres bilgisi'
social_instagram    = 'https://instagram.com/...'
social_facebook     = 'https://facebook.com/...'
primary_color       = '#f97316' // Site ana rengi

6

LEONARDO AI ILE GORSEL URET

10 Altin Kural + SITE RENGI ile profesyonel gorseller uret. ZORUNLU!

// Leonardo AI kurallari:
1. 10 Altin Kural formulunu kullan
2. Site rengini MUTLAKA detaylarda kullan (kiyafet, ekipman, aksan)
3. Gorsel boyutlari:
   - Hero: 1472x832 (yatay)
   - Service: 1024x1024 (kare)
   - Blog: 1472x832 (yatay)

// Site rengi #f97316 ise:
"...worker wearing orange safety vest..."

7

TASARIM KURALLARINA UY

Bu dokumandaki tum tasarim kurallarini uygula:

Container

1280px altinda %100 + padding

Subheader

Minimal (gradient YOK)

Ikon Hover

Thin → Solid (card hover'da)

Dark Mode

FOUC prevention + Alpine state

8

TEST VE CACHE TEMIZLE

Islem tamamlaninca cache temizle ve tum sayfalari test et.

// Cache temizleme:
php artisan cache:clear
php artisan view:clear
php artisan responsecache:clear

// Test edilecekler:
[ ] Homepage gorunumu
[ ] Dark/Light mode gecisi
[ ] Mobil gorunum (320px - 768px)
[ ] Tum sayfa linkleri
[ ] Form calismalari
[ ] Gorsel yuklemeleri

KRITIK UYARILAR - BUNLARI ASLA YAPMA!

Modules icinde tema dosyasi

Her sey resources/views/themes/ icinde!

Standalone dosya (DOCTYPE)

Sadece @extends kullanan dosyalar!

Settings fallback deger

setting('x') ?: 'varsayilan' YAPMA!

Hardcode if/else icerik

Tum icerikler DB'den gelmeli!

Leonardo gorselsiz icerik

Her sayfa/hizmet gorsel icermeli!

Site renksiz gorsel

Leonardo'da site rengi ZORUNLU!

Hizli Referans Tablosu

Gorev	Kaynak	Dokuman Bolumu
Tema klasor yapisi	`resources/views/themes/t-{id}/`	Tek Dosya Prensibi
Sayfa icerikleri	`pages.body (HTML)`	Icerik Olusturma
Hizmet icerikleri	`services.body (HTML)`	Service Modulu
Gorsel uretimi	`Leonardo AI`	Leonardo AI
Site ayarlari	`settings tablosu`	Settings Pattern
Logo yonetimi	`LogoService`	Logo Service

TASARIM TEMELLERI

Kurumsal Web Sitesi Standartlari

v25 YENİ!

ANA HEDEF

Profesyonel, duzenli ve sektore uygun kurumsal web sitesi.

Temiz Layout

Okunabilir Tipografi

Tutarli Spacing

Modern, profesyonel ve premium ama sakin hissettirmeli.

KULLANILACAK TEKNOLOJILER

Tailwind CSS v4 (CDN)

Ana stil framework'u

Alpine.js

Interaktivite

Ek Kutuphaneler (Gerektiginde)

Swiper GSAP AOS Lottie

RENK SISTEMI

CSS custom properties (degiskenler) ile renk sistemi kur.

/* CSS Custom Properties */
:root {
    --color-primary: #f97316;     /* Ana renk */
    --color-secondary: #0ea5e9;  /* Ikincil renk */
    --color-accent: #8b5cf6;     /* Vurgu rengi */
    --color-neutral-50: #f8fafc; /* Notr tonlar */
    --color-neutral-900: #0f172a;
}

UYARI: Renkleri TUTUMLU kullan! Renk cumbusune cevirme. Sektore uygun ve marka renklerine uygun renk psikolojisi uygula.

IKON SISTEMI

FontAwesome Pro kullan:

fa-thin

fa-light

VARSAYILAN

fa-regular

fa-solid

HOVER'DA

fa-duotone

KURAL: Varsayilan ince stiller (fal), ANA CARD'a hover yapilinca solid'e (fas) gecis - animasyonlu!

LAYOUT VE BOSLUK

Section'lar

Tam genislik (fluid)

Icerik

max-width container icinde

RESPONSIVE & DARK MODE

Mobil Oncelikli

Mobile-first responsive

Mobil Menu

Hamburger menu

Dark/Light Mode

PREMIUM - MUTLAKA!

HEADER & MEGA MENU

COK ONEMLI!

Header cok onemli; mumkunse mega menu yapisi olsun.

MEGA MENU DROPDOWN ORTALAMA (KRITIK!)

Mega menu dropdown'lari MUTLAKA parent linkin altinda ORTALI acilmali!

/* Dropdown Ortalama CSS */
.mega-dropdown {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

HOVER EFEKTLERI

DOGRU

• Yumusak renk gecisleri
• Subtle shadow degisiklikleri
• Ikon degisimi (thin → solid)
• Border renk degisimi

YANLIS

• ~~Kartlar ziplamasin~~
• ~~Scale ile yaklasmasin~~
• ~~transform: scale(1.05)~~
• ~~Abartili animasyonlar~~

ZENGIN FOOTER

SART!

Footer zengin olmali, asagidaki ogeleri icermeli:

Iletisim Bilgileri

Sosyal Medya

Hizli Erisim

Mini Site Haritasi

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

1.5 TEK DOSYA PRENSIBI

ALTIN KURAL!

Ana Felsefe

Modullerin icinde tema dosyasi OLMAYACAK! Her sey resources/views/themes/t-{id}/ icinde olacak. Anasayfa (homepage.blade.php) haric tum icerikler veritabanindan cekilecek.

YANLIS: Modul Icinde Tema

// YAPMA! Modul icinde tema dosyasi
Modules/Page/resources/views/themes/t-3/
Modules/Service/resources/views/themes/t-3/
Modules/Blog/resources/views/themes/t-3/

// Bu yaklasim KALDIRILDI!

DOGRU: Tek Konum

// DOGRU! Tek yerde tum tema
resources/views/themes/t-3/
├── layouts/
│   ├── app.blade.php
│   ├── header.blade.php
│   └── footer.blade.php
└── homepage.blade.php

// Diger icerikler DB'den!

Icerik Kaynagi Tablosu

Icerik	Kaynak	Dosya
Anasayfa	BLADE	`homepage.blade.php`
Page (Sayfalar)	DATABASE	`pages tablosu`
Service (Hizmetler)	DATABASE	`services tablosu`
Blog (Yazilar)	DATABASE	`blogs tablosu`
Portfolio	DATABASE	`portfolios tablosu`
Announcement	DATABASE	`announcements tablosu`

1.6 Ikon Hover Efekti

UI/UX KURALI

Kural

Ikonlar varsayilan olarak thin (light) olacak. Ikon'un bulundugu ana card'a (genis alan) hover yapildiginda ikon solid olacak. Efekt net anlasilsin diye genis alan uzerinde tetiklenecek.

Varsayilan (Thin/Light)

fa-light / fal

Hover'da (Solid)

fa-solid / fas

CSS Implementasyonu

/* Varsayilan: Thin (Light) ikonlar */
.card-icon {
    font-family: "Font Awesome 6 Pro";
    font-weight: 300; /* light/thin */
    transition: font-weight 0.2s ease;
}

/* Hover: Card'a hover yapilinca Solid */
.card:hover .card-icon,
.service-card:hover .card-icon,
.feature-card:hover .card-icon {
    font-weight: 900; /* solid */
}

/* ONEMLI: Hover CARD uzerinde, ikon uzerinde degil! */

Blade Kullanim Ornegi

{{-- Service Card Ornegi --}}
<a href="{{ $service->url }}"
   class="service-card group block bg-white dark:bg-gray-800 rounded-xl p-6
          shadow-sm hover:shadow-lg transition-all">

    {{-- Ikon: Varsayilan thin, hover'da solid --}}
    <div class="w-16 h-16 bg-primary-100 dark:bg-primary-900/30 rounded-xl
                flex items-center justify-center mb-4">
        <i class="fal fa-{{ $service->icon ?? 'cog' }} text-3xl text-primary-600
              card-icon group-hover:font-black"></i>
    </div>

    <h3>{{ $service->title }}</h3>
    <p>{{ $service->excerpt }}</p>
</a>

{{-- Tailwind Alternatifi (group-hover ile) --}}
<i class="fal fa-cog group-hover:fas"></i>

Font Awesome Agirlik Tablosu

fal

Light (300)

far

Regular (400)

fas

Solid (900)

fat

Thin (100)

1.7 Animated Gradient Text

HERO & BASLIKLAR

Kural

Hero basliklarinda ve onemli ana basliklarda animated gradient text kullanilacak. Gradient renkleri farkli ve belirgin olmali, animasyon gorunur sekilde hareket etmeli. Renkler site temasina uygun ama birbirinden ayirt edilebilir olmali.

Canli Ornek (Hero Basligi)

Endustriyel Cozumler

Renkler: Cyan → Emerald → Cyan (hareket ediyor)

Onerilen Gradient Paletleri

Endustriyel (ixtif tarzı)

#22d3ee → #34d399 → #22d3ee

Cyan → Emerald

Modern / Tech

#3b82f6 → #8b5cf6 → #ec4899

Blue → Violet → Pink

Sicak / Enerji

#f97316 → #eab308 → #ef4444

Orange → Yellow → Red

Dogal / Organik

#10b981 → #06b6d4 → #22c55e

Emerald → Cyan → Green

CSS Implementasyonu

/* ===== ANIMATED GRADIENT TEXT ===== */

/* Ana Gradient Text Class */
.gradient-text-animated {
    background: linear-gradient(
        90deg,
        #22d3ee,   /* cyan-400 */
        #34d399,   /* emerald-400 */
        #a78bfa,   /* violet-400 */
        #22d3ee    /* tekrar - seamless loop */
    );
    background-size: 300% auto;  /* Genis boyut = yumusak gecis */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 4s linear infinite;
}

/* Alternatif: Daha hizli hareket */
.gradient-text-fast {
    animation: gradientFlow 2s linear infinite;
}

/* Alternatif: Yavas ve zarif */
.gradient-text-slow {
    animation: gradientFlow 6s linear infinite;
}

/* Keyframes */
@keyframes gradientFlow {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

Blade Kullanim Ornegi (Hero Section)

{{-- Hero Section --}}
<section class="min-h-screen flex items-center justify-center bg-slate-900">
    <div class="text-center">

        {{-- Ana Baslik: Animated Gradient --}}
        <h1 class="text-5xl md:text-7xl font-bold mb-6 gradient-text-animated">
            {{ setting('site_name') }}
        </h1>

        {{-- Alt Baslik: Statik veya yavas gradient --}}
        <p class="text-xl md:text-2xl text-slate-400 mb-8">
            {{ setting('site_slogan') }}
        </p>

        {{-- CTA Butonlari --}}
        <div class="flex gap-4 justify-center">
            <a href="/hizmetler" class="btn-primary">Hizmetlerimiz</a>
            <a href="/iletisim" class="btn-secondary">Iletisim</a>
        </div>
    </div>
</section>

Onemli Kurallar

Gradient'te en az 3 farkli renk kullan (tek renk tonu degil!)
Renkler birbirinden ayirt edilebilir olmali (#fff → #eee YANLIS)
Son renk = ilk renk (seamless loop icin)
background-size: 300% minimum (200% cok hizli gorunur)
Animasyon suresi: 3-6 saniye ideal (cok hizli = rahatsiz edici)
Her yerde KULLANMA! Sadece hero ve onemli basliklar icin

Site Rengine Gore Gradient Secimi

Site Ana Rengi	Onerilen Gradient
Turuncu (#f97316)	Orange → Yellow → Red → Orange
Mavi (#3b82f6)	Blue → Cyan → Violet → Blue
Yesil (#10b981)	Emerald → Teal → Cyan → Emerald
Kirmizi (#ef4444)	Red → Orange → Pink → Red
Mor (#8b5cf6)	Violet → Fuchsia → Blue → Violet

2. View Path Oncelik Sirasi

KRITIK!

DOGRU Oncelik Sirasi (ThemeService.php)

1

resources/views/themes/{tema}/{view}

Ana tema klasoru - TEK DOSYA PRENSIBI - ONCELIKLI!

2

Modules/{Modul}/views/themes/{tema}/{view}

Modul ici tema - Fallback (resources'da yoksa)

3

Modules/{Modul}/views/themes/simple/{view}

Simple tema fallback - MODUL ICINDE

4

{modul}::front.{view}

Son care - Modul front klasoru

3. Container Pattern (Responsive Standart)

GUNCELLENDI v22

Basit Anlatim

Container 1280px altinda %100 genislik, padding ile kenarlarda bosluk. 1280px+ sabit genislik.

Responsive Container Tablosu

Breakpoint	Ekran	Container	Padding
`0-767px`	Mobil	100%	`1.25rem` (20px)
`768px+`	Tablet	100%	`2rem` (32px)
`1024px+`	Laptop	100%	`3rem` (48px)
`1280px+`	Desktop	1280px	`2rem` (32px)
`1536px+`	Large	1536px	`2rem` (32px)

app.blade.php'ye Eklenecek CSS

/* Container full width until xl breakpoint */
.container {
    max-width: 100% !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
}
@media (min-width: 768px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
@media (min-width: 1024px) {
    .container {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}
@media (min-width: 1280px) {
    .container {
        max-width: 1280px !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}
@media (min-width: 1536px) {
    .container {
        max-width: 1536px !important;
    }
}

Neden !important?

Tailwind CDN kullanildiginda inline class'lar (px-4, md:px-2 gibi) CSS'i override edebilir. !important ile tutarlilik saglanir.

{{-- HTML'de bu class'lar CSS'i override eder --}}
<div class="container mx-auto px-4 md:px-2">

{{-- CSS'te !important ile override onlenir --}}
.container { padding-left: 2rem !important; }

ESKI (Tailwind Varsayilan)

• 1024px ekranda max-width: 1024px
• Her iki tarafta 100px+ bosluk
• Alan israfi

YENI (v22 Standart)

• 1280px altinda %100 genislik
• Sadece padding kadar bosluk
• Tam alan kullanimi

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 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

1

Top Bar

Telefon, WhatsApp, sosyal medya

2

Main Header (sticky)

Logo, navigasyon, dark mode toggle

3

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. Dinamik Route Sistemi

Tenant bazli URL yonetimi - HARDCODE YASAK!

Basit Anlatim

Her tenant (site) kendi URL yapisini ozellestirebilir. Ornegin Blog modulu varsayilan /blog yerine /haberler olabilir. Bu yuzden ASLA href="/blog" gibi hardcode URL yazilmaz!

ASLA YAPMA!

// YANLIS - Hardcode URL
<a href="/blog">Blog</a>
<a href="/hizmetler/web-tasarim">...</a>
<a href="/sayfa/hakkimizda">...</a>

// DOGRU - Dinamik URL
<a href="{{ module_locale_url('Blog', 'index') }}">...</a>
<a href="{{ $service->getUrl() }}">...</a>
<a href="{{ $page->getUrl() }}">...</a>

Slug Key Referansi

Modul	Key	Varsayilan
`Blog`	`index`	`blog`
`Service`	`index`	`hizmetler`
`Page`	`show`	`sayfa`
`Portfolio`	`index`	`portfolyo`

14. Leonardo AI Gorsel Uretim Sistemi

10 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 10 Altin Kural ile gercek fotograf gibi gorunen detayli bir talimata cevirir.

10 ALTIN KURAL FORMULU

1 Photo Type - "Photo of", "Editorial photograph"

2 Subject + Action - Mikro hikaye

3 Environment - Mekan + zaman

4 Camera Angle - Cekim acisi

5 Composition - Rule of thirds

6 Lighting - Golden hour, Rembrandt

7 Camera + Lens - Canon EOS R5, 85mm f/1.4

8 Film Stock - Kodak Portra 400

9 Mood - Atmosfer + duygu

10 Post-Processing - Teal and orange grading

KURAL 12: SITE RENGI ENTEGRASYONU

ZORUNLU!

Leonardo AI gorsel uretirken, site rengi MUTLAKA detaylarda kullanilacak!

Site Rengi Kullanim Alanlari

• Calisanin kiyafetinde (yelek, tulum, baret)
• Makine/ekipman detaylarinda
• Arka plan aksan ogeleri
• Logo veya marka elemanlari
• Isik yansimalari ve vurgular

Prompt Ornegi

// Site rengi: #f97316 (turuncu)

"...worker wearing orange safety vest,
 orange accents on machinery,
 orange warning lights..."

// Renk site ayarlarindan alinir!

Hero

1472x832 (yatay)

Service

1024x1024 (kare)

Blog

1472x832 (yatay)

15. Icerik Olusturma Sistemi

Anasayfa Haric Tum Sayfalar - DB Body Prensibi

YENI v21!

ALTIN KURAL: DB BODY PRENSIBI

HARDCODE IF/ELSE KESINLIKLE YASAK!

Tum sayfa icerikleri veritabanindaki pages.body alaninda saklanir.

show.blade.php dosyasi sadece @parsewidgets($body) ile icerigi render eder.

YANLIS

@if($slug == 'hakkimizda')
    <div>Hakkimizda icerigi...</div>
@elseif($slug == 'iletisim')
    <div>Iletisim icerigi...</div>
@endif

DOGRU

{{-- show.blade.php --}}
<div class="page-content">
    @parsewidgets($body ?? '')
</div>

{{-- Icerik DB'de! --}}

Sayfa Yapisi (Anatomy)

Her sayfa birbiri ardina gelen section'lardan olusur. Her section'in kendine ozgu arka plan rengi ve ic yapisi vardir.

<!-- SAYFA YAPISI -->

<section class="bg-gradient-to-br from-slate-900 via-slate-800 to-primary-900 py-20">
    <!-- HERO SECTION -->
</section>

<section class="bg-white dark:bg-dark-900 py-16">
    <!-- CONTENT SECTION 1 -->
</section>

<section class="bg-slate-50 dark:bg-dark-800 py-16">
    <!-- CONTENT SECTION 2 (alternating bg) -->
</section>

<section class="bg-gradient-to-br from-primary-600 to-primary-800 py-16">
    <!-- CTA SECTION -->
</section>

Tasarim Bilesenleri (Components)

Hero Section

Sayfa basinda gradient arka planli, buyuk baslikli bolum

bg-gradient-to-br from-slate-900 via-slate-800 to-primary-900

Stats Cards

Istatistik kartlari: 15+ Proje, 7/24 Destek vb.

grid grid-cols-2 md:grid-cols-4 gap-4

Content Grid

2 kolonlu icerik: Sol metin, sag gorsel/liste

grid md:grid-cols-2 gap-8 items-center

Values Grid

Degerlerimiz, ozellikler, avantajlar listesi

grid grid-cols-2 md:grid-cols-3 gap-6

CTA Section

Aksiyon cagirisi: "Bizimle Iletisime Gecin"

bg-gradient-to-br from-primary-600 to-primary-800

Icon Cards

Ikonlu kartlar: Misyon, Vizyon, Hizmetler

w-16 h-16 bg-primary-100 rounded-xl

Ornek: Hakkimizda Sayfasi Yapisi

Profesyonel bir hakkimizda sayfasinin bolum siralaması:

1

Hero Section

Gradient arka plan, buyuk baslik, kisa aciklama

2

Stats Cards

15+ Referans Proje, Kapsamli Hizmet, Profesyonel Kadro, 7/24 Destek

3

Hakkimizda Content

"Biz Kimiz?", Modern Yaklasimimiz, Kalite ve Guvenilirlik

4

Misyon & Vizyon

Yan yana 2 kart: Misyonumuz ve Vizyonumuz

5

Degerlerimiz

6 deger ikonlu kartlar: Bilgi, Guvenilirlik, Verimlilik, Basari, Arastirma, Mevzuat Uyumu

6

Neden Biz?

6 avantaj kartları: Uzman Kadro, Modern Teknoloji, Zamaninda Teslimat...

7

Hizmet Alanlari

Service kategorilerine linkler

8

CTA Section

"Birlikte Calisalim" - Iletisim butonu

Ornek: Iletisim Sayfasi Yapisi

1

Hero Section

Gradient arka plan, "Bizimle Iletisime Gecin" basligi

2

Iletisim Kartlari

3'lu grid: Adres, Telefon, E-posta kartlari

3

2 Kolonlu Alan

Sol: Iletisim formu (widget), Sag: Harita veya ek bilgiler

Icerik Kaynaklari

ICERIK.md Dosyalari

Her tenant icin icerik kaynagi olarak *_ICERIK.md dosyasi kullanilir:

UNIMAD_MADENCILIK_ICERIK.md - UNIMAD icerikleri
YILDIRIM_PANJUR_ICERIK.md - Yildirim Panjur icerikleri
IXTIF_ICERIK.md - ixtif icerikleri

Bu dosyalar: Hakkimizda metni, Misyon/Vizyon, Hizmet aciklamalari, SSS sorulari icerir.

Tailwind Pattern'leri

Section Arka Planlari (Alternatif)

Light Sections:

bg-white dark:bg-dark-900

Gray Sections:

bg-slate-50 dark:bg-dark-800

Hero/CTA Gradient:

bg-gradient-to-br from-primary-600 to-primary-800

Dark Footer:

bg-slate-900 dark:bg-dark-950

Spacing (py)

Hero Section	`py-20` veya `py-24`
Content Section	`py-16`
CTA Section	`py-16`
Grid Gap	`gap-6` veya `gap-8`

Typography

Section Basligi	`text-3xl md:text-4xl font-bold font-heading`
Alt Baslik	`text-xl font-semibold`
Paragraf	`text-gray-600 dark:text-gray-300 leading-relaxed`
Badge/Label	`text-primary-600 font-semibold text-sm uppercase tracking-wider`

Veritabanina Kayit

SQL ile Icerik Guncelleme

-- Tenant DB'ye baglan
USE tenant_unimadmadencilik_8a32cf;

-- Hakkimizda sayfasini guncelle
UPDATE pages
SET body = '{"tr": "<section class=\"...\">...HTML ICERIK...</section>"}'
WHERE slug->>'$.tr' = 'hakkimizda';

-- veya PHP Tinker ile
$page = Page::where('slug->tr', 'hakkimizda')->first();
$page->body = ['tr' => $htmlContent];
$page->save();

IPUCU: JSON Escape

HTML'i JSON'a koyarken " karakterlerini \" ile escape et. Tailwind class'larinda ' kullanilabilir.

Referans Siteler

yildirimpanjur.com/page/hakkimizda

Hakkimizda sayfa yapisi referansi

unimad.tuufi.com/page/hakkimizda

UNIMAD Madencilik hakkimizda

EK A: Page Modulu Kullanimi

Page modulu, sitedeki statik sayfalari yonetir: Hakkimizda, Iletisim, Gizlilik Politikasi vb.

Veritabani Alanlari

`title`	JSON	Sayfa basligi
`slug`	JSON	URL slug
`body`	JSON	HTML icerik (TUM TASARIM BURADA!)
`is_homepage`	BOOL	Anasayfa mi?

EK B: Service Modulu Kullanimi

Service modulu, sirketin sundugu hizmetleri sergiler. Her hizmetin ayri sayfasi, gorseli ve kategorisi olabilir.

Media

hero - KARE 1024x1024
gallery - Ek gorseller

URL

/hizmetler/{slug}

EK C: Blog Modulu Kullanimi

Blog modulu, haber, makale ve icerik paylasimi icin kullanilir. Zamanlanmis yayinlama, kategori, etiket, FAQ ve HowTo schema destegi vardir.

YAYINDA

is_active=true, published_at=past

ZAMANLANMIS

is_active=true, published_at=future

TASLAK

is_active=false

EK D: Icerik Girisi Workflow

Kullanici icerik metnini verir, Claude sisteme girer, gorsel uretir ve media tablosuna kaydeder.

1

Kullanici Icerik Verir

ICERIK.md dosyasindan veya direkt metin

2

Claude HTML Tasarim Uretir

Tailwind ile section'lar, kartlar, gridler

3

DB Body'ye Kaydeder

pages.body JSON alanina HTML eklenir

4

Leonardo AI Gorsel Uretir ZORUNLU

10 Altin Kural + Site Rengi ile profesyonel gorsel

5

Cache Temizle & Test

php artisan cache:clear && view:clear

Modul Karsilastirma

Ozellik	Page	Service	Blog
Kategori
Etiketler
Anasayfa Olabilir
Gorsel Boyutu	1472x832	1024x1024	1472x832

SEO Management

SITE TAMAMLANINCA

Ne Zaman Eklenecek?

Site icerigi tamamlandiktan sonra SEO ayarlari yapilacak. Asagidaki detayli analizi takip et.

SEO Yonetim Analizi

SEO Management Analiz Dokumani

ixtif.com/readme/2026/01/20/seo-management-analiz/

Sitemap

Robots.txt

Meta Tags

ARSIV: Onceki Versiyonlardan Kaldirilan Bolumler

Bu bolumler v11-v15 arasinda vardi, v16'da kaldirildi. Referans icin arsivlendi.

ARSIV 1: Page Modulu Ozgurlugu

v11-v15'te vardi

Her sayfanin kendi CSS ve JS kodlarini veritabaninda saklayabilmesi. Sayfa render edilirken bu kodlar otomatik enjekte ediliyordu.

Teknik Detay

// pages tablosunda ek kolonlar:
- css (TEXT) -> Sayfaya ozel CSS
- js (TEXT)  -> Sayfaya ozel JavaScript

// Render sirasinda:
@if($page->css)
    <style>{{ $page->css }}</style>
@endif
@if($page->js)
    <script>{{ $page->js }}</script>
@endif

ARSIV 2: Istemiyorum Listesi

v11-v15'te vardi

Kullanicinin tema tasariminda ISTEMEDIGI seylerin listesi. Bu tercihler kod yazarken referans aliniyordu.

5 Maddelik Liste

Underline link stili
Link'lerde alti cizili stil istemiyorum
Odeme sorusu
"Odeme yapmak ister misiniz?" popup'lari istemiyorum
Tutarsiz bosluklar
Farkli sayfalarda farkli margin/padding istemiyorum
Zorla sidebar/CTA
Her sayfada sidebar veya CTA zorunlu olmasin
Tekrar eden icerik
Ayni bilginin birden fazla yerde gosterilmesi istemiyorum

ARSIV 3: Alpine Collapse Plugin

v11-v13'te vardi

FAQ ve accordion bilesenlerinde kullanilan Alpine.js Collapse plugin'inin yukleme sirasi KRITIK kurali.

KRITIK: Yukleme Sirasi

{{-- KRITIK SIRA! --}}

{{-- 1. ONCE Collapse plugin --}}
<script defer src="https://cdn.jsdelivr.net/npm/@alpinejs/collapse@3.x.x/dist/cdn.min.js"></script>

{{-- 2. SONRA ana Alpine --}}
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

// YANLIS SIRA = Collapse calismaz!

ARSIV 4: Root Admin Butonlari

v11-v15'te vardi

Header'da logo yaninda gosterilen root admin erisim butonlari (admin panele hizli gecis, cache temizleme vs.)

Kod Ornegi

{{-- Logo yaninda root admin butonlari --}}
@if(auth()->user()?->is_root)
    <div class="flex items-center gap-2 ml-4">
        <a href="/admin" class="text-xs bg-blue-600 px-2 py-1 rounded">
            <i class="fas fa-cog"></i> Admin
        </a>
        <a href="/cache-clear" class="text-xs bg-red-600 px-2 py-1 rounded">
            <i class="fas fa-broom"></i> Cache
        </a>
    </div>
@endif

ARSIV 5: Standalone Dosya Yasagi

v13-v15'te vardi

Tema klasorunde DOCTYPE ile baslayan bagimsiz HTML dosyalari YASAK kurali. Tum dosyalar @extends ile layout kullanmali.

YASAK: Standalone

<!DOCTYPE html>
<html lang="tr">
<head>...</head>
<body>
    ... icerik ...
</body>
</html>

DOGRU: Extends

@extends('themes.t-3.layouts.app')

@section('content')
    ... icerik ...
@endsection

Standalone Konsept Degisimi

v6 "Standalone veya @extends" - Her ikisi de gecerli

v13 Standalone YASAK - Ayri bolum eklendi

v16 Bolum tamamen kaldirildi - Kural artik dokumante edilmiyor

ARSIV 6: Karsilasilan Zorluklar & Cozumler

Sadece v10'da vardi

1. Homepage Query Hatasi

// YANLIS
Page::where('slug', 'anasayfa')

// DOGRU
Page::where('is_homepage', true)

2. Tenant Storage Path

// YANLIS
asset('storage/image.jpg')

// DOGRU
cdn('storage/tenant3/image.jpg')

3. Media Collection Isimlendirme

Collection isimleri TUTARLI olmali:
toMediaCollection('slider')
=
getMedia('slider')

4. Cache Temizleme

php artisan cache:clear
php artisan view:clear
php artisan responsecache:clear

ARSIV 7: Animated Gradient Text

Sadece v10'da vardi

Baslik metinlerine hareketli turuncu gradient efekti. Kayma animasyonu ile dikkat cekici basliklar.

CSS Kodu

.gradient-text-animated {
    background: linear-gradient(
        90deg,
        #f97316 0%,
        #fb923c 15%,
        #fdba74 30%,
        #ea580c 50%,
        #c2410c 65%,
        #f97316 80%,
        #fb923c 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

ARSIV 8: GLightbox Entegrasyonu

Sadece v7'de vardi

Galeri lightbox entegrasyonu. Gorsellere tiklandiginda buyuk boyutta gosterim.

Kullanim

{{-- CDN --}}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">
<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>

{{-- HTML --}}
<a href="buyuk-gorsel.jpg" class="glightbox" data-gallery="galeri1">
    <img src="kucuk-gorsel.jpg">
</a>

{{-- JS --}}
<script>
    const lightbox = GLightbox({ selector: '.glightbox' });
</script>

KAPSAMLI TEMA CHECKLIST

Dokumandaki TUM Maddelerin Kontrol Listesi

v25 YENİ!

SON KONTROLLER (DEPLOYMENT ONCESI)

Cache temizlendi (cache:clear, view:clear) npm run prod calisti responsecache:clear yapildi

Mobil test edildi (320px-768px) Tablet test edildi (768px-1024px) Dark/Light gecisi test edildi

SEO meta tag'lari kontrol edildi Tum linkler calisiyor Form submit'ler calisiyor