🎉 Complete AI-Enhanced University Portal - Ready for Production
✨ Major Features Added: - AI Chat with conversation memory and university-specific knowledge base - Multi-tenant university support with white-label capabilities - Professional admin interface for knowledge base management - Advanced database schema with Prisma ORM - Comprehensive documentation and guides - Modern Next.js 15 + React 19 architecture - Bilingual support (English/Arabic) - Role-based access control - Real-time chat interface with loading states 🔧 Technical Improvements: - Fixed all linter errors and TypeScript issues - Cleaned up codebase and removed legacy files - Added comprehensive .gitignore - Updated README with detailed setup instructions - Optimized database schema and migrations - Enhanced error handling and user experience 📚 Documentation: - AI Conversation Memory Guide - AI Enhancement Summary - Developer Guide - User Guide - Complete setup and deployment instructions 🚀 Ready for GitHub deployment and production use!
This commit is contained in:
Krikorios
+257
-612
@@ -1,650 +1,295 @@
|
||||
'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 UTASOmanHomePage() {
|
||||
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.pexels.com/photos/256490/pexels-photo-256490.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
|
||||
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.pexels.com/photos/267885/pexels-photo-267885.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
|
||||
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.pexels.com/photos/2982449/pexels-photo-2982449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
|
||||
cta: language === 'en' ? "Start Your Journey" : "ابدأ رحلتك"
|
||||
}
|
||||
];
|
||||
|
||||
// Academic Programs from the images
|
||||
const postgraduatePrograms = [
|
||||
{
|
||||
title: language === 'en' ? "M. Tech in Mineral Processing Engineering" : "ماجستير التقنية في هندسة معالجة المعادن",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MBA in Leadership and Innovation" : "ماجستير إدارة الأعمال في القيادة والابتكار",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MSc in Customs and Taxation" : "ماجستير العلوم في الجمارك والضرائب",
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Master in Digital Transformation and Innovation" : "ماجستير في التحول الرقمي والابتكار",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "M. Tech in Reliability and Maintainability Engineering" : "ماجستير التقنية في هندسة الموثوقية والقابلية للصيانة",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MSc in Energy Transition and Sustainability" : "ماجستير العلوم في انتقال الطاقة والاستدامة",
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "MSc in Food Security" : "ماجستير العلوم في الأمن الغذائي",
|
||||
isNew: true
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Master of Education (M.Ed.) in TESOL with Digital Education in the Knowledge Society" : "ماجستير التربية في تدريس اللغة الإنجليزية مع التعليم الرقمي في مجتمع المعرفة",
|
||||
isNew: false
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Master of Education (M.Ed.) in TESOL with English for Academic and Specific Purposes (EAP & ESP)" : "ماجستير التربية في تدريس اللغة الإنجليزية للأغراض الأكاديمية والمحددة",
|
||||
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.pexels.com/photos/1438072/pexels-photo-1438072.jpeg?auto=compress&cs=tinysrgb&w=400&h=200&dpr=2",
|
||||
date: language === 'en' ? "July 10, 2025" : "10 يوليو 2025"
|
||||
}
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className={`min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 ${language === 'ar' ? 'rtl' : 'ltr'}`}>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Navigation */}
|
||||
<MainNavigation />
|
||||
<nav className="bg-white shadow-lg">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex justify-between items-center h-16">
|
||||
<Link href="/" className="flex items-center space-x-3">
|
||||
<div className="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<span className="text-white font-bold text-lg">U</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-xl font-bold text-gray-900">University Portal</div>
|
||||
<div className="text-xs text-gray-600">Excellence in Education</div>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<div className="hidden md:flex items-center space-x-8">
|
||||
<Link href="/programs" className="text-gray-700 hover:text-blue-600">Programs</Link>
|
||||
<Link href="/admissions" className="text-gray-700 hover:text-blue-600">Admissions</Link>
|
||||
<Link href="/research" className="text-gray-700 hover:text-blue-600">Research</Link>
|
||||
<Link href="/campus" className="text-gray-700 hover:text-blue-600">Campus</Link>
|
||||
<Link href="/contact" className="text-gray-700 hover:text-blue-600">Contact</Link>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Link href="/login" className="text-gray-700 hover:text-blue-600">Sign In</Link>
|
||||
<Link href="/register" className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
|
||||
Apply Now
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* 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 max-w-7xl mx-auto px-4 md:px-6 lg:px-8 overflow-x-hidden">
|
||||
<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' : 'أعضاء هيئة التدريس', suffix: '+4471' },
|
||||
{ label: language === 'en' ? 'STUDENTS' : 'الطلاب', suffix: '+45851' },
|
||||
{ label: language === 'en' ? 'BRANCHES' : 'الفروع', suffix: '11' },
|
||||
{ label: language === 'en' ? 'COURSES' : 'المقررات', suffix: '+1000' },
|
||||
{ label: language === 'en' ? 'COLLEGES' : 'الكليات', suffix: '6' },
|
||||
{ label: language === 'en' ? '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">
|
||||
<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">
|
||||
<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">
|
||||
<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>
|
||||
|
||||
<section className="bg-gradient-to-br from-slate-900 via-blue-900 to-indigo-900 text-white py-20">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<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 className="inline-flex items-center px-4 py-2 bg-white bg-opacity-10 rounded-full text-sm font-medium mb-8">
|
||||
<span className="w-2 h-2 bg-green-400 rounded-full mr-2"></span>
|
||||
Established 1995 • Accredited Institution
|
||||
</div>
|
||||
|
||||
<h1 className="text-5xl md:text-7xl font-bold mb-8">
|
||||
<span className="text-white">Excellence in</span>
|
||||
<br />
|
||||
<span className="text-blue-300">Higher Education</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl md:text-2xl text-blue-100 mb-12 max-w-3xl mx-auto">
|
||||
Join a community of scholars, innovators, and leaders. Our university combines
|
||||
academic excellence with cutting-edge research, preparing students for success
|
||||
in an ever-evolving global landscape.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-6 justify-center mb-16">
|
||||
<Link
|
||||
href="/admissions"
|
||||
className="px-8 py-4 bg-white text-slate-900 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Apply for Admission
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
href="/programs"
|
||||
className="px-8 py-4 border-2 border-white text-white rounded-lg font-semibold text-lg hover:bg-white hover:text-slate-900 transition-colors"
|
||||
>
|
||||
Explore Programs
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
|
||||
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg">
|
||||
<div className="text-3xl font-bold text-white mb-2">25,000+</div>
|
||||
<div className="text-blue-200 text-sm">Students Enrolled</div>
|
||||
</div>
|
||||
))}
|
||||
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg">
|
||||
<div className="text-3xl font-bold text-white mb-2">150+</div>
|
||||
<div className="text-blue-200 text-sm">Academic Programs</div>
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg">
|
||||
<div className="text-3xl font-bold text-white mb-2">95%</div>
|
||||
<div className="text-blue-200 text-sm">Graduate Success Rate</div>
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white bg-opacity-10 rounded-lg">
|
||||
<div className="text-3xl font-bold text-white mb-2">$2.5B</div>
|
||||
<div className="text-blue-200 text-sm">Research Funding</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!'
|
||||
: 'تحتاج مساعدة؟ اسأل مساعدنا الذكي!'
|
||||
}
|
||||
{/* Features Section */}
|
||||
<section className="py-20 bg-gray-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
A Tradition of
|
||||
<span className="text-blue-600"> Excellence</span>
|
||||
</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 className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
For nearly three decades, we have been at the forefront of higher education,
|
||||
combining academic rigor with innovative research and global perspectives.
|
||||
</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 className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="w-16 h-16 bg-blue-600 rounded-xl flex items-center justify-center text-3xl mb-6">
|
||||
🎓
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Academic Excellence</h3>
|
||||
<p className="text-gray-600">
|
||||
Consistently ranked among the top universities globally, with world-renowned faculty and cutting-edge research facilities.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="w-16 h-16 bg-indigo-600 rounded-xl flex items-center justify-center text-3xl mb-6">
|
||||
🔬
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Research Leadership</h3>
|
||||
<p className="text-gray-600">
|
||||
Leading breakthrough research in medicine, technology, and environmental sciences with over $2.5 billion in research funding.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-xl shadow-sm border border-gray-100">
|
||||
<div className="w-16 h-16 bg-emerald-600 rounded-xl flex items-center justify-center text-3xl mb-6">
|
||||
💼
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4">Career Success</h3>
|
||||
<p className="text-gray-600">
|
||||
95% of graduates employed within 6 months, with strong industry partnerships and career development programs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Programs Section */}
|
||||
<section className="py-20 bg-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
|
||||
World-Class
|
||||
<span className="text-blue-600"> Education</span>
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Choose from over 150 academic programs across undergraduate, graduate, and doctoral levels,
|
||||
designed to prepare you for success in your chosen field.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div className="p-6 bg-blue-600 text-white">
|
||||
<div className="text-4xl mb-4">💻</div>
|
||||
<h3 className="text-xl font-bold mb-2">Computer Science & Engineering</h3>
|
||||
<p className="text-sm opacity-90">Bachelor of Science • 4 Years</p>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-gray-600 mb-4">
|
||||
Develop cutting-edge software solutions and advance the frontiers of technology.
|
||||
</p>
|
||||
<Link href="/programs" className="inline-block px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
|
||||
Learn More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div className="p-6 bg-emerald-600 text-white">
|
||||
<div className="text-4xl mb-4">📊</div>
|
||||
<h3 className="text-xl font-bold mb-2">Business Administration</h3>
|
||||
<p className="text-sm opacity-90">Master of Business Administration • 2 Years</p>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-gray-600 mb-4">
|
||||
Develop leadership skills and business acumen through our AACSB-accredited MBA program.
|
||||
</p>
|
||||
<Link href="/programs" className="inline-block px-4 py-2 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700">
|
||||
Learn More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div className="p-6 bg-purple-600 text-white">
|
||||
<div className="text-4xl mb-4">🧠</div>
|
||||
<h3 className="text-xl font-bold mb-2">Psychology & Neuroscience</h3>
|
||||
<p className="text-sm opacity-90">Master of Science • 2 Years</p>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<p className="text-gray-600 mb-4">
|
||||
Explore the complexities of human behavior and cognition through rigorous research.
|
||||
</p>
|
||||
<Link href="/programs" className="inline-block px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
|
||||
Learn More
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA Section */}
|
||||
<section className="py-20 bg-blue-600 text-white">
|
||||
<div className="container mx-auto px-4 text-center">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||
Ready to Join Our Community?
|
||||
</h2>
|
||||
<p className="text-xl text-blue-100 mb-8 max-w-3xl mx-auto">
|
||||
Take the first step towards your future with a world-class education that prepares you for success.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Link
|
||||
href="/register"
|
||||
className="px-8 py-4 bg-white text-blue-600 rounded-lg font-semibold text-lg hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
Apply Now
|
||||
</Link>
|
||||
<Link
|
||||
href="/contact"
|
||||
className="px-8 py-4 border-2 border-white text-white rounded-lg font-semibold text-lg hover:bg-white hover:text-blue-600 transition-colors"
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</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">
|
||||
<footer className="bg-gray-900 text-white">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-6">
|
||||
{language === 'en' ? 'University of Technology and Applied Sciences' : 'جامعة التقنية والعلوم التطبيقية'}
|
||||
</h3>
|
||||
<h3 className="text-xl font-bold mb-4">University Portal</h3>
|
||||
<p className="text-gray-400 mb-4">
|
||||
{language === 'en'
|
||||
? 'Leading technological education and innovation in Oman'
|
||||
: 'رائدة في التعليم التكنولوجي والابتكار في عُمان'
|
||||
}
|
||||
Empowering students worldwide with world-class education and cutting-edge technology.
|
||||
</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>
|
||||
<h4 className="text-lg font-semibold mb-4">Academics</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><Link href="/programs" className="hover:text-white">Programs</Link></li>
|
||||
<li><Link href="/courses" className="hover:text-white">Courses</Link></li>
|
||||
<li><Link href="/admissions" className="hover:text-white">Admissions</Link></li>
|
||||
<li><Link href="/scholarships" className="hover:text-white">Scholarships</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>
|
||||
<h4 className="text-lg font-semibold mb-4">Campus Life</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><Link href="/campus" className="hover:text-white">Campus</Link></li>
|
||||
<li><Link href="/events" className="hover:text-white">Events</Link></li>
|
||||
<li><Link href="/international" className="hover:text-white">International</Link></li>
|
||||
<li><Link href="/contact" className="hover:text-white">Contact</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>
|
||||
<h4 className="text-lg font-semibold mb-4">Support</h4>
|
||||
<ul className="space-y-2 text-gray-400">
|
||||
<li><Link href="/help" className="hover:text-white">Help Center</Link></li>
|
||||
<li><Link href="/accessibility" className="hover:text-white">Accessibility</Link></li>
|
||||
<li><Link href="/privacy" className="hover:text-white">Privacy Policy</Link></li>
|
||||
<li><Link href="/terms" className="hover:text-white">Terms of Service</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 className="border-t border-gray-800 mt-12 pt-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
<p className="text-gray-400 text-sm">
|
||||
© 2025 University Portal. All rights reserved.
|
||||
</p>
|
||||
<div className="flex space-x-6 mt-4 md:mt-0">
|
||||
<Link href="/privacy" className="text-gray-400 hover:text-white text-sm">Privacy</Link>
|
||||
<Link href="/terms" className="text-gray-400 hover:text-white text-sm">Terms</Link>
|
||||
<Link href="/cookies" className="text-gray-400 hover:text-white text-sm">Cookies</Link>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user