# Şablon Tasarım Rehberi
### Ayris Tech — Premium Demo Sistemi

---

## Görevin

Potansiyel müşterilere gönderilecek demo siteleri için sektöre özel Next.js şablonları yazıyorsun.

Öncelik sırası: **1. Tasarım ve his → 2. Animasyon → 3. İçerik → 4. Teknik detaylar**

Müşteri linke tıkladığında ilk 3 saniyede "bu benim için yapılmış, bu çok pahalı görünüyor" hissini yaşamalı. Kod çalışıyor mu çalışmıyor mu ikinci plandır — önce göz kamaştır.

---

## Tasarım Felsefesi

### "Oha" Anı Zorunludur

Her şablonun sayfaya girince insanı duraksatan **bir imza momenti** olmalı. Bu an tasarlanmış, hesaplanmış, sektöre özgün olmalı. Genel bir animasyon değil — o sektörün ruhunu yansıtan bir hareket.

Referans seviye: **Awwwards Site of the Day**. Hedef his: "Bu siteyi kim yaptı, nasıl yaptı?"

### Tasarım Kararlarında Öncelik Sırası

```
1. Boşluk ve nefes   — section'lar arası ritim, padding cömertliği
2. Tipografi gücü    — başlıklar cesur ve büyük, hiyerarşi net
3. Fotoğraf kalitesi — her fotoğraf kompozisyon düşünülerek seçilmeli
4. Renk disiplini    — max 2-3 renk, geri kalanı siyah/beyaz/gri
5. Hareket kalitesi  — az animasyon ama her biri mükemmel
6. Detay titizliği   — hover state'ler, geçişler, micro-interaction'lar
```

### Nasıl Düşünmeli

Görseller verildiğinde şunu sor: **"Bu tasarımı 10.000 USD'ye satan ajans ne hissettirdi?"**

- Boşlukla mı ezdi? (luxury whitespace)
- Tipografiyle mi şok etti? (devasa başlık, küçük body)
- Fotoğrafla mı sardı? (fullscreen, parallax, overlay)
- Hareketle mi büyüledi? (curtain, reveal, magnetic)
- Detayla mı ikna etti? (custom cursor, subtle grain, line animation)

Cevap hangisi ise — oradan başla, diğerlerini o etrafına kur.

---

## İmza Moment Kütüphanesi

Her şablona aşağıdakilerden **en az bir** tane koy. Birden fazla koyacaksan aralarına yeterli "sessizlik" bırak.

### Sayfa Açılışı
- **Curtain reveal** — siyah ekran ortadan ikiye ayrılır, fotoğraf ortaya çıkar
- **Preloader çizgi** — ince bir çizgi soldan sağa ilerler, logo belirir, sahne açılır
- **Staggered text entrance** — başlık kelime kelime veya karakter karakter düşer
- **Scale-up reveal** — küçük merkezi bir görsel tam ekrana açılır

### Scroll Animasyonları
- **Parallax hero** — scroll ettikçe fotoğraf daha yavaş iner, metin daha hızlı çıkar
- **Sticky + akan metin** — fotoğraf sabit kalır, metin onun üzerinden akar
- **Horizontal scroll bölüm** — kartlar/menü yatay ilerler, mouse/touch ile sürüklenir
- **Pinned section** — section scroll boyunca sabit kalır, içeriği değişir (tablar gibi)
- **Text scale on scroll** — başlık küçükten büyüğe veya büyükten küçüğe dönüşür

### Hover & Mikro
- **Magnetic buton** — mouse yaklaştıkça buton sana doğru çekilir
- **Custom cursor** — varsayılan cursor kaybolur, markaya özgü daire/metin gelir
- **Image tilt** — kart hover'ında 3D perspektif eğimi (rotateX/Y)
- **Clip-path reveal** — fotoğraf hover'da yukarıdan aşağı açılır
- **Underline draw** — link hover'ında çizgi soldan sağa çizilir

### Atmosfer
- **Scrolling marquee** — sonsuz döngü metin bandı (iki yönde farklı hızda olursa daha iyi)
- **Grain texture overlay** — tüm sayfa üstünde ince film grain (opacity 0.03-0.06)
- **Ambient glow** — arka planda renk blobları yavaşça hareket eder
- **Video loop** — hero'da sessiz, döngü video (restoran, otel için)

---

## Tipografi Kuralları

Pahalı hissinin %40'ı tipografiden gelir.

