Building Websites withClaude Code

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.