main
This commit is contained in:
Krikorios
@@ -0,0 +1,647 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } 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,
|
||||
MapPin,
|
||||
Trophy,
|
||||
Waves,
|
||||
Leaf,
|
||||
ChevronRight,
|
||||
Award,
|
||||
Zap,
|
||||
MapIcon,
|
||||
Phone,
|
||||
Mail,
|
||||
ExternalLink
|
||||
} from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function HomePage() {
|
||||
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({ students: 0, programs: 0, satisfaction: 0 });
|
||||
|
||||
// Auto-slide for hero banner
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentSlide((prev) => (prev + 1) % 3);
|
||||
}, 5000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
// Animate statistics
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
const interval = setInterval(() => {
|
||||
setAnimatedStats(prev => ({
|
||||
students: prev.students < 35000 ? prev.students + 500 : 35000,
|
||||
programs: prev.programs < 350 ? prev.programs + 5 : 350,
|
||||
satisfaction: prev.satisfaction < 92 ? prev.satisfaction + 1 : 92
|
||||
}));
|
||||
}, 50);
|
||||
|
||||
setTimeout(() => clearInterval(interval), 2000);
|
||||
}, 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('Invalid credentials. Use: student@university.edu / password123 or admin@university.edu / admin123');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Login failed:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleLanguage = () => {
|
||||
setLanguage(language === 'en' ? 'ar' : 'en');
|
||||
};
|
||||
|
||||
const heroSlides = [
|
||||
{
|
||||
title: language === 'en' ? "#1 in Climate Action Globally" : "#1 عالمياً في العمل المناخي",
|
||||
subtitle: language === 'en' ? "Leading the world in sustainability and environmental innovation" : "رائدة عالمياً في الاستدامة والابتكار البيئي",
|
||||
image: "https://images.unsplash.com/photo-1569163139394-de4e4f43e4e3?w=1200&h=600&fit=crop",
|
||||
cta: language === 'en' ? "Discover Our Impact" : "اكتشف تأثيرنا"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "World-Class Marine & Antarctic Science" : "علوم بحرية وقطبية عالمية المستوى",
|
||||
subtitle: language === 'en' ? "Pioneering research in marine ecosystems and climate science" : "أبحاث رائدة في النظم البيئية البحرية وعلوم المناخ",
|
||||
image: "https://images.unsplash.com/photo-1583212292454-1fe6229603b7?w=1200&h=600&fit=crop",
|
||||
cta: language === 'en' ? "Explore Research" : "اكتشف البحوث"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Transform Your Future with UTAS" : "حوّل مستقبلك مع جامعة تاسمانيا",
|
||||
subtitle: language === 'en' ? "Join Australia's most sustainable university" : "انضم إلى أكثر الجامعات الأسترالية استدامة",
|
||||
image: "https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=1200&h=600&fit=crop",
|
||||
cta: language === 'en' ? "Start Your Journey" : "ابدأ رحلتك"
|
||||
}
|
||||
];
|
||||
|
||||
const studyAreas = [
|
||||
{
|
||||
title: language === 'en' ? "Business and Law" : "الأعمال والقانون",
|
||||
description: language === 'en' ? "Leading programs in commerce, law, and business innovation" : "برامج رائدة في التجارة والقانون وابتكار الأعمال",
|
||||
icon: <Users className="w-8 h-8" />,
|
||||
color: "from-blue-500 to-blue-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Earth, Sea, Antarctic & Environment" : "الأرض والبحار والقطب الجنوبي والبيئة",
|
||||
description: language === 'en' ? "World-renowned research in climate and environmental sciences" : "أبحاث مشهورة عالمياً في علوم المناخ والبيئة",
|
||||
icon: <Waves className="w-8 h-8" />,
|
||||
color: "from-teal-500 to-cyan-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Health and Medicine" : "الصحة والطب",
|
||||
description: language === 'en' ? "Innovative health programs with real-world impact" : "برامج صحية مبتكرة ذات تأثير حقيقي",
|
||||
icon: <Heart className="w-8 h-8" />,
|
||||
color: "from-red-500 to-pink-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Science, Technology & Engineering" : "العلوم والتكنولوجيا والهندسة",
|
||||
description: language === 'en' ? "Cutting-edge programs in STEM fields" : "برامج متطورة في مجالات العلوم والتكنولوجيا",
|
||||
icon: <Zap className="w-8 h-8" />,
|
||||
color: "from-purple-500 to-indigo-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Creative Arts and Design" : "الفنون الإبداعية والتصميم",
|
||||
description: language === 'en' ? "Inspiring creativity and artistic excellence" : "إلهام الإبداع والتميز الفني",
|
||||
icon: <Star className="w-8 h-8" />,
|
||||
color: "from-orange-500 to-yellow-600"
|
||||
},
|
||||
{
|
||||
title: language === 'en' ? "Education, Humanities & Social Sciences" : "التعليم والعلوم الإنسانية والاجتماعية",
|
||||
description: language === 'en' ? "Shaping the future of education and society" : "تشكيل مستقبل التعليم والمجتمع",
|
||||
icon: <BookOpen className="w-8 h-8" />,
|
||||
color: "from-green-500 to-emerald-600"
|
||||
}
|
||||
];
|
||||
|
||||
const achievements = [
|
||||
{
|
||||
rank: "#1",
|
||||
title: language === 'en' ? "Climate Action Globally" : "العمل المناخي عالمياً",
|
||||
subtitle: language === 'en' ? "THE Impact Rankings 2025" : "تصنيف التأثير 2025",
|
||||
icon: <Trophy className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
rank: "5★",
|
||||
title: language === 'en' ? "QS Overall Rating" : "التقييم العام QS",
|
||||
subtitle: language === 'en' ? "Excellence in Education" : "التميز في التعليم",
|
||||
icon: <Award className="w-6 h-6" />
|
||||
},
|
||||
{
|
||||
rank: "Top 1%",
|
||||
title: language === 'en' ? "Global Universities" : "الجامعات العالمية",
|
||||
subtitle: language === 'en' ? "World University Rankings" : "تصنيف الجامعات العالمية",
|
||||
icon: <Globe className="w-6 h-6" />
|
||||
}
|
||||
];
|
||||
|
||||
if (user) {
|
||||
router.push('/dashboard');
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen ${language === 'ar' ? 'rtl' : 'ltr'}`}>
|
||||
{/* Header */}
|
||||
<header className="bg-white/95 backdrop-blur-sm shadow-lg border-b border-gray-200 sticky top-0 z-50">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="flex items-center justify-between h-20">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="bg-gradient-to-br from-blue-600 to-teal-600 p-2 rounded-xl">
|
||||
<GraduationCap size={32} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-teal-600 bg-clip-text text-transparent">
|
||||
UTAS Portal
|
||||
</h1>
|
||||
<p className="text-xs text-gray-500">University of Tasmania</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="hidden md:flex items-center space-x-8">
|
||||
<Link href="#study" className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
|
||||
{language === 'en' ? 'Study' : 'الدراسة'}
|
||||
</Link>
|
||||
<Link href="#research" className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
|
||||
{language === 'en' ? 'Research' : 'البحث'}
|
||||
</Link>
|
||||
<Link href="#campus" className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
|
||||
{language === 'en' ? 'Campus Life' : 'الحياة الجامعية'}
|
||||
</Link>
|
||||
<Link href="#about" className="text-gray-700 hover:text-blue-600 font-medium transition-colors">
|
||||
{language === 'en' ? 'About' : 'حول'}
|
||||
</Link>
|
||||
</nav>
|
||||
|
||||
{/* Language & Login */}
|
||||
<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={18} />
|
||||
<span className="font-medium">{language === 'en' ? 'ع' : 'EN'}</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setShowLogin(true)}
|
||||
className="bg-gradient-to-r from-blue-600 to-teal-600 text-white px-6 py-2 rounded-xl hover:shadow-lg transition-all duration-200 font-medium flex items-center space-x-2"
|
||||
>
|
||||
<LogIn size={18} />
|
||||
<span>{language === 'en' ? 'Portal Login' : 'دخول البوابة'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-screen overflow-hidden">
|
||||
{heroSlides.map((slide, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`absolute inset-0 transition-transform duration-1000 ease-in-out ${
|
||||
index === currentSlide ? 'translate-x-0' :
|
||||
index < currentSlide ? '-translate-x-full' : 'translate-x-full'
|
||||
}`}
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6)), url(${slide.image})`,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}}
|
||||
>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="text-center text-white max-w-4xl px-4">
|
||||
<h1 className="text-5xl md:text-7xl font-bold mb-6 animate-fade-in-up">
|
||||
{slide.title}
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl mb-8 opacity-90 animate-fade-in-up-delay">
|
||||
{slide.subtitle}
|
||||
</p>
|
||||
<button className="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:shadow-2xl transition-all duration-300 transform hover:scale-105 animate-fade-in-up-delay-2">
|
||||
{slide.cta} <ChevronRight className="inline ml-2" size={20} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Slide Indicators */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-3">
|
||||
{heroSlides.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentSlide(index)}
|
||||
className={`w-3 h-3 rounded-full transition-all duration-300 ${
|
||||
index === currentSlide ? 'bg-white scale-125' : 'bg-white/50'
|
||||
}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Scroll Indicator */}
|
||||
<div className="absolute bottom-20 left-1/2 transform -translate-x-1/2 animate-bounce">
|
||||
<div className="w-1 h-16 bg-white/30 rounded-full">
|
||||
<div className="w-1 h-4 bg-white rounded-full animate-pulse"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Statistics Section */}
|
||||
<section className="py-20 bg-gradient-to-r from-blue-600 to-teal-600 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
||||
<div className="space-y-4">
|
||||
<div className="text-5xl font-bold">{animatedStats.students.toLocaleString()}+</div>
|
||||
<div className="text-xl opacity-90">{language === 'en' ? 'Students Worldwide' : 'طالب حول العالم'}</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="text-5xl font-bold">{animatedStats.programs}+</div>
|
||||
<div className="text-xl opacity-90">{language === 'en' ? 'Study Programs' : 'برنامج دراسي'}</div>
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
<div className="text-5xl font-bold">{animatedStats.satisfaction}%</div>
|
||||
<div className="text-xl opacity-90">{language === 'en' ? 'Student Satisfaction' : 'رضا الطلاب'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Achievements Banner */}
|
||||
<section className="py-16 bg-gradient-to-r from-gray-900 to-blue-900 text-white">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold mb-4">
|
||||
{language === 'en' ? 'Globally Recognized Excellence' : 'تميز معترف به عالمياً'}
|
||||
</h2>
|
||||
<p className="text-xl opacity-90">
|
||||
{language === 'en' ? 'Leading the world in sustainability and innovation' : 'رائدة عالمياً في الاستدامة والابتكار'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{achievements.map((achievement, index) => (
|
||||
<div key={index} className="bg-white/10 backdrop-blur-sm rounded-2xl p-8 text-center hover:bg-white/15 transition-all duration-300">
|
||||
<div className="flex justify-center mb-4 text-teal-400">
|
||||
{achievement.icon}
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-teal-400 mb-2">{achievement.rank}</div>
|
||||
<div className="text-xl font-semibold mb-2">{achievement.title}</div>
|
||||
<div className="text-sm opacity-75">{achievement.subtitle}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Study Areas */}
|
||||
<section id="study" 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-4">
|
||||
{language === 'en' ? 'Discover Your Pathway' : 'اكتشف مسارك'}
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
{language === 'en'
|
||||
? 'Choose from world-class programs designed to prepare you for the future'
|
||||
: 'اختر من بين البرامج عالمية المستوى المصممة لإعدادك للمستقبل'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{studyAreas.map((area, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="group bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden transform hover:-translate-y-2"
|
||||
>
|
||||
<div className={`h-2 bg-gradient-to-r ${area.color}`}></div>
|
||||
<div className="p-8">
|
||||
<div className={`inline-flex p-4 rounded-2xl bg-gradient-to-r ${area.color} text-white mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
||||
{area.icon}
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-gray-900 mb-4 group-hover:text-blue-600 transition-colors">
|
||||
{area.title}
|
||||
</h3>
|
||||
<p className="text-gray-600 mb-6">
|
||||
{area.description}
|
||||
</p>
|
||||
<button className="text-blue-600 font-semibold hover:text-blue-800 transition-colors flex items-center">
|
||||
{language === 'en' ? 'Learn More' : 'اعرف أكثر'}
|
||||
<ChevronRight size={16} className="ml-1 group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* AI Features Showcase */}
|
||||
<section className="py-20 bg-gradient-to-br from-blue-900 via-purple-900 to-teal-900 text-white relative overflow-hidden">
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div className="absolute inset-0 bg-repeat" style={{
|
||||
backgroundImage: `url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
|
||||
backgroundSize: '60px 60px'
|
||||
}}></div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-4 relative z-10">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold mb-4">
|
||||
{language === 'en' ? 'AI-Powered Student Experience' : 'تجربة طلابية مدعومة بالذكاء الاصطناعي'}
|
||||
</h2>
|
||||
<p className="text-xl opacity-90 max-w-3xl mx-auto">
|
||||
{language === 'en'
|
||||
? 'Experience the future of education with our intelligent portal features'
|
||||
: 'اختبر مستقبل التعليم مع ميزات البوابة الذكية'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300">
|
||||
<MessageSquare size={40} className="text-teal-400 mb-4" />
|
||||
<h3 className="text-xl font-bold mb-3">
|
||||
{language === 'en' ? '24/7 AI Assistant' : 'مساعد ذكي 24/7'}
|
||||
</h3>
|
||||
<p className="text-sm opacity-90">
|
||||
{language === 'en'
|
||||
? 'Multilingual support in English and Arabic with smart FAQ responses'
|
||||
: 'دعم متعدد اللغات بالإنجليزية والعربية مع ردود ذكية'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300">
|
||||
<Shield size={40} className="text-blue-400 mb-4" />
|
||||
<h3 className="text-xl font-bold mb-3">
|
||||
{language === 'en' ? 'Smart Accessibility' : 'إمكانية وصول ذكية'}
|
||||
</h3>
|
||||
<p className="text-sm opacity-90">
|
||||
{language === 'en'
|
||||
? 'AI-powered alt-text generation and WCAG compliance checking'
|
||||
: 'توليد نص بديل بالذكاء الاصطناعي وفحص التوافق مع معايير الوصول'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300">
|
||||
<Heart size={40} className="text-pink-400 mb-4" />
|
||||
<h3 className="text-xl font-bold mb-3">
|
||||
{language === 'en' ? 'Mental Health Support' : 'دعم الصحة النفسية'}
|
||||
</h3>
|
||||
<p className="text-sm opacity-90">
|
||||
{language === 'en'
|
||||
? 'AI-powered mental health triage with crisis detection and escalation'
|
||||
: 'فرز الصحة النفسية بالذكاء الاصطناعي مع كشف الأزمات'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 hover:bg-white/20 transition-all duration-300">
|
||||
<BarChart3 size={40} className="text-green-400 mb-4" />
|
||||
<h3 className="text-xl font-bold mb-3">
|
||||
{language === 'en' ? 'Smart Analytics' : 'تحليلات ذكية'}
|
||||
</h3>
|
||||
<p className="text-sm opacity-90">
|
||||
{language === 'en'
|
||||
? 'Real-time dashboards with predictive insights and personalized recommendations'
|
||||
: 'لوحات معلومات فورية مع رؤى تنبؤية وتوصيات شخصية'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Campus Locations */}
|
||||
<section id="campus" 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-4">
|
||||
{language === 'en' ? 'Our Campuses' : 'حرمنا الجامعي'}
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
{language === 'en'
|
||||
? 'Study at world-class facilities across Australia'
|
||||
: 'ادرس في مرافق عالمية المستوى عبر أستراليا'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{[
|
||||
{ name: 'Hobart', location: 'Tasmania, Australia', image: 'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=400&h=300&fit=crop' },
|
||||
{ name: 'Launceston', location: 'Tasmania, Australia', image: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=400&h=300&fit=crop' },
|
||||
{ name: 'Burnie', location: 'Tasmania, Australia', image: 'https://images.unsplash.com/photo-1541339907198-e08756dedf3f?w=400&h=300&fit=crop' },
|
||||
{ name: 'Sydney', location: 'NSW, Australia', image: 'https://images.unsplash.com/photo-1506973035872-a4ec16b8e8d9?w=400&h=300&fit=crop' }
|
||||
].map((campus, index) => (
|
||||
<div key={index} className="group relative overflow-hidden rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500">
|
||||
<Image
|
||||
src={campus.image}
|
||||
alt={campus.name}
|
||||
width={400}
|
||||
height={300}
|
||||
className="w-full h-64 object-cover group-hover:scale-110 transition-transform duration-500"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent">
|
||||
<div className="absolute bottom-6 left-6 text-white">
|
||||
<h3 className="text-2xl font-bold mb-2">{campus.name}</h3>
|
||||
<p className="flex items-center opacity-90">
|
||||
<MapPin size={16} className="mr-1" />
|
||||
{campus.location}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="absolute top-4 right-4 bg-white/20 backdrop-blur-sm rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
||||
<ExternalLink size={16} className="text-white" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="bg-gray-900 text-white py-16">
|
||||
<div className="container mx-auto px-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-12">
|
||||
<div className="col-span-1 md:col-span-2">
|
||||
<div className="flex items-center space-x-4 mb-6">
|
||||
<div className="bg-gradient-to-br from-blue-600 to-teal-600 p-2 rounded-xl">
|
||||
<GraduationCap size={32} className="text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-2xl font-bold">University of Tasmania</h3>
|
||||
<p className="text-gray-400">{language === 'en' ? '#1 in Climate Action Globally' : '#1 عالمياً في العمل المناخي'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-gray-400 mb-6 max-w-md">
|
||||
{language === 'en'
|
||||
? 'Leading the world in sustainability research and education. Join us in creating a better future for all.'
|
||||
: 'رائدة عالمياً في أبحاث وتعليم الاستدامة. انضم إلينا في خلق مستقبل أفضل للجميع.'
|
||||
}
|
||||
</p>
|
||||
<div className="flex space-x-4">
|
||||
<div className="bg-blue-600 p-2 rounded-lg">
|
||||
<Award size={20} />
|
||||
</div>
|
||||
<div className="bg-teal-600 p-2 rounded-lg">
|
||||
<Leaf size={20} />
|
||||
</div>
|
||||
<div className="bg-green-600 p-2 rounded-lg">
|
||||
<Globe size={20} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-6">{language === 'en' ? 'Quick Links' : 'روابط سريعة'}</h4>
|
||||
<ul className="space-y-3">
|
||||
<li><Link href="#study" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Study Areas' : 'مجالات الدراسة'}</Link></li>
|
||||
<li><Link href="#research" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Research' : 'البحث'}</Link></li>
|
||||
<li><Link href="#campus" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Campus Life' : 'الحياة الجامعية'}</Link></li>
|
||||
<li><Link href="/privacy" className="text-gray-400 hover:text-white transition-colors">{language === 'en' ? 'Privacy Policy' : 'سياسة الخصوصية'}</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 className="text-lg font-semibold mb-6">{language === 'en' ? 'Contact Us' : 'اتصل بنا'}</h4>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center space-x-3">
|
||||
<Phone size={16} className="text-teal-400" />
|
||||
<span className="text-gray-400">+61 3 6226 6200</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<Mail size={16} className="text-teal-400" />
|
||||
<span className="text-gray-400">info@utas.edu.au</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-3">
|
||||
<MapIcon size={16} className="text-teal-400" />
|
||||
<span className="text-gray-400">Hobart, Tasmania</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-800 mt-12 pt-8 text-center">
|
||||
<p className="text-gray-400">
|
||||
{language === 'en'
|
||||
? '© 2025 University of Tasmania. All rights reserved. CRICOS Provider Code 00586B'
|
||||
: '© 2025 جامعة تاسمانيا. جميع الحقوق محفوظة. رمز مقدم CRICOS 00586B'
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
{/* Login Modal */}
|
||||
{showLogin && (
|
||||
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||
<div className="bg-white rounded-2xl shadow-2xl max-w-md w-full p-8 transform transition-all duration-300 scale-100">
|
||||
<div className="text-center mb-8">
|
||||
<div className="bg-gradient-to-br from-blue-600 to-teal-600 p-3 rounded-2xl inline-block mb-4">
|
||||
<LogIn size={32} className="text-white" />
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-gray-900 mb-2">
|
||||
{language === 'en' ? 'Welcome Back' : 'مرحباً بعودتك'}
|
||||
</h2>
|
||||
<p className="text-gray-600">
|
||||
{language === 'en' ? 'Sign in to access your portal' : 'سجل الدخول للوصول إلى بوابتك'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{language === 'en' ? 'Email Address' : 'عنوان البريد الإلكتروني'}
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
value={loginForm.email}
|
||||
onChange={(e) => setLoginForm({...loginForm, email: e.target.value})}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
placeholder={language === 'en' ? 'Enter your email' : 'أدخل بريدك الإلكتروني'}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
{language === 'en' ? 'Password' : 'كلمة المرور'}
|
||||
</label>
|
||||
<input
|
||||
type="password"
|
||||
value={loginForm.password}
|
||||
onChange={(e) => setLoginForm({...loginForm, password: e.target.value})}
|
||||
className="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200"
|
||||
placeholder={language === 'en' ? 'Enter your password' : 'أدخل كلمة المرور'}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
||||
<p className="text-sm text-blue-800 mb-2 font-medium">
|
||||
{language === 'en' ? 'Demo Accounts:' : 'حسابات تجريبية:'}
|
||||
</p>
|
||||
<div className="text-xs text-blue-700 space-y-1">
|
||||
<div>Student: student@university.edu / password123</div>
|
||||
<div>Admin: admin@university.edu / admin123</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowLogin(false)}
|
||||
className="flex-1 px-6 py-3 border border-gray-300 text-gray-700 rounded-xl hover:bg-gray-50 transition-all duration-200 font-medium"
|
||||
>
|
||||
{language === 'en' ? 'Cancel' : 'إلغاء'}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex-1 bg-gradient-to-r from-blue-600 to-teal-600 text-white px-6 py-3 rounded-xl hover:shadow-lg transition-all duration-200 font-medium disabled:opacity-50"
|
||||
>
|
||||
{loading ? (language === 'en' ? 'Signing in...' : 'جارٍ تسجيل الدخول...') : (language === 'en' ? 'Sign In' : 'تسجيل الدخول')}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user