```
Başlık boyutu:   clamp(48px, 8vw, 120px) — küçük ekranda küçülür, büyük ekranda büyür
Body boyutu:     16px minimum, 18px ideal
Satır yüksekliği: başlıklarda 0.9-1.0, body'de 1.6-1.8
Harf aralığı:    büyük harf başlıklarda tracking-widest, serif başlıklarda -0.02em
```

**Font kombinasyonları (sektöre göre):**
- Otel/Butik/Restoran → Playfair Display (serif) + Inter (sans) — klasik lüks
- Mimari/Kurumsal → Inter Black + Inter Regular — modern güç
- Bar/Gastro → Cormorant Garamond + Space Grotesk — sofistike
- Klinik/SaaS → DM Sans veya Sora + monospace detay — temiz güven

Başlık tek satırda yoksa **satır kırılmalarını elle kontrol et** — otomatik kırılma çirkin görünür.

---

## Renk ve Atmosfer Kuralları

### Koyu Tema (restoran, bar, otel, gastro)
- Arka plan: `#080810` veya `#0a0a0a` — tam siyah değil, hafif tonlu
- Metin: `#ffffff` + `rgba(255,255,255,0.5)` ikincil
- Aksant: firmanın ana rengi — sadece CTA, badge, vurgu için
- Fotoğraflar üstünde: `rgba(0,0,0,0.3-0.5)` overlay — direkt koymadan

### Açık Tema (klinik, mimari, kurumsal, butik)
- Arka plan: `#ffffff` veya `#f8f7f4` (hafif warm) veya `#f5f0e8` (krem)
- Metin: `#0a0a0a` veya `#1a1a1a`
- Aksant: firmanın ana rengi
- İkincil yüzeyler: `#f0f0f0` veya `rgba(0,0,0,0.04)`

### Renk Disiplini
- Ana renk: butonlar, başlık vurgusu, badge, aktif state
- İkincil renk: hover state, border, gradient ikinci noktası
- Nötr: arka planlar, kartlar, ayırıcılar
- **Başka renk yok.** Emoji veya ikonlar nötr tutulur.

---

## Fotoğraf Kullanımı

Fotoğraflar kod kadar önemli. Kötü fotoğraf iyi tasarımı mahveder.

**Unsplash koleksiyonları (sektöre göre):**
- Otel/Resort: `https://source.unsplash.com/1920x1080/?luxury,hotel,resort`
- Restoran: `https://source.unsplash.com/1920x1080/?restaurant,food,gastronomy`
- Bar: `https://source.unsplash.com/1920x1080/?cocktail,bar,dark`
- Mimari: `https://source.unsplash.com/1920x1080/?architecture,interior,modern`
- Klinik: `https://source.unsplash.com/1920x1080/?clinic,medical,clean`

**Kurallar:**
- Hero fotoğrafı her zaman `object-cover` + `object-position: center`
- Dikey fotoğraflar (portrait) kart içinde daha dramatik görünür — kullan
- Birden fazla fotoğraf varsa renk tonu tutarlı olsun (hepsi sıcak veya hepsi soğuk)
- `picsum.photos` sadece hızlı test için — final görünümde Unsplash parametreli URL kullan

---

## Animasyon Kalitesi

### Easing Değerleri
```typescript
// Smooth deceleration — genel kullanım
ease: [0.25, 0.46, 0.45, 0.94] as [number,number,number,number]

// Dramatic entrance — hero başlıklar
ease: [0.16, 1, 0.3, 1] as [number,number,number,number]

// Snappy — buton, badge, küçük elementler
ease: [0.34, 1.56, 0.64, 1] as [number,number,number,number]

// Linear — marquee, döngüler
ease: "linear"
```

### Süre Kuralları
```
Micro (hover, badge):     0.15-0.25s
Element entrance:         0.6-0.8s
Section transition:       0.8-1.0s
Page reveal / curtain:    1.0-1.4s
Marquee döngü:            20-40s (içerik uzunluğuna göre)
```

### Stagger Ritmi
```typescript
// Çocuk sayısına göre stagger ayarla
3-4 element:   staggerChildren: 0.15
5-8 element:   staggerChildren: 0.08
9+ element:    staggerChildren: 0.05
```

### Animasyon Monotonluğu Kırma
Her section aynı `fadeUp` ile başlarsa sayfa uyutur. Karıştır:
- Hero: curtain veya scale reveal
- Stats: sayaç animasyonu (AnimatedCounter)
- Kartlar: stagger + hafif x offset (soldan veya sağdan)
- Galeri: clip-path veya opacity-only (y hareketi olmadan)
- CTA section: parallax arka plan + metin fade

---

## Lenis Smooth Scroll Kurulumu

Her şablona ekle:

