🎨 Hero Slider - Modern Tasarım Taslağı

İxtif.com anasayfası için modern, şık 4 slide'lı hero slider tasarımı
📅 10.12.2025 🎯 Tenant: ixtif.com 👤 Hero bölümünü modern slider'a dönüştür

🎯 Slider Özellikleri

📊 Teknik Özellikler

4 Slide: Her slide farklı içerik + görsel
Dotted Pagination: Altta slide göstergeleri
Progress Bar: Slide başına 5s animasyonlu bar
Dragging: Mouse/touch ile kaydırma
Lazy Loading: İlk slide hemen, diğerleri lazy
Autoplay: 5 saniyede otomatik geçiş
Loop Mode: Son slide'dan 1.'ye döner
Responsive: PC'de 3 özellik, mobile'da 4 özellik grid

📝 Slide İçerikleri

1

Slide 1: Mevcut Hero İçeriği

Başlık: TÜRKİYE'NİN İSTİF PAZARI

Alt Başlık: Profesyonel istif çözümleri, güçlü stok ve hızlı teslimat ile işletmenizin güvenilir ortağı

Görsel: hero.png (Forklift)

CTA: Ürünleri İncele → /shop

Özellikler (4 adet):

  • • Güçlü Stok - Zengin ürün çeşidi
  • • Garantili Ürün - Teknik servis
  • • Profesyonel Ekip - Uzman danışmanlık
  • • Hızlı Teslimat - Aynı gün kargo (responsive'de gizli, 4. özellik olarak görünür)
2

Slide 2: Kiralama Hizmetleri

Başlık: KİRALAMA HİZMETLERİ

Alt Başlık: Günlük ve uzun dönem forklift kiralama seçenekleriyle esneklik

Görsel: hero.png (aynı görsel, farklı içerik)

CTA: Kiralama Bilgisi Al

Özellikler: Günlük Kiralama, Uzun Dönem, Bakım Dahil, Yedek Araç

3

Slide 3: Teknik Servis

Başlık: TEKNİK SERVİS VE BAKIM

Alt Başlık: 7/24 teknik servis, periyodik bakım ve bakım anlaşmaları

Görsel: hero.png

CTA: Servis Talebi Oluştur

Özellikler: 7/24 Destek, Hızlı Müdahale, Uzman Ekip, Orijinal Parça

4

Slide 4: İkinci El Ekipman

Başlık: İKİNCİ EL EKİPMAN

Alt Başlık: Garantili ikinci el forklift ve istif makineleri uygun fiyatlarla

Görsel: hero.png

CTA: İkinci El Ürünleri Gör

Özellikler: Test Edilmiş, Garantili, Uygun Fiyat, Sıfır Gibi

🎨 Görsel Taslak

TÜRKİYE'NİN İSTİF PAZARI

Profesyonel istif çözümleri, güçlü stok ve hızlı teslimat

Güçlü Stok
Zengin ürün çeşidi
Garantili
Teknik servis
Profesyonel
Uzman ekip
Hızlı Teslimat
Aynı gün kargo

↑ Bu sadece görsel bir taslaktır. Gerçek implementasyonda Swiper.js ile tam fonksiyonel olacak.

⚙️ Implementasyon Detayları

Swiper Konfigürasyonu

  • • effect: 'fade' (yumuşak geçiş)
  • • speed: 800ms
  • • autoplay: 5000ms delay
  • • loop: true
  • • grabCursor: true (drag cursor)
  • • pagination: clickable dots
  • • navigation: prev/next arrows
  • • lazy: Slide 2-4 lazy load

Progress Bar Animasyonu

  • • Her slide değiştiğinde sıfırlanır
  • • CSS transition ile 0% → 100%
  • • 5 saniyelik animasyon
  • • Gradient renk (blue → purple)
  • • slideChangeTransitionEnd event'i dinler
  • • Mouse hover → durdur (opsiyonel)

Responsive Davranış

  • • Desktop (xl): Özellikler 3 kolonlu grid
  • • Tablet (lg): 2 kolon grid
  • • Mobile: 2x2 grid (4 özellik gösterilir)
  • • Başlık: text-5xl → text-4xl → text-3xl
  • • Görsel: Mobilde üstte, desktop'ta sağda
  • • Padding: Responsive p-4 → p-8

Performans Optimizasyonları

  • • İlk slide: loading="eager" (anında yükle)
  • • Diğer slide'lar: loading="lazy"
  • • Preload: Sonraki slide prefetch
  • • WebP: Görsel formatı
  • • Thumbmaker: thumb() helper ile optimize
  • • No Console: Production'da log yok

Tasarım Onayı

Bu tasarım taslağını onaylarsanız, implementasyona geçebilirim. homepage.blade.php dosyasını güncelleyerek 4 slide'lı modern hero slider'ı oluşturacağım.

✅ Onaylıyorum
"UYGUNDUR" yazarak implementasyona geç
⚠️ Değişiklik İstiyorum
Hangi bölümü nasıl değiştirmek istediğinizi söyleyin