🚀 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>
|
||||
);
|
||||
|
||||
@@ -1,143 +0,0 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { OpenAI } from 'openai'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
|
||||
const openai = new OpenAI({
|
||||
apiKey: process.env.OPENAI_API_KEY,
|
||||
})
|
||||
|
||||
const prisma = new PrismaClient()
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const formData = await request.formData()
|
||||
const file = formData.get('file') as File
|
||||
const url = formData.get('url') as string
|
||||
|
||||
if (!file && !url) {
|
||||
return NextResponse.json({ error: 'File or URL is required' }, { status: 400 })
|
||||
}
|
||||
|
||||
let altText = ''
|
||||
let wcagScore = 0
|
||||
const issues: string[] = []
|
||||
const suggestions: string[] = []
|
||||
|
||||
if (file) {
|
||||
// Convert file to base64 for OpenAI Vision API
|
||||
const bytes = await file.arrayBuffer()
|
||||
const buffer = Buffer.from(bytes)
|
||||
const base64 = buffer.toString('base64')
|
||||
|
||||
// Generate alt text using OpenAI Vision
|
||||
const response = await openai.chat.completions.create({
|
||||
model: 'gpt-4o-mini',
|
||||
messages: [
|
||||
{
|
||||
role: 'user',
|
||||
content: [
|
||||
{
|
||||
type: 'text',
|
||||
text: 'Generate concise, descriptive alt text for this image that would be useful for screen readers. Focus on the most important visual elements and context.',
|
||||
},
|
||||
{
|
||||
type: 'image_url',
|
||||
image_url: {
|
||||
url: `data:${file.type};base64,${base64}`,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
max_tokens: 100,
|
||||
})
|
||||
|
||||
altText = response.choices[0]?.message?.content || 'Unable to generate alt text'
|
||||
}
|
||||
|
||||
// Simulate WCAG compliance checking
|
||||
if (!altText || altText.length < 10) {
|
||||
issues.push('Missing or inadequate alt text')
|
||||
suggestions.push('Add descriptive alt text for all images')
|
||||
wcagScore = 0.3
|
||||
} else if (altText.length > 125) {
|
||||
issues.push('Alt text is too long')
|
||||
suggestions.push('Keep alt text under 125 characters')
|
||||
wcagScore = 0.7
|
||||
} else {
|
||||
wcagScore = 0.95
|
||||
}
|
||||
|
||||
// Additional WCAG checks (simulated)
|
||||
if (url) {
|
||||
// Simulate checking color contrast, heading structure, etc.
|
||||
const randomFactor = Math.random()
|
||||
if (randomFactor < 0.3) {
|
||||
issues.push('Low color contrast detected')
|
||||
suggestions.push('Ensure color contrast ratio is at least 4.5:1')
|
||||
wcagScore = Math.min(wcagScore, 0.6)
|
||||
}
|
||||
if (randomFactor < 0.2) {
|
||||
issues.push('Missing heading structure')
|
||||
suggestions.push('Use proper heading hierarchy (h1, h2, h3, etc.)')
|
||||
wcagScore = Math.min(wcagScore, 0.5)
|
||||
}
|
||||
}
|
||||
|
||||
// Save audit to database
|
||||
const audit = await prisma.accessibilityAudit.create({
|
||||
data: {
|
||||
url: url || 'uploaded-image',
|
||||
imagePath: file ? file.name : null,
|
||||
altText,
|
||||
wcagScore,
|
||||
issues: JSON.stringify(issues),
|
||||
suggestions: JSON.stringify(suggestions),
|
||||
},
|
||||
})
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
audit: {
|
||||
id: audit.id,
|
||||
altText,
|
||||
wcagScore,
|
||||
issues,
|
||||
suggestions,
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error in accessibility API:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to process accessibility audit' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const audits = await prisma.accessibilityAudit.findMany({
|
||||
orderBy: {
|
||||
createdAt: 'desc',
|
||||
},
|
||||
take: 50,
|
||||
})
|
||||
|
||||
const avgScore = audits.length > 0
|
||||
? audits.reduce((sum: number, audit: { wcagScore: number | null }) =>
|
||||
sum + (audit.wcagScore || 0), 0) / audits.length
|
||||
: 0
|
||||
|
||||
return NextResponse.json({
|
||||
audits,
|
||||
statistics: {
|
||||
totalAudits: audits.length,
|
||||
averageScore: Math.round(avgScore * 100) / 100,
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error fetching accessibility audits:', error)
|
||||
return NextResponse.json({ error: 'Failed to fetch audits' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
+61
-100
@@ -1,109 +1,70 @@
|
||||
import { NextResponse } from 'next/server';
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import UTASChatBot from '@/lib/chatbot';
|
||||
|
||||
// Mock chat responses
|
||||
const mockResponses = [
|
||||
{
|
||||
trigger: ['library', 'hours', 'open'],
|
||||
response: {
|
||||
en: 'The library is open Monday-Friday 8:00 AM - 10:00 PM, Saturday 9:00 AM - 6:00 PM, and Sunday 12:00 PM - 8:00 PM. During exam periods, we have extended hours until midnight.',
|
||||
ar: 'المكتبة مفتوحة من الاثنين إلى الجمعة من 8:00 صباحاً حتى 10:00 مساءً، يوم السبت من 9:00 صباحاً حتى 6:00 مساءً، والأحد من 12:00 ظهراً حتى 8:00 مساءً. خلال فترات الامتحانات، لدينا ساعات ممتدة حتى منتصف الليل.'
|
||||
}
|
||||
},
|
||||
{
|
||||
trigger: ['password', 'change', 'reset'],
|
||||
response: {
|
||||
en: 'To change your password, go to Settings > Account > Change Password. You can also reset it using the "Forgot Password" link on the login page.',
|
||||
ar: 'لتغيير كلمة المرور الخاصة بك، اذهب إلى الإعدادات > الحساب > تغيير كلمة المرور. يمكنك أيضاً إعادة تعيينها باستخدام رابط "نسيت كلمة المرور" في صفحة تسجيل الدخول.'
|
||||
}
|
||||
},
|
||||
{
|
||||
trigger: ['registration', 'semester', 'enroll'],
|
||||
response: {
|
||||
en: 'Registration for the next semester opens on January 15th for continuing students and February 1st for new students. Please check your academic calendar for specific dates.',
|
||||
ar: 'التسجيل للفصل الدراسي القادم يفتح في 15 يناير للطلاب المستمرين و 1 فبراير للطلاب الجدد. يرجى مراجعة التقويم الأكاديمي للتواريخ المحددة.'
|
||||
}
|
||||
},
|
||||
{
|
||||
trigger: ['help', 'support', 'contact'],
|
||||
response: {
|
||||
en: 'For academic support, contact Student Services at support@university.edu or call (555) 123-4567. For technical issues, email IT help desk at it@university.edu.',
|
||||
ar: 'للدعم الأكاديمي، اتصل بخدمات الطلاب على support@university.edu أو اتصل بالرقم (555) 123-4567. للمشاكل التقنية، راسل مكتب المساعدة التقنية على it@university.edu.'
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
// Mental health keywords that trigger escalation
|
||||
const mentalHealthKeywords = [
|
||||
'depressed', 'depression', 'anxiety', 'anxious', 'stressed', 'stress',
|
||||
'overwhelmed', 'suicide', 'self-harm', 'hurt myself', 'kill myself',
|
||||
'hopeless', 'worthless', 'sad', 'crying', 'panic', 'fear',
|
||||
'مكتئب', 'اكتئاب', 'قلق', 'قلقان', 'متوتر', 'توتر',
|
||||
'مرهق', 'انتحار', 'إيذاء النفس', 'أؤذي نفسي', 'أقتل نفسي',
|
||||
'يائس', 'عديم القيمة', 'حزين', 'بكاء', 'هلع', 'خوف'
|
||||
];
|
||||
|
||||
function findBestResponse(message: string, language: string = 'en') {
|
||||
const lowerMessage = message.toLowerCase();
|
||||
|
||||
// Check for mental health keywords first
|
||||
const hasMentalHealthKeyword = mentalHealthKeywords.some(keyword =>
|
||||
lowerMessage.includes(keyword.toLowerCase())
|
||||
);
|
||||
|
||||
if (hasMentalHealthKeyword) {
|
||||
return {
|
||||
response: language === 'ar'
|
||||
? 'أفهم أنك تمر بوقت صعب. من المهم أن تطلب المساعدة من المختصين. يمكنك التواصل مع خدمة الاستشارة الجامعية على الرقم (555) 123-4567 أو زيارة مركز الصحة النفسية في الحرم الجامعي. في حالات الطوارئ، اتصل بالرقم 911 أو خط المساعدة الوطني للأزمات النفسية.'
|
||||
: 'I understand you\'re going through a difficult time. It\'s important to seek help from professionals. You can contact the university counseling service at (555) 123-4567 or visit the mental health center on campus. In emergencies, call 911 or the National Crisis Helpline.',
|
||||
escalate: true,
|
||||
category: 'mental_health'
|
||||
};
|
||||
}
|
||||
|
||||
// Look for FAQ matches
|
||||
for (const faq of mockResponses) {
|
||||
const hasMatch = faq.trigger.some(trigger =>
|
||||
lowerMessage.includes(trigger.toLowerCase())
|
||||
);
|
||||
|
||||
if (hasMatch) {
|
||||
return {
|
||||
response: faq.response[language as keyof typeof faq.response],
|
||||
escalate: false,
|
||||
category: 'faq'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Default response
|
||||
return {
|
||||
response: language === 'ar'
|
||||
? 'شكراً لك على سؤالك. يمكنني مساعدتك في العثور على المعلومات التي تحتاجها. جرب أن تسأل عن ساعات المكتبة، أو تغيير كلمة المرور، أو التسجيل للفصل الدراسي.'
|
||||
: 'Thank you for your question. I can help you find the information you need. Try asking about library hours, changing your password, or semester registration.',
|
||||
escalate: false,
|
||||
category: 'general'
|
||||
};
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const { message, language = 'en' } = body;
|
||||
const {
|
||||
message,
|
||||
mode = 'general',
|
||||
history = [],
|
||||
conversationHistory = [],
|
||||
systemPrompt = null,
|
||||
language = 'en'
|
||||
} = await request.json();
|
||||
|
||||
if (!message) {
|
||||
return NextResponse.json({ error: 'Message is required' }, { status: 400 });
|
||||
if (!message || typeof message !== 'string') {
|
||||
return NextResponse.json({
|
||||
error: 'Message is required and must be a string'
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
const result = findBestResponse(message, language);
|
||||
// Initialize the chatbot with API key from environment
|
||||
const apiKey = process.env.OPENROUTER_API_KEY || '';
|
||||
const chatbot = new UTASChatBot(apiKey);
|
||||
|
||||
// Generate AI response using OpenRouter
|
||||
const response = await chatbot.generateResponse(message);
|
||||
|
||||
// Log the interaction for demo purposes
|
||||
console.log('UTAS Chat:', {
|
||||
timestamp: new Date().toISOString(),
|
||||
message: message.substring(0, 100),
|
||||
response: response.substring(0, 100)
|
||||
});
|
||||
|
||||
return NextResponse.json({
|
||||
message: response,
|
||||
response: response, // for backward compatibility
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'UTAS AI Assistant'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Chat API Error:', error);
|
||||
|
||||
return NextResponse.json({
|
||||
response: result.response,
|
||||
escalate: result.escalate,
|
||||
category: result.category,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error processing chat:', error);
|
||||
return NextResponse.json({ error: 'Failed to process message' }, { status: 500 });
|
||||
message: "I apologize, but I'm experiencing technical difficulties. Please try again or contact UTAS directly at +61 3 6226 6200 or info@utas.edu.au for immediate assistance.",
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'UTAS AI Assistant',
|
||||
error: true
|
||||
}, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json({
|
||||
service: 'UTAS AI Chat Assistant',
|
||||
status: 'active',
|
||||
features: [
|
||||
'RAG-powered responses using UTAS knowledge base',
|
||||
'OpenRouter AI integration (when API key provided)',
|
||||
'Real-time course and program information',
|
||||
'Application guidance and support',
|
||||
'Campus and research information'
|
||||
],
|
||||
endpoints: {
|
||||
POST: 'Send message and conversation history',
|
||||
GET: 'Service status and information'
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { OpenAI } from 'openai'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
|
||||
const openai = new OpenAI({
|
||||
apiKey: process.env.OPENAI_API_KEY,
|
||||
})
|
||||
|
||||
const prisma = new PrismaClient()
|
||||
|
||||
type Message = {
|
||||
sender: 'user' | 'bot'
|
||||
text: string
|
||||
timestamp: Date
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const { message, mode = 'general', history = [] } = await request.json()
|
||||
|
||||
// Get FAQs from database
|
||||
const faqs = await prisma.fAQ.findMany({
|
||||
where: {
|
||||
language: 'en', // For demo, we'll use English FAQs
|
||||
},
|
||||
orderBy: {
|
||||
priority: 'asc',
|
||||
},
|
||||
})
|
||||
|
||||
// Create context from FAQs
|
||||
const faqContext = faqs.map((faq: { question: string; answer: string }) =>
|
||||
`Q: ${faq.question}\nA: ${faq.answer}`
|
||||
).join('\n\n')
|
||||
|
||||
// Check for mental health indicators if in mental health mode
|
||||
let shouldEscalate = false
|
||||
if (mode === 'mental_health') {
|
||||
// Simple trigger phrase detection
|
||||
const triggerPhrases = [
|
||||
'anxious', 'anxiety', 'depressed', 'depression', 'stressed', 'stress',
|
||||
'overwhelmed', 'panic', 'worried', 'fear', 'scared', 'sad', 'hopeless',
|
||||
'suicide', 'self-harm', 'hurt myself', 'end it all', 'giving up'
|
||||
]
|
||||
|
||||
const lowerMessage = message.toLowerCase()
|
||||
shouldEscalate = triggerPhrases.some(phrase => lowerMessage.includes(phrase))
|
||||
}
|
||||
|
||||
// Prepare system message based on mode
|
||||
let systemMessage = ''
|
||||
if (mode === 'mental_health') {
|
||||
systemMessage = `You are a compassionate mental health support assistant for a university.
|
||||
Provide empathetic, supportive responses. If the user mentions serious mental health concerns,
|
||||
gently encourage them to speak with a professional counselor. Keep responses warm and understanding.`
|
||||
} else {
|
||||
systemMessage = `You are a helpful university assistant. Answer questions based on the following FAQ database:
|
||||
|
||||
${faqContext}
|
||||
|
||||
If you cannot find the answer in the FAQs, provide a helpful general response and suggest contacting
|
||||
the appropriate university department. Keep responses concise and helpful.`
|
||||
}
|
||||
|
||||
const completion = await openai.chat.completions.create({
|
||||
model: 'gpt-4o-mini',
|
||||
messages: [
|
||||
{ role: 'system', content: systemMessage },
|
||||
...history.map((msg: Message) => ({
|
||||
role: msg.sender === 'user' ? 'user' as const : 'assistant' as const,
|
||||
content: msg.text,
|
||||
})),
|
||||
{ role: 'user', content: message },
|
||||
],
|
||||
max_tokens: 500,
|
||||
temperature: 0.7,
|
||||
})
|
||||
|
||||
const response = completion.choices[0]?.message?.content || 'I apologize, but I cannot provide a response at this time.'
|
||||
|
||||
// Log the chat session
|
||||
await prisma.chatSession.create({
|
||||
data: {
|
||||
type: mode === 'mental_health' ? 'MENTAL_HEALTH' : 'GENERAL',
|
||||
messages: JSON.stringify([
|
||||
...history,
|
||||
{ sender: 'user', text: message, timestamp: new Date() },
|
||||
{ sender: 'bot', text: response, timestamp: new Date() },
|
||||
]),
|
||||
},
|
||||
})
|
||||
|
||||
return NextResponse.json({
|
||||
response,
|
||||
shouldEscalate,
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error in chat API:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to process chat message' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
+17
-24
@@ -1,17 +1,9 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import UTASChatBot from '@/lib/chatbot';
|
||||
|
||||
// Initialize the chatbot (will use OpenRouter if API key is available)
|
||||
const chatbot = new UTASChatBot();
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const {
|
||||
message,
|
||||
conversationHistory = [],
|
||||
systemPrompt = null,
|
||||
language = 'en'
|
||||
} = await request.json();
|
||||
const { message } = await request.json();
|
||||
|
||||
if (!message || typeof message !== 'string') {
|
||||
return NextResponse.json({
|
||||
@@ -19,13 +11,12 @@ export async function POST(request: NextRequest) {
|
||||
}, { status: 400 });
|
||||
}
|
||||
|
||||
// Generate AI response using RAG and potentially OpenRouter with role-based context
|
||||
const response = await chatbot.generateResponse(
|
||||
message,
|
||||
conversationHistory,
|
||||
systemPrompt,
|
||||
language
|
||||
);
|
||||
// Initialize the chatbot with API key from environment
|
||||
const apiKey = process.env.OPENROUTER_API_KEY || '';
|
||||
const chatbot = new UTASChatBot(apiKey);
|
||||
|
||||
// Generate AI response using OpenRouter
|
||||
const response = await chatbot.generateResponse(message);
|
||||
|
||||
// Log the interaction for demo purposes
|
||||
console.log('UTAS Chat:', {
|
||||
@@ -34,19 +25,22 @@ export async function POST(request: NextRequest) {
|
||||
response: response.substring(0, 100)
|
||||
});
|
||||
|
||||
// Return both message and response for backward compatibility
|
||||
return NextResponse.json({
|
||||
message: response,
|
||||
response: response,
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'UTAS AI Assistant'
|
||||
source: 'UTAS Oman AI Assistant'
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Chat API Error:', error);
|
||||
|
||||
return NextResponse.json({
|
||||
message: "I apologize, but I'm experiencing technical difficulties. Please try again or contact UTAS directly at +61 3 6226 6200 or info@utas.edu.au for immediate assistance.",
|
||||
message: "I apologize, but I'm experiencing technical difficulties. Please try again or contact UTAS Oman directly at +968 2414 3555 or admissions@utas.edu.om for immediate assistance.",
|
||||
response: "I apologize, but I'm experiencing technical difficulties. Please try again or contact UTAS Oman directly at +968 2414 3555 or admissions@utas.edu.om for immediate assistance.",
|
||||
timestamp: new Date().toISOString(),
|
||||
source: 'UTAS AI Assistant',
|
||||
source: 'UTAS Oman AI Assistant',
|
||||
error: true
|
||||
}, { status: 500 });
|
||||
}
|
||||
@@ -54,17 +48,16 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
export async function GET() {
|
||||
return NextResponse.json({
|
||||
service: 'UTAS AI Chat Assistant',
|
||||
service: 'UTAS Oman AI Chat Assistant',
|
||||
status: 'active',
|
||||
features: [
|
||||
'RAG-powered responses using UTAS knowledge base',
|
||||
'OpenRouter AI integration (when API key provided)',
|
||||
'OpenRouter AI integration with multilingual support',
|
||||
'Real-time course and program information',
|
||||
'Application guidance and support',
|
||||
'Campus and research information'
|
||||
'UTAS Oman specific information'
|
||||
],
|
||||
endpoints: {
|
||||
POST: 'Send message and conversation history',
|
||||
POST: 'Send message for AI response',
|
||||
GET: 'Service status and information'
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
|
||||
const prisma = new PrismaClient()
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const { rating, type, feedback, sessionId, userId } = await request.json()
|
||||
|
||||
const survey = await prisma.survey.create({
|
||||
data: {
|
||||
rating,
|
||||
type,
|
||||
feedback,
|
||||
sessionId,
|
||||
userId,
|
||||
},
|
||||
})
|
||||
|
||||
return NextResponse.json({ success: true, survey })
|
||||
} catch (error) {
|
||||
console.error('Error creating survey:', error)
|
||||
return NextResponse.json({ error: 'Failed to submit survey' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const surveys = await prisma.survey.findMany({
|
||||
orderBy: {
|
||||
createdAt: 'desc',
|
||||
},
|
||||
take: 100,
|
||||
})
|
||||
|
||||
// Calculate statistics
|
||||
const totalSurveys = surveys.length
|
||||
const averageRating = totalSurveys > 0
|
||||
? surveys.reduce((sum: number, survey: { rating: number }) => sum + survey.rating, 0) / totalSurveys
|
||||
: 0
|
||||
const ratingDistribution = surveys.reduce((acc: Record<number, number>, survey: { rating: number }) => {
|
||||
acc[survey.rating] = (acc[survey.rating] || 0) + 1
|
||||
return acc
|
||||
}, {} as Record<number, number>)
|
||||
|
||||
return NextResponse.json({
|
||||
surveys,
|
||||
statistics: {
|
||||
totalSurveys,
|
||||
averageRating: Math.round(averageRating * 10) / 10,
|
||||
ratingDistribution,
|
||||
},
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error fetching surveys:', error)
|
||||
return NextResponse.json({ error: 'Failed to fetch surveys' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { PrismaClient } from '@prisma/client'
|
||||
|
||||
const prisma = new PrismaClient()
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const email = searchParams.get('email')
|
||||
|
||||
if (!email) {
|
||||
return NextResponse.json({ error: 'Email is required' }, { status: 400 })
|
||||
}
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { email },
|
||||
include: {
|
||||
enrollments: {
|
||||
include: {
|
||||
course: true,
|
||||
},
|
||||
},
|
||||
advisor: true,
|
||||
},
|
||||
})
|
||||
|
||||
if (!user) {
|
||||
return NextResponse.json({ error: 'User not found' }, { status: 404 })
|
||||
}
|
||||
|
||||
return NextResponse.json(user)
|
||||
} catch (error) {
|
||||
console.error('Error fetching user profile:', error)
|
||||
return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,460 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
MapPin, Phone, Mail, Clock, Send, MessageSquare,
|
||||
Users, BookOpen, GraduationCap, CreditCard, Globe, Navigation
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function ContactPage() {
|
||||
const [selectedDepartment, setSelectedDepartment] = useState('general');
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
department: 'general',
|
||||
subject: '',
|
||||
message: ''
|
||||
});
|
||||
|
||||
// Contact information by department
|
||||
const departments = [
|
||||
{
|
||||
id: 'general',
|
||||
name: 'General Information',
|
||||
icon: <Users className="w-6 h-6" />,
|
||||
description: 'General inquiries and campus information',
|
||||
phone: '+968 2414 3555',
|
||||
email: 'info@utas.edu.om',
|
||||
hours: 'Sun-Thu: 8AM-4PM, Fri: 8AM-12PM',
|
||||
location: 'Main Reception, Ground Floor'
|
||||
},
|
||||
{
|
||||
id: 'admissions',
|
||||
name: 'Admissions Office',
|
||||
icon: <GraduationCap className="w-6 h-6" />,
|
||||
description: 'Applications, requirements, and enrollment',
|
||||
phone: '+968 2414 3555 (Ext. 101)',
|
||||
email: 'admissions@utas.edu.om',
|
||||
hours: 'Sun-Thu: 8AM-4PM, Fri: 8AM-12PM',
|
||||
location: 'Student Services Building, Room 102'
|
||||
},
|
||||
{
|
||||
id: 'academic',
|
||||
name: 'Academic Affairs',
|
||||
icon: <BookOpen className="w-6 h-6" />,
|
||||
description: 'Course information, academic support, and advising',
|
||||
phone: '+968 2414 3555 (Ext. 201)',
|
||||
email: 'academic@utas.edu.om',
|
||||
hours: 'Sun-Thu: 8AM-4PM',
|
||||
location: 'Academic Building, 2nd Floor'
|
||||
},
|
||||
{
|
||||
id: 'finance',
|
||||
name: 'Finance Office',
|
||||
icon: <CreditCard className="w-6 h-6" />,
|
||||
description: 'Fees, payments, scholarships, and financial aid',
|
||||
phone: '+968 2414 3555 (Ext. 301)',
|
||||
email: 'finance@utas.edu.om',
|
||||
hours: 'Sun-Thu: 8AM-3PM, Fri: 8AM-12PM',
|
||||
location: 'Administration Building, Room 105'
|
||||
},
|
||||
{
|
||||
id: 'international',
|
||||
name: 'International Office',
|
||||
icon: <Globe className="w-6 h-6" />,
|
||||
description: 'International students, visas, and study abroad',
|
||||
phone: '+968 2414 3555 (Ext. 401)',
|
||||
email: 'international@utas.edu.om',
|
||||
hours: 'Sun-Thu: 8AM-4PM',
|
||||
location: 'Student Services Building, Room 205'
|
||||
},
|
||||
{
|
||||
id: 'technical',
|
||||
name: 'Technical Support',
|
||||
icon: <MessageSquare className="w-6 h-6" />,
|
||||
description: 'IT support, online platforms, and technical issues',
|
||||
phone: '+968 2414 3555 (Ext. 501)',
|
||||
email: 'support@utas.edu.om',
|
||||
hours: 'Sun-Thu: 8AM-5PM',
|
||||
location: 'IT Center, Ground Floor'
|
||||
}
|
||||
];
|
||||
|
||||
// Campus locations and facilities
|
||||
const campusInfo = {
|
||||
mainAddress: 'UTAS Oman Campus, Knowledge Oasis Muscat, Muscat, Sultanate of Oman',
|
||||
coordinates: '23.6345° N, 58.5877° E',
|
||||
postalCode: 'PC 111',
|
||||
emergencyContact: '+968 2414 3500 (24/7)',
|
||||
facilities: [
|
||||
'Modern lecture halls and laboratories',
|
||||
'Library and digital resources center',
|
||||
'Student accommodation',
|
||||
'Sports and recreation facilities',
|
||||
'Cafeteria and dining areas',
|
||||
'Prayer rooms and wellness center',
|
||||
'Parking facilities',
|
||||
'Public transportation access'
|
||||
]
|
||||
};
|
||||
|
||||
// Frequently asked questions
|
||||
const faqs = [
|
||||
{
|
||||
question: 'What are the admission requirements for undergraduate programs?',
|
||||
answer: 'Minimum high school diploma with 60% average, English proficiency (IELTS 5.5 or equivalent), and subject-specific requirements vary by program.'
|
||||
},
|
||||
{
|
||||
question: 'Are scholarships available for international students?',
|
||||
answer: 'Yes, we offer merit-based scholarships, need-based financial aid, and industry partnership scholarships for qualified students.'
|
||||
},
|
||||
{
|
||||
question: 'What is the application deadline for Fall 2025?',
|
||||
answer: 'The application deadline for Fall 2025 is July 15, 2025. Late applications are accepted until July 30 with additional fees.'
|
||||
},
|
||||
{
|
||||
question: 'Do you provide accommodation for students?',
|
||||
answer: 'Yes, we offer on-campus accommodation and can assist with finding suitable off-campus housing options.'
|
||||
},
|
||||
{
|
||||
question: 'What support services are available for students?',
|
||||
answer: 'We provide academic advising, career counseling, health services, library resources, IT support, and student life activities.'
|
||||
},
|
||||
{
|
||||
question: 'Are degrees recognized internationally?',
|
||||
answer: 'Yes, UTAS Oman degrees are internationally recognized and accredited by relevant educational authorities.'
|
||||
}
|
||||
];
|
||||
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle form submission
|
||||
console.log('Form submitted:', formData);
|
||||
// Reset form or show success message
|
||||
};
|
||||
|
||||
const selectedDept = departments.find(dept => dept.id === selectedDepartment);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-teal-900 via-blue-900 to-indigo-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">
|
||||
Contact UTAS Oman
|
||||
</h1>
|
||||
<p className="text-xl text-teal-100 max-w-3xl mx-auto mb-8">
|
||||
Get in touch with our team for information about programs, admissions,
|
||||
student services, and more. We're here to help you succeed.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-teal-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center gap-2">
|
||||
<Phone className="w-5 h-5" />
|
||||
Call Us Now
|
||||
</button>
|
||||
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-teal-900 transition-colors flex items-center gap-2">
|
||||
<MapPin className="w-5 h-5" />
|
||||
Visit Campus
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Quick Contact Section */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Get in Touch</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Choose the department that best matches your inquiry for faster assistance
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
|
||||
{departments.map((dept) => (
|
||||
<button
|
||||
key={dept.id}
|
||||
onClick={() => setSelectedDepartment(dept.id)}
|
||||
className={`p-6 rounded-xl border-2 text-left transition-all ${
|
||||
selectedDepartment === dept.id
|
||||
? 'border-blue-500 bg-blue-50'
|
||||
: 'border-gray-200 bg-white hover:border-blue-300'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<div className={`p-2 rounded-lg ${
|
||||
selectedDepartment === dept.id ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
{dept.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{dept.name}</h3>
|
||||
<p className="text-sm text-gray-600">{dept.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Selected Department Details */}
|
||||
{selectedDept && (
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 border-l-4 border-blue-500">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-blue-600" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">Phone</p>
|
||||
<p className="font-medium text-gray-900">{selectedDept.phone}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">Email</p>
|
||||
<p className="font-medium text-gray-900">{selectedDept.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="w-5 h-5 text-orange-600" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">Hours</p>
|
||||
<p className="font-medium text-gray-900">{selectedDept.hours}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<MapPin className="w-5 h-5 text-purple-600" />
|
||||
<div>
|
||||
<p className="text-sm text-gray-600">Location</p>
|
||||
<p className="font-medium text-gray-900">{selectedDept.location}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
|
||||
{/* Contact Form and Campus Info */}
|
||||
<section className="mb-16">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||
{/* Contact Form */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">Send Us a Message</h3>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="department" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Department
|
||||
</label>
|
||||
<select
|
||||
id="department"
|
||||
name="department"
|
||||
value={formData.department}
|
||||
onChange={handleInputChange}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
>
|
||||
{departments.map((dept) => (
|
||||
<option key={dept.id} value={dept.id}>
|
||||
{dept.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Subject *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
name="subject"
|
||||
value={formData.subject}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
rows={6}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
<Send className="w-5 h-5" />
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Campus Information */}
|
||||
<div className="space-y-8">
|
||||
{/* Address and Location */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">Campus Location</h3>
|
||||
|
||||
<div className="space-y-4 mb-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<MapPin className="w-6 h-6 text-blue-600 mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Address</p>
|
||||
<p className="text-gray-600">{campusInfo.mainAddress}</p>
|
||||
<p className="text-sm text-gray-500">Postal Code: {campusInfo.postalCode}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<Navigation className="w-6 h-6 text-green-600 mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Coordinates</p>
|
||||
<p className="text-gray-600">{campusInfo.coordinates}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<Phone className="w-6 h-6 text-red-600 mt-1" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Emergency Contact</p>
|
||||
<p className="text-gray-600">{campusInfo.emergencyContact}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button className="w-full bg-blue-50 text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-blue-100 transition-colors">
|
||||
Get Directions
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Campus Facilities */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">Campus Facilities</h3>
|
||||
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{campusInfo.facilities.map((facility, index) => (
|
||||
<div key={index} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
|
||||
<div className="w-2 h-2 bg-blue-600 rounded-full"></div>
|
||||
<span className="text-gray-700">{facility}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Quick answers to common questions about UTAS Oman
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{faqs.map((faq, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3">{faq.question}</h3>
|
||||
<p className="text-gray-600">{faq.answer}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="text-center">
|
||||
<div className="bg-gradient-to-r from-teal-900 to-blue-900 rounded-2xl p-8 text-white">
|
||||
<h2 className="text-3xl font-bold mb-4">Still Have Questions?</h2>
|
||||
<p className="text-xl text-teal-100 mb-8 max-w-2xl mx-auto">
|
||||
Our team is ready to help you with any questions about programs, admissions,
|
||||
or campus life at UTAS Oman.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-teal-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
|
||||
Schedule a Call
|
||||
</button>
|
||||
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-teal-900 transition-colors">
|
||||
Visit Our Campus
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,303 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Search, Filter, MapPin, Clock, DollarSign, BookOpen, Award, ChevronRight } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Course {
|
||||
id: string;
|
||||
title: string;
|
||||
area: string;
|
||||
duration: string;
|
||||
description: string;
|
||||
entry: string;
|
||||
campus: string[];
|
||||
fees: string;
|
||||
pathways: string[];
|
||||
}
|
||||
|
||||
export default function CoursesPage() {
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedArea, setSelectedArea] = useState('');
|
||||
const [selectedLevel, setSelectedLevel] = useState('');
|
||||
const [selectedCampus, setSelectedCampus] = useState('');
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const areas = [
|
||||
"Business and Law",
|
||||
"Creative Arts and Design",
|
||||
"Earth, Sea, Antarctic and Environment",
|
||||
"Education, Humanities and Social Sciences",
|
||||
"Health and Medicine",
|
||||
"Science, Technology and Engineering"
|
||||
];
|
||||
|
||||
const campuses = ["Hobart", "Launceston", "Burnie", "Sydney"];
|
||||
|
||||
useEffect(() => {
|
||||
fetchCourses();
|
||||
}, [searchQuery, selectedArea, selectedLevel, selectedCampus]);
|
||||
|
||||
const fetchCourses = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = new URLSearchParams();
|
||||
if (searchQuery) params.append('q', searchQuery);
|
||||
if (selectedArea) params.append('area', selectedArea);
|
||||
if (selectedLevel) params.append('level', selectedLevel);
|
||||
if (selectedCampus) params.append('campus', selectedCampus);
|
||||
|
||||
const response = await fetch(`/api/courses?${params}`);
|
||||
const data = await response.json();
|
||||
setCourses(data.courses || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching courses:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [searchQuery, selectedArea, selectedLevel, selectedCampus]);
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchQuery('');
|
||||
setSelectedArea('');
|
||||
setSelectedLevel('');
|
||||
setSelectedCampus('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-teal-600 text-white">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
Find Your Perfect Course
|
||||
</h1>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
Explore over 350 study programs at the world's #1 university for climate action
|
||||
</p>
|
||||
|
||||
{/* Search Bar */}
|
||||
<div className="relative max-w-2xl mx-auto">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search courses, keywords, or study areas..."
|
||||
className="w-full pl-12 pr-4 py-4 rounded-xl text-gray-900 text-lg focus:outline-none focus:ring-2 focus:ring-white"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Filters */}
|
||||
<div className="bg-white shadow-sm border-b">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex flex-wrap items-center gap-4">
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex items-center space-x-2 px-4 py-2 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Filter size={16} />
|
||||
<span>Filters</span>
|
||||
</button>
|
||||
|
||||
{/* Quick Filters */}
|
||||
<select
|
||||
value={selectedArea}
|
||||
onChange={(e) => setSelectedArea(e.target.value)}
|
||||
className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">All Study Areas</option>
|
||||
{areas.map(area => (
|
||||
<option key={area} value={area}>{area}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={selectedLevel}
|
||||
onChange={(e) => setSelectedLevel(e.target.value)}
|
||||
className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">All Levels</option>
|
||||
<option value="undergraduate">Undergraduate</option>
|
||||
<option value="postgraduate">Postgraduate</option>
|
||||
</select>
|
||||
|
||||
<select
|
||||
value={selectedCampus}
|
||||
onChange={(e) => setSelectedCampus(e.target.value)}
|
||||
className="px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">All Campuses</option>
|
||||
{campuses.map(campus => (
|
||||
<option key={campus} value={campus}>{campus}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{(searchQuery || selectedArea || selectedLevel || selectedCampus) && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||
>
|
||||
Clear all filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results */}
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{loading ? 'Searching...' : `${courses.length} courses found`}
|
||||
</h2>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-gray-600">Sort by:</span>
|
||||
<select className="px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option>Relevance</option>
|
||||
<option>Course Name A-Z</option>
|
||||
<option>Study Area</option>
|
||||
<option>Duration</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-xl shadow-sm p-6 animate-pulse">
|
||||
<div className="h-4 bg-gray-200 rounded mb-3"></div>
|
||||
<div className="h-6 bg-gray-200 rounded mb-4"></div>
|
||||
<div className="h-16 bg-gray-200 rounded mb-4"></div>
|
||||
<div className="space-y-2">
|
||||
<div className="h-3 bg-gray-200 rounded"></div>
|
||||
<div className="h-3 bg-gray-200 rounded w-3/4"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{courses.map(course => (
|
||||
<div key={course.id} className="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden group">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<span className="px-3 py-1 bg-blue-100 text-blue-700 text-sm font-medium rounded-full">
|
||||
{course.area}
|
||||
</span>
|
||||
<Award size={16} className="text-yellow-500" />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
|
||||
{course.title}
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-600 mb-4 line-clamp-3">
|
||||
{course.description}
|
||||
</p>
|
||||
|
||||
<div className="space-y-2 mb-4">
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<Clock size={14} className="mr-2" />
|
||||
<span>{course.duration}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<MapPin size={14} className="mr-2" />
|
||||
<span>{course.campus.join(', ')}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<DollarSign size={14} className="mr-2" />
|
||||
<span>{course.fees}</span>
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-500">
|
||||
<BookOpen size={14} className="mr-2" />
|
||||
<span>{course.entry}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{course.pathways.slice(0, 3).map(pathway => (
|
||||
<span key={pathway} className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
|
||||
{pathway}
|
||||
</span>
|
||||
))}
|
||||
{course.pathways.length > 3 && (
|
||||
<span className="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
|
||||
+{course.pathways.length - 3} more
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Link
|
||||
href={`/courses/${course.id}`}
|
||||
className="flex-1 bg-blue-600 text-white px-4 py-2 rounded-lg text-center hover:bg-blue-700 transition-colors text-sm font-medium"
|
||||
>
|
||||
Learn More
|
||||
</Link>
|
||||
<Link
|
||||
href="/apply"
|
||||
className="flex-1 border border-blue-600 text-blue-600 px-4 py-2 rounded-lg text-center hover:bg-blue-50 transition-colors text-sm font-medium"
|
||||
>
|
||||
Apply Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!loading && courses.length === 0 && (
|
||||
<div className="text-center py-16">
|
||||
<div className="bg-gray-100 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6">
|
||||
<Search size={32} className="text-gray-400" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2">No courses found</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
Try adjusting your search criteria or browse all available courses.
|
||||
</p>
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Show All Courses
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="bg-gradient-to-r from-teal-600 to-blue-600 text-white py-16">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to Apply?</h2>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
Join thousands of students at Australia's most sustainable university
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/apply"
|
||||
className="bg-white text-blue-600 px-8 py-3 rounded-xl font-semibold hover:bg-gray-100 transition-all duration-200 flex items-center justify-center"
|
||||
>
|
||||
Start Application
|
||||
<ChevronRight size={20} className="ml-2" />
|
||||
</Link>
|
||||
<Link
|
||||
href="/chat"
|
||||
className="border-2 border-white text-white px-8 py-3 rounded-xl font-semibold hover:bg-white hover:text-blue-600 transition-all duration-200"
|
||||
>
|
||||
Chat with AI Assistant
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+261
-62
@@ -1,24 +1,25 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { Search, Filter, MapPin, Clock, DollarSign, BookOpen, Award, ChevronRight, X } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Course {
|
||||
id: string;
|
||||
title: string;
|
||||
degree: string;
|
||||
area: string;
|
||||
duration: string;
|
||||
description: string;
|
||||
entry: string;
|
||||
campus: string[];
|
||||
fees: string;
|
||||
pathways: string[];
|
||||
type: 'postgraduate' | 'undergraduate';
|
||||
isNew?: boolean;
|
||||
highlights: string[];
|
||||
}
|
||||
|
||||
export default function CoursesPage() {
|
||||
const [courses, setCourses] = useState<Course[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedArea, setSelectedArea] = useState('');
|
||||
const [selectedLevel, setSelectedLevel] = useState('');
|
||||
@@ -26,39 +27,227 @@ export default function CoursesPage() {
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
const areas = [
|
||||
"Business and Law",
|
||||
"Creative Arts and Design",
|
||||
"Earth, Sea, Antarctic and Environment",
|
||||
"Education, Humanities and Social Sciences",
|
||||
"Health and Medicine",
|
||||
"Science, Technology and Engineering"
|
||||
"Engineering & Technology",
|
||||
"Business & Management",
|
||||
"Business & Law",
|
||||
"Technology & Innovation",
|
||||
"Environment & Sustainability",
|
||||
"Agriculture & Food Sciences",
|
||||
"Education & Humanities",
|
||||
"Creative Arts & Design",
|
||||
"Technology & Computing",
|
||||
"Business & Marketing",
|
||||
"Business & Economics",
|
||||
"Science & Technology"
|
||||
];
|
||||
|
||||
const levels = ["Undergraduate", "Postgraduate"];
|
||||
const campuses = ["Hobart", "Launceston", "Burnie", "Sydney"];
|
||||
const campuses = ["Muscat Main Campus", "Salalah Branch", "Sohar Branch", "Sur Branch", "Nizwa Branch"];
|
||||
|
||||
const fetchCourses = React.useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const params = new URLSearchParams();
|
||||
if (searchQuery) params.append('q', searchQuery);
|
||||
if (selectedArea) params.append('area', selectedArea);
|
||||
if (selectedLevel) params.append('level', selectedLevel);
|
||||
if (selectedCampus) params.append('campus', selectedCampus);
|
||||
// UTAS Oman Programs Data
|
||||
const courses: Course[] = [
|
||||
// Postgraduate Programs
|
||||
{
|
||||
id: 'mtech-mineral-processing',
|
||||
title: 'Mineral Processing Engineering',
|
||||
degree: 'M. Tech',
|
||||
area: 'Engineering & Technology',
|
||||
duration: '2 years',
|
||||
description: 'Advanced program focusing on modern mineral processing techniques, sustainable mining practices, and cutting-edge technology in the mining industry.',
|
||||
entry: 'Bachelor\'s degree in Engineering with minimum 2.5 GPA',
|
||||
campus: ['Muscat Main Campus'],
|
||||
fees: 'OMR 3,500/semester',
|
||||
type: 'postgraduate',
|
||||
highlights: ['Industry partnerships', 'Research opportunities', 'Expert faculty']
|
||||
},
|
||||
{
|
||||
id: 'mba-leadership-innovation',
|
||||
title: 'Leadership and Innovation',
|
||||
degree: 'MBA',
|
||||
area: 'Business & Management',
|
||||
duration: '2 years',
|
||||
description: 'Comprehensive MBA program designed to develop transformational leaders and innovative thinkers for the dynamic business environment.',
|
||||
entry: 'Bachelor\'s degree with 3+ years professional experience',
|
||||
campus: ['Muscat Main Campus', 'Salalah Branch'],
|
||||
fees: 'OMR 4,000/semester',
|
||||
type: 'postgraduate',
|
||||
highlights: ['Leadership development', 'Innovation lab', 'International exposure']
|
||||
},
|
||||
{
|
||||
id: 'msc-customs-taxation',
|
||||
title: 'Customs and Taxation',
|
||||
degree: 'MSc',
|
||||
area: 'Business & Law',
|
||||
duration: '18 months',
|
||||
description: 'Specialized program addressing the growing need for expertise in customs regulations, international trade, and taxation systems.',
|
||||
entry: 'Bachelor\'s degree in Business, Economics, or related field',
|
||||
campus: ['Muscat Main Campus'],
|
||||
fees: 'OMR 3,200/semester',
|
||||
type: 'postgraduate',
|
||||
isNew: true,
|
||||
highlights: ['Oman Vision 2040 aligned', 'Government partnerships', 'Expert practitioners']
|
||||
},
|
||||
{
|
||||
id: 'master-digital-transformation',
|
||||
title: 'Digital Transformation and Innovation',
|
||||
degree: 'Master',
|
||||
area: 'Technology & Innovation',
|
||||
duration: '2 years',
|
||||
description: 'Cutting-edge program focusing on digital technologies, business transformation, and innovation management in the digital age.',
|
||||
entry: 'Bachelor\'s degree in Technology, Business, or related field',
|
||||
campus: ['Muscat Main Campus'],
|
||||
fees: 'OMR 3,800/semester',
|
||||
type: 'postgraduate',
|
||||
highlights: ['Industry 4.0 technologies', 'Digital strategy', 'Innovation ecosystems']
|
||||
},
|
||||
{
|
||||
id: 'mtech-reliability-maintainability',
|
||||
title: 'Reliability and Maintainability Engineering',
|
||||
degree: 'M. Tech',
|
||||
area: 'Engineering & Technology',
|
||||
duration: '2 years',
|
||||
description: 'Advanced engineering program focusing on system reliability, maintainability analysis, and asset management strategies.',
|
||||
entry: 'Bachelor\'s degree in Engineering with minimum 2.5 GPA',
|
||||
campus: ['Muscat Main Campus'],
|
||||
fees: 'OMR 3,500/semester',
|
||||
type: 'postgraduate',
|
||||
highlights: ['Advanced simulation tools', 'Industry best practices', 'Predictive maintenance']
|
||||
},
|
||||
{
|
||||
id: 'msc-energy-transition',
|
||||
title: 'Energy Transition and Sustainability',
|
||||
degree: 'MSc',
|
||||
area: 'Environment & Sustainability',
|
||||
duration: '2 years',
|
||||
description: 'Forward-thinking program addressing renewable energy, sustainability practices, and the global energy transition.',
|
||||
entry: 'Bachelor\'s degree in Engineering, Science, or related field',
|
||||
campus: ['Muscat Main Campus'],
|
||||
fees: 'OMR 3,600/semester',
|
||||
type: 'postgraduate',
|
||||
isNew: true,
|
||||
highlights: ['Renewable energy', 'Sustainability assessment', 'Green technology']
|
||||
},
|
||||
{
|
||||
id: 'msc-food-security',
|
||||
title: 'Food Security',
|
||||
degree: 'MSc',
|
||||
area: 'Agriculture & Food Sciences',
|
||||
duration: '2 years',
|
||||
description: 'Comprehensive program addressing global food security challenges, sustainable agriculture, and food system management.',
|
||||
entry: 'Bachelor\'s degree in Agriculture, Biology, or related field',
|
||||
campus: ['Muscat Main Campus', 'Salalah Branch'],
|
||||
fees: 'OMR 3,400/semester',
|
||||
type: 'postgraduate',
|
||||
isNew: true,
|
||||
highlights: ['Sustainable agriculture', 'Food system analysis', 'Policy aspects']
|
||||
},
|
||||
{
|
||||
id: 'med-tesol-digital',
|
||||
title: 'TESOL with Digital Education',
|
||||
degree: 'M.Ed.',
|
||||
area: 'Education & Humanities',
|
||||
duration: '2 years',
|
||||
description: 'Master of Education program combining Teaching English to Speakers of Other Languages with modern digital education technologies.',
|
||||
entry: 'Bachelor\'s degree in Education, English, or related field',
|
||||
campus: ['Muscat Main Campus', 'Sohar Branch'],
|
||||
fees: 'OMR 3,000/semester',
|
||||
type: 'postgraduate',
|
||||
highlights: ['Digital teaching', 'EdTech integration', 'Cross-cultural communication']
|
||||
},
|
||||
{
|
||||
id: 'med-tesol-eap',
|
||||
title: 'TESOL with English for Academic Purposes',
|
||||
degree: 'M.Ed.',
|
||||
area: 'Education & Humanities',
|
||||
duration: '2 years',
|
||||
description: 'Specialized education program focusing on teaching English for academic and professional contexts.',
|
||||
entry: 'Bachelor\'s degree in Education, English, or related field',
|
||||
campus: ['Muscat Main Campus'],
|
||||
fees: 'OMR 3,000/semester',
|
||||
type: 'postgraduate',
|
||||
highlights: ['Academic writing', 'Professional English', 'Assessment methods']
|
||||
},
|
||||
|
||||
const response = await fetch(`/api/courses?${params}`);
|
||||
const data = await response.json();
|
||||
setCourses(data.courses || []);
|
||||
} catch (error) {
|
||||
console.error('Error fetching courses:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
// Undergraduate Programs
|
||||
{
|
||||
id: 'bachelor-design',
|
||||
title: 'Design',
|
||||
degree: 'Bachelor',
|
||||
area: 'Creative Arts & Design',
|
||||
duration: '4 years',
|
||||
description: 'Comprehensive design program covering visual communication, product design, and digital media with emphasis on creativity and innovation.',
|
||||
entry: 'High school diploma with good grades in relevant subjects',
|
||||
campus: ['Muscat Main Campus', 'Nizwa Branch'],
|
||||
fees: 'OMR 2,800/semester',
|
||||
type: 'undergraduate',
|
||||
highlights: ['Industry-standard software', 'Creative workshops', 'Portfolio development']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-web-mobile',
|
||||
title: 'Web and Mobile Technologies',
|
||||
degree: 'Bachelor',
|
||||
area: 'Technology & Computing',
|
||||
duration: '4 years',
|
||||
description: 'Cutting-edge program focusing on modern web development, mobile app creation, and emerging digital technologies.',
|
||||
entry: 'High school diploma with strong performance in mathematics and science',
|
||||
campus: ['Muscat Main Campus', 'Sohar Branch', 'Sur Branch'],
|
||||
fees: 'OMR 2,800/semester',
|
||||
type: 'undergraduate',
|
||||
highlights: ['Latest frameworks', 'Mobile development', 'Cloud computing']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-electronics-communication',
|
||||
title: 'Electronics and Communication Engineering',
|
||||
degree: 'Bachelor',
|
||||
area: 'Engineering & Technology',
|
||||
duration: '4 years',
|
||||
description: 'Comprehensive engineering program covering electronics, telecommunications, and communication systems.',
|
||||
entry: 'High school diploma with strong performance in mathematics and physics',
|
||||
campus: ['Muscat Main Campus'],
|
||||
fees: 'OMR 3,200/semester',
|
||||
type: 'undergraduate',
|
||||
highlights: ['Advanced laboratories', 'Industry curriculum', 'Professional preparation']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-digital-marketing',
|
||||
title: 'Digital Marketing and Branding',
|
||||
degree: 'Bachelor',
|
||||
area: 'Business & Marketing',
|
||||
duration: '4 years',
|
||||
description: 'Modern marketing program focusing on digital strategies, brand management, and contemporary marketing technologies.',
|
||||
entry: 'High school diploma with good communication and analytical skills',
|
||||
campus: ['Muscat Main Campus', 'Salalah Branch'],
|
||||
fees: 'OMR 2,600/semester',
|
||||
type: 'undergraduate',
|
||||
highlights: ['Digital tools', 'Brand strategy', 'Social media marketing']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-economics-business',
|
||||
title: 'Economics and Business Administration',
|
||||
degree: 'Bachelor',
|
||||
area: 'Business & Economics',
|
||||
duration: '4 years',
|
||||
description: 'Comprehensive program combining economic theory with practical business administration skills.',
|
||||
entry: 'High school diploma with strong performance in mathematics and economics',
|
||||
campus: ['Muscat Main Campus', 'Salalah Branch', 'Sohar Branch'],
|
||||
fees: 'OMR 2,500/semester',
|
||||
type: 'undergraduate',
|
||||
highlights: ['Economic modeling', 'Business strategy', 'International perspective']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-applied-biotechnology',
|
||||
title: 'Applied Biotechnology',
|
||||
degree: 'Bachelor',
|
||||
area: 'Science & Technology',
|
||||
duration: '4 years',
|
||||
description: 'Innovative program combining biological sciences with technology applications in healthcare, agriculture, and industry.',
|
||||
entry: 'High school diploma with strong performance in biology and chemistry',
|
||||
campus: ['Muscat Main Campus'],
|
||||
fees: 'OMR 3,000/semester',
|
||||
type: 'undergraduate',
|
||||
highlights: ['State-of-the-art labs', 'Research opportunities', 'Industry partnerships']
|
||||
}
|
||||
}, [searchQuery, selectedArea, selectedLevel, selectedCampus]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchCourses();
|
||||
}, [fetchCourses]);
|
||||
];
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchQuery('');
|
||||
@@ -73,6 +262,7 @@ export default function CoursesPage() {
|
||||
return false;
|
||||
}
|
||||
if (selectedArea && course.area !== selectedArea) return false;
|
||||
if (selectedLevel && course.type !== selectedLevel.toLowerCase()) return false;
|
||||
if (selectedCampus && !course.campus.includes(selectedCampus)) return false;
|
||||
return true;
|
||||
});
|
||||
@@ -80,14 +270,14 @@ export default function CoursesPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-teal-600 text-white">
|
||||
<div className="bg-gradient-to-r from-blue-900 via-blue-800 to-blue-900 text-white">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
Find Your Perfect Course
|
||||
Discover UTAS Oman Programs
|
||||
</h1>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
Explore over 350 study programs at the world's #1 university for climate action
|
||||
Explore our comprehensive range of undergraduate and postgraduate programs designed for Oman's future
|
||||
</p>
|
||||
|
||||
{/* Search Bar */}
|
||||
@@ -175,7 +365,7 @@ export default function CoursesPage() {
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-800">
|
||||
{loading ? 'Loading...' : `${filteredCourses.length} courses found`}
|
||||
{filteredCourses.length} programs found
|
||||
</h2>
|
||||
{(selectedArea || selectedLevel || selectedCampus || searchQuery) && (
|
||||
<button
|
||||
@@ -187,21 +377,7 @@ export default function CoursesPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[...Array(6)].map((_, i) => (
|
||||
<div key={i} className="bg-white rounded-lg p-6 shadow-sm animate-pulse">
|
||||
<div className="h-4 bg-gray-200 rounded mb-2"></div>
|
||||
<div className="h-6 bg-gray-200 rounded mb-4"></div>
|
||||
<div className="h-20 bg-gray-200 rounded mb-4"></div>
|
||||
<div className="flex space-x-2 mb-4">
|
||||
<div className="h-6 bg-gray-200 rounded flex-1"></div>
|
||||
<div className="h-6 bg-gray-200 rounded flex-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : filteredCourses.length === 0 ? (
|
||||
{filteredCourses.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<BookOpen size={64} className="mx-auto text-gray-400 mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-600 mb-2">No courses found</h3>
|
||||
@@ -219,10 +395,21 @@ export default function CoursesPage() {
|
||||
<div key={course.id} className="bg-white rounded-lg shadow-sm hover:shadow-md transition-shadow border border-gray-200">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<span className="inline-block px-3 py-1 bg-blue-100 text-blue-800 text-xs font-medium rounded-full">
|
||||
{course.area}
|
||||
</span>
|
||||
<Award className="text-teal-600" size={20} />
|
||||
<div className="flex items-center gap-2">
|
||||
<span className={`inline-block px-3 py-1 text-xs font-medium rounded-full ${
|
||||
course.type === 'postgraduate'
|
||||
? 'bg-blue-100 text-blue-800'
|
||||
: 'bg-green-100 text-green-800'
|
||||
}`}>
|
||||
{course.degree}
|
||||
</span>
|
||||
{course.isNew && (
|
||||
<span className="inline-block px-2 py-1 bg-orange-100 text-orange-800 text-xs font-medium rounded-full">
|
||||
NEW
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Award className={course.type === 'postgraduate' ? 'text-blue-600' : 'text-green-600'} size={20} />
|
||||
</div>
|
||||
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-3 line-clamp-2">
|
||||
@@ -249,13 +436,25 @@ export default function CoursesPage() {
|
||||
<span>{course.fees}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Program Highlights */}
|
||||
<div className="mb-4">
|
||||
<p className="text-xs font-medium text-gray-700 mb-2">Key Highlights:</p>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{course.highlights.slice(0, 2).map((highlight, index) => (
|
||||
<span key={index} className="inline-block px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded">
|
||||
{highlight}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm text-gray-600">
|
||||
<span className="font-medium">Entry:</span> {course.entry}
|
||||
<span className="font-medium">Category:</span> {course.area}
|
||||
</div>
|
||||
<Link
|
||||
href={`/courses/${course.id}`}
|
||||
href={`/programs/${course.type}/${course.id}`}
|
||||
className="inline-flex items-center text-blue-600 hover:text-blue-700 font-medium text-sm transition-colors"
|
||||
>
|
||||
Learn More
|
||||
@@ -270,25 +469,25 @@ export default function CoursesPage() {
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="bg-gradient-to-r from-teal-600 to-blue-600 text-white">
|
||||
<div className="bg-gradient-to-r from-blue-800 to-blue-900 text-white">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to Start Your Journey?</h2>
|
||||
<h2 className="text-3xl font-bold mb-4">Shape Your Future with UTAS Oman</h2>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
Join over 35,000 students at the world's #1 university for climate action
|
||||
Join thousands of students building careers aligned with Oman Vision 2040
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/apply"
|
||||
href="/admissions"
|
||||
className="bg-white text-blue-600 px-8 py-3 rounded-xl font-semibold hover:bg-gray-100 transition-all duration-200"
|
||||
>
|
||||
Apply Now
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
href="/scholarships"
|
||||
className="border-2 border-white text-white px-8 py-3 rounded-xl font-semibold hover:bg-white hover:text-blue-600 transition-all duration-200"
|
||||
>
|
||||
Get Advice
|
||||
View Scholarships
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,436 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
CreditCard, Calendar, Calculator, CheckCircle,
|
||||
Home, GraduationCap, Award, AlertTriangle, FileText
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function FeesPage() {
|
||||
const [selectedLevel, setSelectedLevel] = useState('undergraduate');
|
||||
|
||||
// Tuition fees structure for UTAS Oman
|
||||
const tuitionFees = {
|
||||
undergraduate: [
|
||||
{
|
||||
program: 'Bachelor of Engineering (Honours)',
|
||||
specializations: ['Civil Engineering', 'Electrical Engineering', 'Mechanical Engineering'],
|
||||
duration: '4 years',
|
||||
totalCredits: 128,
|
||||
feePerCredit: 'OMR 85',
|
||||
totalFee: 'OMR 10,880',
|
||||
yearlyFee: 'OMR 2,720'
|
||||
},
|
||||
{
|
||||
program: 'Bachelor of Information Technology',
|
||||
specializations: ['Web & Mobile Development', 'Cybersecurity', 'Data Science'],
|
||||
duration: '3 years',
|
||||
totalCredits: 96,
|
||||
feePerCredit: 'OMR 80',
|
||||
totalFee: 'OMR 7,680',
|
||||
yearlyFee: 'OMR 2,560'
|
||||
},
|
||||
{
|
||||
program: 'Bachelor of Applied Science',
|
||||
specializations: ['Applied Biotechnology', 'Environmental Science'],
|
||||
duration: '3 years',
|
||||
totalCredits: 96,
|
||||
feePerCredit: 'OMR 85',
|
||||
totalFee: 'OMR 8,160',
|
||||
yearlyFee: 'OMR 2,720'
|
||||
},
|
||||
{
|
||||
program: 'Bachelor of Business',
|
||||
specializations: ['Management', 'Marketing', 'Finance'],
|
||||
duration: '3 years',
|
||||
totalCredits: 96,
|
||||
feePerCredit: 'OMR 75',
|
||||
totalFee: 'OMR 7,200',
|
||||
yearlyFee: 'OMR 2,400'
|
||||
}
|
||||
],
|
||||
postgraduate: [
|
||||
{
|
||||
program: 'Master of Technology (MTech)',
|
||||
specializations: ['Mineral Processing', 'Advanced Manufacturing'],
|
||||
duration: '2 years',
|
||||
totalCredits: 64,
|
||||
feePerCredit: 'OMR 120',
|
||||
totalFee: 'OMR 7,680',
|
||||
yearlyFee: 'OMR 3,840'
|
||||
},
|
||||
{
|
||||
program: 'Master of Business Administration (MBA)',
|
||||
specializations: ['Leadership & Innovation', 'Strategic Management'],
|
||||
duration: '2 years',
|
||||
totalCredits: 60,
|
||||
feePerCredit: 'OMR 150',
|
||||
totalFee: 'OMR 9,000',
|
||||
yearlyFee: 'OMR 4,500'
|
||||
},
|
||||
{
|
||||
program: 'Master of Engineering',
|
||||
specializations: ['Sustainable Energy', 'Digital Systems'],
|
||||
duration: '2 years',
|
||||
totalCredits: 64,
|
||||
feePerCredit: 'OMR 130',
|
||||
totalFee: 'OMR 8,320',
|
||||
yearlyFee: 'OMR 4,160'
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Additional fees and costs
|
||||
const additionalFees = [
|
||||
{ category: 'Application Fee', amount: 'OMR 25', type: 'one-time', description: 'Non-refundable application processing fee' },
|
||||
{ category: 'Registration Fee', amount: 'OMR 100', type: 'yearly', description: 'Annual registration and administrative fee' },
|
||||
{ category: 'Student Activity Fee', amount: 'OMR 50', type: 'yearly', description: 'Clubs, sports, and student services' },
|
||||
{ category: 'Technology Fee', amount: 'OMR 75', type: 'yearly', description: 'IT services, Wi-Fi, and digital resources' },
|
||||
{ category: 'Library Fee', amount: 'OMR 25', type: 'yearly', description: 'Library access and resources' },
|
||||
{ category: 'Graduation Fee', amount: 'OMR 150', type: 'one-time', description: 'Diploma processing and ceremony' },
|
||||
{ category: 'Late Payment Fee', amount: 'OMR 50', type: 'per-occurrence', description: 'Applied for overdue payments' },
|
||||
{ category: 'Transcript Fee', amount: 'OMR 20', type: 'per-copy', description: 'Official academic transcripts' }
|
||||
];
|
||||
|
||||
// Living costs estimate
|
||||
const livingCosts = [
|
||||
{ category: 'Accommodation', amount: 'OMR 150-300', period: 'per month', description: 'Shared apartment or university housing' },
|
||||
{ category: 'Food & Meals', amount: 'OMR 100-150', period: 'per month', description: 'Campus dining and groceries' },
|
||||
{ category: 'Transportation', amount: 'OMR 30-50', period: 'per month', description: 'Public transport and occasional taxi' },
|
||||
{ category: 'Books & Supplies', amount: 'OMR 100-200', period: 'per semester', description: 'Textbooks and study materials' },
|
||||
{ category: 'Personal Expenses', amount: 'OMR 80-120', period: 'per month', description: 'Entertainment, clothing, miscellaneous' },
|
||||
{ category: 'Health Insurance', amount: 'OMR 200-300', period: 'per year', description: 'Mandatory health coverage' }
|
||||
];
|
||||
|
||||
// Payment options
|
||||
const paymentOptions = [
|
||||
{
|
||||
title: 'Full Payment',
|
||||
discount: '5% discount',
|
||||
description: 'Pay full semester/year fees upfront',
|
||||
benefits: ['5% early payment discount', 'No payment processing fees', 'Priority registration']
|
||||
},
|
||||
{
|
||||
title: 'Semester Payment',
|
||||
discount: 'No discount',
|
||||
description: 'Pay at the beginning of each semester',
|
||||
benefits: ['Spread costs over academic year', 'Standard payment terms', 'Flexible planning']
|
||||
},
|
||||
{
|
||||
title: 'Monthly Installments',
|
||||
discount: '2% processing fee',
|
||||
description: 'Pay in monthly installments',
|
||||
benefits: ['Budget-friendly option', 'Automatic deductions available', 'Extended payment terms']
|
||||
}
|
||||
];
|
||||
|
||||
// Scholarship opportunities
|
||||
const scholarships = [
|
||||
{
|
||||
name: 'Oman Vision 2040 Scholarship',
|
||||
amount: '50% tuition fee',
|
||||
criteria: ['Omani nationals', 'Academic excellence (GPA 3.5+)', 'STEM programs'],
|
||||
deadline: 'July 1, 2025'
|
||||
},
|
||||
{
|
||||
name: 'Merit-Based Scholarship',
|
||||
amount: '25-75% tuition fee',
|
||||
criteria: ['Outstanding academic performance', 'All programs eligible', 'International students welcome'],
|
||||
deadline: 'June 15, 2025'
|
||||
},
|
||||
{
|
||||
name: 'Need-Based Financial Aid',
|
||||
amount: 'Up to 100% tuition fee',
|
||||
criteria: ['Demonstrated financial need', 'Good academic standing', 'Omani nationals priority'],
|
||||
deadline: 'August 1, 2025'
|
||||
},
|
||||
{
|
||||
name: 'Industry Partnership Scholarship',
|
||||
amount: '30-60% tuition fee',
|
||||
criteria: ['Engineering & Technology programs', 'Commitment to work in Oman', 'Partner company sponsorship'],
|
||||
deadline: 'May 30, 2025'
|
||||
}
|
||||
];
|
||||
|
||||
const currentFees = tuitionFees[selectedLevel as keyof typeof tuitionFees];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-green-900 via-blue-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">
|
||||
Tuition Fees & Costs
|
||||
</h1>
|
||||
<p className="text-xl text-green-100 max-w-3xl mx-auto mb-8">
|
||||
Transparent, competitive, and value-driven education costs. Invest in your future with
|
||||
flexible payment options and scholarship opportunities.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-green-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center gap-2">
|
||||
<Calculator className="w-5 h-5" />
|
||||
Calculate Costs
|
||||
</button>
|
||||
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-green-900 transition-colors flex items-center gap-2">
|
||||
<Award className="w-5 h-5" />
|
||||
View Scholarships
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Program Level Selector */}
|
||||
<section className="mb-12">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Tuition Fees by Program Level</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Select your study level to view relevant tuition fees and program costs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="bg-white rounded-lg shadow-lg p-2 flex">
|
||||
<button
|
||||
onClick={() => setSelectedLevel('undergraduate')}
|
||||
className={`px-6 py-3 rounded-lg font-medium transition-colors ${
|
||||
selectedLevel === 'undergraduate'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'text-gray-600 hover:text-blue-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<GraduationCap className="w-5 h-5" />
|
||||
Undergraduate
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setSelectedLevel('postgraduate')}
|
||||
className={`px-6 py-3 rounded-lg font-medium transition-colors ${
|
||||
selectedLevel === 'postgraduate'
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'text-gray-600 hover:text-blue-600'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Award className="w-5 h-5" />
|
||||
Postgraduate
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Tuition Fees Table */}
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Program</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Duration</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Credits</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Per Credit</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Per Year</th>
|
||||
<th className="px-6 py-4 text-left text-sm font-semibold text-gray-900">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-200">
|
||||
{currentFees.map((program, index) => (
|
||||
<tr key={index} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4">
|
||||
<div>
|
||||
<div className="font-medium text-gray-900">{program.program}</div>
|
||||
<div className="text-sm text-gray-600">
|
||||
{program.specializations.join(', ')}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-gray-900">{program.duration}</td>
|
||||
<td className="px-6 py-4 text-gray-900">{program.totalCredits}</td>
|
||||
<td className="px-6 py-4 text-gray-900 font-medium">{program.feePerCredit}</td>
|
||||
<td className="px-6 py-4 text-green-600 font-medium">{program.yearlyFee}</td>
|
||||
<td className="px-6 py-4 text-blue-600 font-semibold">{program.totalFee}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Additional Fees */}
|
||||
<section className="mb-12">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Additional Fees & Costs</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Other fees and costs to consider when planning your education budget
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{additionalFees.map((fee, index) => (
|
||||
<div key={index} className="bg-white rounded-lg shadow-lg p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{fee.category}</h3>
|
||||
<p className="text-2xl font-bold text-green-600 mb-2">{fee.amount}</p>
|
||||
<span className={`inline-block px-2 py-1 text-xs rounded-full ${
|
||||
fee.type === 'one-time' ? 'bg-blue-100 text-blue-800' :
|
||||
fee.type === 'yearly' ? 'bg-green-100 text-green-800' :
|
||||
'bg-orange-100 text-orange-800'
|
||||
}`}>
|
||||
{fee.type}
|
||||
</span>
|
||||
</div>
|
||||
<CreditCard className="w-8 h-8 text-gray-400" />
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{fee.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Living Costs */}
|
||||
<section className="mb-12">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Estimated Living Costs</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Approximate monthly and annual living expenses for students in Oman
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
|
||||
{livingCosts.map((cost, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Home className="w-6 h-6 text-blue-600" />
|
||||
<h3 className="text-lg font-semibold text-gray-900">{cost.category}</h3>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<p className="text-2xl font-bold text-blue-600">{cost.amount}</p>
|
||||
<p className="text-sm text-gray-600">{cost.period}</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{cost.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Payment Options */}
|
||||
<section className="mb-12">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Payment Options</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Flexible payment plans to suit your financial situation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{paymentOptions.map((option, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-lg p-8 border-2 border-gray-200 hover:border-blue-500 transition-colors">
|
||||
<div className="text-center mb-6">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{option.title}</h3>
|
||||
<p className="text-lg font-medium text-green-600">{option.discount}</p>
|
||||
<p className="text-gray-600 mt-2">{option.description}</p>
|
||||
</div>
|
||||
<ul className="space-y-3">
|
||||
{option.benefits.map((benefit, benefitIndex) => (
|
||||
<li key={benefitIndex} className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-600">{benefit}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Scholarships */}
|
||||
<section className="mb-12">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Scholarship Opportunities</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Financial assistance to make quality education accessible to deserving students
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{scholarships.map((scholarship, index) => (
|
||||
<div key={index} className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-8 border border-blue-200">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<Award className="w-8 h-8 text-blue-600 mt-1" />
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{scholarship.name}</h3>
|
||||
<p className="text-lg font-medium text-green-600 mb-4">{scholarship.amount}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-4">
|
||||
<h4 className="font-medium text-gray-900 mb-2">Eligibility Criteria:</h4>
|
||||
<ul className="space-y-1">
|
||||
{scholarship.criteria.map((criterion, criterionIndex) => (
|
||||
<li key={criterionIndex} 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">{criterion}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Calendar className="w-4 h-4 text-red-600" />
|
||||
<span className="text-red-600 font-medium">Application Deadline: {scholarship.deadline}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Fee Calculator CTA */}
|
||||
<section className="text-center">
|
||||
<div className="bg-gradient-to-r from-green-900 to-blue-900 rounded-2xl p-8 text-white">
|
||||
<h2 className="text-3xl font-bold mb-4">Calculate Your Total Costs</h2>
|
||||
<p className="text-xl text-green-100 mb-8 max-w-2xl mx-auto">
|
||||
Use our interactive calculator to estimate your total education costs including tuition,
|
||||
fees, and living expenses.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-green-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center gap-2">
|
||||
<Calculator className="w-5 h-5" />
|
||||
Launch Cost Calculator
|
||||
</button>
|
||||
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-green-900 transition-colors flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Download Fee Guide
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Important Notice */}
|
||||
<section className="mt-12">
|
||||
<div className="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
|
||||
<div className="flex items-start gap-3">
|
||||
<AlertTriangle className="w-6 h-6 text-yellow-600 mt-1" />
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-yellow-800 mb-2">Important Information</h3>
|
||||
<ul className="text-yellow-700 space-y-1 text-sm">
|
||||
<li>• All fees are subject to change and should be confirmed at the time of application</li>
|
||||
<li>• Payment schedules can be customized based on individual circumstances</li>
|
||||
<li>• Additional costs may apply for specialized equipment, field trips, or certification exams</li>
|
||||
<li>• Refund policies are available upon request and vary by program</li>
|
||||
<li>• Early bird discounts may be available for timely applications</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,185 +0,0 @@
|
||||
@import "tailwindcss";
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
--primary-blue: #1e3a8a;
|
||||
--primary-teal: #0f766e;
|
||||
--accent-gold: #f59e0b;
|
||||
--text-primary: #111827;
|
||||
--text-secondary: #6b7280;
|
||||
--surface-light: #f8fafc;
|
||||
--border-light: #e5e7eb;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
|
||||
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Custom animations */
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up-delay {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in-up-delay-2 {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0px);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.8s ease-out;
|
||||
}
|
||||
|
||||
.animate-fade-in-up-delay {
|
||||
animation: fade-in-up-delay 0.8s ease-out 0.2s both;
|
||||
}
|
||||
|
||||
.animate-fade-in-up-delay-2 {
|
||||
animation: fade-in-up-delay-2 0.8s ease-out 0.4s both;
|
||||
}
|
||||
|
||||
.animate-float {
|
||||
animation: float 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.animate-pulse-glow {
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Professional gradients */
|
||||
.gradient-primary {
|
||||
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-teal) 100%);
|
||||
}
|
||||
|
||||
.gradient-accent {
|
||||
background: linear-gradient(135deg, var(--accent-gold) 0%, #f97316 100%);
|
||||
}
|
||||
|
||||
.gradient-surface {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
|
||||
}
|
||||
|
||||
/* Glass morphism effects */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Typography improvements */
|
||||
.text-hero {
|
||||
font-size: clamp(2.5rem, 8vw, 5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.text-display {
|
||||
font-size: clamp(1.875rem, 4vw, 3rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
.text-body-large {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Professional hover effects */
|
||||
.hover-lift {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.hover-lift:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Loading states */
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: loading 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive improvements */
|
||||
@media (max-width: 768px) {
|
||||
.text-hero {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
+6
-53
@@ -1,7 +1,5 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@import "tailwindcss";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
@@ -15,58 +13,13 @@
|
||||
--border-light: #e5e7eb;
|
||||
}
|
||||
|
||||
/* RTL Support */
|
||||
[dir="rtl"] {
|
||||
text-align: right;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
[dir="rtl"] .ltr-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[dir="ltr"] .rtl-only {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Consistent Container Classes */
|
||||
.page-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 80rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 72rem;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 64rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* RTL Specific Margins and Paddings */
|
||||
[dir="rtl"] .ml-auto {
|
||||
margin-left: unset;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .mr-auto {
|
||||
margin-right: unset;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
[dir="rtl"] .space-x-4 > * + * {
|
||||
margin-left: unset;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
/* Base styles */
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
|
||||
+18
-30
@@ -1,11 +1,9 @@
|
||||
'use client';
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import { AuthProvider } from "@/components/providers/MockAuthProvider";
|
||||
import { LanguageProvider, useLanguage } from "@/components/providers/LanguageProvider";
|
||||
import FloatingChatbot from "@/components/Chat/FloatingChatbot";
|
||||
import { LanguageProvider } from "@/components/providers/LanguageProvider";
|
||||
import { ChatWidget } from "@/components/ChatWidget";
|
||||
import { GDPRBanner } from "@/components/GDPRBanner";
|
||||
import SimplifiedNavigation from "@/components/Navigation/SimplifiedNavigation";
|
||||
|
||||
@@ -27,37 +25,27 @@ export const metadata: Metadata = {
|
||||
viewport: "width=device-width, initial-scale=1",
|
||||
};
|
||||
|
||||
function RootLayoutContent({ children }: { children: React.ReactNode }) {
|
||||
const { language } = useLanguage();
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang={language} dir={language === 'ar' ? 'rtl' : 'ltr'} className="scroll-smooth">
|
||||
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
|
||||
<html lang="en" dir="ltr">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<AuthProvider>
|
||||
<SimplifiedNavigation />
|
||||
<main className="min-h-screen bg-gray-50">
|
||||
<div className="page-container">
|
||||
<LanguageProvider>
|
||||
<SimplifiedNavigation />
|
||||
<main className="min-h-screen bg-gray-50">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
<FloatingChatbot position={language === 'ar' ? 'bottom-left' : 'bottom-right'} theme="blue" />
|
||||
<GDPRBanner />
|
||||
</main>
|
||||
<ChatWidget />
|
||||
<GDPRBanner />
|
||||
</LanguageProvider>
|
||||
</AuthProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<LanguageProvider>
|
||||
<RootLayoutContent>
|
||||
{children}
|
||||
</RootLayoutContent>
|
||||
</LanguageProvider>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,414 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react'
|
||||
import { useAuth } from '@/components/providers/MockAuthProvider'
|
||||
import { useLanguage } from '@/components/providers/LanguageProvider'
|
||||
import {
|
||||
Globe,
|
||||
BookOpen,
|
||||
Users,
|
||||
MessageSquare,
|
||||
Heart,
|
||||
Shield,
|
||||
BarChart3,
|
||||
Languages,
|
||||
LogIn,
|
||||
GraduationCap,
|
||||
Star,
|
||||
Clock,
|
||||
MapPin
|
||||
} from 'lucide-react'
|
||||
import Link from 'next/link'
|
||||
|
||||
export default function HomePage() {
|
||||
const { user, login, loading } = useAuth()
|
||||
const { t, language, setLanguage } = useLanguage()
|
||||
const [loginForm, setLoginForm] = useState({ email: '', password: '' })
|
||||
const [showLogin, setShowLogin] = useState(false)
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
try {
|
||||
await login(loginForm.email, loginForm.password)
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const toggleLanguage = () => {
|
||||
setLanguage(language === 'en' ? 'ar' : 'en')
|
||||
}
|
||||
|
||||
if (user) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<GraduationCap size={32} className="text-blue-600" />
|
||||
<h1 className="text-2xl font-bold text-gray-900">University Portal</h1>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="flex items-center space-x-2 px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Languages size={16} />
|
||||
<span className="text-sm font-medium">{language.toUpperCase()}</span>
|
||||
</button>
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{t('dashboard')}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Welcome Section */}
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-6">
|
||||
{t('welcome')}
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
|
||||
Experience the future of university services with AI-powered assistance,
|
||||
personalized content, and comprehensive support.
|
||||
</p>
|
||||
<div className="flex justify-center space-x-4">
|
||||
<Link
|
||||
href="/dashboard"
|
||||
className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Go to Dashboard
|
||||
</Link>
|
||||
<Link
|
||||
href="/wellbeing"
|
||||
className="bg-pink-600 text-white px-8 py-3 rounded-lg text-lg hover:bg-pink-700 transition-colors flex items-center space-x-2"
|
||||
>
|
||||
<Heart size={20} />
|
||||
<span>{t('wellbeing')}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Grid */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<h3 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
||||
Flagship Features
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<FeatureCard
|
||||
icon={<MessageSquare size={24} />}
|
||||
title="24/7 AI Assistant"
|
||||
description="Get instant answers to your questions in English or Arabic with our GPT-powered chatbot."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Users size={24} />}
|
||||
title="Personalized Dashboard"
|
||||
description="View your timetable, tuition balance, and advisor contact in one place."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Shield size={24} />}
|
||||
title="Accessibility First"
|
||||
description="Automated WCAG compliance checking with AI-generated alt text suggestions."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Heart size={24} />}
|
||||
title="Mental Health Support"
|
||||
description="Dedicated wellbeing chat with professional counselor referrals."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<BarChart3 size={24} />}
|
||||
title="Smart Feedback"
|
||||
description="Real-time satisfaction surveys with live dashboard updates."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Globe size={24} />}
|
||||
title="Multilingual Support"
|
||||
description="Full interface available in English and Arabic with RTL support."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<h3 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
||||
Quick Actions
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
<QuickAction
|
||||
icon={<BookOpen size={20} />}
|
||||
title="Course Registration"
|
||||
description="Register for fall courses"
|
||||
href="/courses"
|
||||
/>
|
||||
<QuickAction
|
||||
icon={<Star size={20} />}
|
||||
title="Scholarships"
|
||||
description="View available scholarships"
|
||||
href="/scholarships"
|
||||
/>
|
||||
<QuickAction
|
||||
icon={<Clock size={20} />}
|
||||
title="Academic Calendar"
|
||||
description="Important dates & deadlines"
|
||||
href="/calendar"
|
||||
/>
|
||||
<QuickAction
|
||||
icon={<MapPin size={20} />}
|
||||
title="Campus Map"
|
||||
description="Find buildings & facilities"
|
||||
href="/map"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
|
||||
{/* Header */}
|
||||
<header className="bg-white shadow-sm">
|
||||
<div className="container mx-auto px-4 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<GraduationCap size={32} className="text-blue-600" />
|
||||
<h1 className="text-2xl font-bold text-gray-900">University Portal</h1>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="flex items-center space-x-2 px-3 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Languages size={16} />
|
||||
<span className="text-sm font-medium">{language.toUpperCase()}</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setShowLogin(true)}
|
||||
className="flex items-center space-x-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<LogIn size={16} />
|
||||
<span>{t('login')}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-5xl font-bold text-gray-900 mb-6">
|
||||
{t('welcome')}
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||||
Experience the future of university services with AI-powered assistance,
|
||||
personalized content, comprehensive accessibility features, and 24/7 support.
|
||||
</p>
|
||||
<div className="flex justify-center space-x-4">
|
||||
<button
|
||||
onClick={() => setShowLogin(true)}
|
||||
className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
{t('login')}
|
||||
</button>
|
||||
<Link
|
||||
href="/wellbeing"
|
||||
className="bg-pink-600 text-white px-8 py-3 rounded-lg text-lg hover:bg-pink-700 transition-colors flex items-center space-x-2"
|
||||
>
|
||||
<Heart size={20} />
|
||||
<span>{t('wellbeing')}</span>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Section */}
|
||||
<section className="py-16 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<h3 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
||||
Flagship Capabilities
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<FeatureCard
|
||||
icon={<MessageSquare size={24} />}
|
||||
title="24/7 Conversational Assistant"
|
||||
description="Multilingual GPT-4 powered chatbot answering 20+ FAQs with human escalation support."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Users size={24} />}
|
||||
title="Personalized Dashboard"
|
||||
description="Login-based content showing timetable, tuition balance, and advisor contact from mock DB."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Shield size={24} />}
|
||||
title="Automated Accessibility"
|
||||
description="WCAG 2.2 compliance checking with AI-generated alt text suggestions via Vision API."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Heart size={24} />}
|
||||
title="Mental Health Triage"
|
||||
description="Empathic chat flow with trigger phrase detection and counselor calendar integration."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<BarChart3 size={24} />}
|
||||
title="Smart Feedback Surveys"
|
||||
description="One-click CSAT with real-time dashboard updates in under 5 seconds."
|
||||
/>
|
||||
<FeatureCard
|
||||
icon={<Globe size={24} />}
|
||||
title="Multilingual Interface"
|
||||
description="Full English/Arabic support with RTL layout and cultural adaptations."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Demo Accounts */}
|
||||
<section className="py-16 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<h3 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
||||
Demo Accounts
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-3 gap-6 max-w-4xl mx-auto">
|
||||
<DemoAccount
|
||||
name="Sara Johnson"
|
||||
role="Year 2 Arts Student"
|
||||
email="sara.year2@university.edu"
|
||||
password="sara123"
|
||||
features={['Registration opens Aug 15', 'Tuition balance: $2,500', 'Advisor: Dr. Smith']}
|
||||
/>
|
||||
<DemoAccount
|
||||
name="John Smith"
|
||||
role="Postgraduate Engineering"
|
||||
email="john.postgrad@university.edu"
|
||||
password="john123"
|
||||
features={['Research project status', 'Tuition balance: $1,200', 'Advisor: Dr. Johnson']}
|
||||
/>
|
||||
<DemoAccount
|
||||
name="Admin User"
|
||||
role="System Administrator"
|
||||
email="admin@university.edu"
|
||||
password="admin123"
|
||||
features={['Full system access', 'Analytics dashboard', 'User management']}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Login Modal */}
|
||||
{showLogin && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white rounded-lg p-8 w-full max-w-md">
|
||||
<h3 className="text-2xl font-bold mb-6 text-center">{t('login')}</h3>
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
value={loginForm.email}
|
||||
onChange={(e) => setLoginForm({ ...loginForm, email: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Password
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
value={loginForm.password}
|
||||
onChange={(e) => setLoginForm({ ...loginForm, password: e.target.value })}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-1 bg-blue-600 text-white py-2 rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Signing in...' : t('login')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowLogin(false)}
|
||||
className="flex-1 bg-gray-300 text-gray-700 py-2 rounded-lg hover:bg-gray-400 transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Helper Components
|
||||
const FeatureCard: React.FC<{ icon: React.ReactNode; title: string; description: string }> = ({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
}) => (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="text-blue-600 mb-4">{icon}</div>
|
||||
<h4 className="text-lg font-semibold text-gray-900 mb-2">{title}</h4>
|
||||
<p className="text-gray-600">{description}</p>
|
||||
</div>
|
||||
)
|
||||
|
||||
const QuickAction: React.FC<{
|
||||
icon: React.ReactNode
|
||||
title: string
|
||||
description: string
|
||||
href: string
|
||||
}> = ({ icon, title, description, href }) => (
|
||||
<Link
|
||||
href={href}
|
||||
className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-shadow"
|
||||
>
|
||||
<div className="text-blue-600 mb-3">{icon}</div>
|
||||
<h4 className="font-semibold text-gray-900 mb-1">{title}</h4>
|
||||
<p className="text-sm text-gray-600">{description}</p>
|
||||
</Link>
|
||||
)
|
||||
|
||||
const DemoAccount: React.FC<{
|
||||
name: string
|
||||
role: string
|
||||
email: string
|
||||
password: string
|
||||
features: string[]
|
||||
}> = ({ name, role, email, password, features }) => (
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<h4 className="font-semibold text-gray-900 mb-1">{name}</h4>
|
||||
<p className="text-sm text-gray-600 mb-4">{role}</p>
|
||||
<div className="space-y-2 mb-4">
|
||||
<p className="text-sm"><span className="font-medium">Email:</span> {email}</p>
|
||||
<p className="text-sm"><span className="font-medium">Password:</span> {password}</p>
|
||||
</div>
|
||||
<ul className="text-sm text-gray-600 space-y-1">
|
||||
{features.map((feature, index) => (
|
||||
<li key={index} className="flex items-center space-x-2">
|
||||
<span className="w-1.5 h-1.5 bg-blue-600 rounded-full"></span>
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
@@ -0,0 +1,659 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useAuth } from '@/components/providers/MockAuthProvider';
|
||||
import { useLanguage } from '@/components/providers/LanguageProvider';
|
||||
import MainNavigation from '@/components/Navigation/MainNavigation';
|
||||
import FloatingChatbot from '@/components/Chat/FloatingChatbot';
|
||||
import {
|
||||
Globe,
|
||||
BookOpen,
|
||||
Users,
|
||||
MessageSquare,
|
||||
LogIn,
|
||||
Star,
|
||||
ChevronRight,
|
||||
Award,
|
||||
Zap,
|
||||
Phone,
|
||||
Mail,
|
||||
TrendingUp,
|
||||
Target,
|
||||
Building2,
|
||||
Briefcase,
|
||||
Cpu,
|
||||
FlaskConical,
|
||||
PenTool
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function EnhancedUTASOmanHomePage() {
|
||||
const { user, login, loading } = useAuth();
|
||||
const { language, setLanguage } = useLanguage();
|
||||
const router = useRouter();
|
||||
const [loginForm, setLoginForm] = useState({ email: '', password: '' });
|
||||
const [showLogin, setShowLogin] = useState(false);
|
||||
const [currentSlide, setCurrentSlide] = useState(0);
|
||||
const [animatedStats, setAnimatedStats] = useState({
|
||||
staff: 0,
|
||||
students: 0,
|
||||
branches: 0,
|
||||
courses: 0,
|
||||
colleges: 0,
|
||||
programs: 0
|
||||
});
|
||||
|
||||
// Auto-slide for hero banner
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % 3);
|
||||
}, 6000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
// Animate UTAS statistics
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
const interval = setInterval(() => {
|
||||
setAnimatedStats(prev => ({
|
||||
staff: prev.staff < 4471 ? prev.staff + 67 : 4471,
|
||||
students: prev.students < 45851 ? prev.students + 687 : 45851,
|
||||
branches: prev.branches < 11 ? prev.branches + 1 : 11,
|
||||
courses: prev.courses < 1000 ? prev.courses + 15 : 1000,
|
||||
colleges: prev.colleges < 6 ? prev.colleges + 1 : 6,
|
||||
programs: prev.programs < 110 ? prev.programs + 2 : 110
|
||||
}));
|
||||
}, 50);
|
||||
|
||||
setTimeout(() => clearInterval(interval), 3000);
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
try {
|
||||
const success = await login(loginForm.email, loginForm.password);
|
||||
if (success) {
|
||||
router.push('/dashboard');
|
||||
} else {
|
||||
alert(language === 'en'
|
||||
? 'Invalid credentials. Use: student@university.edu / password123'
|
||||
: 'بيانات اعتماد غير صحيحة. استخدم: student@university.edu / password123'
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleLanguage = () => {
|
||||
setLanguage(language === 'en' ? 'ar' : 'en');
|
||||
};
|
||||
|
||||
const heroSlides = [
|
||||
{
|
||||
title: language === 'en'
|
||||
? "University of Technology and Applied Sciences"
|
||||
: "جامعة التقنية والعلوم التطبيقية",
|
||||
subtitle: language === 'en'
|
||||
? "Leading Oman's technological advancement and innovation through excellence in education"
|
||||
: "قيادة التقدم التكنولوجي والابتكار في عُمان من خلال التميز في التعليم",
|
||||
image: "https://images.unsplash.com/photo-1562774053-701939374585?w=1200&h=600&fit=crop",
|
||||
cta: language === 'en' ? "Explore Our Programs" : "استكشف برامجنا"
|
||||
},
|
||||
{
|
||||
title: language === 'en'
|
||||
? "Innovation • Technology • Excellence"
|
||||
: "الابتكار • التكنولوجيا • التميز",
|
||||
subtitle: language === 'en'
|
||||
? "Empowering students with cutting-edge knowledge and practical skills for the future"
|
||||
: "تمكين الطلاب بالمعرفة المتطورة والمهارات العملية للمستقبل",
|
||||
image: "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=1200&h=600&fit=crop",
|
||||
cta: language === 'en' ? "Join Our Community" : "انضم إلى مجتمعنا"
|
||||
},
|
||||
{
|
||||
title: language === 'en'
|
||||
? "Shaping Tomorrow's Leaders"
|
||||
: "تشكيل قادة المستقبل",
|
||||
subtitle: language === 'en'
|
||||
? "Building capacities aligned with Oman Vision 2040 for sustainable development"
|
||||
: "بناء القدرات بما يتماشى مع رؤية عُمان 2040 للتنمية المستدامة",
|
||||
image: "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1200&h=600&fit=crop",
|
||||
cta: language === 'en' ? "Start Your Journey" : "ابدأ رحلتك"
|
||||
}
|
||||
];
|
||||
|
||||
// Academic Programs from the images
|
||||
const postgraduatePrograms = [
|
||||
{
|
||||
title: language === 'en' ? "M. Tech in Mineral Processing Engineering" : "ماجستير التقنية في هندسة معالجة المعادن",
|
||||
type: "masters",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MBA in Leadership and Innovation" : "ماجستير إدارة الأعمال في القيادة والابتكار",
|
||||
type: "mba",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MSc in Customs and Taxation" : "ماجستير العلوم في الجمارك والضرائب",
|
||||
type: "masters",
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Master in Digital Transformation and Innovation" : "ماجستير في التحول الرقمي والابتكار",
|
||||
type: "masters",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "M. Tech in Reliability and Maintainability Engineering" : "ماجستير التقنية في هندسة الموثوقية والقابلية للصيانة",
|
||||
type: "masters",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MSc in Energy Transition and Sustainability" : "ماجستير العلوم في انتقال الطاقة والاستدامة",
|
||||
type: "masters",
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MSc in Food Security" : "ماجستير العلوم في الأمن الغذائي",
|
||||
type: "masters",
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Master of Education (M.Ed.) in TESOL with Digital Education in the Knowledge Society" : "ماجستير التربية في تدريس اللغة الإنجليزية مع التعليم الرقمي في مجتمع المعرفة",
|
||||
type: "education",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Master of Education (M.Ed.) in TESOL with English for Academic and Specific Purposes (EAP & ESP)" : "ماجستير التربية في تدريس اللغة الإنجليزية للأغراض الأكاديمية والمحددة",
|
||||
type: "education",
|
||||
isNew: false
|
||||
}
|
||||
];
|
||||
|
||||
const undergraduatePrograms = [
|
||||
{
|
||||
title: language === 'en' ? "Design" : "التصميم",
|
||||
icon: <PenTool className="w-6 h-6" />,
|
||||
color: "from-pink-500 to-rose-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Web and Mobile Technologies" : "تقنيات الويب والجوال",
|
||||
icon: <Cpu className="w-6 h-6" />,
|
||||
color: "from-blue-500 to-cyan-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Electronics and Communication Engineering" : "هندسة الإلكترونيات والاتصالات",
|
||||
icon: <Zap className="w-6 h-6" />,
|
||||
color: "from-purple-500 to-indigo-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Master of Education" : "ماجستير التربية",
|
||||
icon: <BookOpen className="w-6 h-6" />,
|
||||
color: "from-green-500 to-emerald-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Digital Marketing and Branding" : "التسويق الرقمي والعلامات التجارية",
|
||||
icon: <Target className="w-6 h-6" />,
|
||||
color: "from-orange-500 to-amber-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Economics and Business Administration" : "الاقتصاد وإدارة الأعمال",
|
||||
icon: <TrendingUp className="w-6 h-6" />,
|
||||
color: "from-teal-500 to-cyan-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Applied Biotechnology" : "التقنية الحيوية التطبيقية",
|
||||
icon: <FlaskConical className="w-6 h-6" />,
|
||||
color: "from-lime-500 to-green-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MBA in Leadership and Innovation" : "ماجستير إدارة الأعمال في القيادة والابتكار",
|
||||
icon: <Award className="w-6 h-6" />,
|
||||
color: "from-violet-500 to-purple-600"
|
||||
}
|
||||
];
|
||||
|
||||
const studentLifeAreas = [
|
||||
{
|
||||
title: language === 'en' ? "Facilities and Support" : "المرافق والدعم",
|
||||
description: language === 'en' ? "Modern facilities and comprehensive student support services" : "مرافق حديثة وخدمات دعم شاملة للطلاب",
|
||||
icon: <Building2 className="w-8 h-8" />
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Student Advisory Council" : "مجلس الطلاب الاستشاري",
|
||||
description: language === 'en' ? "Student representation and governance in university affairs" : "تمثيل الطلاب والحوكمة في شؤون الجامعة",
|
||||
icon: <Users className="w-8 h-8" />
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Clubs and Societies" : "النوادي والجمعيات",
|
||||
description: language === 'en' ? "Diverse student organizations for personal and professional growth" : "منظمات طلابية متنوعة للنمو الشخصي والمهني",
|
||||
icon: <Star className="w-8 h-8" />
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "On Job Training" : "التدريب على رأس العمل",
|
||||
description: language === 'en' ? "Practical training programs connecting education with industry" : "برامج تدريب عملية تربط التعليم بالصناعة",
|
||||
icon: <Briefcase className="w-8 h-8" />
|
||||
}
|
||||
];
|
||||
|
||||
const latestNews = [
|
||||
{
|
||||
title: language === 'en'
|
||||
? "University of Technology and Applied Sciences and Nizwa University sign MoU for academic and research cooperation"
|
||||
: "جامعة التقنية والعلوم التطبيقية وجامعة نزوى توقعان مذكرة تفاهم للتعاون الأكاديمي والبحثي",
|
||||
image: "https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=400&h=200&fit=crop",
|
||||
date: language === 'en' ? "July 10, 2025" : "10 يوليو 2025"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 ${language === 'ar' ? 'rtl' : 'ltr'}`}>
|
||||
{/* Navigation */}
|
||||
<MainNavigation />
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-screen overflow-hidden">
|
||||
{heroSlides.map((slide, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`absolute inset-0 transition-opacity duration-1000 ${
|
||||
index === currentSlide ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
>
|
||||
<div className="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-purple-900/70 z-10" />
|
||||
<Image
|
||||
src={slide.image}
|
||||
alt={slide.title}
|
||||
fill
|
||||
className="object-cover"
|
||||
priority={index === 0}
|
||||
/>
|
||||
<div className="relative z-20 flex items-center h-full">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="max-w-4xl">
|
||||
<h1 className="text-4xl md:text-6xl font-bold text-white mb-6 leading-tight">
|
||||
{slide.title}
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-blue-100 mb-8 leading-relaxed">
|
||||
{slide.subtitle}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-8 py-4 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
{slide.cta}
|
||||
</button>
|
||||
<button className="border-2 border-white text-white px-8 py-4 rounded-lg text-lg font-semibold hover:bg-white hover:text-blue-900 transition-all duration-300">
|
||||
{language === 'en' ? 'Watch Video' : 'شاهد الفيديو'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Slide Indicators */}
|
||||
<div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 z-30 flex space-x-2">
|
||||
{heroSlides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
className={`w-3 h-3 rounded-full transition-all duration-300 ${
|
||||
index === currentSlide ? 'bg-white' : 'bg-white/50'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* University Statistics */}
|
||||
<section className="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
|
||||
{[
|
||||
{ label: language === 'en' ? 'STAFF' : 'أعضاء هيئة التدريس', value: animatedStats.staff, suffix: '+4471' },
|
||||
{ label: language === 'en' ? 'STUDENTS' : 'الطلاب', value: animatedStats.students, suffix: '+45851' },
|
||||
{ label: language === 'en' ? 'BRANCHES' : 'الفروع', value: animatedStats.branches, suffix: '11' },
|
||||
{ label: language === 'en' ? 'COURSES' : 'المقررات', value: animatedStats.courses, suffix: '+1000' },
|
||||
{ label: language === 'en' ? 'COLLEGES' : 'الكليات', value: animatedStats.colleges, suffix: '6' },
|
||||
{ label: language === 'en' ? 'PROGRAMS' : 'البرامج', value: animatedStats.programs, suffix: '+110' }
|
||||
].map((stat, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="text-3xl md:text-4xl font-bold mb-2 text-orange-400">
|
||||
{stat.suffix}
|
||||
</div>
|
||||
<div className="text-sm md:text-base font-medium uppercase tracking-wide">
|
||||
{stat.label}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Student Life Overview */}
|
||||
<section id="student-life" className="py-20 bg-white" data-animate>
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-800 mb-6">
|
||||
{language === 'en' ? 'Student Life' : 'حياة الطلاب'}
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-600 to-purple-600 mx-auto mb-6"></div>
|
||||
<p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
|
||||
{language === 'en'
|
||||
? "Student activities are an essential part of university life, offering opportunities for skill development and self-discovery. These activities align with Oman Vision 2040 by investing in young human capital and shaping well-rounded students. They also support the goals of the University of Technology and Applied Sciences (UTAS) in Oman, which aim to strengthen Omani identity, citizenship, and encourage values of volunteerism and innovation. Moreover, student activities foster creativity and problem-solving through innovation-focused initiatives. Sports activities promote teamwork, discipline, and physical and mental well-being—preparing students to face future challenges with confidence and competence."
|
||||
: "الأنشطة الطلابية جزء أساسي من الحياة الجامعية، تقدم فرصاً لتنمية المهارات واكتشاف الذات. تتماشى هذه الأنشطة مع رؤية عُمان 2040 من خلال الاستثمار في رأس المال البشري الشاب وتشكيل طلاب متكاملين. كما تدعم أهداف جامعة التقنية والعلوم التطبيقية في عُمان، التي تهدف إلى تعزيز الهوية العُمانية والمواطنة وتشجيع قيم التطوع والابتكار. علاوة على ذلك، تعزز الأنشطة الطلابية الإبداع وحل المشكلات من خلال المبادرات المركزة على الابتكار. تعزز الأنشطة الرياضية العمل الجماعي والانضباط والرفاهية الجسدية والنفسية—إعداد الطلاب لمواجهة تحديات المستقبل بثقة وكفاءة."
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Student Life Areas */}
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
|
||||
{studentLifeAreas.map((area, index) => (
|
||||
<div key={index} className="bg-gradient-to-br from-blue-50 to-purple-50 p-6 rounded-xl hover:shadow-lg transition-all duration-300 group">
|
||||
<div className="text-blue-600 mb-4 group-hover:scale-110 transition-transform duration-300">
|
||||
{area.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-gray-800 mb-3">{area.title}</h3>
|
||||
<p className="text-gray-600">{area.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Student Life Images Grid */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
|
||||
{[
|
||||
"https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=300&h=200&fit=crop",
|
||||
"https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=300&h=200&fit=crop",
|
||||
"https://images.unsplash.com/photo-1524178232363-1fb2b075b655?w=300&h=200&fit=crop",
|
||||
"https://images.unsplash.com/photo-1517486808906-6ca8b3f04846?w=300&h=200&fit=crop"
|
||||
].map((image, index) => (
|
||||
<div key={index} className="relative group overflow-hidden rounded-lg">
|
||||
<Image
|
||||
src={image}
|
||||
alt={`Student Life ${index + 1}`}
|
||||
width={300}
|
||||
height={200}
|
||||
className="object-cover w-full h-48 group-hover:scale-110 transition-transform duration-300"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-blue-600/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Academic Programs */}
|
||||
<section id="programs" className="py-20 bg-gradient-to-br from-gray-50 to-blue-50" data-animate>
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-800 mb-6">
|
||||
{language === 'en' ? 'Explore our Programs' : 'استكشف برامجنا'}
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-600 to-purple-600 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
{/* Postgraduate Programs */}
|
||||
<div className="mb-16">
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-8 text-center">
|
||||
{language === 'en' ? 'Postgraduate Programs' : 'برامج الدراسات العليا'}
|
||||
</h3>
|
||||
<div className="space-y-4">
|
||||
{postgraduatePrograms.map((program, index) => (
|
||||
<div key={index} className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-between group">
|
||||
<div className="flex items-center">
|
||||
<div className="w-3 h-3 bg-gradient-to-r from-orange-500 to-red-500 rounded-full mr-4 group-hover:scale-125 transition-transform duration-300"></div>
|
||||
<h4 className="text-lg font-medium text-gray-800 group-hover:text-blue-600 transition-colors duration-300">
|
||||
{program.title}
|
||||
</h4>
|
||||
</div>
|
||||
{program.isNew && (
|
||||
<span className="bg-red-500 text-white px-3 py-1 rounded-full text-xs font-bold">
|
||||
{language === 'en' ? 'NEW' : 'جديد'}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Undergraduate Programs */}
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-8 text-center">
|
||||
{language === 'en' ? 'Explore Some of our Programs' : 'استكشف بعض برامجنا'}
|
||||
</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{undergraduatePrograms.map((program, index) => (
|
||||
<div key={index} className="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition-all duration-300 group cursor-pointer">
|
||||
<div className={`w-16 h-16 bg-gradient-to-r ${program.color} rounded-lg flex items-center justify-center text-white mb-4 group-hover:scale-110 transition-transform duration-300`}>
|
||||
{program.icon}
|
||||
</div>
|
||||
<h4 className="text-lg font-semibold text-gray-800 group-hover:text-blue-600 transition-colors duration-300">
|
||||
{program.title}
|
||||
</h4>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Latest News Section */}
|
||||
<section id="news" className="py-20 bg-white" data-animate>
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl font-bold text-gray-800 mb-6">
|
||||
{language === 'en' ? 'Latest News' : 'آخر الأخبار'}
|
||||
</h2>
|
||||
<div className="w-24 h-1 bg-gradient-to-r from-blue-600 to-purple-600 mx-auto"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-4xl mx-auto">
|
||||
{latestNews.map((news, index) => (
|
||||
<div key={index} className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300">
|
||||
<div className="flex flex-col md:flex-row">
|
||||
<div className="md:w-1/3">
|
||||
<Image
|
||||
src={news.image}
|
||||
alt={news.title}
|
||||
width={400}
|
||||
height={250}
|
||||
className="w-full h-64 md:h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
<div className="md:w-2/3 p-8">
|
||||
<h3 className="text-2xl font-bold text-gray-800 mb-4 leading-tight">
|
||||
{news.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4">{news.date}</p>
|
||||
<button className="text-blue-600 font-semibold hover:text-blue-800 transition-colors duration-300 flex items-center">
|
||||
{language === 'en' ? 'Read More' : 'اقرأ المزيد'}
|
||||
<ChevronRight className={`w-4 h-4 ml-2 ${language === 'ar' ? 'rotate-180' : ''}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* AI Chat Assistant CTA */}
|
||||
<section className="py-16 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||||
<div className="container mx-auto px-6 text-center">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
<MessageSquare className="w-16 h-16 mx-auto mb-6 text-blue-200" />
|
||||
<h2 className="text-3xl font-bold mb-6">
|
||||
{language === 'en'
|
||||
? 'Need Help? Ask Our AI Assistant!'
|
||||
: 'تحتاج مساعدة؟ اسأل مساعدنا الذكي!'
|
||||
}
|
||||
</h2>
|
||||
<p className="text-xl text-blue-100 mb-8">
|
||||
{language === 'en'
|
||||
? 'Get instant answers about programs, admissions, campus life, and more. Available 24/7 in English and Arabic.'
|
||||
: 'احصل على إجابات فورية حول البرامج والقبول وحياة الحرم الجامعي والمزيد. متاح ٢٤/٧ باللغتين الإنجليزية والعربية.'
|
||||
}
|
||||
</p>
|
||||
<button className="bg-white text-blue-600 px-8 py-4 rounded-lg text-lg font-semibold hover:bg-blue-50 transition-all duration-300 shadow-lg hover:shadow-xl">
|
||||
{language === 'en' ? 'Start Chatting' : 'ابدأ المحادثة'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-900 text-white py-16">
|
||||
<div className="container mx-auto px-6">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-6">
|
||||
{language === 'en' ? 'University of Technology and Applied Sciences' : 'جامعة التقنية والعلوم التطبيقية'}
|
||||
</h3>
|
||||
<p className="text-gray-400 mb-4">
|
||||
{language === 'en'
|
||||
? 'Leading technological education and innovation in Oman'
|
||||
: 'رائدة في التعليم التكنولوجي والابتكار في عُمان'
|
||||
}
|
||||
</p>
|
||||
<div className="flex items-center text-gray-400 mb-2">
|
||||
<Phone className="w-4 h-4 mr-2" />
|
||||
<span>+968 2414 3555</span>
|
||||
</div>
|
||||
<div className="flex items-center text-gray-400">
|
||||
<Mail className="w-4 h-4 mr-2" />
|
||||
<span>info@utas.edu.om</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-6">
|
||||
{language === 'en' ? 'Quick Links' : 'روابط سريعة'}
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><Link href="/admissions" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Admissions' : 'القبول'}</Link></li>
|
||||
<li><Link href="/programs" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Programs' : 'البرامج'}</Link></li>
|
||||
<li><Link href="/student-life" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Student Life' : 'حياة الطلاب'}</Link></li>
|
||||
<li><Link href="/research" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Research' : 'البحوث'}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-6">
|
||||
{language === 'en' ? 'Academic' : 'الأكاديمي'}
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><Link href="/postgraduate" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Postgraduate' : 'الدراسات العليا'}</Link></li>
|
||||
<li><Link href="/regulations" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Academic Regulations' : 'اللوائح الأكاديمية'}</Link></li>
|
||||
<li><Link href="/calendar" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Academic Calendar' : 'التقويم الأكاديمي'}</Link></li>
|
||||
<li><Link href="/registration" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Registration' : 'التسجيل'}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-6">
|
||||
{language === 'en' ? 'Media Center' : 'المركز الإعلامي'}
|
||||
</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><Link href="/news" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'News' : 'الأخبار'}</Link></li>
|
||||
<li><Link href="/publications" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Publications' : 'المنشورات'}</Link></li>
|
||||
<li><Link href="/social-media" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Social Media' : 'وسائل التواصل الاجتماعي'}</Link></li>
|
||||
<li><Link href="/contact" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Contact' : 'اتصل بنا'}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400">
|
||||
<p>© 2025 {language === 'en' ? 'University of Technology and Applied Sciences. All rights reserved.' : 'جامعة التقنية والعلوم التطبيقية. جميع الحقوق محفوظة.'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Language Toggle Button */}
|
||||
<button
|
||||
onClick={toggleLanguage}
|
||||
className="fixed top-4 right-4 z-50 bg-white/90 backdrop-blur-sm border border-gray-200 text-gray-700 p-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 group"
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Globe className="w-5 h-5 mr-2 group-hover:rotate-12 transition-transform duration-300" />
|
||||
<span className="font-medium">{language === 'en' ? 'عربي' : 'English'}</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{/* Login Button */}
|
||||
{!user && (
|
||||
<button
|
||||
onClick={() => setShowLogin(true)}
|
||||
className="fixed top-4 left-4 z-50 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 flex items-center group"
|
||||
>
|
||||
<LogIn className="w-5 h-5 mr-2 group-hover:translate-x-1 transition-transform duration-300" />
|
||||
{language === 'en' ? 'Login' : 'تسجيل الدخول'}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Login Modal */}
|
||||
{showLogin && (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
|
||||
<div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-6 text-center">
|
||||
{language === 'en' ? 'Login to UTAS Portal' : 'تسجيل الدخول إلى بوابة الجامعة'}
|
||||
</h2>
|
||||
<form onSubmit={handleLogin} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{language === 'en' ? 'Email' : 'البريد الإلكتروني'}
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={loginForm.email}
|
||||
onChange={(e) => setLoginForm({...loginForm, email: e.target.value})}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-gray-700 font-medium mb-2">
|
||||
{language === 'en' ? 'Password' : 'كلمة المرور'}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={loginForm.password}
|
||||
onChange={(e) => setLoginForm({...loginForm, password: e.target.value})}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 rounded-lg font-semibold hover:from-blue-700 hover:to-purple-700 transition-all duration-300 disabled:opacity-50"
|
||||
>
|
||||
{loading ? (language === 'en' ? 'Signing in...' : 'جاري تسجيل الدخول...') : (language === 'en' ? 'Sign In' : 'تسجيل الدخول')}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowLogin(false)}
|
||||
className="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-all duration-300"
|
||||
>
|
||||
{language === 'en' ? 'Cancel' : 'إلغاء'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<p className="text-sm text-gray-600 text-center mt-4">
|
||||
{language === 'en' ? 'Demo: student@university.edu / password123' : 'تجريبي: student@university.edu / password123'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Floating Chat Assistant */}
|
||||
<FloatingChatbot />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+464
-1121
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,462 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { BookOpen, Users, Clock, Award, ChevronRight, GraduationCap, Briefcase, Globe, Star } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
interface Program {
|
||||
id: string;
|
||||
title: string;
|
||||
degree: string;
|
||||
duration: string;
|
||||
type: 'postgraduate' | 'undergraduate';
|
||||
category: string;
|
||||
description: string;
|
||||
highlights: string[];
|
||||
entryRequirements: string;
|
||||
careerProspects: string[];
|
||||
isNew?: boolean;
|
||||
}
|
||||
|
||||
const programs: Program[] = [
|
||||
// Postgraduate Programs
|
||||
{
|
||||
id: 'mtech-mineral-processing',
|
||||
title: 'Mineral Processing Engineering',
|
||||
degree: 'M. Tech',
|
||||
duration: '2 years',
|
||||
type: 'postgraduate',
|
||||
category: 'Engineering & Technology',
|
||||
description: 'Advanced program focusing on modern mineral processing techniques, sustainable mining practices, and cutting-edge technology in the mining industry.',
|
||||
highlights: [
|
||||
'State-of-the-art laboratory facilities',
|
||||
'Industry partnerships with major mining companies',
|
||||
'Research opportunities in sustainable mining',
|
||||
'Expert faculty with international experience'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree in Engineering or related field with minimum 2.5 GPA',
|
||||
careerProspects: ['Mining Engineer', 'Process Engineer', 'Research Scientist', 'Project Manager']
|
||||
},
|
||||
{
|
||||
id: 'mba-leadership-innovation',
|
||||
title: 'Leadership and Innovation',
|
||||
degree: 'MBA',
|
||||
duration: '2 years',
|
||||
type: 'postgraduate',
|
||||
category: 'Business & Management',
|
||||
description: 'Comprehensive MBA program designed to develop transformational leaders and innovative thinkers for the dynamic business environment.',
|
||||
highlights: [
|
||||
'Focus on digital transformation',
|
||||
'Leadership development workshops',
|
||||
'Innovation lab and startup incubation',
|
||||
'International business exposure'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree with 3+ years professional experience',
|
||||
careerProspects: ['CEO/Executive', 'Business Consultant', 'Innovation Manager', 'Entrepreneur']
|
||||
},
|
||||
{
|
||||
id: 'msc-customs-taxation',
|
||||
title: 'Customs and Taxation',
|
||||
degree: 'MSc',
|
||||
duration: '18 months',
|
||||
type: 'postgraduate',
|
||||
category: 'Business & Law',
|
||||
description: 'Specialized program addressing the growing need for expertise in customs regulations, international trade, and taxation systems.',
|
||||
highlights: [
|
||||
'Alignment with Oman Vision 2040',
|
||||
'Expert practitioners as faculty',
|
||||
'Real-world case studies',
|
||||
'Government partnership opportunities'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree in Business, Economics, or related field',
|
||||
careerProspects: ['Customs Officer', 'Tax Consultant', 'Trade Specialist', 'Compliance Manager'],
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
id: 'master-digital-transformation',
|
||||
title: 'Digital Transformation and Innovation',
|
||||
degree: 'Master',
|
||||
duration: '2 years',
|
||||
type: 'postgraduate',
|
||||
category: 'Technology & Innovation',
|
||||
description: 'Cutting-edge program focusing on digital technologies, business transformation, and innovation management in the digital age.',
|
||||
highlights: [
|
||||
'Industry 4.0 technologies',
|
||||
'Digital strategy development',
|
||||
'Innovation ecosystems',
|
||||
'Emerging technology research'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree in Technology, Business, or related field',
|
||||
careerProspects: ['Digital Strategist', 'Innovation Lead', 'Technology Consultant', 'Digital Product Manager']
|
||||
},
|
||||
{
|
||||
id: 'mtech-reliability-maintainability',
|
||||
title: 'Reliability and Maintainability Engineering',
|
||||
degree: 'M. Tech',
|
||||
duration: '2 years',
|
||||
type: 'postgraduate',
|
||||
category: 'Engineering & Technology',
|
||||
description: 'Advanced engineering program focusing on system reliability, maintainability analysis, and asset management strategies.',
|
||||
highlights: [
|
||||
'Advanced simulation tools',
|
||||
'Industry best practices',
|
||||
'Predictive maintenance techniques',
|
||||
'Risk assessment methodologies'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree in Engineering with minimum 2.5 GPA',
|
||||
careerProspects: ['Reliability Engineer', 'Maintenance Manager', 'Asset Manager', 'Safety Engineer']
|
||||
},
|
||||
{
|
||||
id: 'msc-energy-transition',
|
||||
title: 'Energy Transition and Sustainability',
|
||||
degree: 'MSc',
|
||||
duration: '2 years',
|
||||
type: 'postgraduate',
|
||||
category: 'Environment & Sustainability',
|
||||
description: 'Forward-thinking program addressing renewable energy, sustainability practices, and the global energy transition.',
|
||||
highlights: [
|
||||
'Renewable energy technologies',
|
||||
'Sustainability assessment',
|
||||
'Energy policy analysis',
|
||||
'Green technology innovation'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree in Engineering, Science, or related field',
|
||||
careerProspects: ['Energy Consultant', 'Sustainability Manager', 'Environmental Engineer', 'Policy Analyst'],
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
id: 'msc-food-security',
|
||||
title: 'Food Security',
|
||||
degree: 'MSc',
|
||||
duration: '2 years',
|
||||
type: 'postgraduate',
|
||||
category: 'Agriculture & Food Sciences',
|
||||
description: 'Comprehensive program addressing global food security challenges, sustainable agriculture, and food system management.',
|
||||
highlights: [
|
||||
'Sustainable agriculture practices',
|
||||
'Food system analysis',
|
||||
'Nutrition and health integration',
|
||||
'Policy and governance aspects'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree in Agriculture, Biology, or related field',
|
||||
careerProspects: ['Food Security Analyst', 'Agricultural Consultant', 'Policy Advisor', 'Research Scientist'],
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
id: 'med-tesol-digital',
|
||||
title: 'TESOL with Digital Education',
|
||||
degree: 'M.Ed.',
|
||||
duration: '2 years',
|
||||
type: 'postgraduate',
|
||||
category: 'Education & Humanities',
|
||||
description: 'Master of Education program combining Teaching English to Speakers of Other Languages with modern digital education technologies.',
|
||||
highlights: [
|
||||
'Digital teaching methodologies',
|
||||
'Language acquisition research',
|
||||
'EdTech integration',
|
||||
'Cross-cultural communication'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree in Education, English, or related field',
|
||||
careerProspects: ['English Language Teacher', 'Curriculum Developer', 'Educational Technology Specialist', 'Teacher Trainer']
|
||||
},
|
||||
{
|
||||
id: 'med-tesol-eap',
|
||||
title: 'TESOL with English for Academic Purposes',
|
||||
degree: 'M.Ed.',
|
||||
duration: '2 years',
|
||||
type: 'postgraduate',
|
||||
category: 'Education & Humanities',
|
||||
description: 'Specialized education program focusing on teaching English for academic and professional contexts.',
|
||||
highlights: [
|
||||
'Academic writing instruction',
|
||||
'Professional English skills',
|
||||
'Assessment and evaluation',
|
||||
'Research methodology'
|
||||
],
|
||||
entryRequirements: 'Bachelor\'s degree in Education, English, or related field',
|
||||
careerProspects: ['Academic English Instructor', 'Language Program Coordinator', 'Educational Consultant', 'Academic Skills Advisor']
|
||||
},
|
||||
|
||||
// Undergraduate Programs
|
||||
{
|
||||
id: 'bachelor-design',
|
||||
title: 'Design',
|
||||
degree: 'Bachelor',
|
||||
duration: '4 years',
|
||||
type: 'undergraduate',
|
||||
category: 'Creative Arts & Design',
|
||||
description: 'Comprehensive design program covering visual communication, product design, and digital media with emphasis on creativity and innovation.',
|
||||
highlights: [
|
||||
'Industry-standard design software',
|
||||
'Creative workshops and studios',
|
||||
'Portfolio development',
|
||||
'Industry placement opportunities'
|
||||
],
|
||||
entryRequirements: 'High school diploma with good grades in relevant subjects',
|
||||
careerProspects: ['Graphic Designer', 'Product Designer', 'UI/UX Designer', 'Creative Director']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-web-mobile',
|
||||
title: 'Web and Mobile Technologies',
|
||||
degree: 'Bachelor',
|
||||
duration: '4 years',
|
||||
type: 'undergraduate',
|
||||
category: 'Technology & Computing',
|
||||
description: 'Cutting-edge program focusing on modern web development, mobile app creation, and emerging digital technologies.',
|
||||
highlights: [
|
||||
'Latest web frameworks and technologies',
|
||||
'Mobile app development for iOS and Android',
|
||||
'Cloud computing and DevOps',
|
||||
'Real-world project experience'
|
||||
],
|
||||
entryRequirements: 'High school diploma with strong performance in mathematics and science',
|
||||
careerProspects: ['Web Developer', 'Mobile App Developer', 'Full-Stack Developer', 'Software Engineer']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-electronics-communication',
|
||||
title: 'Electronics and Communication Engineering',
|
||||
degree: 'Bachelor',
|
||||
duration: '4 years',
|
||||
type: 'undergraduate',
|
||||
category: 'Engineering & Technology',
|
||||
description: 'Comprehensive engineering program covering electronics, telecommunications, and communication systems.',
|
||||
highlights: [
|
||||
'Advanced laboratory facilities',
|
||||
'Industry-relevant curriculum',
|
||||
'Research opportunities',
|
||||
'Professional engineering preparation'
|
||||
],
|
||||
entryRequirements: 'High school diploma with strong performance in mathematics and physics',
|
||||
careerProspects: ['Electronics Engineer', 'Telecommunications Engineer', 'Network Engineer', 'Systems Engineer']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-digital-marketing',
|
||||
title: 'Digital Marketing and Branding',
|
||||
degree: 'Bachelor',
|
||||
duration: '4 years',
|
||||
type: 'undergraduate',
|
||||
category: 'Business & Marketing',
|
||||
description: 'Modern marketing program focusing on digital strategies, brand management, and contemporary marketing technologies.',
|
||||
highlights: [
|
||||
'Digital marketing tools and platforms',
|
||||
'Brand strategy development',
|
||||
'Social media marketing',
|
||||
'Analytics and data-driven marketing'
|
||||
],
|
||||
entryRequirements: 'High school diploma with good communication and analytical skills',
|
||||
careerProspects: ['Digital Marketing Specialist', 'Brand Manager', 'Social Media Manager', 'Marketing Analyst']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-economics-business',
|
||||
title: 'Economics and Business Administration',
|
||||
degree: 'Bachelor',
|
||||
duration: '4 years',
|
||||
type: 'undergraduate',
|
||||
category: 'Business & Economics',
|
||||
description: 'Comprehensive program combining economic theory with practical business administration skills.',
|
||||
highlights: [
|
||||
'Economic analysis and modeling',
|
||||
'Business strategy development',
|
||||
'Financial management',
|
||||
'International business perspective'
|
||||
],
|
||||
entryRequirements: 'High school diploma with strong performance in mathematics and economics',
|
||||
careerProspects: ['Business Analyst', 'Economic Consultant', 'Financial Advisor', 'Management Trainee']
|
||||
},
|
||||
{
|
||||
id: 'bachelor-applied-biotechnology',
|
||||
title: 'Applied Biotechnology',
|
||||
degree: 'Bachelor',
|
||||
duration: '4 years',
|
||||
type: 'undergraduate',
|
||||
category: 'Science & Technology',
|
||||
description: 'Innovative program combining biological sciences with technology applications in healthcare, agriculture, and industry.',
|
||||
highlights: [
|
||||
'State-of-the-art laboratories',
|
||||
'Research opportunities',
|
||||
'Industry partnerships',
|
||||
'Hands-on experimental work'
|
||||
],
|
||||
entryRequirements: 'High school diploma with strong performance in biology and chemistry',
|
||||
careerProspects: ['Biotechnologist', 'Research Scientist', 'Quality Control Specialist', 'Bioinformatics Analyst']
|
||||
}
|
||||
];
|
||||
|
||||
export default function ProgramsPage() {
|
||||
const postgraduatePrograms = programs.filter(p => p.type === 'postgraduate');
|
||||
const undergraduatePrograms = programs.filter(p => p.type === 'undergraduate');
|
||||
|
||||
const ProgramCard = ({ program }: { program: Program }) => (
|
||||
<div className="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 overflow-hidden group">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
|
||||
{program.degree}
|
||||
</span>
|
||||
{program.isNew && (
|
||||
<span className="bg-green-100 text-green-800 text-xs font-medium px-2 py-1 rounded-full flex items-center gap-1">
|
||||
<Star className="w-3 h-3" />
|
||||
NEW
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-2 group-hover:text-blue-600 transition-colors">
|
||||
{program.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 text-sm mb-3">{program.category}</p>
|
||||
</div>
|
||||
<ChevronRight className="w-5 h-5 text-gray-400 group-hover:text-blue-600 transition-colors flex-shrink-0" />
|
||||
</div>
|
||||
|
||||
<p className="text-gray-700 mb-4 line-clamp-3">{program.description}</p>
|
||||
|
||||
<div className="flex items-center gap-4 text-sm text-gray-600 mb-4">
|
||||
<div className="flex items-center gap-1">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>{program.duration}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Users className="w-4 h-4" />
|
||||
<span>{program.type === 'postgraduate' ? 'Graduate Level' : 'Undergraduate Level'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="text-sm">
|
||||
<span className="font-medium text-gray-900">Key Highlights:</span>
|
||||
<ul className="mt-1 text-gray-600">
|
||||
{program.highlights.slice(0, 2).map((highlight, index) => (
|
||||
<li key={index} className="flex items-start gap-1">
|
||||
<span className="w-1 h-1 bg-blue-500 rounded-full mt-2 flex-shrink-0"></span>
|
||||
<span>{highlight}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-gray-100">
|
||||
<Link
|
||||
href={`/programs/${program.type}/${program.id}`}
|
||||
className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800 font-medium transition-colors"
|
||||
>
|
||||
Learn More
|
||||
<ChevronRight className="w-4 h-4" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-blue-900 via-blue-800 to-blue-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">
|
||||
Academic Programs
|
||||
</h1>
|
||||
<p className="text-xl text-blue-100 max-w-3xl mx-auto mb-8">
|
||||
Discover our comprehensive range of undergraduate and postgraduate programs designed to prepare you for success in the modern world.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<div className="flex items-center gap-2 bg-blue-800/50 px-4 py-2 rounded-lg">
|
||||
<GraduationCap className="w-5 h-5" />
|
||||
<span>{programs.length} Programs Available</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-blue-800/50 px-4 py-2 rounded-lg">
|
||||
<Award className="w-5 h-5" />
|
||||
<span>Industry-Relevant Curriculum</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 bg-blue-800/50 px-4 py-2 rounded-lg">
|
||||
<Globe className="w-5 h-5" />
|
||||
<span>International Standards</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Quick Navigation */}
|
||||
<div className="mb-12">
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="#postgraduate"
|
||||
className="inline-flex items-center justify-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<GraduationCap className="w-5 h-5" />
|
||||
Postgraduate Programs ({postgraduatePrograms.length})
|
||||
</a>
|
||||
<a
|
||||
href="#undergraduate"
|
||||
className="inline-flex items-center justify-center gap-2 bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors"
|
||||
>
|
||||
<BookOpen className="w-5 h-5" />
|
||||
Undergraduate Programs ({undergraduatePrograms.length})
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Postgraduate Programs */}
|
||||
<section id="postgraduate" className="mb-16">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Postgraduate Programs</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Advanced programs designed for professionals and graduates seeking specialized knowledge and leadership skills.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{postgraduatePrograms.map((program) => (
|
||||
<ProgramCard key={program.id} program={program} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Undergraduate Programs */}
|
||||
<section id="undergraduate">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Undergraduate Programs</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Comprehensive bachelor's degree programs that provide strong foundations for successful careers.
|
||||
</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{undergraduatePrograms.map((program) => (
|
||||
<ProgramCard key={program.id} program={program} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="mt-16 bg-gradient-to-r from-blue-50 to-green-50 rounded-2xl p-8 text-center">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-4">
|
||||
Ready to Start Your Academic Journey?
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6 max-w-2xl mx-auto">
|
||||
Take the first step towards your future. Explore our admission requirements, application process, and scholarship opportunities.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/admissions"
|
||||
className="inline-flex items-center justify-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
<Briefcase className="w-5 h-5" />
|
||||
Apply Now
|
||||
</Link>
|
||||
<Link
|
||||
href="/scholarships"
|
||||
className="inline-flex items-center justify-center gap-2 bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors"
|
||||
>
|
||||
<Award className="w-5 h-5" />
|
||||
View Scholarships
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,465 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Clock, Award, MapPin, DollarSign,
|
||||
Download, Mail, Phone, GraduationCap, Star, CheckCircle,
|
||||
Calendar, FileText, MessageCircle, TrendingUp,
|
||||
Users, Target, Lightbulb
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function MBALeadershipInnovationPage() {
|
||||
const programHighlights = [
|
||||
'Focus on digital transformation and Industry 4.0',
|
||||
'Leadership development through experiential learning',
|
||||
'Innovation lab and startup incubation support',
|
||||
'International business exposure and global partnerships',
|
||||
'Executive mentorship program with Omani business leaders',
|
||||
'Capstone project with real Omani companies'
|
||||
];
|
||||
|
||||
const courseModules = [
|
||||
{
|
||||
semester: 'Semester 1 - Foundation',
|
||||
courses: [
|
||||
'Strategic Management and Leadership',
|
||||
'Financial Management and Corporate Finance',
|
||||
'Marketing Management in Digital Age',
|
||||
'Organizational Behavior and Change Management'
|
||||
]
|
||||
},
|
||||
{
|
||||
semester: 'Semester 2 - Core Business',
|
||||
courses: [
|
||||
'Operations and Supply Chain Management',
|
||||
'Innovation and Entrepreneurship',
|
||||
'Data Analytics for Business Intelligence',
|
||||
'International Business and Global Strategy'
|
||||
]
|
||||
},
|
||||
{
|
||||
semester: 'Semester 3 - Specialization',
|
||||
courses: [
|
||||
'Digital Transformation Leadership',
|
||||
'Innovation Management and Design Thinking',
|
||||
'Strategic Human Resource Management',
|
||||
'Elective Course (Choose specialization)'
|
||||
]
|
||||
},
|
||||
{
|
||||
semester: 'Semester 4 - Application',
|
||||
courses: [
|
||||
'MBA Capstone Project',
|
||||
'Executive Leadership Practicum',
|
||||
'Thesis Defense and Presentation'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const careerOpportunities = [
|
||||
{
|
||||
title: 'Chief Executive Officer (CEO)',
|
||||
description: 'Lead organizations and drive strategic vision',
|
||||
salary: 'OMR 2500-5000/month',
|
||||
growth: 'Executive Level'
|
||||
},
|
||||
{
|
||||
title: 'Business Consultant',
|
||||
description: 'Advise companies on strategy and operations',
|
||||
salary: 'OMR 1800-3500/month',
|
||||
growth: 'High demand'
|
||||
},
|
||||
{
|
||||
title: 'Innovation Manager',
|
||||
description: 'Drive innovation initiatives and digital transformation',
|
||||
salary: 'OMR 2000-3800/month',
|
||||
growth: 'Rapidly growing'
|
||||
},
|
||||
{
|
||||
title: 'Entrepreneur/Startup Founder',
|
||||
description: 'Launch and scale your own business venture',
|
||||
salary: 'Variable (Equity-based)',
|
||||
growth: 'Unlimited potential'
|
||||
}
|
||||
];
|
||||
|
||||
const specializations = [
|
||||
{
|
||||
title: 'Digital Leadership',
|
||||
description: 'Focus on leading digital transformation initiatives',
|
||||
modules: ['Digital Strategy', 'Technology Management', 'AI for Business']
|
||||
},
|
||||
{
|
||||
title: 'Innovation Management',
|
||||
description: 'Specialize in innovation processes and startup development',
|
||||
modules: ['Design Thinking', 'Innovation Labs', 'Venture Capital']
|
||||
},
|
||||
{
|
||||
title: 'Strategic Management',
|
||||
description: 'Master strategic planning and corporate governance',
|
||||
modules: ['Corporate Strategy', 'Mergers & Acquisitions', 'Board Governance']
|
||||
}
|
||||
];
|
||||
|
||||
const facultyMembers = [
|
||||
{
|
||||
name: 'Dr. Rashid Al-Mukhaini',
|
||||
title: 'Professor of Strategic Management',
|
||||
specialization: 'Digital Transformation, Leadership Development',
|
||||
experience: '20 years corporate + 15 years academic'
|
||||
},
|
||||
{
|
||||
name: 'Dr. Lisa Anderson',
|
||||
title: 'Associate Professor of Innovation',
|
||||
specialization: 'Innovation Management, Entrepreneurship',
|
||||
experience: 'Former Silicon Valley executive'
|
||||
},
|
||||
{
|
||||
name: 'Prof. Ahmed Al-Balushi',
|
||||
title: 'Professor of International Business',
|
||||
specialization: 'Global Strategy, Emerging Markets',
|
||||
experience: 'Former McKinsey & Company Partner'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-indigo-900 via-purple-900 to-blue-900 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="max-w-4xl">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
MBA
|
||||
</span>
|
||||
<span className="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
Postgraduate
|
||||
</span>
|
||||
<span className="bg-yellow-600 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
|
||||
<Star className="w-3 h-3" />
|
||||
Executive Program
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
MBA in Leadership and Innovation
|
||||
</h1>
|
||||
<p className="text-xl text-blue-100 mb-8 leading-relaxed">
|
||||
Develop transformational leadership skills and innovative thinking to drive business success
|
||||
in Oman's evolving economy. Aligned with Oman Vision 2040's economic diversification goals.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-indigo-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Clock className="w-5 h-5 text-indigo-300" />
|
||||
<span className="text-indigo-300 font-medium">Duration</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">2 Years (4 Semesters)</p>
|
||||
</div>
|
||||
<div className="bg-purple-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<MapPin className="w-5 h-5 text-purple-300" />
|
||||
<span className="text-purple-300 font-medium">Campus</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">Muscat & Salalah</p>
|
||||
</div>
|
||||
<div className="bg-blue-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Users className="w-5 h-5 text-blue-300" />
|
||||
<span className="text-blue-300 font-medium">Format</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">Executive Style</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Apply Now
|
||||
</button>
|
||||
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 backdrop-blur-sm">
|
||||
<Download className="w-5 h-5" />
|
||||
Download Brochure
|
||||
</button>
|
||||
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 backdrop-blur-sm">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Schedule Consultation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
{/* Program Overview */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Target className="w-6 h-6 text-indigo-600" />
|
||||
Program Overview
|
||||
</h2>
|
||||
<div className="prose max-w-none">
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
The MBA in Leadership and Innovation is designed for ambitious professionals ready to take on
|
||||
senior leadership roles in Oman's evolving business landscape. This executive-style program
|
||||
combines rigorous academic content with practical application through real-world projects.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Our curriculum emphasizes digital transformation, innovation management, and strategic leadership -
|
||||
key competencies for driving business success in the 21st century. Students work on live projects
|
||||
with Omani companies while developing their leadership capabilities.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Aligned with Oman Vision 2040, this program prepares leaders who can navigate economic diversification,
|
||||
drive innovation, and build sustainable businesses that contribute to Oman's economic growth.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Program Highlights */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Star className="w-6 h-6 text-yellow-600" />
|
||||
Program Highlights
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{programHighlights.map((highlight, index) => (
|
||||
<div key={index} className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-700">{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Specializations */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Lightbulb className="w-6 h-6 text-orange-600" />
|
||||
Specialization Tracks
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{specializations.map((spec, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-3">{spec.title}</h3>
|
||||
<p className="text-gray-600 mb-4 text-sm">{spec.description}</p>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-gray-700">Key Modules:</p>
|
||||
{spec.modules.map((module, moduleIndex) => (
|
||||
<div key={moduleIndex} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-indigo-600 rounded-full"></div>
|
||||
<span className="text-sm text-gray-600">{module}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Curriculum */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Calendar className="w-6 h-6 text-blue-600" />
|
||||
Curriculum Structure
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{courseModules.map((module, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">{module.semester}</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{module.courses.map((course, courseIndex) => (
|
||||
<div key={courseIndex} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-indigo-600 rounded-full"></div>
|
||||
<span className="text-gray-700">{course}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Career Opportunities */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Award className="w-6 h-6 text-green-600" />
|
||||
Executive Career Paths
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{careerOpportunities.map((career, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{career.title}</h3>
|
||||
<p className="text-gray-600 mb-3">{career.description}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-green-600 font-medium">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
<span>{career.salary}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-indigo-600 text-sm">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span>{career.growth}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Faculty */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Users className="w-6 h-6 text-purple-600" />
|
||||
Distinguished Faculty
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{facultyMembers.map((faculty, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">{faculty.name}</h3>
|
||||
<p className="text-indigo-600 font-medium mb-2">{faculty.title}</p>
|
||||
<p className="text-gray-600 mb-2">
|
||||
<span className="font-medium">Specialization:</span> {faculty.specialization}
|
||||
</p>
|
||||
<p className="text-gray-600">
|
||||
<span className="font-medium">Experience:</span> {faculty.experience}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Quick Info */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Program Details</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<GraduationCap className="w-5 h-5 text-indigo-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Degree</p>
|
||||
<p className="text-gray-600">Master of Business Administration</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="w-5 h-5 text-indigo-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Duration</p>
|
||||
<p className="text-gray-600">2 Years (Executive Format)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<MapPin className="w-5 h-5 text-indigo-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Location</p>
|
||||
<p className="text-gray-600">Muscat & Salalah Campus</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<DollarSign className="w-5 h-5 text-indigo-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Investment</p>
|
||||
<p className="text-gray-600">OMR 4,000/semester</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="w-5 h-5 text-indigo-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Next Intake</p>
|
||||
<p className="text-gray-600">September 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Entry Requirements */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Executive Entry Requirements</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Bachelor's degree from recognized institution</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Minimum 3 years professional/managerial experience</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">IELTS 6.5 or equivalent English proficiency</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Leadership potential assessment</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Personal interview and case study</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Executive Benefits */}
|
||||
<div className="bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl p-6 border border-indigo-100">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Star className="w-5 h-5 text-indigo-600" />
|
||||
Executive Benefits
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="bg-white rounded-lg p-3">
|
||||
<p className="font-medium text-gray-900">Executive Networking</p>
|
||||
<p className="text-sm text-gray-600">Access to senior executive network</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3">
|
||||
<p className="font-medium text-gray-900">Mentorship Program</p>
|
||||
<p className="text-sm text-gray-600">1-on-1 with industry leaders</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3">
|
||||
<p className="font-medium text-gray-900">Global Exposure</p>
|
||||
<p className="text-sm text-gray-600">International study modules</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Executive Admissions</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-indigo-600" />
|
||||
<span className="text-gray-700">mba@utas.edu.om</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-indigo-600" />
|
||||
<span className="text-gray-700">+968 2414 3555</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full mt-4 bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg transition-colors">
|
||||
Schedule Executive Consultation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="mt-12 bg-gradient-to-r from-indigo-600 via-purple-600 to-blue-600 rounded-2xl p-8 text-center text-white">
|
||||
<h3 className="text-2xl font-bold mb-4">Lead the Future of Business in Oman</h3>
|
||||
<p className="text-blue-100 mb-6 max-w-2xl mx-auto">
|
||||
Join Oman's premier MBA program and develop the leadership skills needed to drive economic transformation.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-indigo-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-colors">
|
||||
Apply for September 2025
|
||||
</button>
|
||||
<button className="bg-indigo-500 hover:bg-indigo-400 text-white px-6 py-3 rounded-lg font-medium transition-colors">
|
||||
Request Information Package
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,402 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
BookOpen, Clock, Users, Award, MapPin, DollarSign,
|
||||
Download, Mail, Phone,
|
||||
GraduationCap, Star, CheckCircle,
|
||||
Calendar, FileText, MessageCircle
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function MTechMineralProcessingPage() {
|
||||
const programHighlights = [
|
||||
'State-of-the-art laboratory facilities with modern equipment',
|
||||
'Industry partnerships with major mining companies in Oman',
|
||||
'Research opportunities in sustainable mining practices',
|
||||
'Expert faculty with international mining industry experience',
|
||||
'Practical training in real mining environments',
|
||||
'Focus on environmental sustainability and green mining'
|
||||
];
|
||||
|
||||
const courseModules = [
|
||||
{
|
||||
semester: 'Semester 1',
|
||||
courses: [
|
||||
'Advanced Mineral Processing Principles',
|
||||
'Mathematical Methods in Engineering',
|
||||
'Research Methodology',
|
||||
'Sustainable Mining Practices'
|
||||
]
|
||||
},
|
||||
{
|
||||
semester: 'Semester 2',
|
||||
courses: [
|
||||
'Flotation Technology and Applications',
|
||||
'Hydrometallurgy and Extractive Metallurgy',
|
||||
'Process Simulation and Modeling',
|
||||
'Environmental Impact Assessment'
|
||||
]
|
||||
},
|
||||
{
|
||||
semester: 'Semester 3',
|
||||
courses: [
|
||||
'Advanced Separation Techniques',
|
||||
'Mining Equipment and Automation',
|
||||
'Industrial Project Management',
|
||||
'Elective Course'
|
||||
]
|
||||
},
|
||||
{
|
||||
semester: 'Semester 4',
|
||||
courses: [
|
||||
'Master's Thesis Research',
|
||||
'Industry Internship',
|
||||
'Thesis Defense Preparation'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const careerOpportunities = [
|
||||
{
|
||||
title: 'Process Engineer',
|
||||
description: 'Design and optimize mineral processing operations',
|
||||
salary: 'OMR 800-1500/month'
|
||||
},
|
||||
{
|
||||
title: 'Mining Engineer',
|
||||
description: 'Plan and supervise mining operations and extraction processes',
|
||||
salary: 'OMR 900-1600/month'
|
||||
},
|
||||
{
|
||||
title: 'Research Scientist',
|
||||
description: 'Conduct research in mining technology and sustainable practices',
|
||||
salary: 'OMR 1000-1800/month'
|
||||
},
|
||||
{
|
||||
title: 'Project Manager',
|
||||
description: 'Lead mining and processing projects from conception to completion',
|
||||
salary: 'OMR 1200-2000/month'
|
||||
}
|
||||
];
|
||||
|
||||
const facultyMembers = [
|
||||
{
|
||||
name: 'Dr. Ahmed Al-Rashid',
|
||||
title: 'Professor of Mineral Processing',
|
||||
specialization: 'Flotation Technology, Sustainable Mining',
|
||||
experience: '15 years industry + 10 years academic'
|
||||
},
|
||||
{
|
||||
name: 'Dr. Sarah Johnson',
|
||||
title: 'Associate Professor',
|
||||
specialization: 'Hydrometallurgy, Environmental Engineering',
|
||||
experience: '20 years international mining experience'
|
||||
},
|
||||
{
|
||||
name: 'Eng. Mohammed Al-Balushi',
|
||||
title: 'Senior Lecturer',
|
||||
specialization: 'Process Automation, Industrial Applications',
|
||||
experience: '12 years with Oman Mining Company'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-slate-900 via-blue-900 to-slate-900 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="max-w-4xl">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
M. Tech
|
||||
</span>
|
||||
<span className="bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
Postgraduate
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Master of Technology in Mineral Processing Engineering
|
||||
</h1>
|
||||
<p className="text-xl text-blue-100 mb-8 leading-relaxed">
|
||||
Advanced engineering program designed to meet Oman's growing mining industry needs,
|
||||
focusing on sustainable mineral processing, modern extraction techniques, and environmental stewardship.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-blue-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Clock className="w-5 h-5 text-blue-300" />
|
||||
<span className="text-blue-300 font-medium">Duration</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">2 Years (4 Semesters)</p>
|
||||
</div>
|
||||
<div className="bg-blue-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<MapPin className="w-5 h-5 text-blue-300" />
|
||||
<span className="text-blue-300 font-medium">Campus</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">Muscat Main Campus</p>
|
||||
</div>
|
||||
<div className="bg-blue-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Users className="w-5 h-5 text-blue-300" />
|
||||
<span className="text-blue-300 font-medium">Class Size</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">Max 25 Students</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Apply Now
|
||||
</button>
|
||||
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 backdrop-blur-sm">
|
||||
<Download className="w-5 h-5" />
|
||||
Download Brochure
|
||||
</button>
|
||||
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 backdrop-blur-sm">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Chat with Advisor
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
{/* Program Overview */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<BookOpen className="w-6 h-6 text-blue-600" />
|
||||
Program Overview
|
||||
</h2>
|
||||
<div className="prose max-w-none">
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
The Master of Technology in Mineral Processing Engineering is a specialized program designed to address
|
||||
Oman's strategic vision for sustainable mining and mineral resource development. This program combines
|
||||
theoretical knowledge with practical applications, preparing graduates to lead in the evolving mining industry.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Students will gain expertise in modern mineral processing techniques, environmental sustainability,
|
||||
and cutting-edge technology applications. The curriculum is designed in collaboration with industry
|
||||
partners to ensure graduates meet current and future market demands.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
This program aligns with Oman Vision 2040's goals for economic diversification and sustainable
|
||||
development, contributing to the nation's mining sector growth while maintaining environmental stewardship.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Program Highlights */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Star className="w-6 h-6 text-yellow-600" />
|
||||
Program Highlights
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{programHighlights.map((highlight, index) => (
|
||||
<div key={index} className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-700">{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Curriculum */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Calendar className="w-6 h-6 text-blue-600" />
|
||||
Curriculum Structure
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{courseModules.map((module, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">{module.semester}</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{module.courses.map((course, courseIndex) => (
|
||||
<div key={courseIndex} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-blue-600 rounded-full"></div>
|
||||
<span className="text-gray-700">{course}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Career Opportunities */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Award className="w-6 h-6 text-green-600" />
|
||||
Career Opportunities
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{careerOpportunities.map((career, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{career.title}</h3>
|
||||
<p className="text-gray-600 mb-3">{career.description}</p>
|
||||
<div className="flex items-center gap-2 text-green-600 font-medium">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
<span>{career.salary}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Faculty */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Users className="w-6 h-6 text-purple-600" />
|
||||
Expert Faculty
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{facultyMembers.map((faculty, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">{faculty.name}</h3>
|
||||
<p className="text-blue-600 font-medium mb-2">{faculty.title}</p>
|
||||
<p className="text-gray-600 mb-2">
|
||||
<span className="font-medium">Specialization:</span> {faculty.specialization}
|
||||
</p>
|
||||
<p className="text-gray-600">
|
||||
<span className="font-medium">Experience:</span> {faculty.experience}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Quick Info */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Information</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<GraduationCap className="w-5 h-5 text-blue-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Degree</p>
|
||||
<p className="text-gray-600">Master of Technology</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="w-5 h-5 text-blue-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Duration</p>
|
||||
<p className="text-gray-600">2 Years (Full-time)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<MapPin className="w-5 h-5 text-blue-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Location</p>
|
||||
<p className="text-gray-600">Muscat Campus</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<DollarSign className="w-5 h-5 text-blue-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Tuition</p>
|
||||
<p className="text-gray-600">OMR 3,500/semester</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="w-5 h-5 text-blue-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Next Intake</p>
|
||||
<p className="text-gray-600">September 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Entry Requirements */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Entry Requirements</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Bachelor's degree in Engineering or related field</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Minimum GPA of 2.5/4.0</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">IELTS 6.0 or equivalent English proficiency</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Statement of purpose</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Letters of recommendation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Need More Information?</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-blue-600" />
|
||||
<span className="text-gray-700">admissions@utas.edu.om</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-blue-600" />
|
||||
<span className="text-gray-700">+968 2414 3555</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full mt-4 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg transition-colors">
|
||||
Schedule a Meeting
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Related Programs */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Related Programs</h3>
|
||||
<div className="space-y-3">
|
||||
<Link href="/programs/postgraduate/mtech-reliability-maintainability" className="block p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||||
<p className="font-medium text-gray-900">M. Tech in Reliability Engineering</p>
|
||||
<p className="text-sm text-gray-600">Engineering & Technology</p>
|
||||
</Link>
|
||||
<Link href="/programs/postgraduate/msc-energy-transition" className="block p-3 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
|
||||
<p className="font-medium text-gray-900">MSc Energy Transition</p>
|
||||
<p className="text-sm text-gray-600">Environment & Sustainability</p>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="mt-12 bg-gradient-to-r from-blue-600 to-blue-800 rounded-2xl p-8 text-center text-white">
|
||||
<h3 className="text-2xl font-bold mb-4">Ready to Launch Your Career in Mining Engineering?</h3>
|
||||
<p className="text-blue-100 mb-6 max-w-2xl mx-auto">
|
||||
Join Oman's premier mineral processing engineering program and become part of the sustainable mining revolution.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-colors">
|
||||
Apply for September 2025
|
||||
</button>
|
||||
<button className="bg-blue-500 hover:bg-blue-400 text-white px-6 py-3 rounded-lg font-medium transition-colors">
|
||||
Book Campus Visit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,500 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Clock, Award, MapPin, DollarSign,
|
||||
Download, Mail, Phone, GraduationCap, Star, CheckCircle,
|
||||
Calendar, FileText, MessageCircle, Microscope, Dna,
|
||||
Beaker, Atom, TrendingUp, Building2
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function BachelorAppliedBiotechnologyPage() {
|
||||
const programHighlights = [
|
||||
'State-of-the-art biotechnology laboratories with modern equipment',
|
||||
'Research opportunities in healthcare, agriculture, and environmental applications',
|
||||
'Industry partnerships with pharmaceutical and biotech companies',
|
||||
'Hands-on experimental work from first year',
|
||||
'Internship placements in leading biotech organizations',
|
||||
'Focus on sustainable biotechnology solutions for Oman'
|
||||
];
|
||||
|
||||
const courseModules = [
|
||||
{
|
||||
year: 'Year 1 - Foundation Sciences',
|
||||
courses: [
|
||||
'General Biology and Cell Biology',
|
||||
'General Chemistry and Organic Chemistry',
|
||||
'Mathematics for Life Sciences',
|
||||
'Introduction to Biotechnology',
|
||||
'Laboratory Techniques and Safety',
|
||||
'Scientific Communication'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: 'Year 2 - Core Biotechnology',
|
||||
courses: [
|
||||
'Molecular Biology and Genetics',
|
||||
'Biochemistry and Enzymology',
|
||||
'Microbiology and Immunology',
|
||||
'Biostatistics and Data Analysis',
|
||||
'Analytical Chemistry',
|
||||
'Research Methodology'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: 'Year 3 - Applied Applications',
|
||||
courses: [
|
||||
'Industrial Biotechnology',
|
||||
'Medical Biotechnology',
|
||||
'Agricultural Biotechnology',
|
||||
'Environmental Biotechnology',
|
||||
'Bioinformatics and Computational Biology',
|
||||
'Industry Internship (6 months)'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: 'Year 4 - Specialization & Research',
|
||||
courses: [
|
||||
'Advanced Biotechnology Applications',
|
||||
'Senior Research Project',
|
||||
'Biotechnology Entrepreneurship',
|
||||
'Regulatory Affairs and Ethics',
|
||||
'Capstone Project Defense'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const careerOpportunities = [
|
||||
{
|
||||
title: 'Biotechnologist',
|
||||
description: 'Develop biotechnology products and processes',
|
||||
salary: 'OMR 600-1100/month',
|
||||
growth: 'High demand'
|
||||
},
|
||||
{
|
||||
title: 'Research Scientist',
|
||||
description: 'Conduct research in biotech labs and institutions',
|
||||
salary: 'OMR 700-1300/month',
|
||||
growth: 'Growing field'
|
||||
},
|
||||
{
|
||||
title: 'Quality Control Specialist',
|
||||
description: 'Ensure quality standards in biotech production',
|
||||
salary: 'OMR 550-950/month',
|
||||
growth: 'Stable demand'
|
||||
},
|
||||
{
|
||||
title: 'Bioinformatics Analyst',
|
||||
description: 'Analyze biological data using computational methods',
|
||||
salary: 'OMR 800-1400/month',
|
||||
growth: 'Rapidly expanding'
|
||||
}
|
||||
];
|
||||
|
||||
const applicationAreas = [
|
||||
{
|
||||
title: 'Medical Biotechnology',
|
||||
description: 'Drug development, gene therapy, diagnostic tools',
|
||||
icon: <Award className="w-6 h-6 text-red-600" />,
|
||||
examples: ['Pharmaceutical research', 'Medical diagnostics', 'Gene therapy']
|
||||
},
|
||||
{
|
||||
title: 'Agricultural Biotechnology',
|
||||
description: 'Crop improvement, sustainable farming, food security',
|
||||
icon: <Building2 className="w-6 h-6 text-green-600" />,
|
||||
examples: ['Crop enhancement', 'Biopesticides', 'Food preservation']
|
||||
},
|
||||
{
|
||||
title: 'Industrial Biotechnology',
|
||||
description: 'Biofuels, enzymes, sustainable manufacturing',
|
||||
icon: <Beaker className="w-6 h-6 text-blue-600" />,
|
||||
examples: ['Biofuel production', 'Enzyme manufacturing', 'Green chemistry']
|
||||
},
|
||||
{
|
||||
title: 'Environmental Biotechnology',
|
||||
description: 'Pollution control, waste treatment, environmental restoration',
|
||||
icon: <Atom className="w-6 h-6 text-purple-600" />,
|
||||
examples: ['Waste treatment', 'Bioremediation', 'Environmental monitoring']
|
||||
}
|
||||
];
|
||||
|
||||
const labFacilities = [
|
||||
'Molecular Biology Laboratory',
|
||||
'Microbiology and Cell Culture Facility',
|
||||
'Biochemistry and Protein Analysis Lab',
|
||||
'Bioinformatics Computer Lab',
|
||||
'Pilot-scale Bioprocessing Unit',
|
||||
'Microscopy and Imaging Center'
|
||||
];
|
||||
|
||||
const industryPartners = [
|
||||
'Oman Biotechnology Company',
|
||||
'Ministry of Health Laboratory Services',
|
||||
'Sultan Qaboos University Research Labs',
|
||||
'Petroleum Development Oman (Environmental Division)',
|
||||
'Oman Food Investment Holding Company'
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-green-900 via-teal-900 to-blue-900 text-white">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
|
||||
<div className="max-w-4xl">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
Bachelor
|
||||
</span>
|
||||
<span className="bg-teal-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
Science & Technology
|
||||
</span>
|
||||
<span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
Future-focused
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Bachelor of Applied Biotechnology
|
||||
</h1>
|
||||
<p className="text-xl text-blue-100 mb-8 leading-relaxed">
|
||||
Combine biology with technology to solve real-world challenges in healthcare, agriculture,
|
||||
and environmental sustainability. Shape the future of biotechnology in Oman.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-green-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Clock className="w-5 h-5 text-green-300" />
|
||||
<span className="text-green-300 font-medium">Duration</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">4 Years (8 Semesters)</p>
|
||||
</div>
|
||||
<div className="bg-teal-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<MapPin className="w-5 h-5 text-teal-300" />
|
||||
<span className="text-teal-300 font-medium">Campus</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">Muscat Main Campus</p>
|
||||
</div>
|
||||
<div className="bg-blue-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Microscope className="w-5 h-5 text-blue-300" />
|
||||
<span className="text-blue-300 font-medium">Research</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">Hands-on Labs</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Apply Now
|
||||
</button>
|
||||
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 backdrop-blur-sm">
|
||||
<Download className="w-5 h-5" />
|
||||
Program Guide
|
||||
</button>
|
||||
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 backdrop-blur-sm">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Lab Tour Request
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
{/* Program Overview */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Dna className="w-6 h-6 text-green-600" />
|
||||
Program Overview
|
||||
</h2>
|
||||
<div className="prose max-w-none">
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
The Bachelor of Applied Biotechnology program is designed to prepare students for careers at the
|
||||
intersection of biology and technology. This innovative program combines strong scientific foundations
|
||||
with practical applications in healthcare, agriculture, and environmental sciences.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Students will gain hands-on experience with cutting-edge biotechnology techniques, from molecular
|
||||
biology and genetic engineering to bioinformatics and bioprocessing. The curriculum emphasizes
|
||||
both theoretical knowledge and practical skills through extensive laboratory work.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Aligned with Oman's economic diversification goals, this program addresses growing needs in
|
||||
pharmaceutical development, sustainable agriculture, and environmental conservation, contributing
|
||||
to Oman Vision 2040's sustainability objectives.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Application Areas */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Beaker className="w-6 h-6 text-blue-600" />
|
||||
Biotechnology Application Areas
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{applicationAreas.map((area, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
{area.icon}
|
||||
<h3 className="text-lg font-semibold text-gray-900">{area.title}</h3>
|
||||
</div>
|
||||
<p className="text-gray-600 mb-4 text-sm">{area.description}</p>
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium text-gray-700">Applications:</p>
|
||||
{area.examples.map((example, exampleIndex) => (
|
||||
<div key={exampleIndex} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full"></div>
|
||||
<span className="text-sm text-gray-600">{example}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Program Highlights */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Star className="w-6 h-6 text-yellow-600" />
|
||||
Program Highlights
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{programHighlights.map((highlight, index) => (
|
||||
<div key={index} className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-700">{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Laboratory Facilities */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Microscope className="w-6 h-6 text-purple-600" />
|
||||
Laboratory Facilities
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-6">
|
||||
Our state-of-the-art laboratories provide students with access to modern biotechnology equipment
|
||||
and techniques used in industry and research.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{labFacilities.map((facility, index) => (
|
||||
<div key={index} className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<Microscope className="w-5 h-5 text-purple-600" />
|
||||
<span className="text-gray-700 font-medium">{facility}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Curriculum */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Calendar className="w-6 h-6 text-blue-600" />
|
||||
4-Year Curriculum Journey
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{courseModules.map((module, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">{module.year}</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{module.courses.map((course, courseIndex) => (
|
||||
<div key={courseIndex} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-green-600 rounded-full"></div>
|
||||
<span className="text-gray-700">{course}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Career Opportunities */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Award className="w-6 h-6 text-green-600" />
|
||||
Career Opportunities
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{careerOpportunities.map((career, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{career.title}</h3>
|
||||
<p className="text-gray-600 mb-3">{career.description}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-green-600 font-medium">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
<span>{career.salary}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-teal-600 text-sm">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span>{career.growth}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Industry Partnerships */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Building2 className="w-6 h-6 text-blue-600" />
|
||||
Industry Partnerships
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-6">
|
||||
Our program is developed in collaboration with leading biotechnology organizations and research
|
||||
institutions in Oman, ensuring graduates meet industry demands.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{industryPartners.map((partner, index) => (
|
||||
<div key={index} className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<CheckCircle className="w-5 h-5 text-green-600" />
|
||||
<span className="text-gray-700 font-medium">{partner}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Quick Info */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Program Details</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<GraduationCap className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Degree</p>
|
||||
<p className="text-gray-600">Bachelor of Science</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Duration</p>
|
||||
<p className="text-gray-600">4 Years (Full-time)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<MapPin className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Campus</p>
|
||||
<p className="text-gray-600">Muscat Main Campus</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<DollarSign className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Tuition</p>
|
||||
<p className="text-gray-600">OMR 3,000/semester</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="w-5 h-5 text-green-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Next Intake</p>
|
||||
<p className="text-gray-600">September 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Entry Requirements */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Entry Requirements</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">High school diploma or equivalent</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Strong performance in Biology and Chemistry</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Mathematics background required</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">IELTS 6.0 or equivalent English proficiency</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Interest in scientific research</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Research Opportunities */}
|
||||
<div className="bg-gradient-to-br from-green-50 to-teal-50 rounded-xl p-6 border border-green-100">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Atom className="w-5 h-5 text-green-600" />
|
||||
Research Opportunities
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="bg-white rounded-lg p-3">
|
||||
<p className="font-medium text-gray-900">Undergraduate Research</p>
|
||||
<p className="text-sm text-gray-600">Join faculty research projects</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3">
|
||||
<p className="font-medium text-gray-900">Summer Research Program</p>
|
||||
<p className="text-sm text-gray-600">Intensive research experience</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3">
|
||||
<p className="font-medium text-gray-900">Senior Thesis</p>
|
||||
<p className="text-sm text-gray-600">Independent research project</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Get More Information</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-green-600" />
|
||||
<span className="text-gray-700">biotech@utas.edu.om</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-green-600" />
|
||||
<span className="text-gray-700">+968 2414 3555</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full mt-4 bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded-lg transition-colors">
|
||||
Schedule Lab Tour
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="mt-12 bg-gradient-to-r from-green-600 via-teal-600 to-blue-600 rounded-2xl p-8 text-center text-white">
|
||||
<h3 className="text-2xl font-bold mb-4">Pioneer Biotechnology Innovation in Oman</h3>
|
||||
<p className="text-blue-100 mb-6 max-w-2xl mx-auto">
|
||||
Join the next generation of biotechnologists and contribute to solving global challenges through science and innovation.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-green-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-colors">
|
||||
Apply for September 2025
|
||||
</button>
|
||||
<button className="bg-green-500 hover:bg-green-400 text-white px-6 py-3 rounded-lg font-medium transition-colors">
|
||||
Schedule Laboratory Tour
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,468 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
Clock, Award, MapPin, DollarSign,
|
||||
Download, Mail, Phone, GraduationCap, Star, CheckCircle,
|
||||
Calendar, FileText, MessageCircle, Code, Smartphone,
|
||||
Monitor, Zap, TrendingUp, Briefcase
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
|
||||
export default function BachelorWebMobilePage() {
|
||||
const programHighlights = [
|
||||
'Latest web frameworks: React, Next.js, Vue.js, Angular',
|
||||
'Mobile app development for iOS and Android platforms',
|
||||
'Cloud computing and DevOps practices with AWS/Azure',
|
||||
'Real-world project experience with industry partners',
|
||||
'Internship opportunities with top tech companies in Oman',
|
||||
'Full-stack development from frontend to backend'
|
||||
];
|
||||
|
||||
const courseModules = [
|
||||
{
|
||||
year: 'Year 1 - Foundation',
|
||||
courses: [
|
||||
'Programming Fundamentals (Python, JavaScript)',
|
||||
'Computer Science Principles',
|
||||
'Database Design and Management',
|
||||
'Web Design and User Experience',
|
||||
'Mathematics for Computing',
|
||||
'English Communication Skills'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: 'Year 2 - Core Development',
|
||||
courses: [
|
||||
'Advanced Web Development (React, Node.js)',
|
||||
'Mobile App Development (React Native, Flutter)',
|
||||
'Data Structures and Algorithms',
|
||||
'Software Engineering Principles',
|
||||
'Version Control and Collaboration (Git)',
|
||||
'API Design and Development'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: 'Year 3 - Specialization',
|
||||
courses: [
|
||||
'Cloud Computing and DevOps',
|
||||
'Advanced Mobile Development',
|
||||
'Full-Stack Project Development',
|
||||
'Cybersecurity for Developers',
|
||||
'AI/ML Integration in Applications',
|
||||
'Industry Internship (6 months)'
|
||||
]
|
||||
},
|
||||
{
|
||||
year: 'Year 4 - Capstone',
|
||||
courses: [
|
||||
'Senior Capstone Project',
|
||||
'Entrepreneurship and Startups',
|
||||
'Advanced Topics Elective',
|
||||
'Professional Development',
|
||||
'Final Project Defense'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const careerOpportunities = [
|
||||
{
|
||||
title: 'Full-Stack Developer',
|
||||
description: 'Build complete web applications from frontend to backend',
|
||||
salary: 'OMR 600-1200/month',
|
||||
growth: 'High demand'
|
||||
},
|
||||
{
|
||||
title: 'Mobile App Developer',
|
||||
description: 'Create native and cross-platform mobile applications',
|
||||
salary: 'OMR 650-1300/month',
|
||||
growth: 'Rapidly growing'
|
||||
},
|
||||
{
|
||||
title: 'Frontend Developer',
|
||||
description: 'Design and implement user interfaces for web applications',
|
||||
salary: 'OMR 550-1000/month',
|
||||
growth: 'Very high demand'
|
||||
},
|
||||
{
|
||||
title: 'Software Engineer',
|
||||
description: 'Develop software solutions for businesses and organizations',
|
||||
salary: 'OMR 700-1400/month',
|
||||
growth: 'Excellent prospects'
|
||||
}
|
||||
];
|
||||
|
||||
const techStack = [
|
||||
{
|
||||
category: 'Frontend',
|
||||
technologies: ['React', 'Next.js', 'Vue.js', 'TypeScript', 'Tailwind CSS', 'Material-UI']
|
||||
},
|
||||
{
|
||||
category: 'Mobile',
|
||||
technologies: ['React Native', 'Flutter', 'iOS (Swift)', 'Android (Kotlin)', 'Xamarin']
|
||||
},
|
||||
{
|
||||
category: 'Backend',
|
||||
technologies: ['Node.js', 'Express', 'Python/Django', 'PHP/Laravel', 'REST APIs', 'GraphQL']
|
||||
},
|
||||
{
|
||||
category: 'Database',
|
||||
technologies: ['PostgreSQL', 'MongoDB', 'Firebase', 'MySQL', 'Redis', 'Prisma ORM']
|
||||
},
|
||||
{
|
||||
category: 'Cloud & DevOps',
|
||||
technologies: ['AWS', 'Azure', 'Docker', 'Kubernetes', 'CI/CD', 'Git/GitHub']
|
||||
}
|
||||
];
|
||||
|
||||
const industryPartners = [
|
||||
'Oman Technology Fund',
|
||||
'Omantel Innovation Labs',
|
||||
'Knowledge Oasis Muscat',
|
||||
'Riyada (Public Authority for SME Development)',
|
||||
'Leading Omani IT Companies'
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-emerald-900 via-blue-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="max-w-4xl">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<span className="bg-emerald-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
Bachelor
|
||||
</span>
|
||||
<span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
|
||||
Undergraduate
|
||||
</span>
|
||||
<span className="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium flex items-center gap-1">
|
||||
<TrendingUp className="w-3 h-3" />
|
||||
High Demand
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Bachelor of Web and Mobile Technologies
|
||||
</h1>
|
||||
<p className="text-xl text-blue-100 mb-8 leading-relaxed">
|
||||
Shape the digital future with cutting-edge web and mobile development skills.
|
||||
Master the latest technologies and frameworks used by leading tech companies worldwide.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-emerald-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Clock className="w-5 h-5 text-emerald-300" />
|
||||
<span className="text-emerald-300 font-medium">Duration</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">4 Years (8 Semesters)</p>
|
||||
</div>
|
||||
<div className="bg-blue-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<MapPin className="w-5 h-5 text-blue-300" />
|
||||
<span className="text-blue-300 font-medium">Campus</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">All UTAS Campuses</p>
|
||||
</div>
|
||||
<div className="bg-purple-800/30 backdrop-blur-sm rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Briefcase className="w-5 h-5 text-purple-300" />
|
||||
<span className="text-purple-300 font-medium">Internship</span>
|
||||
</div>
|
||||
<p className="text-white text-lg font-semibold">6 Months Industry</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<button className="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2">
|
||||
<FileText className="w-5 h-5" />
|
||||
Apply Now
|
||||
</button>
|
||||
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 backdrop-blur-sm">
|
||||
<Download className="w-5 h-5" />
|
||||
Download Curriculum
|
||||
</button>
|
||||
<button className="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 backdrop-blur-sm">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Live Chat Support
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2 space-y-8">
|
||||
{/* Program Overview */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Monitor className="w-6 h-6 text-emerald-600" />
|
||||
Program Overview
|
||||
</h2>
|
||||
<div className="prose max-w-none">
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
The Bachelor of Web and Mobile Technologies is designed to meet the rapidly growing demand
|
||||
for skilled developers in Oman's digital transformation journey. This comprehensive program
|
||||
combines theoretical computer science foundations with hands-on development experience.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed mb-4">
|
||||
Students will master both frontend and backend development, learn to create responsive web
|
||||
applications, and develop mobile apps for iOS and Android platforms. The curriculum stays
|
||||
current with industry trends and emerging technologies.
|
||||
</p>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
Supporting Oman Vision 2040's digital economy goals, graduates will be prepared to drive
|
||||
innovation in local businesses, start their own tech ventures, or join international
|
||||
technology companies.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Technology Stack */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Code className="w-6 h-6 text-blue-600" />
|
||||
Technology Stack You'll Master
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{techStack.map((stack, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-4">
|
||||
<h3 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
||||
{stack.category === 'Frontend' && <Monitor className="w-5 h-5 text-emerald-600" />}
|
||||
{stack.category === 'Mobile' && <Smartphone className="w-5 h-5 text-blue-600" />}
|
||||
{stack.category === 'Backend' && <Zap className="w-5 h-5 text-purple-600" />}
|
||||
{(stack.category === 'Database' || stack.category === 'Cloud & DevOps') && <Award className="w-5 h-5 text-orange-600" />}
|
||||
{stack.category}
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{stack.technologies.map((tech, techIndex) => (
|
||||
<div key={techIndex} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-gray-400 rounded-full"></div>
|
||||
<span className="text-sm text-gray-700">{tech}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Program Highlights */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Star className="w-6 h-6 text-yellow-600" />
|
||||
Program Highlights
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{programHighlights.map((highlight, index) => (
|
||||
<div key={index} className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5 flex-shrink-0" />
|
||||
<span className="text-gray-700">{highlight}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Curriculum */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Calendar className="w-6 h-6 text-blue-600" />
|
||||
4-Year Curriculum Journey
|
||||
</h2>
|
||||
<div className="space-y-6">
|
||||
{courseModules.map((module, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">{module.year}</h3>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
{module.courses.map((course, courseIndex) => (
|
||||
<div key={courseIndex} className="flex items-center gap-2">
|
||||
<div className="w-2 h-2 bg-emerald-600 rounded-full"></div>
|
||||
<span className="text-gray-700">{course}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Career Opportunities */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Award className="w-6 h-6 text-green-600" />
|
||||
Career Opportunities
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{careerOpportunities.map((career, index) => (
|
||||
<div key={index} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{career.title}</h3>
|
||||
<p className="text-gray-600 mb-3">{career.description}</p>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2 text-green-600 font-medium">
|
||||
<DollarSign className="w-4 h-4" />
|
||||
<span>{career.salary}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 text-emerald-600 text-sm">
|
||||
<TrendingUp className="w-4 h-4" />
|
||||
<span>{career.growth}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Industry Partnerships */}
|
||||
<section className="bg-white rounded-xl shadow-lg p-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-6 flex items-center gap-2">
|
||||
<Briefcase className="w-6 h-6 text-purple-600" />
|
||||
Industry Partnerships
|
||||
</h2>
|
||||
<p className="text-gray-700 mb-6">
|
||||
Our program is developed in collaboration with leading technology organizations in Oman,
|
||||
ensuring graduates meet current industry demands.
|
||||
</p>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{industryPartners.map((partner, index) => (
|
||||
<div key={index} className="flex items-center gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<CheckCircle className="w-5 h-5 text-blue-600" />
|
||||
<span className="text-gray-700 font-medium">{partner}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Quick Info */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Program Details</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<GraduationCap className="w-5 h-5 text-emerald-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Degree</p>
|
||||
<p className="text-gray-600">Bachelor of Science</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Clock className="w-5 h-5 text-emerald-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Duration</p>
|
||||
<p className="text-gray-600">4 Years (Full-time)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<MapPin className="w-5 h-5 text-emerald-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Campus</p>
|
||||
<p className="text-gray-600">All UTAS Locations</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<DollarSign className="w-5 h-5 text-emerald-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Tuition</p>
|
||||
<p className="text-gray-600">OMR 2,800/semester</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Calendar className="w-5 h-5 text-emerald-600" />
|
||||
<div>
|
||||
<p className="font-medium text-gray-900">Next Intake</p>
|
||||
<p className="text-gray-600">September 2025</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Entry Requirements */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Entry Requirements</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">High school diploma or equivalent</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Strong performance in Mathematics</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">IELTS 5.5 or equivalent English proficiency</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Basic computer literacy</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
<span className="text-gray-700">Passion for technology and innovation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scholarships */}
|
||||
<div className="bg-gradient-to-br from-emerald-50 to-blue-50 rounded-xl p-6 border border-emerald-100">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
|
||||
<Award className="w-5 h-5 text-emerald-600" />
|
||||
Scholarships Available
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="bg-white rounded-lg p-3">
|
||||
<p className="font-medium text-gray-900">Merit Scholarship</p>
|
||||
<p className="text-sm text-gray-600">Up to 50% tuition coverage</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-3">
|
||||
<p className="font-medium text-gray-900">Tech Excellence Award</p>
|
||||
<p className="text-sm text-gray-600">OMR 1,000/year + laptop</p>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/scholarships" className="block mt-4 text-center bg-emerald-600 hover:bg-emerald-700 text-white py-2 px-4 rounded-lg transition-colors">
|
||||
View All Scholarships
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Contact */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Get Support</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<Mail className="w-5 h-5 text-emerald-600" />
|
||||
<span className="text-gray-700">tech@utas.edu.om</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Phone className="w-5 h-5 text-emerald-600" />
|
||||
<span className="text-gray-700">+968 2414 3555</span>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full mt-4 bg-emerald-600 hover:bg-emerald-700 text-white py-2 px-4 rounded-lg transition-colors">
|
||||
Schedule Virtual Tour
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA */}
|
||||
<div className="mt-12 bg-gradient-to-r from-emerald-600 via-blue-600 to-purple-600 rounded-2xl p-8 text-center text-white">
|
||||
<h3 className="text-2xl font-bold mb-4">Build the Digital Future of Oman</h3>
|
||||
<p className="text-blue-100 mb-6 max-w-2xl mx-auto">
|
||||
Join the next generation of web and mobile developers. Start your journey in one of the fastest-growing tech fields.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-emerald-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-colors">
|
||||
Apply for September 2025
|
||||
</button>
|
||||
<button className="bg-emerald-500 hover:bg-emerald-400 text-white px-6 py-3 rounded-lg font-medium transition-colors">
|
||||
Schedule Campus Visit
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,521 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
UserPlus, CheckCircle, Clock, AlertCircle, FileText,
|
||||
BookOpen, Users, MapPin, Phone, Mail, Download
|
||||
} from 'lucide-react';
|
||||
|
||||
export default function RegistrationPage() {
|
||||
|
||||
// Registration process steps
|
||||
const registrationSteps = [
|
||||
{
|
||||
step: 1,
|
||||
title: 'Admission Confirmation',
|
||||
description: 'Receive and confirm your admission offer',
|
||||
status: 'completed',
|
||||
timeline: 'Upon admission',
|
||||
requirements: [
|
||||
'Admission letter received',
|
||||
'Acceptance form submitted',
|
||||
'Initial payment confirmed'
|
||||
]
|
||||
},
|
||||
{
|
||||
step: 2,
|
||||
title: 'Document Submission',
|
||||
description: 'Submit all required original documents',
|
||||
status: 'current',
|
||||
timeline: '2 weeks before semester',
|
||||
requirements: [
|
||||
'Original academic transcripts',
|
||||
'Passport and visa documents',
|
||||
'Medical fitness certificate',
|
||||
'Passport-size photographs'
|
||||
]
|
||||
},
|
||||
{
|
||||
step: 3,
|
||||
title: 'Fee Payment',
|
||||
description: 'Complete tuition and fee payments',
|
||||
status: 'pending',
|
||||
timeline: '1 week before semester',
|
||||
requirements: [
|
||||
'Semester tuition fees',
|
||||
'Registration and activity fees',
|
||||
'Payment confirmation receipt',
|
||||
'Financial aid documentation (if applicable)'
|
||||
]
|
||||
},
|
||||
{
|
||||
step: 4,
|
||||
title: 'Course Selection',
|
||||
description: 'Register for courses and create your schedule',
|
||||
status: 'pending',
|
||||
timeline: '1 week before semester',
|
||||
requirements: [
|
||||
'Meet with academic advisor',
|
||||
'Select courses for semester',
|
||||
'Confirm class schedule',
|
||||
'Prerequisite verification'
|
||||
]
|
||||
},
|
||||
{
|
||||
step: 5,
|
||||
title: 'Orientation & Campus Services',
|
||||
description: 'Complete orientation and access campus services',
|
||||
status: 'pending',
|
||||
timeline: 'First week of semester',
|
||||
requirements: [
|
||||
'Attend new student orientation',
|
||||
'Get student ID card',
|
||||
'Library and IT access setup',
|
||||
'Campus facility tour'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Important registration dates
|
||||
const registrationDates = [
|
||||
{
|
||||
semester: 'Fall 2025',
|
||||
periods: [
|
||||
{ event: 'New Student Registration Opens', date: 'August 1, 2025', type: 'start' },
|
||||
{ event: 'Course Registration Deadline', date: 'August 25, 2025', type: 'deadline' },
|
||||
{ event: 'Late Registration (with fee)', date: 'August 26-30, 2025', type: 'extended' },
|
||||
{ event: 'Classes Begin', date: 'September 1, 2025', type: 'start' },
|
||||
{ event: 'Add/Drop Period Ends', date: 'September 10, 2025', type: 'deadline' }
|
||||
]
|
||||
},
|
||||
{
|
||||
semester: 'Spring 2026',
|
||||
periods: [
|
||||
{ event: 'New Student Registration Opens', date: 'January 5, 2026', type: 'start' },
|
||||
{ event: 'Course Registration Deadline', date: 'January 25, 2026', type: 'deadline' },
|
||||
{ event: 'Late Registration (with fee)', date: 'January 26-30, 2026', type: 'extended' },
|
||||
{ event: 'Classes Begin', date: 'February 1, 2026', type: 'start' },
|
||||
{ event: 'Add/Drop Period Ends', date: 'February 10, 2026', type: 'deadline' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Required documents checklist
|
||||
const requiredDocuments = [
|
||||
{
|
||||
category: 'Academic Documents',
|
||||
documents: [
|
||||
{ name: 'Official transcripts (original)', required: true, note: 'Sealed and certified' },
|
||||
{ name: 'Degree certificates', required: true, note: 'Original or certified copies' },
|
||||
{ name: 'English proficiency test results', required: true, note: 'IELTS/TOEFL official scores' },
|
||||
{ name: 'Curriculum vitae/Resume', required: false, note: 'For postgraduate programs' }
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Personal Documents',
|
||||
documents: [
|
||||
{ name: 'Passport copy', required: true, note: 'Valid for at least 2 years' },
|
||||
{ name: 'Visa documents', required: true, note: 'Student visa or residence permit' },
|
||||
{ name: 'Emirates ID', required: true, note: 'For UAE residents' },
|
||||
{ name: 'Passport-size photographs', required: true, note: '8 recent colored photos' }
|
||||
]
|
||||
},
|
||||
{
|
||||
category: 'Health & Legal Documents',
|
||||
documents: [
|
||||
{ name: 'Medical fitness certificate', required: true, note: 'Recent health check-up' },
|
||||
{ name: 'Vaccination records', required: true, note: 'COVID-19 and other required vaccines' },
|
||||
{ name: 'Police clearance certificate', required: false, note: 'For international students' },
|
||||
{ name: 'Insurance documents', required: true, note: 'Health insurance coverage' }
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Course registration guidelines
|
||||
const courseGuidelines = [
|
||||
{
|
||||
title: 'Academic Advising',
|
||||
description: 'Meet with your assigned academic advisor before registering',
|
||||
tips: [
|
||||
'Schedule appointment 2 weeks before registration',
|
||||
'Discuss degree requirements and career goals',
|
||||
'Review prerequisite requirements',
|
||||
'Plan course sequence for upcoming semesters'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Course Load Guidelines',
|
||||
description: 'Recommended number of courses per semester',
|
||||
tips: [
|
||||
'Undergraduate: 15-18 credit hours (5-6 courses)',
|
||||
'Postgraduate: 9-12 credit hours (3-4 courses)',
|
||||
'First-year students: Start with lighter load',
|
||||
'Working students: Maximum 12 credit hours'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: 'Registration Priority',
|
||||
description: 'Course registration order based on student status',
|
||||
tips: [
|
||||
'Graduating seniors register first',
|
||||
'Continuing students by credit hours',
|
||||
'New students register during orientation',
|
||||
'Late registration incurs additional fees'
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// Campus services and resources
|
||||
const campusServices = [
|
||||
{
|
||||
service: 'Student ID Card',
|
||||
description: 'Get your official UTAS Oman student identification',
|
||||
location: 'Student Services Office',
|
||||
hours: 'Sun-Thu: 8AM-4PM',
|
||||
requirements: ['Registration confirmation', 'Passport-size photo', 'ID document']
|
||||
},
|
||||
{
|
||||
service: 'Library Access',
|
||||
description: 'Access to digital and physical library resources',
|
||||
location: 'University Library',
|
||||
hours: 'Sun-Thu: 7AM-10PM, Fri-Sat: 9AM-6PM',
|
||||
requirements: ['Student ID card', 'Library orientation session']
|
||||
},
|
||||
{
|
||||
service: 'IT Services',
|
||||
description: 'Email account, Wi-Fi access, and digital platforms',
|
||||
location: 'IT Support Center',
|
||||
hours: 'Sun-Thu: 8AM-5PM',
|
||||
requirements: ['Student registration', 'Account activation form']
|
||||
},
|
||||
{
|
||||
service: 'Health Services',
|
||||
description: 'Basic medical care and health consultations',
|
||||
location: 'Campus Health Center',
|
||||
hours: 'Sun-Thu: 8AM-4PM',
|
||||
requirements: ['Student ID', 'Health insurance', 'Medical history form']
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-indigo-900 via-blue-900 to-teal-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">
|
||||
Student Registration
|
||||
</h1>
|
||||
<p className="text-xl text-indigo-100 max-w-3xl mx-auto mb-8">
|
||||
Complete your registration process and join the UTAS Oman community.
|
||||
Follow our step-by-step guide to ensure a smooth start to your academic journey.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-indigo-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors flex items-center gap-2">
|
||||
<UserPlus className="w-5 h-5" />
|
||||
Start Registration
|
||||
</button>
|
||||
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-900 transition-colors flex items-center gap-2">
|
||||
<Download className="w-5 h-5" />
|
||||
Registration Guide
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
{/* Registration Process Steps */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Registration Process</h2>
|
||||
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||
Follow these essential steps to complete your registration and prepare for your studies at UTAS Oman
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
{registrationSteps.map((step) => (
|
||||
<div key={step.step} className="relative">
|
||||
<div className={`bg-white rounded-xl shadow-lg p-8 border-l-4 ${
|
||||
step.status === 'completed' ? 'border-green-500' :
|
||||
step.status === 'current' ? 'border-blue-500' :
|
||||
'border-gray-300'
|
||||
}`}>
|
||||
<div className="flex items-start gap-6">
|
||||
<div className={`w-12 h-12 rounded-full flex items-center justify-center font-bold text-white ${
|
||||
step.status === 'completed' ? 'bg-green-600' :
|
||||
step.status === 'current' ? 'bg-blue-600' :
|
||||
'bg-gray-400'
|
||||
}`}>
|
||||
{step.status === 'completed' ? (
|
||||
<CheckCircle className="w-6 h-6" />
|
||||
) : (
|
||||
step.step
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{step.title}</h3>
|
||||
<p className="text-gray-600 mb-2">{step.description}</p>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<Clock className="w-4 h-4 text-blue-600" />
|
||||
<span className="text-blue-600 font-medium">{step.timeline}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className={`px-3 py-1 text-xs font-medium rounded-full ${
|
||||
step.status === 'completed' ? 'bg-green-100 text-green-800' :
|
||||
step.status === 'current' ? 'bg-blue-100 text-blue-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{step.status === 'completed' ? 'Completed' :
|
||||
step.status === 'current' ? 'Current Step' :
|
||||
'Upcoming'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{step.requirements.map((requirement, reqIndex) => (
|
||||
<div key={reqIndex} className="flex items-center gap-2">
|
||||
<CheckCircle className={`w-4 h-4 ${
|
||||
step.status === 'completed' ? 'text-green-600' : 'text-gray-400'
|
||||
}`} />
|
||||
<span className="text-gray-600 text-sm">{requirement}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Registration Dates */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Important Registration Dates</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Mark your calendar with these critical registration deadlines and dates
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
{registrationDates.map((semester, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-6">
|
||||
<h3 className="text-xl font-semibold mb-2">{semester.semester}</h3>
|
||||
<p className="text-blue-100">Registration Timeline</p>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="space-y-4">
|
||||
{semester.periods.map((period, periodIndex) => (
|
||||
<div key={periodIndex} className="flex items-center justify-between p-4 border border-gray-200 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
period.type === 'start' ? 'bg-green-500' :
|
||||
period.type === 'deadline' ? 'bg-red-500' :
|
||||
'bg-orange-500'
|
||||
}`}></div>
|
||||
<span className="font-medium text-gray-900">{period.event}</span>
|
||||
</div>
|
||||
<span className="text-gray-600 font-medium">{period.date}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Required Documents */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Required Documents</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Ensure you have all necessary documents ready for a smooth registration process
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{requiredDocuments.map((category, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-lg overflow-hidden">
|
||||
<div className="bg-gray-50 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 flex items-center gap-2">
|
||||
<FileText className="w-5 h-5 text-blue-600" />
|
||||
{category.category}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="space-y-4">
|
||||
{category.documents.map((doc, docIndex) => (
|
||||
<div key={docIndex} className="border border-gray-200 rounded-lg p-4">
|
||||
<div className="flex items-start gap-3 mb-2">
|
||||
{doc.required ? (
|
||||
<AlertCircle className="w-5 h-5 text-red-600 mt-0.5" />
|
||||
) : (
|
||||
<CheckCircle className="w-5 h-5 text-green-600 mt-0.5" />
|
||||
)}
|
||||
<div className="flex-1">
|
||||
<h4 className="font-medium text-gray-900">{doc.name}</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">{doc.note}</p>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Course Registration Guidelines */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Course Registration Guidelines</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Important information to help you select and register for the right courses
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{courseGuidelines.map((guideline, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-lg p-8">
|
||||
<div className="text-center mb-6">
|
||||
<BookOpen className="w-12 h-12 text-blue-600 mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{guideline.title}</h3>
|
||||
<p className="text-gray-600">{guideline.description}</p>
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3">
|
||||
{guideline.tips.map((tip, tipIndex) => (
|
||||
<li key={tipIndex} 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">{tip}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Campus Services */}
|
||||
<section className="mb-16">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">Campus Services & Resources</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Essential services you'll need to set up as part of your registration
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{campusServices.map((service, index) => (
|
||||
<div key={index} className="bg-white rounded-xl shadow-lg p-6">
|
||||
<div className="flex items-start gap-4 mb-4">
|
||||
<Users className="w-8 h-8 text-blue-600 mt-1" />
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">{service.service}</h3>
|
||||
<p className="text-gray-600 mb-4">{service.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-gray-600">{service.location}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-gray-500" />
|
||||
<span className="text-gray-600">{service.hours}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<h4 className="font-medium text-gray-900 mb-2">Requirements:</h4>
|
||||
<ul className="space-y-1">
|
||||
{service.requirements.map((req, reqIndex) => (
|
||||
<li key={reqIndex} className="flex items-center gap-2">
|
||||
<CheckCircle className="w-3 h-3 text-green-600" />
|
||||
<span className="text-gray-600 text-sm">{req}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Contact Information */}
|
||||
<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 Registration Support?</h2>
|
||||
<p className="text-lg text-gray-600">
|
||||
Our registration team is here to help you through every step of the 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">Registration Office</h3>
|
||||
<p className="text-gray-600 mb-2">+968 2414 3555 (Ext. 102)</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 Support</h3>
|
||||
<p className="text-gray-600 mb-2">registration@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">In-Person Support</h3>
|
||||
<p className="text-gray-600 mb-2">Student Services Building</p>
|
||||
<p className="text-sm text-gray-500">Ground Floor, Room 105</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Final CTA */}
|
||||
<section className="text-center">
|
||||
<div className="bg-gradient-to-r from-indigo-900 to-blue-900 rounded-2xl p-8 text-white">
|
||||
<h2 className="text-3xl font-bold mb-4">Ready to Complete Your Registration?</h2>
|
||||
<p className="text-xl text-indigo-100 mb-8 max-w-2xl mx-auto">
|
||||
Take the next step in your academic journey. Complete your registration and join the UTAS Oman community.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button className="bg-white text-indigo-900 px-8 py-3 rounded-lg font-semibold hover:bg-gray-100 transition-colors">
|
||||
Start Registration Process
|
||||
</button>
|
||||
<button className="border-2 border-white text-white px-8 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-900 transition-colors">
|
||||
Download Checklist
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,754 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { useLanguage } from '@/components/providers/LanguageProvider';
|
||||
import { Award, DollarSign, Users, Globe, CheckCircle, Clock, Search, Filter, ExternalLink, ArrowRight, CalendarDays, GraduationCap } from 'lucide-react';
|
||||
import { mockScholarships, getOpenScholarships, getScholarshipsByCategory, Scholarship } from '@/lib/mockData';
|
||||
|
||||
export default function ScholarshipsPage() {
|
||||
const { language, t, dir } = useLanguage();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [selectedCategory, setSelectedCategory] = useState('');
|
||||
const [selectedStatus, setSelectedStatus] = useState('');
|
||||
const [showFilters, setShowFilters] = useState(false);
|
||||
|
||||
// Filter scholarships based on search and filters
|
||||
const filteredScholarships = useMemo(() => {
|
||||
let results = mockScholarships;
|
||||
|
||||
// Text search
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
results = results.filter(scholarship =>
|
||||
(language === 'en' ? scholarship.title : scholarship.titleAr).toLowerCase().includes(query) ||
|
||||
(language === 'en' ? scholarship.description : scholarship.descriptionAr).toLowerCase().includes(query) ||
|
||||
(language === 'en' ? scholarship.value : scholarship.valueAr).toLowerCase().includes(query)
|
||||
);
|
||||
}
|
||||
|
||||
// Category filter
|
||||
if (selectedCategory) {
|
||||
results = results.filter(scholarship => scholarship.category === selectedCategory);
|
||||
}
|
||||
|
||||
// Status filter
|
||||
if (selectedStatus) {
|
||||
results = results.filter(scholarship => scholarship.status === selectedStatus);
|
||||
}
|
||||
|
||||
return results;
|
||||
}, [searchQuery, selectedCategory, selectedStatus, language]);
|
||||
|
||||
const ScholarshipCard = ({ scholarship }: { scholarship: Scholarship }) => (
|
||||
<div className="group bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-gray-100">
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<div className={`p-2 rounded-lg ${
|
||||
scholarship.category === 'merit' ? 'bg-blue-100 text-blue-600' :
|
||||
scholarship.category === 'need' ? 'bg-green-100 text-green-600' :
|
||||
scholarship.category === 'research' ? 'bg-purple-100 text-purple-600' :
|
||||
'bg-orange-100 text-orange-600'
|
||||
}`}>
|
||||
<Award size={20} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-xl font-bold text-gray-900">
|
||||
{language === 'en' ? scholarship.title : scholarship.titleAr}
|
||||
</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-semibold ${
|
||||
scholarship.status === 'open' ? 'bg-green-500 text-white' :
|
||||
scholarship.status === 'closing' ? 'bg-yellow-500 text-white' :
|
||||
'bg-red-500 text-white'
|
||||
}`}>
|
||||
{scholarship.status === 'open' ? (language === 'en' ? 'Open' : 'مفتوح') :
|
||||
scholarship.status === 'closing' ? (language === 'en' ? 'Closing Soon' : 'يغلق قريباً') :
|
||||
(language === 'en' ? 'Closed' : 'مغلق')}
|
||||
</span>
|
||||
<span className="text-sm text-gray-500 capitalize">
|
||||
{scholarship.category === 'merit' ? (language === 'en' ? 'Merit-based' : 'على أساس الجدارة') :
|
||||
scholarship.category === 'need' ? (language === 'en' ? 'Need-based' : 'على أساس الحاجة') :
|
||||
scholarship.category === 'research' ? (language === 'en' ? 'Research' : 'بحثي') :
|
||||
(language === 'en' ? 'International' : 'دولي')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-600 mb-4 leading-relaxed">
|
||||
{language === 'en' ? scholarship.description : scholarship.descriptionAr}
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<DollarSign className="w-4 h-4 text-green-500" />
|
||||
<div>
|
||||
<div className="text-sm text-gray-500">{language === 'en' ? 'Value' : 'القيمة'}</div>
|
||||
<div className="font-semibold text-gray-900">
|
||||
{language === 'en' ? scholarship.value : scholarship.valueAr}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-4 h-4 text-blue-500" />
|
||||
<div>
|
||||
<div className="text-sm text-gray-500">{language === 'en' ? 'Duration' : 'المدة'}</div>
|
||||
<div className="font-semibold text-gray-900">
|
||||
{language === 'en' ? scholarship.duration : scholarship.durationAr}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<h4 className="font-semibold text-gray-900 mb-3 flex items-center gap-2">
|
||||
<Users className="w-4 h-4" />
|
||||
{language === 'en' ? 'Eligibility Requirements' : 'متطلبات الأهلية'}
|
||||
</h4>
|
||||
<ul className="space-y-2">
|
||||
{(language === 'en' ? scholarship.eligibility : scholarship.eligibilityAr).slice(0, 3).map((requirement, index) => (
|
||||
<li key={index} className="flex items-start gap-2 text-sm text-gray-600">
|
||||
<CheckCircle className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<span>{requirement}</span>
|
||||
</li>
|
||||
))}
|
||||
{(language === 'en' ? scholarship.eligibility : scholarship.eligibilityAr).length > 3 && (
|
||||
<li className="text-sm text-gray-500 ml-6">
|
||||
{language === 'en' ?
|
||||
`+${(scholarship.eligibility.length - 3)} more requirements` :
|
||||
`+${(scholarship.eligibilityAr.length - 3)} متطلبات أخرى`
|
||||
}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-50 rounded-lg p-4 mb-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<CalendarDays className="w-4 h-4 text-red-500" />
|
||||
<span className="font-semibold text-gray-900">
|
||||
{language === 'en' ? 'Application Deadline' : 'موعد التقديم النهائي'}
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-lg font-bold text-red-600">
|
||||
{language === 'en' ? scholarship.deadline : scholarship.deadlineAr}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
className="flex-1 bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center gap-2"
|
||||
disabled={scholarship.status === 'closed'}
|
||||
>
|
||||
{scholarship.status === 'closed' ?
|
||||
(language === 'en' ? 'Application Closed' : 'التقديم مغلق') :
|
||||
(language === 'en' ? 'Apply Now' : 'قدم الآن')
|
||||
}
|
||||
{scholarship.status !== 'closed' && <ArrowRight size={16} />}
|
||||
</button>
|
||||
<button className="px-4 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-colors duration-200 flex items-center gap-2">
|
||||
<ExternalLink size={16} />
|
||||
{language === 'en' ? 'Details' : 'التفاصيل'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-gray-50 ${dir === 'rtl' ? 'font-arabic' : ''}`} dir={dir}>
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
{t('scholarships')} & {language === 'en' ? 'Financial Support' : 'الدعم المالي'}
|
||||
</h1>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
{language === 'en'
|
||||
? 'Invest in your future with UTAS scholarships. Up to $15,000 per year available for eligible students.'
|
||||
: 'استثمر في مستقبلك مع منح UTAS الدراسية. حتى 15,000 دولار سنوياً متاح للطلاب المؤهلين.'
|
||||
}
|
||||
</p>
|
||||
<div className="flex justify-center space-x-8 text-center">
|
||||
<div>
|
||||
<div className="text-3xl font-bold">$15,000</div>
|
||||
<div className="opacity-80">{language === 'en' ? 'Max Annual Value' : 'أقصى قيمة سنوية'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold">150+</div>
|
||||
<div className="opacity-80">{language === 'en' ? 'Available Scholarships' : 'منحة متاحة'}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl font-bold">85%</div>
|
||||
<div className="opacity-80">{language === 'en' ? 'Students Receive Support' : 'الطلاب يتلقون الدعم'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
{/* Search and Filters */}
|
||||
<div className="bg-white rounded-xl shadow-lg p-6 mb-8">
|
||||
{/* Search Bar */}
|
||||
<div className="relative mb-6">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder={language === 'en' ? 'Search scholarships by name, value, or category...' : 'البحث عن المنح بالاسم أو القيمة أو الفئة...'}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent text-lg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Filter Toggle */}
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex items-center gap-2 mb-4 px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<Filter size={16} />
|
||||
{t('filter')}
|
||||
</button>
|
||||
|
||||
{/* Filters */}
|
||||
{showFilters && (
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{language === 'en' ? 'Category' : 'الفئة'}
|
||||
</label>
|
||||
<select
|
||||
value={selectedCategory}
|
||||
onChange={(e) => setSelectedCategory(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">{language === 'en' ? 'All Categories' : 'جميع الفئات'}</option>
|
||||
<option value="merit">{language === 'en' ? 'Merit-based' : 'على أساس الجدارة'}</option>
|
||||
<option value="need">{language === 'en' ? 'Need-based' : 'على أساس الحاجة'}</option>
|
||||
<option value="research">{language === 'en' ? 'Research' : 'بحثي'}</option>
|
||||
<option value="international">{language === 'en' ? 'International' : 'دولي'}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{language === 'en' ? 'Status' : 'الحالة'}
|
||||
</label>
|
||||
<select
|
||||
value={selectedStatus}
|
||||
onChange={(e) => setSelectedStatus(e.target.value)}
|
||||
className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="">{language === 'en' ? 'All Status' : 'جميع الحالات'}</option>
|
||||
<option value="open">{language === 'en' ? 'Open for Applications' : 'مفتوح للتقديم'}</option>
|
||||
<option value="closing">{language === 'en' ? 'Closing Soon' : 'يغلق قريباً'}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Results Header */}
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{language === 'en' ? `${filteredScholarships.length} Scholarships Available` : `${filteredScholarships.length} منحة متاحة`}
|
||||
</h2>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<GraduationCap size={16} />
|
||||
{language === 'en' ? 'Sorted by deadline' : 'مرتب حسب الموعد النهائي'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scholarships Grid */}
|
||||
{filteredScholarships.length > 0 ? (
|
||||
<div className="grid lg:grid-cols-2 gap-8">
|
||||
{filteredScholarships.map(scholarship => (
|
||||
<ScholarshipCard key={scholarship.id} scholarship={scholarship} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-12">
|
||||
<Award size={64} className="mx-auto text-gray-300 mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-600 mb-2">{t('no_results')}</h3>
|
||||
<p className="text-gray-500">
|
||||
{language === 'en'
|
||||
? 'Try adjusting your search or filters to find more scholarships.'
|
||||
: 'حاول تعديل البحث أو المرشحات للعثور على المزيد من المنح.'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Application Tips */}
|
||||
<div className="mt-16 bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl p-8 text-white">
|
||||
<h2 className="text-3xl font-bold mb-6 text-center">
|
||||
{language === 'en' ? 'Scholarship Application Tips' : 'نصائح تقديم المنح الدراسية'}
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
<div className="text-center">
|
||||
<div className="bg-white bg-opacity-20 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
||||
<CheckCircle size={32} />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">
|
||||
{language === 'en' ? 'Apply Early' : 'قدم مبكراً'}
|
||||
</h3>
|
||||
<p className="opacity-90">
|
||||
{language === 'en'
|
||||
? 'Submit your application as early as possible to avoid deadline rush.'
|
||||
: 'قدم طلبك في أقرب وقت ممكن لتجنب زحمة الموعد النهائي.'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="bg-white bg-opacity-20 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
||||
<Users size={32} />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">
|
||||
{language === 'en' ? 'Meet Requirements' : 'استوف المتطلبات'}
|
||||
</h3>
|
||||
<p className="opacity-90">
|
||||
{language === 'en'
|
||||
? 'Carefully review and ensure you meet all eligibility criteria.'
|
||||
: 'راجع بعناية وتأكد من استيفائك لجميع معايير الأهلية.'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="bg-white bg-opacity-20 rounded-full p-4 w-16 h-16 mx-auto mb-4 flex items-center justify-center">
|
||||
<ExternalLink size={32} />
|
||||
</div>
|
||||
<h3 className="font-semibold mb-2">
|
||||
{language === 'en' ? 'Prepare Documents' : 'حضر الوثائق'}
|
||||
</h3>
|
||||
<p className="opacity-90">
|
||||
{language === 'en'
|
||||
? 'Gather all required documents including transcripts and references.'
|
||||
: 'اجمع جميع الوثائق المطلوبة بما في ذلك النصوص والمراجع.'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
],
|
||||
description: 'Recognizes academic achievement and helps cover study costs for high-achieving students.',
|
||||
type: 'merit',
|
||||
deadline: 'January 15, 2025',
|
||||
applicationUrl: '/apply/scholarship/merit'
|
||||
},
|
||||
{
|
||||
id: 'equity-scholarship',
|
||||
title: 'UTAS Equity Scholarship',
|
||||
amount: '$5,000 per year',
|
||||
duration: 'Duration of degree',
|
||||
eligibility: [
|
||||
'Financial disadvantage',
|
||||
'First in family to attend university',
|
||||
'Remote or regional background',
|
||||
'Care leavers or refugee background'
|
||||
],
|
||||
description: 'Supporting students from disadvantaged backgrounds to access higher education.',
|
||||
type: 'equity',
|
||||
deadline: 'December 31, 2024',
|
||||
applicationUrl: '/apply/scholarship/equity'
|
||||
},
|
||||
{
|
||||
id: 'international-scholarship',
|
||||
title: 'International Excellence Scholarship',
|
||||
amount: '25% tuition reduction',
|
||||
duration: 'Duration of degree',
|
||||
eligibility: [
|
||||
'International students',
|
||||
'Academic excellence in previous studies',
|
||||
'Commencing undergraduate or postgraduate',
|
||||
'Full fee-paying students'
|
||||
],
|
||||
description: 'Attracts high-achieving international students to study at UTAS with significant tuition reduction.',
|
||||
type: 'international',
|
||||
deadline: 'Rolling applications',
|
||||
applicationUrl: '/apply/scholarship/international'
|
||||
},
|
||||
{
|
||||
id: 'research-scholarship',
|
||||
title: 'Research Training Program (RTP)',
|
||||
amount: '$28,994 per year (2024 rate)',
|
||||
duration: '3-4 years',
|
||||
eligibility: [
|
||||
'PhD or Research Masters students',
|
||||
'Strong academic background',
|
||||
'Research proposal approved',
|
||||
'Full-time enrollment'
|
||||
],
|
||||
description: 'Australian Government funded scholarship for research degree students, covering living costs.',
|
||||
type: 'research',
|
||||
deadline: 'Ongoing throughout year',
|
||||
applicationUrl: '/apply/scholarship/rtp'
|
||||
},
|
||||
{
|
||||
id: 'indigenous-scholarship',
|
||||
title: 'Indigenous Student Success Scholarship',
|
||||
amount: '$5,000 per year + support',
|
||||
duration: 'Duration of degree',
|
||||
eligibility: [
|
||||
'Aboriginal or Torres Strait Islander students',
|
||||
'Australian citizens',
|
||||
'Enrolled in eligible programs',
|
||||
'Maintaining satisfactory progress'
|
||||
],
|
||||
description: 'Comprehensive support including financial assistance, mentoring, and cultural programs.',
|
||||
type: 'indigenous',
|
||||
deadline: 'December 31, 2024',
|
||||
applicationUrl: '/apply/scholarship/indigenous'
|
||||
}
|
||||
];
|
||||
|
||||
const scholarshipTypes = [
|
||||
{ value: 'merit', label: 'Merit Based', icon: <Award className="w-4 h-4" /> },
|
||||
{ value: 'equity', label: 'Equity & Access', icon: <Users className="w-4 h-4" /> },
|
||||
{ value: 'international', label: 'International', icon: <Globe className="w-4 h-4" /> },
|
||||
{ value: 'research', label: 'Research', icon: <CheckCircle className="w-4 h-4" /> },
|
||||
{ value: 'indigenous', label: 'Indigenous', icon: <Users className="w-4 h-4" /> }
|
||||
];
|
||||
|
||||
const filteredScholarships = scholarships.filter(scholarship => {
|
||||
if (searchQuery && !scholarship.title.toLowerCase().includes(searchQuery.toLowerCase()) &&
|
||||
!scholarship.description.toLowerCase().includes(searchQuery.toLowerCase())) {
|
||||
return false;
|
||||
}
|
||||
if (selectedType && scholarship.type !== selectedType) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
const clearFilters = () => {
|
||||
setSearchQuery('');
|
||||
setSelectedType('');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Hero Section */}
|
||||
<div className="bg-gradient-to-r from-emerald-600 to-teal-600 text-white">
|
||||
<div className="container mx-auto px-4 py-20">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<Award className="w-16 h-16 mx-auto mb-6 text-emerald-200" />
|
||||
<h1 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
UTAS Scholarships
|
||||
</h1>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
Invest in your future with scholarships worth over $20 million annually. From merit-based awards to equity support, we help make education accessible.
|
||||
</p>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mb-8">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6">
|
||||
<div className="text-3xl font-bold mb-2">$15,000</div>
|
||||
<div className="text-emerald-200">Maximum annual award</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6">
|
||||
<div className="text-3xl font-bold mb-2">70%</div>
|
||||
<div className="text-emerald-200">Students receive support</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6">
|
||||
<div className="text-3xl font-bold mb-2">$20M+</div>
|
||||
<div className="text-emerald-200">Total scholarships annually</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/apply/scholarships"
|
||||
className="bg-white text-emerald-600 px-8 py-4 rounded-xl font-semibold hover:bg-gray-100 transition-all duration-200 inline-flex items-center"
|
||||
>
|
||||
Apply for Scholarships
|
||||
<ArrowRight className="ml-2" size={20} />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search and Filters */}
|
||||
<div className="bg-white shadow-sm border-b border-gray-200">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="flex flex-col md:flex-row gap-4 items-center">
|
||||
<div className="relative flex-grow">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search scholarships by name or description..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full pl-12 pr-4 py-3 border border-gray-300 rounded-xl focus:outline-none focus:ring-2 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setShowFilters(!showFilters)}
|
||||
className="flex items-center space-x-2 px-4 py-3 bg-gray-100 text-gray-700 rounded-xl hover:bg-gray-200 transition-colors"
|
||||
>
|
||||
<Filter size={20} />
|
||||
<span>Filters</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showFilters && (
|
||||
<div className="mt-4 p-4 bg-gray-50 rounded-xl">
|
||||
<div className="flex flex-wrap gap-3 items-center">
|
||||
<span className="text-sm font-medium text-gray-700">Filter by type:</span>
|
||||
{scholarshipTypes.map(type => (
|
||||
<button
|
||||
key={type.value}
|
||||
onClick={() => setSelectedType(selectedType === type.value ? '' : type.value)}
|
||||
className={`flex items-center space-x-2 px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||
selectedType === type.value
|
||||
? 'bg-emerald-600 text-white'
|
||||
: 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
|
||||
}`}
|
||||
>
|
||||
{type.icon}
|
||||
<span>{type.label}</span>
|
||||
</button>
|
||||
))}
|
||||
|
||||
{(searchQuery || selectedType) && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="ml-4 text-sm text-gray-600 hover:text-gray-800 underline"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Scholarships Grid */}
|
||||
<div className="container mx-auto px-4 py-12">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
{filteredScholarships.length} Scholarships Available
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
{filteredScholarships.length === 0 ? (
|
||||
<div className="text-center py-12">
|
||||
<Award size={64} className="mx-auto text-gray-400 mb-4" />
|
||||
<h3 className="text-xl font-semibold text-gray-600 mb-2">No scholarships found</h3>
|
||||
<p className="text-gray-500 mb-4">Try adjusting your search criteria</p>
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="bg-emerald-600 text-white px-6 py-2 rounded-lg hover:bg-emerald-700 transition-colors"
|
||||
>
|
||||
Clear Filters
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid gap-8">
|
||||
{filteredScholarships.map((scholarship) => (
|
||||
<div key={scholarship.id} className="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow">
|
||||
<div className="p-8">
|
||||
<div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6">
|
||||
<div className="flex-grow">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div>
|
||||
<div className="flex items-center space-x-3 mb-2">
|
||||
<span className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
|
||||
scholarship.type === 'merit' ? 'bg-blue-100 text-blue-800' :
|
||||
scholarship.type === 'equity' ? 'bg-purple-100 text-purple-800' :
|
||||
scholarship.type === 'international' ? 'bg-green-100 text-green-800' :
|
||||
scholarship.type === 'research' ? 'bg-orange-100 text-orange-800' :
|
||||
'bg-pink-100 text-pink-800'
|
||||
}`}>
|
||||
{scholarshipTypes.find(t => t.value === scholarship.type)?.label}
|
||||
</span>
|
||||
<div className="flex items-center text-gray-500 text-sm">
|
||||
<Clock size={16} className="mr-1" />
|
||||
Deadline: {scholarship.deadline}
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">
|
||||
{scholarship.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-4 leading-relaxed">
|
||||
{scholarship.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-6">
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-2 flex items-center">
|
||||
<DollarSign size={18} className="mr-2 text-green-600" />
|
||||
Financial Details
|
||||
</h4>
|
||||
<ul className="text-gray-600 space-y-1">
|
||||
<li><strong>Amount:</strong> {scholarship.amount}</li>
|
||||
<li><strong>Duration:</strong> {scholarship.duration}</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="font-semibold text-gray-900 mb-2 flex items-center">
|
||||
<CheckCircle size={18} className="mr-2 text-emerald-600" />
|
||||
Eligibility Requirements
|
||||
</h4>
|
||||
<ul className="text-gray-600 space-y-1">
|
||||
{scholarship.eligibility.slice(0, 2).map((req, index) => (
|
||||
<li key={index}>• {req}</li>
|
||||
))}
|
||||
{scholarship.eligibility.length > 2 && (
|
||||
<li className="text-gray-500">+ {scholarship.eligibility.length - 2} more requirements</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-shrink-0 lg:w-64">
|
||||
<div className="bg-gray-50 rounded-xl p-6 text-center">
|
||||
<div className="text-3xl font-bold text-emerald-600 mb-2">
|
||||
{scholarship.amount.split(' ')[0]}
|
||||
</div>
|
||||
<div className="text-gray-600 text-sm mb-4">
|
||||
{scholarship.amount.includes('per year') ? 'per year' : 'total value'}
|
||||
</div>
|
||||
<Link
|
||||
href={scholarship.applicationUrl}
|
||||
className="w-full bg-emerald-600 text-white px-6 py-3 rounded-xl font-semibold hover:bg-emerald-700 transition-colors inline-flex items-center justify-center"
|
||||
>
|
||||
Apply Now
|
||||
<ExternalLink className="ml-2" size={16} />
|
||||
</Link>
|
||||
<Link
|
||||
href={`/scholarships/${scholarship.id}`}
|
||||
className="w-full mt-3 border border-gray-300 text-gray-700 px-6 py-3 rounded-xl font-medium hover:bg-gray-50 transition-colors inline-block"
|
||||
>
|
||||
View Details
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Application Tips */}
|
||||
<div className="bg-white">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
|
||||
Scholarship Application Tips
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-emerald-600 font-bold text-sm">1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Apply Early</h3>
|
||||
<p className="text-gray-600">Many scholarships have limited places. Submit your application as early as possible to maximize your chances.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-emerald-600 font-bold text-sm">2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Read Requirements Carefully</h3>
|
||||
<p className="text-gray-600">Ensure you meet all eligibility criteria before applying. Some scholarships are automatically considered upon course application.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-emerald-600 font-bold text-sm">3</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Prepare Strong Supporting Documents</h3>
|
||||
<p className="text-gray-600">Personal statements, academic transcripts, and references should clearly demonstrate your eligibility and motivation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-emerald-600 font-bold text-sm">4</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Apply for Multiple Scholarships</h3>
|
||||
<p className="text-gray-600">You can often apply for multiple scholarships. Don't limit yourself to just one opportunity.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-emerald-600 font-bold text-sm">5</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Maintain Academic Standards</h3>
|
||||
<p className="text-gray-600">Most scholarships require you to maintain satisfactory academic progress to continue receiving funding.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start space-x-4">
|
||||
<div className="flex-shrink-0 w-8 h-8 bg-emerald-100 rounded-full flex items-center justify-center">
|
||||
<span className="text-emerald-600 font-bold text-sm">6</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 mb-2">Get Help if Needed</h3>
|
||||
<p className="text-gray-600">Contact our Student Central team for guidance on scholarship applications and eligibility questions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Call to Action */}
|
||||
<div className="bg-gradient-to-r from-teal-600 to-emerald-600 text-white">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h2 className="text-3xl font-bold mb-4">Don't Miss Out on Funding Opportunities</h2>
|
||||
<p className="text-xl opacity-90 mb-8">
|
||||
Start your scholarship applications today and invest in your future success
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/apply/scholarships"
|
||||
className="bg-white text-emerald-600 px-8 py-4 rounded-xl font-semibold hover:bg-gray-100 transition-all duration-200"
|
||||
>
|
||||
Apply for Scholarships
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact/scholarships"
|
||||
className="border-2 border-white text-white px-8 py-4 rounded-xl font-semibold hover:bg-white hover:text-emerald-600 transition-all duration-200"
|
||||
>
|
||||
Get Scholarship Advice
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user