```typescript
"use client";
import { useEffect } from "react";

// Component içinde:
useEffect(() => {
  let lenis: any;
  import("@studio-freight/lenis").then(({ default: Lenis }) => {
    lenis = new Lenis({ duration: 1.2, easing: (t: number) => Math.min(1, 1.001 - Math.pow(2, -10 * t)) });
    function raf(time: number) { lenis.raf(time); requestAnimationFrame(raf); }
    requestAnimationFrame(raf);
  });
  return () => lenis?.destroy();
}, []);
```

---

## Section Tasarım Standartları

### Hero
- Her zaman viewport yüksekliği: `min-h-screen`
- Fotoğraf varsa: `position: absolute, inset: 0, object-fit: cover` + koyu overlay
- Başlık: clamp ile responsive, viewport'un %60-70'ini kaplamalı
- CTA buton: tek, net, aksant renkli — ikinci buton varsa ghost/outline

### Marquee Bandı (opsiyonel ama etkili)
Hero ile sonraki section arasına koy. İki yönde farklı iki satır daha güçlü görünür.

### İki Kolonlu (Split) Section
```
Sol: metin + CTA         Sağ: tall fotoğraf (aspect-ratio: 3/4)
Metin sola hizalı        Fotoğraf slight overlap (negatif margin)
```

### Kart Grid'leri
- 3'lü grid: her kart eşit, hover'da `y: -8` ve border glow
- Masonry: sadece galeri için — CSS columns veya css-grid ile
- Horizontal scroll: `overflow-x: auto`, `scrollbar-width: none`, touch-action: pan-x

### CTA Section (Son Bölüm)
En az bir kez tam genişlikte, fotoğraf arka planlı olsun. Başlık büyük, CTA tek.

---

## Tech Stack

```json
{
  "zorunlu": [
    "Next.js 14 App Router",
    "Framer Motion v11",
    "Tailwind CSS v3",
    "TypeScript strict",
    "@studio-freight/lenis"
  ],
  "gerektiğinde": [
    "Three.js / @react-three/fiber  (sadece ambient bg için, performans dikkat)",
    "react-lottie-player            (loading, boş state ikonları için)",
    "usehooks-ts                    (useWindowSize, useIntersectionObserver)"
  ],
  "yasak": [
    "jQuery",
    "Bootstrap",
    "CSS @keyframes animasyonları (Framer Motion kullan)",
    "inline style ile animasyon (transform, opacity — Framer Motion kullan)"
  ]
}
```

**Framer Motion zorunlu kurallar:**
- `ease` array'leri her zaman type assertion: `as [number,number,number,number]`
- Scroll animasyonları: `useScroll` + `useTransform`
- Section girişleri: `whileInView` + `viewport={{ once: true }}`
- Layout animasyonları: `layout` prop — yükseklik değişimlerinde kullan

---

## Kalite Kontrol Listesi

Kodu teslim etmeden önce şunları kontrol et:

**Tasarım:**
- [ ] Sayfaya girince ilk 3 saniyede "oha" dedirten bir şey var mı?
- [ ] Boşluklar cömert mi — hiçbir element birbirine yapışık değil mi?
- [ ] Başlıklar yeterince büyük mü — yarım metre uzaktan okunabilir mi?
- [ ] Renk disiplini korunuyor mu — max 3 renk var mı?
- [ ] Fotoğraflar kompozisyon olarak uygun mu?

**Animasyon:**
- [ ] Her section farklı animasyon mu kullanıyor (monotonluk yok)?
- [ ] Easing değerleri sert mi yoksa yumuşak mı? (Sert olmamalı)
- [ ] Lenis smooth scroll çalışıyor mu?
- [ ] Hover state'lerin hepsi var mı?

**Detay:**
- [ ] Demo banner sabit mi: `"Bu site demo amaçlıdır — demo.ayristech.com"`
- [ ] Mobile'da layout bozulmuyor mu?
- [ ] TypeScript hataları var mı (`any` yok)?

---

## Proje Yapısı

```
demo-ayristech/
├── app/
│   ├── page.tsx              # Showcase index
│   └── [slug]/page.tsx       # Dynamic routing
├── components/
│   └── templates/
│       └── [SektörTemplate]/
│           └── index.tsx     # Her şablon kendi klasöründe
├── data/
│   └── demos.ts              # Tüm demo verisi
└── components/ui/
    └── AnimatedCounter.tsx   # Scroll-triggered sayaç
```

Yeni şablon eklerken:
1. `components/templates/YeniTemplate/index.tsx` oluştur
2. `data/demos.ts` interface'ine yeni sektör tipini ve alanları ekle
3. `app/[slug]/page.tsx` routing'e `if (data.template === "yeni") return <YeniTemplate data={data} />;`
4. `app/page.tsx` `templateLabels`'a yeni badge ekle

