Landing Page Çalışma Mantığı

muzibu.com/landing tasarım analizi

Aktif

Basit Anlatım (Herkes İçin)

Landing sayfası nedir? Google reklamlarından gelen ziyaretçilerin ilk gördüğü özel tanıtım sayfasıdır. Normal site sayfalarından farklı olarak, tek bir amaca odaklanır: Ziyaretçiyi üye yapmak.

Sayfa Nasıl Çalışır?

  1. Kullanıcı muzibu.com/landing adresine gelir
  2. Sistem routes/landing.php dosyasına bakar
  3. Buradan landing.muzibu.main.1.index view'ı çağrılır
  4. Bu view, layouts.landing.muzibu layout'unu kullanır
  5. Layout içinde header, sidebar ve ana içerik birleşir
  6. Sonuç olarak tam sayfa kullanıcıya gösterilir

Neden önemli? Bu yapı sayesinde farklı kampanyalar için farklı landing sayfaları oluşturabilirsiniz (/landing2, /landing3 gibi) ve her birinin performansını ayrı ayrı ölçebilirsiniz.

Teknik Detaylar (Geliştiriciler İçin)

Dosya Yapısı 

routes/
├── landing.php                          # Route tanımları

resources/views/
├── landing/
│   └── muzibu/
│       └── main/
│           ├── 1/index.blade.php    # /landing (Sidebar ile)
│           ├── 2/index.blade.php    # /landing2 (Minimal)
│           └── 3/index.blade.php    # /landing3 (Modern)
├── layouts/landing/
│   ├── muzibu.blade.php               # Ana layout (header+sidebar)
│   └── muzibu-minimal.blade.php       # Minimal layout
└── themes/muzibu/components/
    ├── header.blade.php               # Header component
    └── sidebar-left.blade.php         # Sol sidebar

Route Yapısı 

// routes/landing.php
Route::name('landing.')->group(function() {
    // /landing → Sidebar ile
    Route::get('/landing', function() {
        return view('landing.muzibu.main.1.index');
    })->name('muzibu.main.1');

    // /landing2 → Minimal
    Route::get('/landing2', function() {
        return view('landing.muzibu.main.2.index');
    })->name('muzibu.main.2');

    // /landing3 → Modern
    Route::get('/landing3', function() {
        return view('landing.muzibu.main.3.index');
    })->name('muzibu.main.3');
});

Layout Grid Sistemi

Header row-start-1 lg:col-span-2
Sidebar 220px
Main Content overflow-y-auto

Grid: grid-rows-[56px_1fr] lg:grid-cols-[220px_1fr]

Sayfa Bölümleri (Sections)

1. Hero Section

Açılış bölümü, ana mesaj ve CTA butonları

  • Gradient: #ff6b6b → #e91e63
  • Unsplash görsel
  • 2 CTA butonu

2. Referans Logoları

Güven oluşturan marka logoları

  • 6 logo grid
  • Grayscale hover efekti

3. Neden Muzibu?

4 avantaj kartı

  • %100 Yasal Güvence
  • Kapsamlı Müzik
  • Kolay Kurulum
  • Kesintisiz Akış

4. Sosyal Kanıtlar

Rakamlarla güven

  • 5 Yıl Tecrübe
  • 8+ Ülke
  • 20+ Sektör
  • 5M+ Şarkı

5. Referans Videoları

Müşteri testimonial videoları

  • 3 video kartı
  • Play ikonu

6. SSS (FAQ)

Accordion ile sık sorulan sorular

  • 15+ soru
  • Toggle accordion

7. Karşılaştırma Tablosu

Muzibu vs Diğerleri

  • 4 satırlık tablo
  • Checkmark/X

8. Final CTA

Son aksiyon çağrısı

  • Ücretsiz Deneyin butonu

Sabit Elementler (Fixed/Sticky)

Sticky CTA

Sol alt köşe (Desktop)

position: fixed; bottom: 20px; left: 260px;

WhatsApp

Sağ alt köşe

fixed bottom-6 right-6

Telefon

Sağ alt köşe (WhatsApp üstü)

+905326564447

Kullanılan Teknolojiler

Laravel Blade

Template Engine

Tailwind CSS

Utility-first CSS

AOS.js

Scroll Animasyonları

FontAwesome Pro

İkon Kütüphanesi

Önemli Notlar