🚀 UTAS Oman Portal Demo - Complete AI-Enhanced University Portal
✨ Features: • Real AI chatbot with OpenRouter API (bilingual Arabic/English) • Comprehensive UTAS Oman content with programs and admissions • Modern responsive design with Tailwind CSS • Student/Admin authentication and dashboards • Full course catalog with search and filtering • Contact forms and application processes 🤖 AI Capabilities: • Language detection (Arabic/English) • UTAS Oman knowledge base integration • Contextual responses about programs, admissions, scholarships • No mock data - all responses from real AI 🛠️ Technology Stack: • Next.js 14 + React 19 + TypeScript • OpenRouter API with Meta LLaMA 3.1 • Prisma ORM with SQLite • Tailwind CSS for styling 📋 Demo Ready: • Test users file included (TEST-USERS.md) • Navigation test checklist (NAVIGATION-TEST.md) • Clean codebase with proper gitignore • Production-ready configuration
This commit is contained in:
Krikorios
+388
-472
@@ -1,544 +1,460 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { useLanguage } from '@/components/providers/LanguageProvider';
|
||||
import {
|
||||
GraduationCap,
|
||||
Calendar,
|
||||
Users,
|
||||
CheckCircle,
|
||||
Clock,
|
||||
DollarSign,
|
||||
Globe,
|
||||
MapPin,
|
||||
Mail,
|
||||
Phone,
|
||||
ExternalLink
|
||||
GraduationCap, Calendar, CheckCircle, MapPin, Mail, Phone,
|
||||
FileText, Award, AlertCircle, BookOpen, CreditCard, ArrowRight
|
||||
} from 'lucide-react';
|
||||
import { mockCourses } from '@/lib/mockData';
|
||||
|
||||
export default function AdmissionsPage() {
|
||||
const { language, dir } = useLanguage();
|
||||
const [activeTab, setActiveTab] = useState('requirements');
|
||||
|
||||
// Application process steps
|
||||
// Application process steps for UTAS Oman
|
||||
const applicationSteps = [
|
||||
{
|
||||
step: 1,
|
||||
titleEn: 'Choose Your Program',
|
||||
titleAr: 'اختر برنامجك',
|
||||
descriptionEn: 'Browse our extensive range of undergraduate and postgraduate programs.',
|
||||
descriptionAr: 'تصفح مجموعتنا الواسعة من البرامج الجامعية والدراسات العليا.',
|
||||
timelineEn: '1-2 weeks',
|
||||
timelineAr: '1-2 أسابيع'
|
||||
title: 'Choose Your Program',
|
||||
description: 'Explore our undergraduate and postgraduate programs aligned with Oman Vision 2040.',
|
||||
timeline: '1-2 weeks',
|
||||
action: 'Browse Programs'
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
titleEn: 'Submit Application',
|
||||
titleAr: 'تقديم الطلب',
|
||||
descriptionEn: 'Complete your online application with all required documents.',
|
||||
descriptionAr: 'أكمل طلبك عبر الإنترنت مع جميع الوثائق المطلوبة.',
|
||||
timelineEn: '2-3 days',
|
||||
timelineAr: '2-3 أيام'
|
||||
title: 'Submit Application',
|
||||
description: 'Complete online application with required documents and pay application fee.',
|
||||
timeline: '2-3 days',
|
||||
action: 'Apply Online'
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
titleEn: 'Application Review',
|
||||
titleAr: 'مراجعة الطلب',
|
||||
descriptionEn: 'Our admissions team reviews your application and documents.',
|
||||
descriptionAr: 'يراجع فريق القبول لدينا طلبك ووثائقك.',
|
||||
timelineEn: '2-4 weeks',
|
||||
timelineAr: '2-4 أسابيع'
|
||||
title: 'Document Verification',
|
||||
description: 'Our admissions team verifies your academic credentials and documents.',
|
||||
timeline: '1-2 weeks',
|
||||
action: 'Track Status'
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
titleEn: 'Receive Offer',
|
||||
titleAr: 'استلام العرض',
|
||||
descriptionEn: 'If successful, you\'ll receive a conditional or unconditional offer.',
|
||||
descriptionAr: 'في حالة النجاح، ستتلقى عرضاً مشروطاً أو غير مشروط.',
|
||||
timelineEn: '1 week',
|
||||
timelineAr: '1 أسبوع'
|
||||
title: 'Assessment & Interview',
|
||||
description: 'Complete entrance exam or interview if required for your program.',
|
||||
timeline: '1 week',
|
||||
action: 'Schedule Test'
|
||||
},
|
||||
{
|
||||
step: 5,
|
||||
titleEn: 'Accept & Enroll',
|
||||
titleAr: 'القبول والتسجيل',
|
||||
descriptionEn: 'Accept your offer and complete enrollment procedures.',
|
||||
descriptionAr: 'اقبل عرضك وأكمل إجراءات التسجيل.',
|
||||
timelineEn: '1-2 weeks',
|
||||
timelineAr: '1-2 أسابيع'
|
||||
title: 'Admission Decision',
|
||||
description: 'Receive your admission decision and enrollment instructions.',
|
||||
timeline: '1-2 weeks',
|
||||
action: 'Check Result'
|
||||
},
|
||||
{
|
||||
step: 6,
|
||||
title: 'Enrollment & Registration',
|
||||
description: 'Confirm enrollment, pay fees, and register for courses.',
|
||||
timeline: '1 week',
|
||||
action: 'Complete Enrollment'
|
||||
}
|
||||
];
|
||||
|
||||
// Entry requirements by level
|
||||
const entryRequirements = {
|
||||
undergraduate: {
|
||||
titleEn: 'Undergraduate Requirements',
|
||||
titleAr: 'متطلبات البكالوريوس',
|
||||
requirements: {
|
||||
en: [
|
||||
'Australian Year 12 or equivalent international qualification',
|
||||
'English language proficiency (IELTS 6.0 or equivalent)',
|
||||
'Prerequisites specific to chosen program',
|
||||
'Personal statement (for some programs)',
|
||||
'Portfolio (for creative programs)'
|
||||
],
|
||||
ar: [
|
||||
'الصف الثاني عشر الأسترالي أو مؤهل دولي معادل',
|
||||
'إجادة اللغة الإنجليزية (IELTS 6.0 أو ما يعادله)',
|
||||
'المتطلبات المسبقة الخاصة بالبرنامج المختار',
|
||||
'بيان شخصي (لبعض البرامج)',
|
||||
'محفظة أعمال (للبرامج الإبداعية)'
|
||||
const requirements = {
|
||||
undergraduate: [
|
||||
{
|
||||
category: 'Academic Requirements',
|
||||
items: [
|
||||
'High School Diploma or equivalent (minimum 60%)',
|
||||
'Strong performance in relevant subjects (Math, Science, English)',
|
||||
'Grade 12 certificate with subject-specific requirements'
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'English Proficiency',
|
||||
items: [
|
||||
'IELTS Academic: 5.5 overall (5.0 in each band)',
|
||||
'TOEFL iBT: 71 overall',
|
||||
'UTAS English Placement Test (available on campus)',
|
||||
'High school English: Grade B or above'
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Additional Requirements',
|
||||
items: [
|
||||
'Completed application form',
|
||||
'Recent passport-size photographs',
|
||||
'Copy of passport/Emirates ID',
|
||||
'Medical fitness certificate (for some programs)'
|
||||
]
|
||||
}
|
||||
},
|
||||
postgraduate: {
|
||||
titleEn: 'Postgraduate Requirements',
|
||||
titleAr: 'متطلبات الدراسات العليا',
|
||||
requirements: {
|
||||
en: [
|
||||
'Bachelor\'s degree or equivalent from recognized institution',
|
||||
'English language proficiency (IELTS 6.5 or equivalent)',
|
||||
'Academic transcripts and certificates',
|
||||
'CV/Resume and personal statement',
|
||||
'Letters of recommendation (for research degrees)',
|
||||
'Research proposal (for PhD programs)'
|
||||
],
|
||||
ar: [
|
||||
'درجة البكالوريوس أو ما يعادلها من مؤسسة معترف بها',
|
||||
'إجادة اللغة الإنجليزية (IELTS 6.5 أو ما يعادله)',
|
||||
'كشوف الدرجات والشهادات الأكاديمية',
|
||||
'السيرة الذاتية والبيان الشخصي',
|
||||
'خطابات التوصية (لدرجات البحث)',
|
||||
'مقترح البحث (لبرامج الدكتوراه)'
|
||||
],
|
||||
postgraduate: [
|
||||
{
|
||||
category: 'Academic Requirements',
|
||||
items: [
|
||||
'Bachelor\'s degree from recognized institution',
|
||||
'Minimum GPA of 2.5/4.0 or equivalent',
|
||||
'Relevant undergraduate degree for chosen program',
|
||||
'Professional experience (for MBA and some programs)'
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'English Proficiency',
|
||||
items: [
|
||||
'IELTS Academic: 6.0-6.5 overall (depending on program)',
|
||||
'TOEFL iBT: 79-88 overall',
|
||||
'UTAS English Placement Test',
|
||||
'Previous degree taught in English (with certification)'
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Program-Specific Requirements',
|
||||
items: [
|
||||
'Statement of purpose (500-1000 words)',
|
||||
'Letters of recommendation (2-3)',
|
||||
'CV/Resume with work experience',
|
||||
'Portfolio (for design and creative programs)',
|
||||
'GMAT/GRE scores (for some business programs)'
|
||||
]
|
||||
}
|
||||
},
|
||||
international: {
|
||||
titleEn: 'International Student Requirements',
|
||||
titleAr: 'متطلبات الطلاب الدوليين',
|
||||
requirements: {
|
||||
en: [
|
||||
'Valid passport and student visa',
|
||||
'Academic credentials assessment',
|
||||
'English language test results',
|
||||
'Financial capacity evidence',
|
||||
'Health insurance coverage',
|
||||
'Overseas Student Health Cover (OSHC)'
|
||||
],
|
||||
ar: [
|
||||
'جواز سفر صالح وتأشيرة طالب',
|
||||
'تقييم الأوراق الأكاديمية',
|
||||
'نتائج اختبار اللغة الإنجليزية',
|
||||
'دليل القدرة المالية',
|
||||
'تغطية التأمين الصحي',
|
||||
'تغطية صحية للطلاب الأجانب (OSHC)'
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Important dates
|
||||
// Application documents checklist
|
||||
const documentChecklist = [
|
||||
{ document: 'Completed application form', required: true, note: 'Available online' },
|
||||
{ document: 'Academic transcripts (certified)', required: true, note: 'Original + translation if needed' },
|
||||
{ document: 'English proficiency test results', required: true, note: 'IELTS/TOEFL or equivalent' },
|
||||
{ document: 'Copy of passport/Emirates ID', required: true, note: 'Valid identification' },
|
||||
{ document: 'Passport-size photographs', required: true, note: '4 recent photos' },
|
||||
{ document: 'Statement of purpose', required: false, note: 'For postgraduate programs' },
|
||||
{ document: 'Letters of recommendation', required: false, note: '2-3 letters for postgraduate' },
|
||||
{ document: 'CV/Resume', required: false, note: 'For postgraduate and professional programs' },
|
||||
{ document: 'Portfolio', required: false, note: 'For design and creative programs' },
|
||||
{ document: 'Medical certificate', required: false, note: 'For specific programs only' }
|
||||
];
|
||||
|
||||
// Important dates and deadlines
|
||||
const importantDates = [
|
||||
{
|
||||
dateEn: 'October 31, 2024',
|
||||
dateAr: '31 أكتوبر 2024',
|
||||
eventEn: 'Applications Open',
|
||||
eventAr: 'فتح التطبيقات',
|
||||
typeEn: 'Application',
|
||||
typeAr: 'التطبيق'
|
||||
},
|
||||
{
|
||||
dateEn: 'January 15, 2025',
|
||||
dateAr: '15 يناير 2025',
|
||||
eventEn: 'Semester 1 Applications Close',
|
||||
eventAr: 'إغلاق طلبات الفصل الأول',
|
||||
typeEn: 'Deadline',
|
||||
typeAr: 'الموعد النهائي'
|
||||
},
|
||||
{
|
||||
dateEn: 'February 24, 2025',
|
||||
dateAr: '24 فبراير 2025',
|
||||
eventEn: 'Semester 1 Commences',
|
||||
eventAr: 'بداية الفصل الأول',
|
||||
typeEn: 'Start Date',
|
||||
typeAr: 'تاريخ البداية'
|
||||
},
|
||||
{
|
||||
dateEn: 'June 15, 2025',
|
||||
dateAr: '15 يونيو 2025',
|
||||
eventEn: 'Semester 2 Applications Close',
|
||||
eventAr: 'إغلاق طلبات الفصل الثاني',
|
||||
typeEn: 'Deadline',
|
||||
typeAr: 'الموعد النهائي'
|
||||
},
|
||||
{
|
||||
dateEn: 'July 28, 2025',
|
||||
dateAr: '28 يوليو 2025',
|
||||
eventEn: 'Semester 2 Commences',
|
||||
eventAr: 'بداية الفصل الثاني',
|
||||
typeEn: 'Start Date',
|
||||
typeAr: 'تاريخ البداية'
|
||||
}
|
||||
{ event: 'Fall Semester Application Deadline', date: 'July 15, 2025', type: 'deadline' },
|
||||
{ event: 'Fall Semester Classes Begin', date: 'September 1, 2025', type: 'start' },
|
||||
{ event: 'Spring Semester Application Deadline', date: 'December 15, 2025', type: 'deadline' },
|
||||
{ event: 'Spring Semester Classes Begin', date: 'February 1, 2026', type: 'start' },
|
||||
{ event: 'Summer Session Application Deadline', date: 'April 15, 2026', type: 'deadline' },
|
||||
{ event: 'Summer Session Classes Begin', date: 'June 1, 2026', type: 'start' }
|
||||
];
|
||||
|
||||
// Support services
|
||||
const supportServices = [
|
||||
{
|
||||
titleEn: 'Academic Support',
|
||||
titleAr: 'الدعم الأكاديمي',
|
||||
descriptionEn: 'Tutoring, study groups, and academic skills workshops.',
|
||||
descriptionAr: 'التدريس والمجموعات الدراسية وورش المهارات الأكاديمية.',
|
||||
iconColor: 'text-blue-500'
|
||||
},
|
||||
{
|
||||
titleEn: 'Student Accommodation',
|
||||
titleAr: 'سكن الطلاب',
|
||||
descriptionEn: 'On-campus and off-campus housing options with support.',
|
||||
descriptionAr: 'خيارات السكن داخل وخارج الحرم الجامعي مع الدعم.',
|
||||
iconColor: 'text-green-500'
|
||||
},
|
||||
{
|
||||
titleEn: 'Career Services',
|
||||
titleAr: 'خدمات الوظائف',
|
||||
descriptionEn: 'Job placement, internships, and career development programs.',
|
||||
descriptionAr: 'التوظيف والتدريب وبرامج تطوير المهنة.',
|
||||
iconColor: 'text-purple-500'
|
||||
},
|
||||
{
|
||||
titleEn: 'International Student Support',
|
||||
titleAr: 'دعم الطلاب الدوليين',
|
||||
descriptionEn: 'Visa assistance, orientation programs, and cultural integration.',
|
||||
descriptionAr: 'مساعدة التأشيرة وبرامج التوجيه والاندماج الثقافي.',
|
||||
iconColor: 'text-orange-500'
|
||||
},
|
||||
{
|
||||
titleEn: 'Financial Aid',
|
||||
titleAr: 'المساعدة المالية',
|
||||
descriptionEn: 'Scholarships, grants, and financial planning assistance.',
|
||||
descriptionAr: 'المنح الدراسية والمنح والمساعدة في التخطيط المالي.',
|
||||
iconColor: 'text-green-600'
|
||||
},
|
||||
{
|
||||
titleEn: 'Disability Services',
|
||||
titleAr: 'خدمات الإعاقة',
|
||||
descriptionEn: 'Accessibility support and reasonable adjustments.',
|
||||
descriptionAr: 'دعم إمكانية الوصول والتعديلات المعقولة.',
|
||||
iconColor: 'text-red-500'
|
||||
}
|
||||
// Application fees
|
||||
const applicationFees = [
|
||||
{ category: 'Undergraduate Programs', fee: 'OMR 25', note: 'Non-refundable application fee' },
|
||||
{ category: 'Postgraduate Programs', fee: 'OMR 50', note: 'Non-refundable application fee' },
|
||||
{ category: 'International Students', fee: '+OMR 25', note: 'Additional processing fee' },
|
||||
{ category: 'Late Application', fee: '+OMR 25', note: 'After deadline submission' }
|
||||
];
|
||||
|
||||
// Filter popular courses
|
||||
const popularCourses = mockCourses.slice(0, 6);
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-gray-50 ${dir === 'rtl' ? 'font-arabic' : ''}`} dir={dir}>
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-purple-600 to-blue-600 text-white py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="bg-gradient-to-r from-blue-900 via-indigo-900 to-purple-900 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
{language === 'en' ? 'Admissions' : 'القبول'}
|
||||
Join UTAS Oman
|
||||
</h1>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
{language === 'en'
|
||||
? 'Join UTAS and embark on your educational journey. We\'re here to guide you through every step of the application process.'
|
||||
: 'انضم إلى UTAS وابدأ رحلتك التعليمية. نحن هنا لإرشادك خلال كل خطوة من خطوات عملية التقديم.'
|
||||
}
|
||||
<p className="text-xl text-blue-100 max-w-3xl mx-auto mb-8">
|
||||
Start your journey toward academic excellence and career success. Apply now for our world-class programs
|
||||
designed to meet Oman's Vision 2040 goals.
|
||||
</p>
|
||||
<div className="flex justify-center space-x-8 text-center">
|
||||
<div>
|
||||
<div className="text-3xl font-bold">150+</div>
|
||||
<div className="opacity-80">{language === 'en' ? 'Programs' : 'برنامج'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold">95%</div>
|
||||
<div className="opacity-80">{language === 'en' ? 'Graduate Employment' : 'توظيف الخريجين'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold">100+</div>
|
||||
<div className="opacity-80">{language === 'en' ? 'Countries Represented' : 'دولة ممثلة'}</div>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Apply Online Now
|
||||
</button>
|
||||
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-900 transition-colors flex items-center gap-2">
|
||||
<BookOpen className="w-5 h-5" />
|
||||
View Programs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{/* Navigation Tabs */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="bg-white rounded-lg p-1 shadow-lg">
|
||||
{[
|
||||
{ id: 'requirements', labelEn: 'Requirements', labelAr: 'المتطلبات' },
|
||||
{ id: 'process', labelEn: 'Application Process', labelAr: 'عملية التقديم' },
|
||||
{ id: 'dates', labelEn: 'Important Dates', labelAr: 'تواريخ مهمة' },
|
||||
{ id: 'support', labelEn: 'Student Support', labelAr: 'دعم الطلاب' }
|
||||
].map(tab => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`px-6 py-3 rounded-md font-semibold transition-colors ${
|
||||
activeTab === tab.id
|
||||
? 'bg-purple-600 text-white'
|
||||
: 'text-gray-600 hover:text-purple-600'
|
||||
}`}
|
||||
>
|
||||
{language === 'en' ? tab.labelEn : tab.labelAr}
|
||||
</button>
|
||||
))}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Application Process */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Application Process</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Follow these simple steps to apply for your chosen program at UTAS Oman
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Requirements Tab */}
|
||||
{activeTab === 'requirements' && (
|
||||
<div className="space-y-8">
|
||||
{Object.values(entryRequirements).map((category, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center">
|
||||
<GraduationCap className="mr-3 text-purple-600" size={28} />
|
||||
{language === 'en' ? category.titleEn : category.titleAr}
|
||||
</h2>
|
||||
<div className="grid lg:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<ul className="space-y-4">
|
||||
{(language === 'en' ? category.requirements.en : category.requirements.ar).map((requirement, reqIndex) => (
|
||||
<li key={reqIndex} className="flex items-start">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 mr-3 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-700">{requirement}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-purple-50 rounded-lg p-6">
|
||||
<h3 className="font-semibold text-purple-900 mb-3">
|
||||
{language === 'en' ? 'Quick Tips' : 'نصائح سريعة'}
|
||||
</h3>
|
||||
<ul className="space-y-2 text-sm text-purple-700">
|
||||
<li>• {language === 'en' ? 'Apply early for better chances' : 'تقدم مبكراً لفرص أفضل'}</li>
|
||||
<li>• {language === 'en' ? 'Prepare documents in advance' : 'حضر الوثائق مسبقاً'}</li>
|
||||
<li>• {language === 'en' ? 'Contact our admissions team for help' : 'اتصل بفريق القبول للمساعدة'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Application Process Tab */}
|
||||
{activeTab === 'process' && (
|
||||
<div className="space-y-8">
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
{language === 'en' ? 'Application Process' : 'عملية التقديم'}
|
||||
</h2>
|
||||
<div className="space-y-8">
|
||||
{applicationSteps.map((step, index) => (
|
||||
<div key={step.step} className="flex items-start">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-purple-600 text-white rounded-full flex items-center justify-center font-bold text-lg mr-6">
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{applicationSteps.map((step, index) => (
|
||||
<div key={step.step} className="relative">
|
||||
<div className="bg-white rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow">
|
||||
<div className="flex items-center mb-4">
|
||||
<div className="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold mr-4">
|
||||
{step.step}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between mb-2">
|
||||
<h3 className="text-xl font-bold text-gray-900">
|
||||
{language === 'en' ? step.titleEn : step.titleAr}
|
||||
</h3>
|
||||
<div className="flex items-center text-sm text-purple-600 font-medium">
|
||||
<Clock className="w-4 h-4 mr-1" />
|
||||
{language === 'en' ? step.timelineEn : step.timelineAr}
|
||||
<h3 className="text-lg font-semibold text-gray-900">{step.title}</h3>
|
||||
<p className="text-sm text-blue-600">{step.timeline}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-4">{step.description}</p>
|
||||
<button className="text-blue-600 hover:text-blue-800 font-medium text-sm flex items-center gap-1">
|
||||
{step.action}
|
||||
<ArrowRight className="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
{index < applicationSteps.length - 1 && (
|
||||
<div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
|
||||
<ArrowRight className="w-8 h-8 text-gray-300" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Requirements Tabs */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Entry Requirements</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Requirements vary by program level. Select your study level below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
{/* Tab Navigation */}
|
||||
<div className="border-b border-gray-200">
|
||||
<nav className="flex">
|
||||
<button
|
||||
onClick={() => setActiveTab('requirements')}
|
||||
className={`px-6 py-4 text-sm font-medium ${
|
||||
activeTab === 'requirements'
|
||||
? 'border-b-2 border-blue-500 text-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Academic Requirements
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('documents')}
|
||||
className={`px-6 py-4 text-sm font-medium ${
|
||||
activeTab === 'documents'
|
||||
? 'border-b-2 border-blue-500 text-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Required Documents
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('deadlines')}
|
||||
className={`px-6 py-4 text-sm font-medium ${
|
||||
activeTab === 'deadlines'
|
||||
? 'border-b-2 border-blue-500 text-blue-600'
|
||||
: 'text-gray-500 hover:text-gray-700'
|
||||
}`}
|
||||
>
|
||||
Deadlines & Fees
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Tab Content */}
|
||||
<div className="p-8">
|
||||
{activeTab === 'requirements' && (
|
||||
<div className="space-y-8">
|
||||
{/* Undergraduate Requirements */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<GraduationCap className="w-6 h-6 text-blue-600" />
|
||||
Undergraduate Programs
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{requirements.undergraduate.map((req, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<h4 className="text-lg font-medium text-gray-900 mb-4">{req.category}</h4>
|
||||
<ul className="space-y-2">
|
||||
{req.items.map((item, itemIndex) => (
|
||||
<li key={itemIndex} className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 text-sm">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Postgraduate Requirements */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Award className="w-6 h-6 text-purple-600" />
|
||||
Postgraduate Programs
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{requirements.postgraduate.map((req, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<h4 className="text-lg font-medium text-gray-900 mb-4">{req.category}</h4>
|
||||
<ul className="space-y-2">
|
||||
{req.items.map((item, itemIndex) => (
|
||||
<li key={itemIndex} className="flex items-start gap-2">
|
||||
<CheckCircle className="w-4 h-4 text-green-600 mt-1 flex-shrink-0" />
|
||||
<span className="text-gray-600 text-sm">{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'documents' && (
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<FileText className="w-6 h-6 text-blue-600" />
|
||||
Document Checklist
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{documentChecklist.map((doc, index) => (
|
||||
<div key={index} className="flex items-start gap-4 p-4 border border-gray-200 rounded-lg">
|
||||
<div className="mt-1">
|
||||
{doc.required ? (
|
||||
<AlertCircle className="w-5 h-5 text-red-600" />
|
||||
) : (
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h4 className="font-medium text-gray-900">{doc.document}</h4>
|
||||
<span className={`px-2 py-1 text-xs rounded-full ${
|
||||
doc.required
|
||||
? 'bg-red-100 text-red-800'
|
||||
: 'bg-green-100 text-green-800'
|
||||
}`}>
|
||||
{doc.required ? 'Required' : 'Optional'}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{doc.note}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-600">
|
||||
{language === 'en' ? step.descriptionEn : step.descriptionAr}
|
||||
</p>
|
||||
{index < applicationSteps.length - 1 && (
|
||||
<div className="w-px h-8 bg-gray-300 ml-6 mt-4"></div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-8 text-center">
|
||||
<button className="bg-purple-600 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
|
||||
{language === 'en' ? 'Start Your Application' : 'ابدأ طلبك'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Popular Programs */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
{language === 'en' ? 'Popular Programs' : 'البرامج الشائعة'}
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{popularCourses.map(course => (
|
||||
<div key={course.id} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-2">
|
||||
{language === 'en' ? course.title : course.titleAr}
|
||||
{activeTab === 'deadlines' && (
|
||||
<div className="space-y-8">
|
||||
{/* Important Dates */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Calendar className="w-6 h-6 text-blue-600" />
|
||||
Important Dates
|
||||
</h3>
|
||||
<div className="space-y-2 text-sm text-gray-600 mb-4">
|
||||
<div className="flex items-center">
|
||||
<Clock className="w-4 h-4 mr-2" />
|
||||
<span>{course.duration}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<MapPin className="w-4 h-4 mr-2" />
|
||||
<span>{language === 'en' ? course.campus : course.campusAr}</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<DollarSign className="w-4 h-4 mr-2" />
|
||||
<span>{course.fees}</span>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{importantDates.map((date, index) => (
|
||||
<div key={index} className="flex items-center gap-4 p-4 border border-gray-200 rounded-lg">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
date.type === 'deadline' ? 'bg-red-500' : 'bg-green-500'
|
||||
}`}></div>
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-gray-900">{date.event}</h4>
|
||||
<p className="text-sm text-gray-600">{date.date}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="w-full bg-purple-50 text-purple-700 py-2 px-4 rounded-lg font-medium hover:bg-purple-100 transition-colors">
|
||||
{language === 'en' ? 'Learn More' : 'تعلم المزيد'}
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Important Dates Tab */}
|
||||
{activeTab === 'dates' && (
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
{language === 'en' ? 'Important Dates 2024-2025' : 'تواريخ مهمة 2024-2025'}
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{importantDates.map((date, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-6 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors">
|
||||
<div className="flex items-center">
|
||||
<div className="w-12 h-12 bg-purple-600 text-white rounded-full flex items-center justify-center mr-4">
|
||||
<Calendar size={20} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">
|
||||
{language === 'en' ? date.eventEn : date.eventAr}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600">
|
||||
{language === 'en' ? date.typeEn : date.typeAr}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="font-semibold text-purple-600">
|
||||
{language === 'en' ? date.dateEn : date.dateAr}
|
||||
{/* Application Fees */}
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<CreditCard className="w-6 h-6 text-green-600" />
|
||||
Application Fees
|
||||
</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{applicationFees.map((fee, index) => (
|
||||
<div key={index} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">{fee.category}</h4>
|
||||
<p className="text-sm text-gray-600">{fee.note}</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-lg font-semibold text-green-600">{fee.fee}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-8 text-center">
|
||||
<button className="bg-purple-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-purple-700 transition-colors mr-4">
|
||||
{language === 'en' ? 'Download Academic Calendar' : 'تحميل التقويم الأكاديمي'}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact & Support */}
|
||||
<section className="mb-16">
|
||||
<div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-8">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Need Help with Your Application?</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Our admissions team is here to support you throughout the application process.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Phone className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Call Us</h3>
|
||||
<p className="text-gray-600 mb-2">+968 2414 3555</p>
|
||||
<p className="text-sm text-gray-500">Mon-Thu: 8AM-4PM, Fri: 8AM-12PM</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-green-600 text-white rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Mail className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Email Us</h3>
|
||||
<p className="text-gray-600 mb-2">admissions@utas.edu.om</p>
|
||||
<p className="text-sm text-gray-500">Response within 24 hours</p>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<div className="w-16 h-16 bg-purple-600 text-white rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<MapPin className="w-8 h-8" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">Visit Us</h3>
|
||||
<p className="text-gray-600 mb-2">Campus Tours Available</p>
|
||||
<p className="text-sm text-gray-500">Schedule your visit online</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="text-center">
|
||||
<div className="bg-gradient-to-r from-blue-900 to-purple-900 rounded-2xl p-8 text-white">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to Start Your Application?</h2>
|
||||
<p className="text-xl text-blue-100 mb-8 max-w-2xl mx-auto">
|
||||
Take the first step toward your future. Join UTAS Oman and be part of Oman's Vision 2040.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-blue-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
|
||||
Start Application
|
||||
</button>
|
||||
<button className="bg-gray-200 text-gray-700 px-6 py-3 rounded-lg font-semibold hover:bg-gray-300 transition-colors">
|
||||
{language === 'en' ? 'Set Reminders' : 'تعيين التذكيرات'}
|
||||
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-blue-900 transition-colors">
|
||||
Download Application Guide
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Student Support Tab */}
|
||||
{activeTab === 'support' && (
|
||||
<div className="space-y-8">
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-8 text-center">
|
||||
{language === 'en' ? 'Student Support Services' : 'خدمات دعم الطلاب'}
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{supportServices.map((service, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className={`w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center mx-auto mb-4 ${service.iconColor}`}>
|
||||
<Users size={32} />
|
||||
</div>
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-3">
|
||||
{language === 'en' ? service.titleEn : service.titleAr}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm">
|
||||
{language === 'en' ? service.descriptionEn : service.descriptionAr}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||||
{language === 'en' ? 'Contact Admissions' : 'اتصل بالقبول'}
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-4">
|
||||
{language === 'en' ? 'General Inquiries' : 'الاستفسارات العامة'}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center">
|
||||
<Mail className="w-5 h-5 text-purple-600 mr-3" />
|
||||
<span>admissions@utas.edu.au</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Phone className="w-5 h-5 text-purple-600 mr-3" />
|
||||
<span>+61 3 6226 2999</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Globe className="w-5 h-5 text-purple-600 mr-3" />
|
||||
<span>www.utas.edu.au/admissions</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-4">
|
||||
{language === 'en' ? 'International Students' : 'الطلاب الدوليون'}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center">
|
||||
<Mail className="w-5 h-5 text-blue-600 mr-3" />
|
||||
<span>international@utas.edu.au</span>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<Phone className="w-5 h-5 text-blue-600 mr-3" />
|
||||
<span>+61 3 6226 1800</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex gap-4">
|
||||
<button className="flex-1 bg-purple-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-purple-700 transition-colors">
|
||||
{language === 'en' ? 'Schedule a Call' : 'جدولة مكالمة'}
|
||||
</button>
|
||||
<button className="flex-1 bg-gray-200 text-gray-700 py-3 px-4 rounded-lg font-semibold hover:bg-gray-300 transition-colors flex items-center justify-center gap-2">
|
||||
<ExternalLink size={16} />
|
||||
{language === 'en' ? 'Live Chat' : 'الدردشة المباشرة'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="mt-16 bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl p-8 text-white text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">
|
||||
{language === 'en' ? 'Ready to Start Your Journey?' : 'هل أنت مستعد لبدء رحلتك؟'}
|
||||
</h2>
|
||||
<p className="text-xl opacity-90 mb-8 max-w-2xl mx-auto">
|
||||
{language === 'en'
|
||||
? 'Join thousands of students who have chosen UTAS for their education. Apply now and take the first step towards your future.'
|
||||
: 'انضم إلى آلاف الطلاب الذين اختاروا UTAS لتعليمهم. تقدم الآن واتخذ الخطوة الأولى نحو مستقبلك.'
|
||||
}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
|
||||
{language === 'en' ? 'Apply Now' : 'تقدم الآن'}
|
||||
</button>
|
||||
<button className="bg-purple-700 text-white px-8 py-3 rounded-lg font-semibold hover:bg-purple-800 transition-colors">
|
||||
{language === 'en' ? 'Book Information Session' : 'احجز جلسة معلومات'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user