---

## Müşteri Sitesi SS Analizi

Sana müşterinin mevcut sitesinin ekran görüntüleri verildiğinde şu sırayla ilerle:

### 1. İçerik Çıkarımı

Her SS'den şunları çıkar:

| Alan | Nereden Bulunur |
|---|---|
| Firma adı | Header, logo yanı, title |
| Slogan | Hero başlığı veya alt metin |
| Şehir / Adres | Footer, iletişim sayfası |
| Telefon | Header, footer, iletişim |
| E-posta | Footer, iletişim sayfası |
| Çalışma saatleri | Footer veya iletişim |
| Hizmetler | Hizmetler/servisler/poliklinikler sayfası |
| Ekip / Doktorlar | Kadro/hakkımızda sayfası |
| Yorumlar / Referanslar | Varsa ana sayfa veya ayrı sayfa |
| Sosyal medya | Footer veya header ikonları |

### 2. Mevcut Tasarımı Değerlendir

SS'lere bakarak kısaca not al:
- **Renk paleti:** Mevcut ana renk nedir?
- **Genel his:** Profesyonel mi, eski mi, amatör mü?
- **Eksikler:** Animasyon yok, mobile bozuk, fotoğraf kalitesi kötü vb.
- **Güçlü yanlar:** Korunabilecek bir şey var mı?

Bu değerlendirmeyi şablona yansıt — mevcut siteyi taklit etme, **dönüştür**.

### 3. demos.ts Formatında Çıkar

Analiz sonucunu aşağıdaki formatta hazırla, eksik alanları makul şekilde doldur:

```typescript
{
  slug: "firma-adi",          // firma adından türet, küçük harf, tire ile
  template: "klinik",         // sektöre göre seç
  firma: {
    adi: "Firma Adı",
    slogan: "SS'den alınan slogan veya uygun bir slogan üret",
    sehir: "Şehir",
    adres: "Tam adres",
    telefon: "+90 ...",
    email: "info@...",
    logoEmoji: "🏥",          // sektöre uygun emoji
    renkAna: "#______",       // mevcut sitenin ana rengi
    renkKoyu: "#______",      // daha koyu tonu
    renkAcik: "#______",      // çok açık tonu (bg için)
  },
  istatistikler: [
    { deger: "15+", etiket: "Yıllık Deneyim" },
    // SS'de rakam varsa al, yoksa sektöre uygun üret
  ],
  hizmetler: [
    { ikon: "🔬", baslik: "Hizmet Adı", aciklama: "Kısa açıklama" },
    // SS'deki hizmetler sayfasından çek
  ],
  yorumlar: [
    { yazar: "Ad Soyad", yorum: "...", puan: 5, tarih: "2024", emoji: "👤" },
    // SS'de yoksa 3 adet gerçekçi yorum üret
  ],
  // Sektöre özel alanlar — SS'den çek, yoksa üret
}
```

### 4. Şablon Seçimi

Sektöre göre hangi şablonun kullanılacağına karar ver:

| Sektör | Şablon |
|---|---|
| Klinik, hastane, sağlık merkezi | `klinik` |
| Diş kliniği, estetik | `dental` |
| Restoran, kafe, bistro | `restoran` veya `restoran2` |
| Bar, meyhane, gece kulübü | `bar` veya `bar2` |
| Otel, resort, apart | `hotel1`, `hotel2` veya `hotel3` |
| Taksi, transfer, ulaşım | `taxi` veya `taxi2` |
| Yazılım, SaaS, chatbot | `chatbot` |
| İnşaat, mimarlık, kurumsal | `kurumsal` |

Mevcut şablonlardan hiçbiri uygun değilse: **yeni şablon yaz** — TEMPLATE_BRIEF'teki tasarım kurallarına uyarak.

### 5. Antigravity'e Ver

Analiz tamamlandığında şunu söyle:

> "Bu `demos.ts` verisini kullan. TEMPLATE_BRIEF.md'deki kurallara göre `[ŞabonAdı]` şablonunu yaz. Mevcut sitenin renk paletini koru ama tasarımı tamamen modernize et. İmza moment olarak `[seçilen imza moment]` kullan."

---

## Son Not

Amaç: müşteriye link atıp "bak, senin için yaptım" diyebilmek.

**Standart değil, özel. Güzel değil, etkileyici. Çalışıyor değil, hissettiriyor.**

Eğer şablona baktığında "bu idare eder" diyorsan — yeniden başla.