🎨 Hero Slider - Modern Tasarım Taslağı v2

İxtif.com anasayfası için modern, şık 4 slide'lı hero slider tasarımı

📅 10.12.2025 🎯 Tenant: ixtif.com 👤 Kullanıcı tarafından özelleştirilmiş içerikler

🆕 v2 Güncellemesi: Slide başlıkları kullanıcı talebi ile güncellendi

🎯 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 (Güncellenmiş)

Slide 1: Teslimatlar

Başlık: TESLİMATLAR

Alt Başlık: Türkiye geneli hızlı teslimat, güçlü lojistik ve zamanında teslim garantisi

Görsel: hero.png (Forklift + lojistik vurgusu)

CTA: Teslimat Bilgisi Al

Özellikler (4 adet):

• Hızlı Teslimat - Türkiye geneli
• Aynı Gün Kargo - Hızlı sevkiyat
• Güçlü Lojistik - Profesyonel nakliye
• Zamanında Teslim - Garanti ediyoruz

Slide 2: Dünya Devi HELI Artık İXTİF'te

Başlık: DÜNYA DEVİ HELI ARTIK İXTİF'TE

Alt Başlık: Dünya çapında güvenilen HELI forklift'ler artık İXTİF güvencesiyle Türkiye'de

Görsel: hero.png (HELI marka vurgusu)

CTA: HELI Ürünleri İncele

Özellikler:

• Dünya Lideri - HELI markası
• Yüksek Kalite - Uluslararası standart
• Garantili Ürün - İXTİF güvencesi
• Geniş Yelpaze - Her ihtiyaca çözüm

Slide 3: EP'nin Büyük Dünyasına Katılın

Başlık: EP'NİN BÜYÜK DÜNYASINA KATILIN

Alt Başlık: Elektrikli palet kamyonları ve istif makineleri ile yeni nesil teknoloji

Görsel: hero.png (EP marka vurgusu)

CTA: EP Dünyasını Keşfet

Özellikler:

• Elektrikli Teknoloji - Çevre dostu
• Yenilikçi Tasarım - Modern çözümler
• Sessiz Çalışma - Konforlu operasyon
• Düşük Maliyet - Enerji tasarrufu

Slide 4: Türkiye'nin İstif Pazarı

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 (Genel vurgu - mevcut hero içeriği)

CTA: Ürünleri İncele

Özellikler:

• 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

🎨 Görsel Taslak

TESLİMATLAR

Türkiye geneli hızlı teslimat, güçlü lojistik ve zamanında teslim garantisi

Hızlı Teslimat

Türkiye geneli

DÜNYA DEVİ HELI ARTIK İXTİF'TE

Dünya çapında güvenilen HELI forklift'ler artık İXTİF güvencesiyle

EP'NİN BÜYÜK DÜNYASINA KATILIN

Elektrikli palet kamyonları ve istif makineleri ile yeni nesil teknoloji

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

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

↑ 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