Hilal Sever Mimarlık, İstanbul Üsküdar merkezli bir mimarlık ve iç mimarlık ofisi. Konut, ofis ve ticari mekân projeleri yürüten bir ofis için web sitesi aslında bir portfolyodur: ziyaretçi önce işleri görmek, sonra hangi hizmetin kendisine uyduğunu anlamak ve en sonunda kolayca iletişime geçmek ister. Bu projede hedef, görsel olarak güçlü bir vitrini; ofisin projeleri, hizmetleri, blog yazıları ve iletişim bilgilerini kod yazmadan güncelleyebileceği bir yönetim paneliyle birlikte teslim etmekti.

Proje bağlamı ve ihtiyaç

Tasarım dili olarak lisanslı bir iç mimarlık HTML teması (Intrio) seçildi. Ancak tema Bootstrap, jQuery ve onlarca eklentiyle çalışan statik bir şablondu: menü mobilde DOM'u yeniden kuruyor, yapışkan başlık kendi kopyasını sayfaya ekliyor, içerik HTML dosyalarına gömülü duruyordu. Temada başka bir firmadan kalma e-posta adresleri, yer tutucu metinler, blog detayında eksik H1 başlığı ve bozuk bir yazı tipi çağrısı da vardı. Bu nedenle tema doğrudan dönüştürülmedi; tasarım kararları alınıp bileşenler React ve Tailwind CSS ile yeniden yazıldı, tüm içerik veritabanına taşındı.

Çözüm ve kapsam

Ana sayfa

Ana sayfa on bölümden oluşur: tam ekran hero slider, hakkımızda girişi, sayaçlar, hizmetler karuseli, müşteri yorumları, proje ızgarası, dört adımlı çalışma süreci, video çağrısı, sık sorulan sorular ve blog önizlemesi. Bölümlerin sırası ve görünürlüğü panelden yönetilir; ofis hangi içeriği öne çıkarmak istiyorsa yeniden yayın gerekmeden düzenleyebilir.

Proje portfolyosu

Proje modeli mimarlık ofisine göre kurgulandı. Her proje için kategori (konut, ofis, ticari), müşteri adı, bütçe etiketi, metrekare, başlangıç ve bitiş tarihi, verilen hizmetler ve kapak görseli tutulur. Detay sayfasında büyük kapak görseli, proje bilgi tablosu, tam ekran açılan bir galeri ve benzer projeler yer alır. Galeri görsellerinin başlık ve alternatif metinleri her dil için ayrı girilir.

Hizmetler, blog ve SSS

• Hizmetler: Mimari Tasarım, İç Mimarlık, Proje Yönetimi, 3B Görselleştirme, Danışmanlık ile Uygulama ve Tadilat ayrı detay sayfalarında, kendi SEO başlık ve açıklamalarıyla sunulur.
• Blog: Yazı detayında yorum formu bulunur; yorumlar yönetici onayından sonra yayına girer.
• SSS: Sorular ayrı sayfada ve ana sayfada akordeon olarak gösterilir.

İletişim ve yasal sayfalar

İletişim sayfası ofis adresi, telefon, e-posta, çalışma saatleri ve gömülü harita içerir. Form, ziyaretçiden proje türünü seçmesini ister; böylece talep doğru bağlamla gelir. Gönderimde zorunlu alan kontrolü, KVKK onay kutusu ve botlara karşı gizli tuzak alanı çalışır. Mesajlar veritabanına durum ve yönetici notu alanlarıyla kaydedilir. KVKK aydınlatma metni, gizlilik politikası, çerez politikası ve kullanım şartları ayrı sayfalardır; çerez onayı arayüzde yönetilir.

Yönetim paneli

Panel, sitenin görünen her parçasını kapsar:

• İçerik: projeler ve proje görselleri, hizmetler, blog yazıları ve yorumlar, SSS, müşteri yorumları, slider, galeri, özel sayfalar.
• Site yapısı: menü ve navigasyon, ana sayfa bölüm düzeni, site ayarları (iletişim bilgileri, marka metinleri, logo, SEO ayarları, renk ve tasarım belirteçleri).
• İletişim: gelen mesajlar, e-posta şablonları, posta ayarları ve bildirimler.
• Ölçüm: GA4, Search Console ve Google Ads ekranları ile pazarlama ve entegrasyon ayarları.
• Yönetim: kullanıcılar ve roller, denetim kaydı, medya deposu, önbellek temizleme ve veritabanı araçları.

Teknik mimari

Sistem üç uygulamadan oluşur: Next.js 16 ve React 19 ile sunucu tarafında işlenen genel site, ayrı bir Next.js yönetim paneli ve Bun üzerinde çalışan Fastify API. Veri katmanı MySQL ve Drizzle ORM üzerindedir. Projeler, hizmetler ve görseller ana tablo ile dile özel çeviri tablosu olarak ayrılmıştır; her dilin kendi slug'ı ve meta alanları vardır. API, herkese açık ve yönetici uçları olarak ikiye ayrılır; yönetici uçları JWT kimlik doğrulaması ve rol kontrolünün arkasındadır.

Site şu an Türkçe ve İngilizce yayındadır. Aktif diller kodda değil site ayarlarında tanımlıdır; arayüz metinleri de veritabanından gelir. Marka adı, logo ve renkler de aynı şekilde ayarlardan okunur, böylece kod tabanı başka bir firmaya taşındığında görünen tarafta eski marka kalmaz.

SEO ve yapay zekâ görünürlüğü

• Dil alternatiflerini (hreflang) içeren dinamik site haritası
• Kurum, yerel işletme, web sitesi, proje, makale, SSS ve breadcrumb için JSON-LD yapılandırılmış veri
• Yapay zekâ tarayıcılarına izinleri panelden yönetilen robots.txt ve dinamik llms.txt
• Yeni içeriğin arama motorlarına hızlı bildirilmesi için IndexNow desteği

Animasyonlar temadaki yüzlerce jQuery tetikleyicisi yerine sade bir Framer Motion seti ile yeniden kuruldu; kullanılmayan ikon fontları ve eklentiler projeye taşınmadı.

Entegrasyonlar

Harita için Google Maps gömmesi, ölçüm için GA4 ve Search Console bağlantıları kullanılır. Panelde ayrıca GEO içerik çalışmaları için düzenlenebilir bir yapay zekâ komut kütüphanesi bulunur. Facebook, Instagram, X, TikTok ve Pinterest için sosyal hesap bağlantı altyapısı hazırdır; hesaplar bağlandığında panelden kullanılabilir.

Sonuç

hilalsever.com bugün Türkçe ve İngilizce olarak yayındadır. Uygulamalar VPS üzerinde PM2 süreçleri olarak, Nginx arkasında çalışır. Ofis yeni bir projeyi tamamladığında fotoğrafları yükleyip proje bilgilerini girmesi yeterlidir; detay sayfası, galeri, site haritası ve yapılandırılmış veri otomatik olarak güncellenir.