🚀 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
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user