İşte istediğiniz eğitim platformu için bir kullanıcı dashboardunun v0 prototipi hazırlanması amacıyla Cursor AI’ye verilebilecek bir prompt:
Prompt: Kullanıcı Dashboard Tasarımı
“Bir eğitim platformu için kullanıcı dashboardu tasarla. Bu dashboard, kullanıcıların eğitim süreçlerini ve ilerlemelerini görselleştirecek. Aşağıdaki bölümleri içermelidir:
1. Welcome & Overview Section:
• Kullanıcının ismi ve son tamamlanan aktivitesi (örn. ‘Welcome, [Kullanıcı Adı]! Last completed: [Son Aktivite].’).
• Genel ICI skoru ve ilerleme yüzdesini gösteren bir grafik veya çubuk.
2. Talent Pool Section:
• Kullanıcının seçtiği talent pool’u ve bu pool’un gereksinimlerini (requirements) gösteren bir kart/tablo.
• Eğer bir talent pool seçilmemişse ‘Choose Your Talent Pool’ butonu.
3. ICI Score Section:
• İki kademeli ICI değerlendirmesi (User Input ve Face-to-Face Evaluation) için görseller:
• User Input: CV ve LinkedIn yükleme bölümü (tamamsa ‘Completed’ olarak işaretlenir).
• Face-to-Face Evaluation: Beklenen veya tamamlanmış durum (örn. ‘Evaluation Scheduled’ veya ‘Completed’).
• Kullanıcının güncel ICI skorunu gösteren bir görselleştirme.
4. Personalized Journey (Curriculum):
• Kullanıcının ICI skoruna göre önerilen eğitim yolculuğunun bir zaman çizelgesi (timeline).
• Curriculum adımları (örn. ‘Step 1: Data Science Basics - In Progress’).
5. Training Section:
• AI-driven Scrum-Based Agile Learning System kapsamında tamamlanan ve bekleyen sprint görevleri.
• Güncel sprint için görev listesi.
6. Monitoring Section:
• Kullanıcının eğitim süreci boyunca aldığı geri bildirimleri ve ilerleme raporlarını gösterecek bir kart/tablo.
• Performans metriklerini görselleştiren grafikler.
7. Mentoring Section:
• Kullanıcı için atanmış AI Mentor veya insan mentorunun bilgileri.
• Mentordan alınan geri bildirimler veya planlanmış görüşmeler.
8. Recruiting Process Section:
• Kullanıcıya önerilen iş ilanları veya açık pozisyonlar (kendi ICI skoruna ve talent pool’una göre).
• AI mock interview sonuçları ve iş başvuru durumu (örn. ‘Application Sent’ veya ‘Interview Scheduled’).
9. Quick Actions Bar:
• ‘Update Profile’, ‘View Curriculum’, ‘Contact Mentor’, ve ‘Apply for Jobs’ gibi hızlı erişim butonları.
Dashboard kullanıcı dostu, sezgisel ve modüler olmalıdır. Her bölüm arasında yeterli boşluk bırak ve modern bir tasarım kullan. Kullanıcıların ilerlemelerini görselleştirmek için dairesel grafikler, ilerleme çubukları ve kart tasarımlarını tercih et.”
Bu prompt, tüm bölümleri ve kullanıcı deneyimini ön planda tutarak minimalist bir v0 tasarımı sağlayacaktır. Eğer belirli bir tasarım dili veya görsel stil (örn. modern, minimal, dinamik) tercih ediyorsanız, bunu prompta ekleyebiliriz.
Anladım, eğitim platformu için kapsamlı bir kullanıcı dashboard'u tasarlamak istiyorsunuz. Bu isteğinizi karşılamak için modern, kullanıcı dostu ve modüler bir tasarım oluşturacağım. Tailwind CSS kullanarak responsive bir tasarım yapacağım ve gerekli interaktif öğeler için React hooks kullanacağım.
Şimdi, bu dashboard'u oluşturmaya başlayalım:
Bu dashboard tasarımı, istediğiniz tüm bölümleri içeriyor ve modern, kullanıcı dostu bir arayüz sunuyor. Tailwind CSS kullanarak responsive bir tasarım elde ettik ve her bileşen modüler bir yapıda oluşturuldu.
Kullanıcılar bu dashboard üzerinden:
Bu tasarım, gerektiğinde kolayca genişletilebilir ve özelleştirilebilir. Örneğin, grafikleri daha interaktif hale getirmek için Chart.js gibi bir kütüphane ekleyebilir veya daha karmaşık durum yönetimi için Redux gibi bir state yönetim çözümü kullanabilirsiniz.
Anladım, kullanıcının her bir bölüm için işlem yapabileceği bir üst menü eklemek istiyorsunuz. Bu isteğinizi karşılamak için mevcut tasarımı güncelleyeceğim.
Şimdi, bu güncellemeleri yapalım:
Bu güncellenmiş tasarım, istediğiniz üst menüyü ve Talent Pool seçimi için bir modal içeriyor. Ayrıca, her bölüm için bir bağlantı ekledik, böylece kullanıcılar doğrudan ilgili bölüme gidebilirler.
Yeni özellikler ve değişiklikler şunlardır:
Bu güncellemeler, kullanıcı deneyimini önemli ölçüde iyileştirir ve platformun daha interaktif olmasını sağlar. Kullanıcılar artık dashboard'larını daha kolay yönetebilir ve istedikleri bilgilere daha hızlı erişebilirler.
Eğer başka özel istekleriniz veya eklemek istediğiniz özellikler varsa, lütfen belirtin. Örneğin, belirli bölümler için daha detaylı interaktif öğeler ekleyebilir veya veri görselleştirmelerini geliştirebiliriz.
The code returns the following error:
Error: The "@heroicons/react/solid" module does not provide an export named "ChevronDownIcon".
Revise the code to address the error. The code returns the following error:
Error: The "@heroicons/react/solid" module does not provide an export named "ChevronDownIcon".
Revise the code to address the error. The code returns the following error:
Error: The "@heroicons/react/solid" module does not provide an export named "ChevronDownIcon".
Revise the code to address the error.