🚀

Claude Code Rehberi

Landing Page

Tek sayfa, tek amaç — ürün lansmanı veya kampanya.

Kolay 1-3 saatÖrnek: Ürün lansmanı, e-kitap, etkinlik

Landing page (varış sayfası), tek bir hedefe odaklı tek sayfalık sitedir: ürün lansmanı, kayıt formu, e-kitap indirme, etkinlik. Tüm dikkat tek bir CTA'ya (call-to-action) yönelir. Modern landing page = hero + sosyal kanıt + özellikler + fiyat (varsa) + SSS + CTA. Claude Code ile 1-3 saatte yapılabilir; tasarım hazır component'ler (hero, testimonial slider, video player) kullanır.

Kim İçin Uygun?

Yeni ürün lansmanlayan girişimciler
E-kitap, kurs, etkinlik satanlar
Ad'lardan trafik alanlar (Meta, Google)
Lead magnet ile e-posta toplayanlar

Tipik Özellikler

Landing Page için olmazsa olmazlar

Hero + büyük başlık

İlk 3 saniyede 'ne, kim için, niye' cevaplanır.

Video / görsel slider

Ürünü göster — animasyonlu slider veya autoplay video.

Sosyal kanıt bölümü

Müşteri yorumları, logo bar, sayısal kanıt (kullanıcı sayısı).

Özellik kartları (3-6)

İkon + başlık + 1 cümle. Tarama dostu.

Fiyatlandırma (opsiyonel)

Tek paket veya 3 paket karşılaştırma tablosu.

SSS bölümü

5-8 soru, accordion. Itirazları gider.

CTA tekrarı (3+ kez)

Hero'da, ortada, sonda — aynı buton, aynı renk.

Form / pop-up

E-posta yakalama; n8n veya Mailchimp'e gönder.

Önerilen Yığın

Next.js 14 + Tailwind Framer Motion (animasyon) Swiper.js (slider) react-player (video) Vercel (deploy) Mailchimp veya Resend (form)

Adım Adım Kurulum

6 adımda yayında

Brief + marka kit (15 dk)

Tek paragrafta: ürün, ana fayda, hedef kitle, marka rengi (2-3 HEX), font tercihi, CTA metni. Notion'a yaz.

Claude Code başlat (10 dk)

Terminal: 'claude' → 'Next.js 14 + Tailwind ile landing page kur. Hero, 6 özellik, 3 testimonial, fiyat, SSS, CTA, footer.'

$ claude "Next.js 14 App Router + Tailwind ile landing page kur. Yapı: Hero (gradient bg, h1 + lede + 2 CTA), 6 özellik kartı, testimonial slider (Swiper), fiyat tablosu, SSS accordion, footer. Marka rengi: [HEX1], [HEX2]. Mobile-first."

İçerik üretimi (20-40 dk)

Her bölüme: 'Bu hizmet için 3 testimonial + 6 özellik + 8 SSS yaz'. Claude AI ile üret, sen düzenle.

Video / slider ekle (15 dk)

Ürün gösterimi için: 'Hero altına Swiper.js ile 4 slaytlı video carousel ekle.' Aşağıdaki Video Slider rehberini takip et.

SEO + analytics (10 dk)

'Tüm meta + OG image + favicon + sitemap + GA4. WebPage JSON-LD ekle.'

Vercel deploy (10 dk)

GitHub'a push, Vercel'e bağla, custom domain. Form testleri yap.

Önemli · Video Slider Rehberi

Landing Page'da Video / Slider Nasıl Yapılır?

Landing page'lerde 'ürün nasıl çalışıyor' sorusunun en güçlü cevabı = otomatik oynayan video carousel. Swiper.js ile 30 dakikada kurulur.

Swiper paketi kur

Terminal'de proje klasöründe:

npm install swiper

Video'ları hazırla

MP4 format, max 5MB her biri. 4 video: ana özellik, ekran kaydı, müşteri yorumu, demo. /public/videos/ klasörüne koy.

Component oluştur

Claude'a sor: 'Swiper ile autoplay video carousel component yaz. 4 slayt, 5 sn'de bir geçiş, mute autoplay, controls, hover'da dursun.'

"use client";
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';

export function VideoSlider() {
  return (
    <Swiper
      modules={[Autoplay, Pagination, Navigation]}
      autoplay={{ delay: 5000, disableOnInteraction: false }}
      pagination={{ clickable: true }}
      navigation
      loop
      className="rounded-2xl overflow-hidden"
    >
      {[1,2,3,4].map((i) => (
        <SwiperSlide key={i}>
          <video
            src={`/videos/demo-${i}.mp4`}
            autoPlay muted loop playsInline
            className="w-full aspect-video object-cover"
          />
        </SwiperSlide>
      ))}
    </Swiper>
  );
}

Sayfaya ekle

