Sert grid, piksel tipografi ve elektrik mavisi sinyallerle kurulan WhiteGate ana sayfası.
Bir landing page değil, dönüşüm hizmetinin satış sistemi
WhiteGate ile şirketlere aktif olarak yapay zekâ dönüşüm hizmetleri sunuyoruz. Bu hizmet çoğu zaman “AI kullanalım” cümlesiyle değil; farklı mesajlarda kalan teklifler, elle taşınan raporlar, kopuk CRM ve ERP kayıtları, tekrarlanan belge kontrolleri ya da sahibinin kim olduğu görünmeyen operasyonlarla başlıyor. Bu yüzden siteyi teknoloji isimlerini sergileyen genel bir AI ajansı vitrini olarak değil, iş problemini çalışan bir sisteme çevirme biçimimizi anlatan bir satış yüzeyi olarak tasarladım.
Landing deneyiminin stratejisini, bilgi mimarisini, görsel sistemini, metinlerini, responsive davranışını ve frontend uygulamasını baştan sona yürüttüm. Ana anlatı “problem → akış → sistem → canlı kullanım” hattına dayanıyor. Ziyaretçi önce kendi operasyonundaki dağınıklığı tanıyor; ardından özel yazılım, otomasyon, AI agent, entegrasyon veya dashboard seçeneklerinin probleme göre nasıl seçildiğini ve gerçek kullanıcılarla test edilerek günlük kullanıma nasıl alındığını görüyor.
Hizmeti somutlaştıran ürün mimarisi
WhiteGate’in teklifi tek bir teknolojiye bağlı değil. Gerektiğinde web veya mobil operasyon uygulaması, müşteri portalı, yapay zekâ agentı, iş akışı otomasyonu, veri ve araç entegrasyonu ya da yönetim dashboard’u geliştiriyoruz. Site bu esnekliği rastgele bir hizmet listesi gibi göstermiyor; çözüm seçimini keşif ve kapsamlandırma sürecinin sonucu olarak konumluyor. Böylece AI her probleme eklenen sihirli bir katman değil, veri, süreç ve kabul kriterleri uygunsa kullanılan bir sistem bileşeni haline geliyor.
Ana sayfanın yanında hizmetler, çalışma sistemi, hakkımızda, yayınlar, vaka analizleri, iletişim, gizlilik ve kullanım şartları için ayrı rotalar geliştirdim. Hizmet sayfaları satın alma niyetini yakalarken vaka ve yayın yüzeyleri metodolojiyi kanıtlıyor. İletişim akışı ise ilk görüşmede problemi, mevcut araçları ve beklenen çıktıyı konuşmaya yönlendiriyor. Bu yapı, markayı yalnızca dikkat çeken bir landing’den şirketlerle gerçek proje görüşmesi başlatabilen bir platforma taşıyor.
Dağınık takip, kopuk araçlar ve geç görünen kararlar; çözümden önce problemin adını koyan üç operasyon sinyali.
Görsel dil: kurumsal AI klişelerinden uzak, teknik ve editoryal
WhiteGate için robot, sihirli parıltı, mor gradient veya jenerik dashboard estetiği kullanmadım. Görsel sistemi neredeyse siyah bir teknik grid, geniş beyaz içerik yüzeyleri, monospaced/piksel yazı, ince konstrüksiyon çizgileri ve elektrik mavisi durum sinyalleri etrafında kurdum. Arayüzdeki köşeli bloklar, numaralandırma, slash işaretleri, yön okları ve terminal benzeri mikro metinler markanın “sistem kurma” karakterini görünür hale getiriyor.
Hero’daki büyük tipografik ifade “Özel Yazılım”, “AI Agent” ve “Otomasyon” arasında çalışan bir typewriter davranışına sahip. Bu animasyon yalnızca dekorasyon değil; WhiteGate’in probleme göre farklı araç seçebilmesini tek cümlede gösteriyor. Logo şeridinde n8n, Claude, GPT, Zapier, Make ve Gemini gibi araçlar yer alırken bunları hizmetin kahramanı yapmadım. Araçlar değişebilir; kalıcı değer, şirketin iş akışını anlayıp doğru sistemi kurabilmek.
Sade görsel hiyerarşi, problemin adını ve sistemleştirme sonucunu aynı bakışta okunabilir tutuyor.
Etkileşim sistemi: anlam taşıyan hareket
Sitenin hareket dili GSAP tabanlı scroll ve metin davranışları, Webflow’dan taşınan etkileşim anatomisi ve projeye özel runtime katmanlarının birleşiminden oluşuyor. Başlıklardaki scramble geçişleri, hero typewriter’ı, hover metinleri, yetenek tabları, mobil yöntem kartları, FAQ açılımları, sayfa geçişleri ve testimonial akışı aynı görsel dil içinde çalışıyor. Hero gridindeki küçük piksel ember’lar rastgele ve düşük yoğunluklu sinyaller gibi yanıyor; kullanıcı azaltılmış hareket tercih ediyorsa bu davranışlar devre dışı kalıyor.
Buradaki önemli mühendislik kararı, çalışan slider ve responsive yapıyı her görsel fikir için yeniden yazmamak oldu. Örneğin testimonial scroll hareketini mevcut slide transformlarından bağımsız bir katman olarak uyguladım; böylece oklar, swipe davranışı ve mobil akış korunurken masaüstünde daha karakterli bir yatay hareket elde edildi. Typewriter alanında kelimeler değişirken başlık yüksekliğini ve bracket anatomisini sabitleyerek 320, 390, 479 ve 1280 piksel genişliklerde sayfa sıçramasını önledim.
Next.js uygulaması ve içerik yönetimi
WhiteGate’i Next.js ve TypeScript üzerinde üretim uygulaması olarak geliştirdim. Ana sayfa, hizmet rotaları, yayın ve vaka liste/detayları, iletişim, yasal sayfalar, 404/401 yüzeyleri, sitemap, robots ve dinamik Open Graph görseli aynı uygulama içinde bulunuyor. Eski görsel runtime’ın gerekli parçalarını korurken rota, metadata ve veri katmanını modern Next.js yapısına bağladım. Bu yaklaşım tasarımın kendine özgü hareket sistemini kaybetmeden siteyi sürdürülebilir bir içerik ve pazarlama ürününe dönüştürdü.
Sanity Studio’yu uygulamanın `/studio` rotasına entegre ettim. Ana hero metinleri, dönüşümlü kelimeler ve CTA’lar CMS üzerinden yönetilebiliyor; yayınlar ve vaka analizleri Portable Text içeriği, kapak görselleri, etiketler ve yayın tarihleriyle düzenleniyor. CMS bağlantısı geçici olarak kullanılamazsa ana sayfa statik içerikle çalışmaya devam ediyor. İletişim formu input doğrulaması ve bot tuzağından geçtikten sonra başvuruyu Sanity’ye kaydediyor; ekip başvurunun yeni, iletişime geçildi veya kapatıldı durumunu Studio içinden yönetebiliyor.
Responsive kalite, erişilebilirlik ve üretim disiplini
Masaüstündeki geniş editoryal kompozisyonu mobilde küçültmek yerine yeniden düzenledim. Navigasyon, hero başlığı, CTA genişlikleri, yöntem kartları ve uzun section heading’leri küçük ekranın çalışma mantığına göre davranıyor. Tab yapıları klavye ve dokunma kullanımını, videolar `playsInline` ve muted davranışını, hareket sistemi `prefers-reduced-motion` tercihini gözetiyor. Metin animasyonlarında ekran okuyucu için anlamlı etiketleri koruyup görsel karakterlere ayrılan katmanı sunum detayı olarak ele aldım.
Üretim tarafında TypeScript kontrolü, Next.js buildi, gerçek HTTP yanıtı, desktop/mobile ekran gözlemi ve domain üzerindeki canlı davranışı ayrı doğrulama katmanları olarak kullandım. Sanity Studio’nun production domaininde çalışması için proje kimliği ve dataset yapılandırmasının yanında credential’lı CORS origin kaydını da tamamladım. Mobil typewriter düzeltmesini kaynak, build ve canlı responsive ölçümlerle doğrulamak; tasarım ayrıntısının deploy sonrası gerçek davranışını da sahiplenmek anlamına geliyordu.
Aktif bir hizmet markasının yaşayan yüzeyi
WhiteGate bugün şirketlere yapay zekâ dönüşüm, özel yazılım, otomasyon ve entegrasyon hizmetleri sunduğumuz aktif bir iş. Bu nedenle site tamamlanıp bırakılmış bir portfolyo deneyi değil; teklifimizi keskinleştirdikçe, yeni vaka ve yayınlar ekledikçe, müşteri soruları değiştikçe gelişen yaşayan bir satış sistemi. İçerik mimarisi ve CMS bu devamlılık için, görsel dil ise onlarca benzer AI ajansı arasında nasıl çalıştığımızı ilk bakışta ayırt etmek için tasarlandı.
Bu projede üstlendiğim iş tek tek ekranların toplamından daha genişti: hizmeti konumlandırmak, şirketlerin gerçek operasyon problemlerini anlaşılır bir anlatıya çevirmek, özgün bir marka sistemi kurmak, bunu responsive ve erişilebilir çalışan koda dönüştürmek, içerik operasyonunu CMS ile sürdürülebilir kılmak ve üretimde canlı tutmak. WhiteGate, ürün tasarımı ile ticari hizmet tasarımının aynı dijital yüzeyde buluştuğu en kapsamlı marka ve frontend çalışmalarından biri oldu.
