Tasarım & İçerik Rehberi

Resim Halı Marka Kılavuzu

Bu sayfa; sitenin renk paleti, tipografi, buton stilleri, görsel yönergeleri ve SEO yapısını belgeleyen dahili rehberdir.

Renk Paleti

Güven veren toprak tonları (bej, kahve, krem) zemini oluşturur; zümrüt yeşili birincil aksiyon rengi, altın ise koyu zeminlerde sıcak vurgu görevi görür.

Krem (Zemin)

#F8F3EA

Sayfa arka planı, kartlar

Kum (İkincil Zemin)

#EFE6D6

Bölüm ayrımı, sayfa hero alanları

Bej (Çerçeve)

#D9C7A9

Kenarlıklar, ayraçlar

Kahve (İkincil CTA)

#6F513A

İkincil butonlar, gövde vurgusu

Mürekkep (Metin)

#2C2118

Başlıklar, footer zemini

Zümrüt (Birincil)

#0F5C49

Birincil CTA, linkler, ikonlar

Koyu Zümrüt

#0A4437

Vurgulu koyu bölümler, hover

Altın (Aksan)

#D9A441

Koyu zeminde vurgular, rozetler

Tipografi

Başlık · Fraunces (Serif)

Zeminin Sanatı

Sanatsal ve sıcak karakteriyle "modern dekorasyon markası" hissi verir. H1–H3 başlıklarda, ağırlık 500–600 aralığında kullanılır.

Gövde · Manrope (Sans-Serif)

Okunaklı, modern ve güvenilir.

Paragraflar, listeler, butonlar ve navigasyonda kullanılır. Gövde metni 400–500, butonlar 700 ağırlıkta yazılır. Her iki font da Türkçe karakter (latin-ext) desteklidir.

Buton Hiyerarşisi

Kural: Her ekran bölümünde tek bir birincil CTA bulunur. Tam yuvarlak (pill) form, dokuma/yumuşaklık hissini destekler. Mobilde butonlar tam genişlikte dizilir.

Görsel Yönergeleri

  • Hero

    Geniş açı, sıcak ışıklı, halının kahraman olduğu bir salon karesi (16:9). Üzerine soldan sağa koyulaşan degrade bindirilir.

  • Kategori kartları

    Dikey 3:4 oran; alt kısımda koyu degrade + krem başlık. Hover'da %5 zoom.

  • Ürün bölümleri

    Yatay 4:3; köşeler 24px yuvarlatılır (rounded-3xl), yumuşak gölge.

  • Resimli halı bölümü

    Ultra geniş 21:9 atölye/dokuma karesi — sürecin sanatsallığını gösterir.

  • Alt metinler (alt)

    Her görselde SEO anahtar kelimesi içeren Türkçe alt metin zorunludur.

  • Ton

    Toprak tonları hâkim, aşırı doygun renklerden kaçınılır; doğal ışık tercih edilir.

SEO Anahtar Kelimeleri

Çerkezköy halı mağazasıkişiye özel halı tasarımıözel ölçü yollukkaliteli halı modelleriresimli halıhalı overlok hizmetiTekirdağ halı

Anahtar kelimeler tüm sayfa metinlerine doğal biçimde yedirilmiştir. Sayfa başlığı ve meta açıklaması index.html içinde tanımlıdır. Her sayfada tek H1, mantıksal H2 → H3 hiyerarşisi korunur.

Sayfa Yapıları & Başlık Hiyerarşisi

Ana Sayfa (/)

  • H1 · "Zemininize Bir Sanat Eseri Serin: Resim Halı" — hero, tam ekran halı fotoğrafı üzerinde
  • H2 · Destekleyici alt başlık (Çerkezköy halı mağazası + resimli halı vurgusu)
  • CTA · "Koleksiyonu İncele" (zümrüt, birincil) + "Yol Tarifi Al" (cam efektli, ikincil)
  • H2 · "Halı Satmıyoruz; Evinize Değer Katıyoruz" → 3 × H3 özellik kartı
  • H2 · "Her Zevke, Her Odaya Bir Desen" → 4 × H3 kategori kartı (3:4 görsel)
  • H2 · "Halı Ekrandan Değil, Dokunarak Seçilir" → mağaza daveti + çalışma saatleri

Hakkımızda (/hakkimizda)

  • H1 · "Çerkezköy'de Dokunan Bir Hikaye"
  • H2 · "Adımız, Yaptığımız İşin Ta Kendisi" — ~180 kelimelik kurumsal hikaye
  • 3 × H3 değer kartı: Kalite, Sanat, Komşuluk
  • Görsel · Sol tarafta dikey (3:4) atölye/dokuma fotoğrafı, zümrüt gölge bloklu

Ürünlerimiz (/urunlerimiz)

  • H1 · "Kaliteli Halı Modelleri ve Özel Hizmetler"
  • H2 · Modern ve Klasik Halılar (#modern-klasik) — ikili görsel kolaj
  • H2 · Kişiye Özel Tasarım "Resim" Halılar (#resimli-halilar) — VURGULU koyu zümrüt bölüm, 3 adımlı süreç
  • H2 · Yolluk ve Kilimler (#yolluk-kilim)
  • H2 · Özel Ölçü Kesim ve Overlok Hizmeti (#ozel-olcu-overlok)
  • Her bölümde: SEO metni + 3 maddelik fayda listesi + tek CTA

İletişim (/iletisim)

  • H1 · "Çayımız Hazır, Kapımız Açık" — aksiyon odaklı davet metni
  • 4 × H2 bilgi kartı: Adres, Telefon (tel: link), E-posta (mailto:), Çalışma Saatleri
  • H2 · "Bizi Haritada Bulun" + Google Maps iFrame (41.2931461, 27.9999562)
  • CTA · "Yol Tarifi Al" (altın buton) — Google Maps directions linki

Yayın Öncesi Kontrol Listesi

  • Telefon numarası yer tutucusunu (0 (282) XXX XX XX) gerçek numarayla değiştirin — src/lib/constants.ts
  • E-posta adresini (info@resimhali.com) doğrulayın veya güncelleyin — src/lib/constants.ts
  • Google Business Profile onaylandığında haritayı resmi "Embed a map" iframe koduyla değiştirin
  • Gerçek mağaza ve ürün fotoğrafları çekildiğinde public/images/ altındaki görselleri güncelleyin
  • Açık adres (mahalle, cadde, no) netleştiğinde İletişim sayfası ve footer'a ekleyin