page.tsx'e import et: `import { VideoSlider } from '@/components/VideoSlider'`. Hero altına yerleştir.

Lazy loading + poster

Performans: her video'ya poster (thumbnail) ekle, preload="metadata". Lighthouse skoru korunur.

<video poster="/videos/poster-1.jpg" preload="metadata" />

Mobile için fallback

Mobilde otomatik oynama bazı tarayıcılarda kapalı. Çözüm: muted + playsInline + autoplay. Bunlar zorunlu — eksikse iOS'ta oynamaz.

Hazır Promptlar

Claude Code'a Yapıştır

Köşeli parantezleri kendi içeriğinizle değiştirin.

Landing page iskelet

Aç ▾

Next.js 14 + Tailwind + TypeScript ile landing page kur.

Ürün: [ÜRÜN ADI - tek cümle değer]
Hedef: [eposta toplama / satış / kayıt]
Marka rengi: [HEX]

Yapı:
1. Hero (gradient bg, h1 100px, alt başlık, 2 CTA, sağda hero görsel/video)
2. Logo bar (5 şirket logosu — 'çalıştığımız markalar')
3. 6 özellik kartı (3 grid, ikon + başlık + 2 cümle, lucide-react ikon)
4. Testimonial slider (Swiper.js, 3 yorum, autoplay 6sn)
5. Demo video carousel (4 slayt, autoplay)
6. Fiyat tablosu (3 paket, popüler vurgu)
7. SSS accordion (8 soru)
8. Final CTA (büyük, 'hemen başla' tarzı)
9. Footer (3 sütun, sosyal medya)

Mobile-first responsive. Lighthouse 95+ hedef. Hero'da WebP image.

Form + n8n entegrasyonu

Aç ▾

Hero'daki forma şu fonksiyonalite ekle:

- 2 alan: e-posta + isim
- Client-side validation
- Submit → /api/lead endpoint
- Endpoint n8n webhook'una POST atsın:
  https://n8n.example.com/webhook/lead-magnet
- Body: { email, name, source: 'landing-hero', timestamp }
- Loading + success + error states
- Honeypot anti-spam alanı
- localStorage'a kaydet (zaten gönderildiyse form gösterme)
- Success: 'E-kitap 3 dk içinde mail kutunda' mesajı + confetti animasyon

Animasyon paketi

Aç ▾

Sayfaya scroll-driven animasyon ekle:

- Hero: kelime kelime fade-in (200ms aralıklı)
- Özellik kartları: viewport'a girince yukarıdan kayarak gelsin (Framer Motion 'whileInView')
- Testimonial slider: hover'da büyüsün
- CTA butonları: pulse animasyon (subtle)
- Arka plan: hareket eden 2 büyük blur orb (cyan + violet)

prefers-reduced-motion respect et. Performans: animasyonlar GPU-accelerated (transform + opacity).

Gerçek Örnek

Bu rehberden gerçek bir vaka

Brief

E-kitap satan girişimci. PDF ürünü, fiyat 99 TL. Hedef: e-posta yakala + ödemeye yönlendir.

Sonuç

1 saatte: hero + 3 müşteri yorumu + 6 e-kitap özelliği + 5 SSS + Stripe checkout + welcome e-postası. Vercel'de canlı.

Next.jsTailwindStripe CheckoutResendVercel

Sık Hatalar

Bunlardan kaçının

Hata

Çok fazla CTA / mesaj — kullanıcı kafası karışıyor

Çözüm

Tek bir ana CTA. Tüm sayfada aynı buton metni, aynı renk. Diğerleri 'ikincil' olsun.

Hata

Hero'da video çok ağır — sayfa 5 sn yükleniyor

Çözüm

Video max 3MB, poster image zorunlu, lazy loading. Mobil için statik image fallback.

Hata

Form çok uzun — dönüşüm düşüyor

Çözüm

Sadece e-posta + isim. Detay sonra istenir. Her ek alan dönüşümü %10 düşürür.

SSS

Landing Page için sık sorular

Landing page için Next.js mi, plain HTML mi?▾

Çok basit tek sayfa için plain HTML + Tailwind CDN yeterli (15 dk yayın). Form, animasyon, dinamik içerik varsa Next.js — daha sağlam altyapı, kolay genişletme.

Hero video mu, görsel mi daha iyi?▾

Hareket var = dikkat artar. Ürünü göstermek için video > görsel. Ama performans için: video max 5MB, autoplay+mute+loop, poster image zorunlu. Mobil için statik fallback.

Dönüşüm oranı ne olmalı?▾

Trafik kaynağına göre değişir. Ad'lardan gelen soğuk trafik: %2-5. E-posta listesi: %15-25. Organik arama: %3-8. Düşük dönüşüm = CTA net değil, sosyal kanıt zayıf, fiyat itirazı çözülmemiş.