Main alandaki tüm bölümler, sıralama ve içerik sayıları
Muzibu ana sayfasında 5 ana bölüm bulunuyor. Kullanıcılar sayfayı açtığında yukarıdan aşağıya doğru şu içerikleri görüyor:
1. En üstte 3 filtre butonu (Tümü, Müzik, Podcast'ler)
2. Yatay kaydırmalı öne çıkan playlistler
3. Yeni Albümler bölümü (10 albüm)
4. Popüler Şarkılar listesi (10 şarkı)
5. Türlere Göre Keşfet (müzik türleri)
Neden Önemli?
Ana sayfa, Spotify tarzı modern tasarımla kullanıcıya hemen müzik keşfetme imkanı sunuyor.
Yukarıdan aşağıya doğru içerik zenginliği artıyor: Önce hazır listeler, sonra albümler,
ardından popüler şarkılar ve en son türlere göre arama.
Dosya Konumu:
Modules/Muzibu/resources/views/themes/muzibu/home.blade.php
Tasarım Sistemi:
Konum: En üstte, sabit pozisyonda (sticky top-0)
İçerik: 3 buton - Tümü (aktif), Müzik, Podcast'ler
Davranış: Yatay kaydırmalı, sayfa scroll'unda üstte kalır
Kod:
sticky top-0 bg-gradient-to-b from-spotify-dark backdrop-blur-sm z-10
Değişken: $featuredPlaylists
Görünüm: Yatay kaydırmalı kartlar
Tasarım: Renkli gradient background, hover'da play butonu
Sayı: Dinamik (backend'den gelen sayı kadar)
Stil:
min-w-[180px], gradient arka plan, hover shadow-2xl
Not: Eğer featuredPlaylists boşsa bu bölüm hiç gösterilmez.
Değişken: $newReleases
Görünüm: Grid layout (responsive)
Başlık: "Yeni Albümler" + "Tümünü göster" linki
Sayı: 10 albüm (take(10))
Responsive Grid:
Animasyon:
animate-scale-in, stagger delay (50ms * index)
Not: Eğer newReleases boşsa bu bölüm hiç gösterilmez.
Değişken: $popularSongs
Görünüm: Liste (tablo benzeri satırlar)
Başlık: "Popüler Şarkılar"
Sayı: 10 şarkı (take(10))
Satır Yapısı:
Hover Efekti:
hover:bg-spotify-green/10, sol border yeşil olur
Not: Eğer popularSongs boşsa bu bölüm hiç gösterilmez.
Değişken: $genres
Görünüm: Grid layout (responsive)
Başlık: "Türlere Göre Keşfet"
Sayı: Dinamik (tüm türler gösteriliyor)
Responsive Grid:
Kart Tasarımı:
Renk Paleti (8 gradient):
Not: Eğer genres boşsa bu bölüm hiç gösterilmez.
| Sıra | Bölüm Adı | Değişken | Görünüm | İçerik Sayısı | Özellik |
|---|---|---|---|---|---|
| 1 | Top Pills | - |
Yatay Butonlar | 3 buton | Sticky |
| 2 | Öne Çıkan Playlistler | $featuredPlaylists |
Horizontal Scroll | Dinamik | Yatay Kaydırma |
| 3 | Yeni Albümler | $newReleases |
Grid (2/3/4/5) | 10 albüm | take(10) |
| 4 | Popüler Şarkılar | $popularSongs |
Liste (Satırlar) | 10 şarkı | take(10) |
| 5 | Türlere Göre Keşfet | $genres |
Grid (2/3/4/6) | Dinamik | 8 gradient renk |
Toplam: 5 ana bölüm, 33+ içerik (3 buton + 10 albüm + 10 şarkı + dinamik playlistler ve türler)
Sayfa yüklenirken skeleton (iskelet) animasyonu gösteriliyor:
x-show="isLoading" x-cloak
Her kart sırayla belirir (delay sistemi):
style="animation-delay: {{ $index * 50 }}ms"
Her bölüm mobil → desktop'a uyumlu:
Öne çıkan playlistler koleksiyonu
Controller → View → Yatay Kaydırma
Yeni yayınlanan albümler
->take(10) ile sınırlanmış
Popüler şarkılar listesi
->take(10) ile sınırlanmış
Müzik türleri koleksiyonu
Tüm türler gösteriliyor (limit yok)
Önemli:
Eğer bir değişken boşsa (count() === 0), o bölüm hiç render edilmez.
@if(isset($variable) && $variable->count() > 0)
Muzibu ana sayfası 5 ana bölüm içeriyor ve yukarıdan aşağıya doğru şu sıralamayı takip ediyor:
Toplam 33+ içerik kullanıcıya sunuluyor (3 buton + dinamik playlistler + 10 albüm + 10 şarkı + dinamik türler).
Tasarım Spotify-inspired, modern dark mode, tamamen responsive ve animasyonlu.