📊 Hero Slider Tasarım Taslağı

iXtif.com anasayfa hero bölümü slider dönüşümü - 4 slaytlı yapı
📅 10 Aralık 2025 🎯 Tenant: ixtif.com 👤 Hero → Slider dönüşümü

📋 Genel Bakış

🎯 Hedef

Mevcut statik hero bölümünü 4 slaytlı dinamik slider'a dönüştürmek.

Swiper.js kullanılacak, fade transition efekti ile 5 saniye aralıklarla otomatik geçiş yapacak.

✅ Kalacak Özellikler

  • ✓ Grid layout (2 kolon: sol içerik, sağ görsel)
  • ✓ Gradient animasyonlu başlıklar
  • ✓ Feature ikonları (3 adet)
  • ✓ CTA button (mavi rounded-full)
  • ✓ Responsive tasarım (mobil/tablet/desktop)
  • ✓ Dark mode desteği

🆕 Eklenecek Özellikler

  • ✓ Swiper.js slider sistemi
  • ✓ Fade transition (1s geçiş)
  • ✓ Otomatik döngü (5s aralık)
  • ✓ Prev/Next navigasyon butonları
  • ✓ Dot pagination (alt kısımda)
  • ✓ Klavye navigasyonu (ok tuşları)

🎨 4 Slayt Tasarımı

1

Slayt 1: Mevcut Hero'nun Birebir Kopyası Ana Slayt

📝 İçerik

  • Başlık: "TÜRKİYE'NİN İSTİF PAZARI"
  • Alt Başlık: "Profesyonel istif çözümleri..."
  • CTA: "Ürünleri İncele" → /shop

🎨 Tasarım

  • Background: Şu anki hero ile aynı (gradient yok)
  • Gradient Text: blue-purple-pink gradient
  • Görsel: hero.png (sağda)

✨ Feature İkonları

📦 Güçlü Stok
Zengin ürün çeşidi
🏅 Garantili Ürün
Teknik servis
🎖️ Profesyonel Ekip
Uzman danışmanlık

💡 Önemli: Bu slayt mevcut hero'nun 1:1 kopyası olacak. Text renkleri, gradient'ler, size'lar, responsive davranış - HER ŞEY aynı kalacak!

2

Slayt 2: Kiralama Hizmetleri

📝 Önerilen İçerik

  • Başlık: "KİRALAMA ÇÖZÜMLERİ"
  • Alt Başlık: "Günlük veya uzun dönem..."
  • CTA: "Kiralama Seçenekleri" → /kiralama

🎨 Tasarım

  • Background: Turuncu-sarı gradient + transparan
  • Gradient Text: orange-amber-yellow gradient
  • Görsel: Farklı ürün görseli (kiralama konsepti)

🎨 Background Gradient: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(245, 158, 11, 0.15), rgba(234, 179, 8, 0.1))

3

Slayt 3: Teknik Servis & Bakım

📝 Önerilen İçerik

  • Başlık: "TEKNİK SERVİS"
  • Alt Başlık: "7/24 saha desteği..."
  • CTA: "Servis Talep Et" → /teknik-servis

🎨 Tasarım

  • Background: Cyan-mavi gradient + transparan
  • Gradient Text: cyan-blue-indigo gradient
  • Görsel: Teknik servis konsepti

🎨 Background Gradient: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.15), rgba(99, 102, 241, 0.1))

4

Slayt 4: Yedek Parça

📝 Önerilen İçerik

  • Başlık: "YEDEK PARÇA"
  • Alt Başlık: "Tüm markalar için stokta..."
  • CTA: "Parça Sorgula" → /yedek-parca

🎨 Tasarım

  • Background: Yeşil-mint gradient + transparan
  • Gradient Text: emerald-green-teal gradient
  • Görsel: Yedek parça konsepti

🎨 Background Gradient: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(5, 150, 105, 0.15), rgba(20, 184, 166, 0.1))

⚙️ Teknik Uygulama

📂 Dosya Yapısı

# CSS (Tailwind Build)
public/css/tenant-2.css ← Mevcut (değişmeyecek)

# JavaScript (Yeni oluşturulacak)
public/themes/ixtif/js/hero-slider.js ← Swiper config

# Blade Template (Güncellenecek)
Modules/Page/resources/views/themes/ixtif/homepage.blade.php

💡 Not: Inline CSS/JS kullanılmayacak! Tüm stil ve script'ler ayrı dosyalarda olacak.

🎯 Kapsam: Bu slider SADECE homepage'de gözükecek. Diğer sayfalara etki etmeyecek.

⚡ Swiper.js Ayarları

🔄 Geçiş Efekti

  • effect: 'fade'
  • speed: 1000 (1 saniye)
  • crossFade: true

⏱️ Otomatik Oynatma

  • autoplay: true
  • delay: 5000 (5 saniye)
  • disableOnInteraction: false

🎯 Navigasyon

  • navigation: true (Prev/Next)
  • pagination: { clickable: true }
  • keyboard: true (Ok tuşları)

🔁 Döngü

  • loop: true
  • loopAdditionalSlides: 1

✨ Animasyon Sistemi

Her slayt için içerik animasyonları (staggered entry):

Başlık
Delay: 0s
Slide-left + scale
Açıklama
Delay: 0.2s
Slide-right + fade
CTA Button
Delay: 0.4s
Slide-up + elastic
Features
Delay: 0.6-0.9s
Pop-in + rotate

💡 Optimizasyon: Aktif olmayan slaytlarda animation: none ile gereksiz render önlenir.

✅ Uygulama Adımları

1
Swiper.js CDN Ekle
Layout dosyasına Swiper CSS + JS CDN linklerini ekle
2
Hero Slider JS Oluştur
public/themes/ixtif/js/hero-slider.js dosyasını oluştur, Swiper config'i yaz
3
Homepage Blade Güncelle
Mevcut hero section'ı Swiper slider yapısına dönüştür (4 slayt)
4
Permission Düzelt
Tüm yeni dosyaları tuufi.com_:psaserv 644 yap
5
Test & Cache Temizle
view:clear + responsecache:clear, browser'da tüm slaytları kontrol et
✅

Tasarım Taslağı Hazır!

Bu tasarım sizin onayınızı bekliyor. Uygun musun yoksa değişiklik yapmamı ister misin?

UYGUNDUR - Uygulamaya Geç
Değişiklik İstiyorum