Monartsoft Dijital Deneyimi

Monartsoft; web siteleri, mobil uygulamalar, otomasyon sistemleri, yapay zekâ çözümleri, özel yazılım ve dijital büyüme alanlarında hizmet veriyor. Projenin temel amacı, bu geniş yetkinlik alanını dağınık bir hizmet listesi halinde sunmak yerine, birbirleriyle çalışan teknolojik sistemler yaklaşımı altında birleştirmekti.

Site; görsel tasarım kalitesi, frontend mimarisi, responsive tasarım, erişilebilir etkileşim, adaptif WebGL, kademeli geliştirme, performans bilinci ve iş konumlandırmasının çalışan bir gösterimi olarak tasarlandı.

• Hizmet kapsamı geniş olduğu için markanın “her işi yapan genel ajans” gibi görünme riski vardı.
• 3D deneyimin içerik ve güven algısının önüne geçmemesi gerekiyordu.
• WebGL desteklemeyen veya düşük donanımlı cihazlarda deneyimin bozulmaması gerekiyordu.
• Masaüstü, tablet ve mobil için farklı kalite ve hareket kararları alınması gerekiyordu.
• Gerçek vaka çalışmaları hazır değilken sahte müşteri ve başarı verilerinden kaçınılması gerekiyordu.
• Site, teknik açıdan güçlü görünürken işletme sahiplerinin anlayabileceği açık bir dil kullanmalıydı.

• Renk: derin grafit ve lacivert yüzeyler, kırık beyaz metin, kontrollü elektrik cyan vurgular, ikincil derinlik için sınırlı elektrik mavisi, ince düşük opaklıklı yapısal kenarlar.
• Tipografi: başlıklar için Space Grotesk, gövde ve arayüz için Inter; next/font ile Türkçe glif desteği; kontrollü satır uzunluklarıyla editoryal hiyerarşi.
• Düzen: asimetrik kahraman kompozisyonu, editoryal bölüm ritmi, numaralandırılmış çözüm alanları, yapısal ayırıcılar, ölçülü köşe yarıçapları; mobil düzenler küçültülmüş masaüstü değil, bilinçli istifleme.
• Logo: onaylı Monartsoft logosu iki boyutlu marka varlığı olarak kaldı; yeniden çizilmedi, renklendirilmedi, geometriye dönüştürülmedi ve merkezi 3D nesne olarak kullanılmadı.

• Next.js App Router, TypeScript strict ve Tailwind CSS.
• Varsayılan olarak React Server Components; Client Components yalnızca etkileşim gerektiğinde.
• React Three Fiber ve Three.js yalnızca ana sayfa kahramanına izole edildi.
• Motion, rota bölünmesinin izin verdiği ölçüde ana sayfaya izole edildi.
• Temel kahraman metni ve çağrı butonları HTML olarak sunuluyor; WebGL, Client Component sınırından dinamik yükleniyor.
• Paylaşılan düzenlerde veya Server Components içinde Three.js import’u yok.
• Görsel temel fazlar için CMS, veritabanı veya backend gerekmedi; içerik tip güvenli modüllerde sunumdan ayrıldı.

Digital Core sahnesi prosedüreldir: mimari bir merkezi çekirdek, altı modüler öğe, yapısal halkalar, ölçülü enerji bağlantıları, koyu metalik malzemeler, sınırlı cyan ışıma, kontrollü ışıklandırma ve şeffaf tuval arka planı. Harici 3D varlık kullanılmaz; GLB/GLTF, doku, HDR, post-processing, parçacık, fizik, gerçek zamanlı gölge ve OrbitControls yoktur.

Kalite katmanları High, Medium, Low ve CSS fallback olarak yapılandırıldı. Cihaz piksel oranı sınırlanır; zayıf cihazlarda geometri ve ışık azaltılır; mobilde işaretçi paralaksı kapatılır; düşük kalitede hedef kare hızı düşer; performans düşüşünde kalite kademeli olarak geriler. Reduced motion, Save-Data, WebGL hatası ve bağlam kaybında CSS fallback kullanılır; kahraman ekran dışındayken ve sekme gizliyken çizim duraklatılır.

• DOM animasyonu için tek bağımlılık Motion’dır; GSAP veya smooth-scroll kütüphanesi yoktur.
• Yerel belgeleme kaydırması korunur; sayfa geçişi, scroll hijacking, sabitlenmiş kahraman veya yatay kaydırma bölümü yoktur.
• Kahraman kaydırma ilerlemesi, kare başına React state olmadan R3F sahnesine aktarılır.
• Modül ayrışması ölçülü ve geri alınabilir; işaretçi, boşta ve kaydırma dönüşümleri bir arada hesaplanır.
• Süreç bölümünde dekoratif ilerleme rayı kullanılır; dekoratif çizgiler temel içeriği gizlemeden gelişir.
• Reduced-motion kullanıcıları eksiksiz ve durağan bir deneyim alır.

• Temel içerik sunucu tarafında HTML olarak kalır; CSS Digital Core fallback başlangıç HTML’inde bulunur.
• Tuval dekoratiftir ve klavye sekmesine girmez; WebGL hatası sayfayı düşürmez; bağlam kaybı fallback’e döner.
• prefers-reduced-motion animasyonlu tuvalin mount edilmesini engeller; Save-Data CSS fallback’i korur.
• İçeriğe atla bağlantısı, focus-visible durumları ve Escape ile odak dönüşlü mobil menü mevcuttur.
• Süreç içeriği anlamsal sıralı liste olarak kalır; dekoratif hareket temel bilgi taşımaz.

• Her tamamlanan uygulama fazından sonra lint kontrolleri geçti.
• Her tamamlanan uygulama fazından sonra TypeScript tip kontrolleri geçti.
• Her tamamlanan uygulama fazından sonra üretim derlemeleri geçti.
• Deneyim, tarayıcı otomasyonuyla 320px ile 1440px arasındaki genişliklerde incelendi.
• Doğrulanan görünüm kontrollerinde ölçülen yatay taşma kalmadı.
• Reduced-motion davranışı mobil, tablet ve masaüstü genişliklerinde doğrulandı.
• İç sayfalara doğrudan ziyarette ana sayfa WebGL sahnesi başlatılmadı.
• WebGL hatası ve bağlam kaybı fallback davranışı test edildi.
• Onaylı logo kaynağı uygulama fazları boyunca bayt düzeyinde özdeş kaldı.