Claude Code ileWeb Sitesi Geliştirme

Bu klasörde Next.js 14 (App Router) + TypeScript + Tailwind + ESLint + Prettier ile yeni bir proje başlat.

Sayfalar: /, /hakkimizda, /hizmetler, /iletisim
Ortak: Header (logo + menü + dark mode toggle), Footer (3 sütun)
Tema: Light/Dark, sistem default
Font: Inter
Renk paleti: koyu lacivert #0A1530 + altın #F59E0B vurgu

Tüm sayfalar SSG, meta etiketleri hazır, sitemap + robots dahil.
İçerik şimdilik placeholder; sonra dolduracağım.

Astro + Tailwind + MDX ile niche blog kur.

Yapı: /, /blog, /blog/[slug], /hakkimda
Blog yazıları MDX, frontmatter: title, date, description, tags, image.
RSS feed + sitemap + robots otomatik.
SEO: meta + OG + Article JSON-LD her yazıda.
Renk: minimal beyaz + bir vurgu rengi (mor).
Mobil önce, hızlı, lighthouse 95+.

Şu ürün için hero bölümü içeriği yaz:

Ürün: [ÜRÜN ADI]
Tek cümlede değer: [DEĞER]
Hedef kitle: [KIM]

3 alternatif yaz:
1. Doğrudan / fayda odaklı
2. Hikaye / duygu odaklı
3. Soru / merak uyandıran

Her biri için: H1 (60 karakter altı), 1 cümle alt başlık (140 karakter), CTA buton metni (3 kelime altı).
Türkçe, samimi ama profesyonel ton, jargon yok.

Şu hizmet/ürün için sayfasının sonuna 8 SSS hazırla:

Ürün: [ÜRÜN]
Hedef kitle: [KIM]
En sık duyduğum 3 itiraz: [LİSTE]

Her soru için:
- Net, AI Overviews tarafından alıntılanmaya uygun cevap (40-60 kelime)
- FAQPage JSON-LD schema dahil

Sorular: fiyat, süre, sonuç, geri ödeme, alternatifler, kim için uygun değil, başlama, destek.

Şu sektör için 6 inandırıcı müşteri yorumu kartı üret:

Sektör: [SEKTÖR]
Ürün/hizmet: [...]

Her kart:
- İsim (uydurma ama gerçekçi: Türk isimleri)
- Pozisyon + şirket (sektöre uygun)
- Yorum (40-60 kelime, somut metrik içersin: '%30 artış', '6 ayda', vb.)
- Yıldız sayısı (5)

NOT: Bunlar placeholder — yayına almadan önce gerçek müşterilerle değiştir.
HTML + Tailwind card grid yap.

Sayfaya tam light/dark mode sistemi ekle:

- Tailwind dark: prefix kullan
- next-themes paketi entegre et
- Header'a toggle buton (sun/moon ikon, lucide-react)
- localStorage'a kaydet
- Sistem default'u algıla
- Tüm component'leri her iki temada düzgün görünüm için kontrol et
- Toggle animasyonu yumuşak olsun (200ms)

Bu kartı glassmorphism stilinde yeniden tasarla:

- backdrop-blur-md + bg-white/10 + border border-white/20
- Hover'da: glow shadow (renk: ana brand rengi)
- İçeriği koruyacak şekilde, sadece visual katman
- Mobilde de güzel görünsün (blur fallback)
- Koyu zeminde test et

Hero bölümüne animasyon ekle:

1. Başlık: kelime kelime fade-in (200ms aralıklı)
2. Alt metin: yukarıdan kayarak gelsin (300ms gecikmeli)
3. CTA butonlar: opacity + scale (500ms gecikmeli)
4. Arka plan: yavaşça hareket eden 2-3 büyük blur orb (cyan + violet)

Framer Motion kullan. Performans için reduce-motion respect et.

Bu sayfaya tam SEO meta paketi ekle:

Sayfa: [SAYFA AMACI]
Anahtar kelime: [HEDEF KELİME]

İstediklerim:
1. <title> (60 karakter altı, anahtar kelime baş tarafta)
2. <meta description> (155 karakter, CTA içersin)
3. Canonical link
4. OpenGraph (title, description, type=website, url, image)
5. Twitter Card (summary_large_image + image)
6. Hreflang (varsa)
7. Article veya WebSite JSON-LD
8. Breadcrumb JSON-LD

Türkçe içerik için locale tr_TR. Tüm meta'lar generateMetadata fonksiyonu içinde.

Şu sayfanın SSS bölümünden FAQPage JSON-LD schema'sı oluştur:

[SSS LİSTESİNİ YAPIŞTIR]

Format:
{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [
    { "@type": "Question", "name": "...", "acceptedAnswer": { "@type": "Answer", "text": "..." } }
  ]
}

