🎨 Front-End Design Blueprint
🏠 1. Landing Page (Home)
Purpose: Introduce your platform, highlight features, and guide users to sign up.
Layout:
Hero Section:
o Tagline: “Your Personalized Path to Success Starts Here”
o CTA Buttons: Get Started Take Career Quiz
o Background: Inspiring image or animated gradient
Features Preview (3–4 cards):
o Career Guidance
o Educator Connect
o Skill Recommendations
o Resume & Interview Prep
Testimonials Carousel: Quotes from students or mentors
Footer:
About Contact Privacy Policy Social Media Icons
👤 2. User Dashboard (After Login)
Purpose: Personalized hub for each user (student, educator, or mentor)
Layout:
Sidebar Navigation:
o Dashboard
o Career Assessment
o Career Matches
o Educator Connect
o Learning Resources
o Profile
Main Panel:
Welcome Message: “Hi Anushka, ready to explore your future?”
Progress Tracker (e.g., quiz completed, mentor matched)
Quick Actions: Continue Assessment, View Matches, Connect with Mentor
🧠 3. Career Assessment Page
Purpose: Psychometric quiz or interest-based questionnaire
Layout:
Question Cards (one at a time):
o Multiple choice or slider-based inputs
o Progress bar at top
o “Save & Continue” button
Result Summary Page:
Personality Type
Top Career Matches
Suggested Learning Paths
🎓 4. Career Suggestions Page
Purpose: Show personalized career options
Layout:
Career Cards:
o Title (e.g., Data Scientist)
o Description
o Required Skills & Qualifications
o Average Salary
“Explore More” button
Filters:
Industry Salary Range Education Level Location
🧑🏫 5. Educator & Mentor Connect Page
Purpose: Match users with verified mentors
Layout:
Mentor Profiles Grid:
o Photo Name Subject Expertise Rating “Connect” button
Search & Filter:
o Subject Availability Location
Chat Integration:
Simple chat UI or WhatsApp API link
📚 6. Learning Resources Page
Purpose: Recommend courses, certifications, and workshops
Layout:
Course Cards:
o Title Platform Duration Cost “Enroll” button
Categories:
Technical Creative Soft Skills Competitive Exams
📝 7. Resume & Interview Prep Page
Purpose: Help users build resumes and practice interviews
Layout:
Resume Builder:
o Form-based input → Live preview
Mock Interview Module:
Video-based Q&A
AI feedback on tone, clarity, confidence
🎨 Styling Suggestions
Color Palette: Soft blues, purples, or teals for trust and calm
Typography: Use Google Fonts like Poppins or Roboto
Animations: Subtle transitions, hover effects, loading spinners
Responsiveness: Mobile-first design using Flexbox/Grid
