ChatGPT, Claude, Perplexity tarzı futuristik tasarım
Ne İstiyoruz? ChatGPT, Claude.ai, Sider.ai gibi modern yapay zeka asistan sitelerine benzer, göz alıcı ve futuristik bir site tasarımı.
Nasıl Görünecek? Mor-mavi-pembe gradient'ler, cam efektli kartlar, yumuşak animasyonlar, geniş beyaz alanlar, büyük ve okunaklı yazılar. Dark (koyu) tema ön planda olacak.
Hangi Bölümler Olacak?
Neden Önemli? Yapay zeka teknolojisi hızla yayılıyor. Kullanıcılar modern, güvenilir ve göz alıcı bir arayüz bekliyor. Bu tasarım ile teknoloji şirketleri, SaaS platformları ve AI ürünleri profesyonel bir izlenim bırakabilir.
Renk Stratejisi: Violet-Fuchsia-Cyan gradient'ler AI ve teknoloji hissini verir. Glassmorphism için backdrop-blur kullanılır. Kartlarda gradient border'lar ve shadow efektleri uygulanır. Dark mode dominant, light mode'da gradient'ler hafifletilir.
Glassmorphism (cam efekti) sticky header, logo sol, nav ortada, CTA butonları sağda
backdrop-blur-xl, border-bottom gradient, smooth shadow on scroll, hamburger menu (mobile)
Full-screen hero: Sol %50 büyük başlık + gradient text + CTA butonlar, Sağ %50 AI chat arayüz mockup (glassmorphism card)
Animated gradient background, floating particles effect, typing animation, chat bubbles with fade-in
3-column grid, her kart glassmorphism efektli, gradient border, icon + başlık + açıklama
backdrop-blur-xl, hover scale effect, gradient border animation, floating icons
Dikey timeline: 4 adım, her adımda numara + başlık + açıklama, connecting line gradient
Scroll-triggered reveal, gradient connecting line, pulsating dots, fade-in from left
3-column pricing table: Free, Pro (featured - larger), Enterprise. Glassmorphism kartlar, özellik listesi, CTA butonlar
Pro planı yükseltilmiş, gradient border, popular badge, hover lift effect, checkmark icon list
Masonry grid layout (farklı yüksekliklerde kartlar), her kartta avatar + isim + yorum + yıldız rating
Glassmorphism cards, staggered fade-in animation, hover glow effect
Accordion (açılır-kapanır) yapı, 6-8 soru, her soru glassmorphism card içinde
Alpine.js accordion, smooth expand/collapse, rotating chevron icon, gradient border on active
Tam genişlik gradient background box, ortalanmış büyük başlık + açıklama + 2 CTA buton
Animated gradient background (hue-rotate), pulsating effect, primary + secondary button
4-column footer: Brand/logo + Product links + Company links + Social/Newsletter. Minimal, temiz, gradient divider
Dark background (slate-950), subtle gradient top border, social icons with hover glow
Aşağıdaki promptlar Leonardo.ai veya Midjourney ile görsel üretmek için hazırlanmıştır.
Görselleri images/ klasörüne kaydedin.
Modern AI chat interface mockup, glassmorphism design, dark mode UI with violet and cyan accents, floating chat bubbles with gradient backgrounds, clean message boxes, subtle shadows and blur effects, futuristic AI assistant avatar icon, smooth rounded corners, professional SaaS product screenshot style, transparent PNG with no background
Futuristic 3D brain icon with glowing neural network connections, violet and cyan neon lights, floating in dark space, digital particles surrounding, holographic effect, AI and machine learning concept, clean minimal composition, suitable for dark backgrounds, PNG with transparency
3D lightning bolt icon with electric glow effect, gradient from fuchsia to purple, energy sparks and particles, speed and performance concept, modern tech aesthetic, floating in dark void, neon lights reflection, PNG transparent background
3D shield icon with holographic lock symbol, violet and cyan gradient glow, security and privacy concept, digital matrix background, floating particles, professional cybersecurity aesthetic, modern tech style, PNG with transparency
Professional diverse user avatars set (6 avatars: 3 male, 3 female), different ethnicities, modern business casual attire, friendly smiling faces, clean background, circular crop, high quality portraits, professional photography style, suitable for testimonials section
Abstract gradient mesh background, flowing violet, fuchsia and cyan colors blending smoothly, dark base color (slate-950), subtle noise texture, suitable for hero section overlay, dreamy ethereal aesthetic, low opacity for layering, seamless pattern, 4K quality
Tailwind'de: backdrop-blur-xl bg-white/5 border border-white/10
Kartlara uygula. Dark mode'da daha belirgin görünür. Safari'de -webkit-backdrop-filter gerekebilir.
Tailwind'de: bg-gradient-to-r from-violet-600 to-fuchsia-600 bg-clip-text text-transparent
Başlıklara uygula, gözü rahatlatır.
Pseudo-element kullan: before:absolute before:inset-0 before:p-[1px] before:bg-gradient-to-r before:from-violet-500 before:to-fuchsia-500 before:rounded-xl
Kartlara 3D depth verir.
Figma veya Leonardo.ai kullan. Glassmorphism kartlar içinde chat bubbles. Sol tarafa kullanıcı mesajı (gri), sağ tarafa AI cevabı (gradient). Typing animation ekle (Alpine.js ile).
Particles.js kütüphanesi veya CSS keyframes kullan. Hero section'a ekle, arka planda yavaşça hareket eden gradient noktalar. Opacity düşük tut (0.3-0.5).
Alpine.js ile localStorage kullan. Dark mode'da: bg-slate-950, text-white. Light mode'da: bg-white, text-slate-900. Gradient'ler her iki modda da çalışmalı (opacity ayarla).