417 lines
15 KiB
Markdown
417 lines
15 KiB
Markdown
# Ş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.
|