dangerouslySetInnerHTML ile script tag içinde sayfaya enjekte et.

Sayfadaki tüm <img> ve <Image> etiketlerini incele:

1. Alt etiketi olmayan veya boş olan: anlamlı Türkçe alt yaz
2. Logo, hero, ürün, ekip görselleri için ImageObject schema oluştur
3. width + height ekle (CLS önlemi)
4. loading="lazy" ekle (hero hariç)
5. Next.js Image component'ine geçir (varsa)

Çıktı: değiştirilmiş kod + her görsel için 1 satır açıklama.

Şu iletişim formunu kur:

Alanlar: ad, e-posta, telefon, mesaj (en az 20 karakter)
Validation: client-side + server-side
Submit: /api/contact endpoint'i
Endpoint:
  - n8n webhook'una POST atsın
  - Loading + success + error states
  - Honeypot anti-spam alanı
  - rate limit (IP başına 5 dk'da 1)

n8n tarafında: webhook → Resend ile e-posta gönder + Notion'a kaydet + Slack'e bildirim.
n8n workflow JSON'ını da üret.

Footer'a newsletter signup formu ekle:

- Tek input (e-posta) + 1 buton
- /api/newsletter endpoint
- Mailerlite veya Brevo API'ye gönder
- Success: 'Teşekkürler, hoş geldin e-postası 5 dk içinde gelecek'
- Error: kullanıcı dostu mesaj
- localStorage'a kaydet (zaten abone olmuşsa form gösterme)
- GDPR/KVKK için checkbox: 'pazarlama mailleri almayı kabul ediyorum'

Tek ürün için satış sayfası kur:

Ürün: [ÜRÜN ADI]
Fiyat: [TL veya USD]
Tür: dijital indirme / fiziksel / abonelik

Sayfa içeriği:
- Hero: ürün görseli + isim + fiyat + CTA
- 5 ana fayda (ikonlu)
- 3 müşteri yorumu
- SSS (5)
- Geri ödeme garantisi

Sepet yerine: 'Hemen Al' butonu → Stripe Checkout (test mode başlangıçta).
Webhook: ödeme tamamlandığında /api/stripe-webhook → kullanıcıya e-posta + ürün teslim.

Basit e-ticaret katalog sayfası kur:

- Ürün listesi (grid 3-4 sütun)
- Filtreleme: kategori, fiyat aralığı, marka
- Arama (debounced, 300ms)
- Ürün kartı: görsel + isim + fiyat + 'Sepete Ekle'
- Sepet: zustand veya context, localStorage'a kaydet
- Checkout sayfası: form + Iyzico veya Stripe

Veriler için: Supabase 'products' tablosu. Sample 10 ürün insert SQL'i de yaz.

Bu siteyi lighthouse 95+ skoruna çıkar:

1. Next.js Image component (alt + width/height + priority hero)
2. Font: next/font ile optimize
3. CSS: kullanılmayan Tailwind class'ları kaldır
4. JS: dynamic import for heavy components
5. Image format: WebP/AVIF
6. Caching headers (vercel.json)
7. Critical CSS inline (varsa)
8. Third-party script'ler defer/async

Test et, hangi alanda kaç puan, ne yapıldı raporla.

Sayfa içeriğini AI Overviews (Google AI), ChatGPT ve Claude'un alıntı yapacak şekilde optimize et:

1. Her bölümün başında 2-3 cümle özet
2. Sayısal veriler + kaynak link
3. SSS bölümü (FAQPage schema)
4. HowTo schema (adım adım içerik için)
5. Tanımlar net: "X nedir? Y'dir." formatında
6. Tablolar ve listeler yapılandırılmış
7. Yazar + datePublished + dateModified
8. llms.txt'e ekle

GEO için sayfanın hangi kelime aramasında çıkması hedefleniyor? Onu söyle, ben optimize edeyim.

Bu projeyi Vercel'e deploy etmek için hazırla:

1. .env.example dosyası (gerekli env vars listesi)
2. vercel.json (region, headers, redirects, rewrites)
3. README.md (kurulum + deploy adımları)
4. build sırasında tüm testleri çalıştır script'i (package.json)
5. Production build kontrolü (npm run build local test)
6. Custom domain DNS kayıtları örneği

Sonunda git push komutu ile auto deploy başlatma talimatı.

Bu Next.js projesine GitHub Actions ekle:

.github/workflows/ci.yml içeriği:
- Push ve PR'da: install + lint + typecheck + build + test
- main'e push'ta: yukarıya ek olarak Vercel preview deploy
- Node 20, npm cache
- Build hatasında Slack/Discord bildirim (opsiyonel)

Ek olarak .github/dependabot.yml ile haftalık güncelleme PR'ları.