AI Prompt Portal Tasarımı
Hash
q7r0mpt-v1-p9u3b6
Kombinasyon
Hero#95 + Color#25 + Font#11
Primary
purple-600 (#9333ea)
Secondary
blue-600 (#2563eb)
Gradient
from-purple-600 to-blue-600
Background
slate-950 (#020617)
Surface
slate-900 (#0f172a)
Heading Font
Outfit
Modern, geometrik, Tech/SaaS için ideal
Body Font
Roboto
Temiz, nötr, okunabilir
Typography Scale
Arama odaklı hero. Büyük başlık, merkezi arama kutusu, popüler tag'ler, animated gradient background. Portal sitesi için kullanıcıyı hemen aramaya yönlendiren yapı.
Desktop: 264px genişliğinde sabit sol sidebar (kategoriler, favoriler, kredi bilgisi). Mobil: Hamburger menu ile slide-in drawer. Top header'da arama, bildirim, kullanıcı menüsü.
6 sütunlu responsive grid (2→3→4→6). Her kategori kartında gradient ikonlu arka plan, başlık ve prompt sayısı. Hover'da border glow efekti.
3 sütunlu grid. Her kart: Yazar bilgisi, AI platform badge, başlık, açıklama, tag'ler, beğeni/yorum sayısı, kullanım istatistiği. Filtre butonları ile kategori seçimi.
3 adımlı yatay akış. Gradient numaralı kutular, bağlayıcı çizgiler. Keşfet → Kullan → Paylaş basit kullanıcı yolculuğu.
Kredi paketleri: Başlangıç (49₺/50 kredi), Pro (149₺/200 kredi - popüler badge), Kurumsal (499₺/1000 kredi). Özellik listesi, tasarruf yüzdeleri.
6 sütunlu footer: Logo + açıklama + sosyal medya (2 sütun), Keşfet, Topluluk, Şirket, Yasal. Alt bar'da copyright ve dil seçici.
Kategori ve prompt kartlarında ikon hover'da scale(1.15) ile büyüyor.
Kart başlıkları hover'da translateX(4px) ile sağa kayıyor.
Kartlar hover'da border-primary-500/50 ve subtle purple glow alıyor.
background: linear-gradient(135deg, #9333ea 0%, #3b82f6 50%, #9333ea 100%);
background-size: 200% 200%;
animation: gradientShift 8s ease infinite;
@keyframes gradientShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
Mor-mavi gradient sürekli hareket ediyor. Floating geometric elementler (border-only kutular) farklı hızlarda yukarı-aşağı hareket ediyor (float animation, 6s, staggered delays).
Seçilen sıralama: #6 (Ürün Odaklı)
264px genişliğinde sabit sidebar. Logo, ana navigasyon, hesap linkleri (favoriler, kaydedilenler, geçmiş), kredi durumu widget'ı. Mobilde hamburger ile açılan drawer.
Sidebar'da kredi göstergesi, pricing section'da 3 farklı paket (Başlangıç, Pro, Kurumsal). Tasarruf yüzdeleri, özellik karşılaştırması.
Hero'da büyük, dikkat çekici arama kutusu. Header'da her zaman erişilebilir kompakt arama. Keyboard shortcut (⌘K) desteği.
Prompt kartlarında ChatGPT (mavi), Midjourney (pembe), Claude (mor) gibi platform etiketleri. Filtreleme için kategori butonları.
Professional headshot portrait, diverse ethnicity, friendly smile, neutral background, soft studio lighting, Canon EOS R5 85mm f/1.4, shallow depth of field, natural skin texture, corporate but approachable, high resolution, 8k quality
Professional business portrait, modern office environment visible in background blur, confident expression, smart casual attire, natural window lighting, Canon R5 50mm f/1.8, bokeh background, warm color grade, authentic look, not overly polished, 8k quality
Abstract technology background, deep purple and blue gradient, floating geometric shapes, soft glow particles, neural network visualization subtle, dark moody atmosphere, minimal and clean, no text, suitable for website hero section, 8k quality
Not: Bu tasarımda ağırlıklı olarak CSS gradient ve minimal görsel kullanılmıştır. Görseller sadece kullanıcı avatarları için gereklidir. Placeholder olarak picsum.photos kullanılmıştır.