Website Design & Development Prompt: Arif AI Tutor Ethiopian - Educational Platform

🎯 PROJECT OVERVIEW
Design and develop a premium, fully responsive educational website for TutorAI Ethiopia - an AI-powered tutoring platform serving Ethiopian students with multilingual curriculum support.
📱 RESPONSIVE DESIGN SPECIFICATIONS
Mobile-First Breakpoints:
• Mobile: 320px - 767px (Primary focus)
• Tablet: 768px - 1023px
• Desktop: 1024px - 1439px
• Large Desktop: 1440px+
Layout Adaptations:
• Mobile: Single-column layout, collapsed navigation, stacked cards
• Tablet: Two-column grids, expanded navigation, medium-density information
• Desktop: Multi-column layouts, full navigation, feature-rich interfaces
• Scalable typography using CSS clamp() and relative units
• Flexible image grids with aspect-ratio preservation
🎨 DESIGN SYSTEM & BRAND IDENTITY
Color Palette:
• Primary Colors: Ethiopian flag colors (#078C03 green, #DA1212 red, #FCDC04 yellow, #0F47AF blue)
• Neutral Colors: #1A1A1A (dark), #FFFFFF (light), #F8F9FA (background)
• Accent Colors: #10B981 (success), #3B82F6 (information), #F59E0B (warning)
Typography Scale:
• Headings: Inter/Poppins (700 weight)
• Body: Inter/System fonts (400-500 weight)
• Scale: 0.75rem → 1rem → 1.25rem → 1.5rem → 2rem → 2.5rem → 3rem
Component Library:
• Custom buttons (primary, secondary, ghost states)
• Card components with consistent shadows/borders
• Form elements (inputs, selects, radios, checkboxes)
• Navigation bars (sticky header, mobile hamburger)
• Tab interfaces matching Gradio functionality
• Pricing cards with "popular" highlights
⚡ CORE WEBSITE PAGES & STRUCTURE
1. Homepage (Light & Dark Mode Variations)
Hero Section:
• Platform title "🇪🇹 Arif AI Tutor Ethiopia" with multilingual subtitle
• Key value propositions (multilingual, curriculum-aligned, AI-powered)
• Statistics showcase (10,000+ Students, 95% Pass Rate)
• Primary CTA: "Start Learning"
• Language selector (English/Amharic)
Features Grid:
• Step-by-step explanations
• Ethiopian exam-style quizzes
• Personalized study plans
• Past exam preparation
How It Works:
1. Select grade and language
2. Ask questions or generate quizzes
3. Receive AI-powered explanations
4. Track progress and improve scores
2. Platform Interface Page
Main Dashboard:
• Recreate Gradio tab functionality as polished web components:
o 🎓 Lesson Q&A Tab: Grade selector, subject input, AI model choice
o 📝 Quiz Generator: Subject, difficulty, question count controls
o 📅 Study Planner: Grade, subjects, hours per week inputs
o 📖 Exam Prep: Past papers and strategies
o 🎤 Voice Support: Speech-to-text interface
Interactive Elements:
• Real-time response generation
• Dynamic quiz creation
• Personalized study plan outputs
• Loading states and progress indicators
3. Pricing Page
Plan Comparison:
• Student Plan (100 ETB/month) - Basic features
• Family Plan (200 ETB/month) - Most Popular highlighted
• School Plan (Custom pricing) - Enterprise features
• Payment methods: Telebirr, CBE Birr integration ready
4. About & Curriculum Page
• Ethiopian national curriculum alignment
• Grade 7-12 subject coverage
• Multilingual support details
• Teacher/parent resources
🚀 TECHNICAL REQUIREMENTS
Performance Optimization:
• Core Web Vitals: LCP < 2.5s, FID < 100ms, CLS < 0.1
• Image Optimization: WebP format with fallbacks
• Code Splitting: Lazy loading for non-critical components
• Caching Strategy: Service worker for offline functionality
Accessibility Standards:
• WCAG 2.1 AA compliance
• Keyboard navigation support
• Screen reader compatibility
• Color contrast ratios ≥ 4.5:1
• Focus indicators and ARIA labels
Browser Compatibility:
• Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
• Progressive enhancement approach
🎭 USER EXPERIENCE FLOWS
Student Journey:
1. Landing → Language selection → Grade input
2. Question Asking → check from local →AI response → Follow-up questions
3. Quiz Practice → Subject selection → Difficulty setting → Results
4. Study Planning → Input availability → Generate schedule
Multilingual Support:
• Dynamic content switching (English/Amharic)
• RTL support for Amharic
• Cultural appropriateness in examples and content
📊 CONVERSION OPTIMIZATION
CTAs & Funnels:
• Primary: "Start Learning Free" / "Choose Plan"
• Secondary: "Generate Quiz" / "Create Study Plan"
• Tertiary: "Contact Sales" (for schools)
Trust Indicators:
• Student testimonials
• Pass rate statistics
• Curriculum alignment badges
• Secure payment badges
🔧 DEVELOPMENT SPECIFICATIONS
Frontend Architecture:
• Framework: React.js with TypeScript
• Styling: Tailwind CSS with custom design system
• State Management: Context API or Zustand
• Routing: React Router for SPA experience
Responsive Implementation:
css
/* Mobile-first CSS architecture */
.container { padding: 1rem; }
@media (min-width: 768px) { .container { padding: 2rem; } }
@media (min-width: 1024px) { .container { max-width: 1200px; margin: 0 auto; } }
Component Structure:
• Header/Navigation (responsive)
• Hero Section
• Features Grid
• Interactive Tabs (Q&A, Quiz, Planner, Exam, Voice)
• Pricing Cards
• Footer
🎯 DELIVERABLES REQUIREMENTS
Design Assets:
• ✅ Complete design system documentation
• ✅ Light mode and dark mode variations
• ✅ Mobile, tablet, desktop mockups
• ✅ Interactive prototype
• ✅ Component library
Development Deliverables:
• ✅ Fully responsive production website
• ✅ Cross-browser compatible code
• ✅ Optimized performance scores
• ✅ Accessible implementation
• ✅ SEO-optimized structure
Future Scalability:
• ✅ Modular component architecture
• ✅ Easy content updates via CMS-ready structure
• ✅ API integration points for backend connectivity
• ✅ PWA capabilities for mobile app conversion
________________________________________
📝 SUCCESS METRICS
• User Engagement: Time on platform, features used
• Conversion Rate: Free to paid user conversion
• Performance: Page load times, Core Web Vitals
• Accessibility: WCAG compliance score
• Mobile Usage: Mobile visitor engagement rates
This prompt ensures the final website will be a studio-quality, modern, fully responsive educational platform that maintains all existing Gradio functionality while providing a professional, scalable foundation for future growth across web platforms, mobile apps, and marketing campaigns.
🔐 ADDENDUM: USER AUTHENTICATION SYSTEM
👥 USER REGISTRATION & LOGIN PAGES
1. Registration Page Design
Header Section:
• Platform logo "🇪🇹 TutorAI Ethiopia"
• Back to home link
• Language selector
Registration Form Container:
• Clean card layout with subtle shadow
• Progress indicator (3 steps)
• Ethiopian flag color accents
Step 1: Account Type Selection
text
[ ] Student
[ ] Parent/Guardian
[ ] Teacher
[ ] School Administrator
Step 2: Personal Information
text
Full Name (Amharic/English support)
Email Address
Phone Number (Ethiopian format: +251 XXX XX XX XX)
Password (strength indicator)
Confirm Password
Grade Level (7-12) - for students
Subjects of Interest - checkbox grid
Step 3: Profile & Preferences
text
Preferred Language: [English, Amharic, Afan Oromo]
Learning Goals: [Exam Preparation, Homework Help, General Knowledge]
Study Time Availability: [Morning, Afternoon, Evening]
Notification Preferences: [Email, SMS, Push]
Terms & Conditions Acceptance
Social Registration:
• "Or register with" options
• Google, Facebook integration options
• Telebirr quick registration (for Ethiopian users)
Trust Elements:
• 🔒 "Your data is secure and encrypted"
• 📚 "Aligned with Ethiopian curriculum"
• 🎓 "95% student satisfaction rate"
________________________________________
2. Login Page Design
Dual Layout Options:
Option A: Split Screen Layout
• Left side: Brand showcase with key features
• Right side: Login form
Option B: Centered Card Layout
• Floating card design on gradient background
• Mobile-optimized single column
Login Form Components:
text
Email/Phone Input
Password Input
Remember Me checkbox
Forgot Password link
Social Login Options:
text
[Google Button] [Facebook Button] [Tele Birr Button]
Registration CTA:
• "New to TutorAI? Create Account"
• "Join 10,000+ Ethiopian students"
________________________________________
🎨 AUTHENTICATION DESIGN SYSTEM
Color States:
• Default: Border-gray-300
• Focus: Border-blue-500 with ring
• Error: Border-red-500 with error message
• Success: Border-green-500 with checkmark
Form Validation:
• Real-time field validation
• Ethiopian phone number format validation
• Password strength meter
• Email/phone availability check
Loading States:
• Button loading spinners
• Form submission disabled state
• Progress indicators for multi-step forms
________________________________________
📱 RESPONSIVE AUTHENTICATION FLOWS
Mobile-First Breakpoints:
Mobile (320px-767px):
• Full-screen forms
• Large touch targets (44px minimum)
• Simplified progress steps
• Stacked social buttons
Tablet (768px-1023px):
• Centered card (500px width)
• Side-by-side social buttons
• Two-column layout for personal info
Desktop (1024px+):
• Split-screen layout
• Enhanced brand showcase
• Multi-column form sections
________________________________________
🔐 SECURITY & UX FEATURES
Password Security:
• Strength indicator with requirements
• Show/hide password toggle
• Password confirmation validation
Session Management:
• "Remember me" functionality
• Auto-logout after inactivity
• Multiple device session support
Error Handling:
• Clear error messages in selected language
• Password reset flow
• Account recovery options
________________________________________
🚀 REGISTRATION CONVERSION OPTIMIZATION
Progress Indicators:
• Step 1: Account Type (33%)
• Step 2: Personal Info (66%)
• Step 3: Preferences (100%)
Reduced Friction:
• Social login shortcuts
• Phone number as username option
• Minimal required fields initially
• Progressive profiling
Trust Signals:
• Securit

README.md

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project
-emoji: 🏃
+title: DeepSite Project
 colorFrom: green
-colorTo: gray
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).