feat: implement premium eco-futurism climate tech portal

2026-05-30 00:53:45 +03:00
parent c3944b3056
commit 44e75e50ac
22 changed files with 1920 additions and 83 deletions
@@ -0,0 +1,416 @@
+# Ş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.