Promats, universal PVC oto paspas serileri üreten bir markadır. Hedef kitlesi hem Türkiye'deki bayi ve perakendeciler hem de yurt dışındaki distribütörlerdir. Sitenin işi, ürün serilerini anlaşılır biçimde sunmak, üretim gücünü göstermek ve ziyaretçiyi doğru ürünle birlikte bir teklif talebine taşımaktır. promats.com.tr, firmanın üretimini yöneten Paspas ERP ile aynı altyapının üzerine kuruldu; web içeriği ve gelen talepler aynı yönetim merkezinden izlenir.

Proje bağlamı ve ihtiyaç

Promats'ın eski web içeriği bir hazır CMS'te duruyordu. Ürün görselleri, ürün özellikleri ve sayfa metinleri farklı biçimlerde saklanmıştı; site çalışsa da içerikleri müşteri tarafının düzenlemesi zordu. Marka aynı dönemde konumlandırmasını araca özel paspastan universal paspas serilerine çevirdi. Bu geçişte ana sayfa, ürünler ve üretim sayfalarının tamamı, müşterinin hazırladığı içerik dosyasına göre Türkçe ve İngilizce olarak yeniden yazılmalıydı.

Bizden beklenenler üç başlıktaydı: eski içeriği kaybetmeden modern bir Next.js sitesine taşımak, teklif talebini doğrudan firmanın satış sürecine bağlamak ve içerik ekibinin yazılımcıya ihtiyaç duymadan sayfaları güncelleyebileceği bir panel kurmak.

Çözüm ve kapsam

Ana sayfa

Ana sayfa, her slaytın kendi başlığını, metnini ve butonunu taşıdığı bir hero slider ile açılır: tasarım, üretim ve dayanıklılık temaları ayrı slaytlarda anlatılır. Altında ürün serileri karuseli, ürünlere giriş metni ve "Neden Promats" bölümü yer alır; bu bölümdeki rozet barı özel çizilmiş ikonlarla gösterilir.

Ürünler ve ürün detayı

Ürünler sayfası 20 paspas serisini listeler: Orbital, Maximum, Star Plus, Icon, Pars, Profesyonel, Premium, Extra Plus, Yeni Nesil ve krom varyantları gibi. Her seri kartı, görsele taşmayacak şekilde konumlanmış rozetlerle seriyi öne çıkan özelliğiyle tanıtır. Seri detay sayfasında görsel alanı, ölçü bilgileri ve şu sırayla açılan bir akordiyon bulunur: Açıklama, Teknik Özellikler, 5 Parça Tam Set, Temizlik ve Bakım, Avantajlar, Malzeme, Universal Uyum ve SSS. Sayfanın sonunda "Bilgi Alın" bloğu ziyaretçiyi teklif formuna yönlendirir.

Üretim, kurumsal ve içerik sayfaları

Üretim sayfası üretim sürecini, ürün ve malzeme geliştirmeyi, kalıp mühendisliğini, kalite kontrolü ve sevkiyatı başlıklar ve galeriyle anlatır. Hakkımızda sayfasında kurumsal kimlik, çalışma ilkeleri ve ISO 9001:2015 rozeti yer alır. İngilizce tarafta yurt dışı alıcılar için OEM Manufacturing ve Become a Partner sayfaları, ayrıca Kaynaklar (teknik makaleler), Blog, SSS, arama ve KVKK, gizlilik, çerez ve kullanım şartları sayfaları bulunur.

Teklif ve iletişim

İletişim formu iki modda çalışır. Teklif modunda ziyaretçi bir veya birden fazla seriyi seçer ve talep doğrudan ERP'nin teklif modülüne bir talep kaydı olarak düşer; satış ekibi onu ayrı bir sisteme aktarmadan teklife dönüştürebilir. Genel iletişim mesajları ise panel bildirimi ve anlık mesaj bildirimi üretir. OEM sayfasının kendi iletişim formu vardır. Teklif gönderimi ve başarıyla sonuçlanması ayrı analitik olayları olarak izlenir.

Yönetim paneli

Web içerikleri ERP panelindeki Web Sayfası ekranından yönetilir. İlk teslimde içerik ekibinin pratikte düzenleyemediği alanlar tespit edildi ve ekran bu yönde yeniden kuruldu:

• Slider ve Neden Promats formları: başlık, metin ve buton artık ayrı alanlardan girilir; sitenin beklediği HTML bu alanlardan üretilir, eski kayıtlarla birebir aynı çıktıyı verdiği testle doğrulandı.
• Sayfa içerikleri: Ürünler, Üretim ve Hakkımızda sayfaları için ham JSON yerine alan bazlı formlar; ham JSON yalnız "Gelişmiş" bölümünde kalır.
• Zengin metin editörü: Word'den yapıştırılan içerikteki gereksiz stil ve sınıflar temizlenir, yalnız izinli etiketler kalır, tehlikeli bağlantılar engellenir.
• Ürün formu: yaklaşık 30 içerik alanı, SEO alanları ve yayın durumu; ayrıca 297 kayıtlık ürün özelliklerini (tip, metin, görsel, sıra) düzenleyen bir Özellikler sekmesi.
• Galeri, menü, sabit metinler, makaleler ve tema düzenleme ekranları.
• Yayın ve indekslenebilirlik rozetleri: her ürünün yayında olup olmadığı ve SEO puanına göre indekslenmeye hazır olup olmadığı listede görünür.

Panelde yapılan her kayıttan sonra sitenin ilgili sayfaları yeniden oluşturulur; değişiklik deploy beklemeden yayına çıkar.

Teknik mimari

Site Next.js, React ve TypeScript ile yazıldı. API, ERP ile aynı Bun ve Fastify backend'inde ayrı bir web modülü olarak çalışır; veriler MySQL üzerinde ürünler, ürün özellikleri, özel sayfalar, sayfa galerisi, ana sayfa bölümleri, menü, sabit metinler, makaleler ve diller için ayrı tablolarda tutulur. Public uçlar yalnız okuma yapar; yönetim uçları kimlik doğrulama ve yönetici yetkisi ister.

Türkçe ve İngilizce içerikler dil kaydına bağlıdır ve sayfa adresleri dile göre yerelleşir (ör. /tr/uretim ve /en/production). Sitemap iki dildeki tüm sayfa, seri ve makale adreslerini üretir. Eski CMS'ten gelen farklı görsel yolu biçimleri API tarafında tek bir kuralla düzeltildi; bu düzeltme için regresyon testleri yazıldı. İçerik güncellemeleri panelden elle değil, izlenebilir betiklerle ve öncesinde alınan yedekle uygulandı.

Entegrasyonlar

Ürün kataloğu, teklif hazırlama aracı TeklifRota için sürümlü bir ürün sözleşmesi üzerinden dışarı açılır; seri adları, görseller ve açıklamalar teklif belgelerine bu uçtan aktarılır. Teklif talepleri ERP'nin teklif ve müşteri modüllerine, iletişim mesajları panel bildirimlerine bağlıdır.

Sonuç

promats.com.tr bugün 20 universal paspas serisini Türkçe ve İngilizce olarak, üretim ve kalite anlatımıyla birlikte sunuyor. Müşterinin iki tur revize talebi, içerik dosyası ve ekran görüntüleri üzerinden madde madde işlenip canlıya alındı. Sayfa metinleri, slider'lar, ürün özellikleri ve galeriler artık panelden düzenleniyor; gelen teklif talepleri ise üretimi yöneten ERP'nin içinde karşılanıyor.