Landing Page Çalışma Mantığı

muzibu.com/landing & /landing3 karşılaştırmalı analiz

v2 Güncel

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.

Landing Versiyonları Karşılaştırması

Özellik /landing /landing3
Layout layouts.landing.muzibu layouts.landing.muzibu-minimal
Sidebar Var Yok
Tasarım Stili Klasik (Coral/Pink) Modern (Purple/Pink)
Hero Gradient
→
→ →
Kart Stili Solid (bg-white/5) Glassmorphism (backdrop-blur)
Hero Height py-20 lg:py-32 min-h-screen
Sticky CTA Konumu Sol alt (sidebar yanı) Orta alt (centered)
FAQ Sayısı 15+ soru 5 soru (özet)
Stats Konumu Ayrı section Hero içinde

/landing Sayfa Bölümleri (8 Section)

Section 1

Hero

Gradient açılış, 2 CTA butonu, Unsplash görsel

Section 2

Referans Logoları

6 logo grid, grayscale hover

Section 3

Neden Muzibu?

4 avantaj kartı

Section 4

Sosyal Kanıtlar

Rakamlar (5 Yıl, 8+ Ülke, 20+ Sektör, 5M+ Şarkı)

Section 5

Referans Videoları

3 video kartı, play ikonu

Section 6

SSS (FAQ)

15+ soru, accordion toggle

Section 7

Karşılaştırma

Muzibu vs Diğerleri tablosu

Section 8

Final CTA

"Ücretsiz Deneyin" butonu

/landing3 Sayfa Bölümleri (7 Section)

Section 1

Hero Modern

Full-screen, animated gradient, glass stats kartları, badge

Section 2

Referans Logoları

6 glass-card logo, grayscale hover

Section 3

Özellikler

4 glass-card, gradient ikonlar, hover scale

Section 4

Karşılaştırma

Glass tablo, gradient header, ✓/✗ ikonları

Section 5

Müşteri Deneyimleri

3 video kartı, gradient placeholder, avatar

Section 6

SSS (FAQ)

5 glass-card accordion

Section 7

Final CTA

Full-width gradient, blur circles, "Hemen Başlayın"

—

Sosyal Kanıtlar

Hero içinde (ayrı section yok)

Teknik Detaylar

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            # Header + Sidebar layout
│   └── muzibu-minimal.blade.php    # Sadece Header 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 (Klasik)
    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 (Full-screen)
    Route::get('/landing3', function() {
        return view('landing.muzibu.main.3.index');
    })->name('muzibu.main.3');
});

/landing3 Özel CSS Özellikleri

Glassmorphism Card

background: rgba(255,255,255,0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);

Animated Gradient Text

background: linear-gradient(90deg, #FFD700, #FFA500, #FF6B00);
background-clip: text;
animation: gradient-shift 3s ease infinite;

Hero Pulse Animation

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

Centered Sticky CTA

position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);

Sabit Elementler (Her İki Sayfada)

Sticky CTA

/landing: Sol alt | /landing3: Orta alt

position: fixed

WhatsApp

Sağ alt köşe

fixed bottom-6 right-6

Telefon

Sağ alt köşe

+905326564447

Kullanılan Teknolojiler

Laravel Blade

Template Engine

Tailwind CSS

Utility-first CSS

AOS.js

Scroll Animasyonları

FontAwesome Pro

İkon Kütüphanesi

Hangi Landing Ne Zaman Kullanılmalı?

/landing Kullan

  • • Detaylı bilgi vermek istiyorsan (15+ FAQ)
  • • Ziyaretçinin sitede dolaşmasını istiyorsan (sidebar)
  • • SEO odaklı içerik için
  • • Daha az agresif satış yaklaşımı

/landing3 Kullan

  • • Google Ads kampanyaları için
  • • Hızlı karar verdirmek istiyorsan
  • • Modern, premium görünüm için
  • • Mobil odaklı kampanyalar için