Fiyatlandırma Tablosu (Pricing Table)

Bilhassa SaaS platformlarında ve periyodik abonelik tabanlı (subscription-based) dijital hizmetlerde, potansiyel müşterilerin paket detaylarını karmaşadan uzak bir şekilde kavrayabilmesi amacıyla tasarlanmış profesyonel bir fiyatlandırma tablosu alanıdır. Genellikle yan yana listelenen üç farklı plandan oluşur ve hedef kitleye en çok hitap etmesi amaçlanan önerilen plan (örn. “Pro” paketi) daha belirgin, vurgulu bir tasarıma sahip olacak şekilde kurgulanmıştır.

Önizleme ve Kod

Pricing

İşiniz için en uygun planlar

Tüm planlarda 14 günlük ücretsiz deneme imkanı mevcuttur. İstediğiniz zaman iptal edebilirsiniz.

Basic

¥1,980/Ay

Bireysel projeler veya küçük takımlar için idealdir.

1 Proje
Temel Destek
10GB Depolama

En Popüler

Pro

¥4,980/Ay

Büyüyen takımlar ve işletmeler için en uygun plandır.

Sınırsız Proje
Öncelikli Destek
100GB Depolama
Gelişmiş Analitik

Enterprise

¥14,800/Ay

Büyük kuruluşlar ve gelişmiş gereksinimler için özelleştirilmiş.

Her Şey Sınırsız
7/24 Özel Destek
Özel Depolama
SLA Garantisi

<div class="bg-gray-50 py-16 px-4 sm:px-6 lg:px-8 font-sans">
  <div class="max-w-7xl mx-auto">
    <!-- Header -->
    <div class="text-center max-w-3xl mx-auto mb-16">
      <h2 class="text-base font-semibold text-blue-600 tracking-wide uppercase">Pricing</h2>
      <p class="mt-2 text-3xl font-extrabold text-gray-900 sm:text-4xl">
        İşletmeniz için en iyi planı bulun
      </p>
      <p class="mt-4 text-xl text-gray-500">
        Tüm planlar 14 günlük ücretsiz deneme süresiyle birlikte gelir. İstediğiniz zaman iptal edebilirsiniz.
      </p>
    </div>

    <!-- Pricing Cards Grid -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
      
      <!-- Basic Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Basic</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥1,980</span>
          <span class="text-gray-500 ml-2">/ay</span>
        </div>
        <p class="text-gray-500 mb-8">Kişisel projeler veya küçük ekipler için mükemmeldir.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            1 proje
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Temel destek
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Depolama 10GB
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-medium rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
          Başlat
        </button>
      </div>

      <!-- Pro Plan (Highlighted) -->
      <div class="bg-blue-600 rounded-2xl shadow-xl border border-blue-600 p-8 transform md:-translate-y-4 relative">
        <div class="absolute top-0 right-0 -mt-4 mr-4 bg-yellow-400 text-yellow-900 text-xs font-bold px-3 py-1 rounded-full uppercase tracking-wide">
          en popüler
        </div>
        <h3 class="text-xl font-semibold text-white mb-4">Pro</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-white">¥4,980</span>
          <span class="text-blue-200 ml-2">/ay</span>
        </div>
        <p class="text-blue-100 mb-8">Büyüyen ekipler ve işletmeler için mükemmel plan.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            sınırsız proje
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Öncelikli destek
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Depolama 100GB
          </li>
          <li class="flex items-center text-blue-100">
            <svg class="w-5 h-5 text-white mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Gelişmiş analiz özellikleri
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-blue-600 font-bold rounded-xl hover:bg-blue-50 hover:text-blue-700 transition-colors duration-200">
          Ücretsiz denemenizi başlatın
        </button>
      </div>

      <!-- Enterprise Plan -->
      <div class="bg-white rounded-2xl shadow-sm border border-gray-200 p-8 hover:shadow-lg transition-shadow duration-300">
        <h3 class="text-xl font-semibold text-gray-900 mb-4">Enterprise</h3>
        <div class="flex items-baseline mb-6">
          <span class="text-4xl font-extrabold text-gray-900">¥14,800</span>
          <span class="text-gray-500 ml-2">/ay</span>
        </div>
        <p class="text-gray-500 mb-8">Büyük organizasyonlar ve gelişmiş gereksinimler için özelleştirilmiştir.</p>
        <ul class="space-y-4 mb-8">
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            Hepsi sınırsız
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            7/24 özel destek
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            özel depolama
          </li>
          <li class="flex items-center text-gray-600">
            <svg class="w-5 h-5 text-green-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
            SLA garantisi
          </li>
        </ul>
        <button class="w-full py-3 px-4 bg-white text-gray-900 font-medium rounded-xl border-2 border-gray-200 hover:border-gray-300 hover:bg-gray-50 transition-colors duration-200">
          Bize ulaşın
        </button>
      </div>

    </div>
  </div>
</div>

Uygulama İpuçları

Görsel Vurgu Stratejisi: En çok tercih edilen ve öne çıkarılmak istenen Pro paketi kartına, zıt/kontrast bir arka plan rengi ve Y ekseninde yukarı doğru pozisyon alma efekti (transform md:-translate-y-4) uygulanarak tüm dikkatlerin doğrudan bu alana toplanması hedeflenmiştir.
Tam Uyumlu Duyarlı (Responsive) Mimari: Tailwind’in grid-cols-1 md:grid-cols-3 dizilimi sınıf yapıları sayesinde dar ekranlı akıllı telefonlarda kolay kaydırılabilir tek bir sütun halinde; tablet, dizüstü ve daha büyük masaüstü ekranlarda ise profesyonel bir nizam içinde üç sütun halinde listelenmesi güvence altına alınmıştır.
Zarif Dokunuş (Hover) Efektleri: Fiyatlandırma kartlarının daha zengin bir etkileşim algısı hissettirmesi için hover:shadow-lg transition-shadow duration-300 şeklindeki gölgelendirme sınıfları eklenmiş, kullanıcının fareyle üzerine geldiği anda yumuşak fakat net bir derinlik tepkimesi alması sağlanmıştır.
Kusursuz Erişilebilirlik (Accessibility): Tasarım aşamasında zemin ve metin rengi arasındaki kontrast oranına azami özen gösterilerek son derece okunaklı bir deneyim oluşturulmuştur. Ayrıca, destekleyici onay işareti (check) simgeleri ve kısa açıklamaların ahenkli kombinasyonu sayesinde her pakete ait yeteneklerin/limitlerin zihinde hızla konumlandırılması kolaylaştırılmıştır.