ShanmugaKrishnanSM/RIT-nexus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: reorder toolkit & navbar, update RAISE incubator & portal modules, fix faculty department filtering

Browse Source
This commit is contained in:
Amudieshwar A G
2026-08-18 12:27:27 +05:30
parent d3bd00e506
commit 02d8dea9a9
8 changed files with 479 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/pages/Events/Events.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useMemo } from 'react';
import { Link } from 'react-router-dom';
import { motion, AnimatePresence } from 'framer-motion';
import {
Users, Tag, X, Mail, Phone, UserCheck, GraduationCap, Info,
@@ -869,7 +870,8 @@ export default function Events() {
selectedClub.socialLinks?.instagram ||
selectedClub.socialLinks?.linkedin ||
selectedClub.socialLinks?.whatsapp ||
selectedClub.socialLinks?.youtube
selectedClub.socialLinks?.youtube ||
selectedClub.socialLinks?.website
) && (
<div className="mb-6 bg-orange-50/60 border border-orange-200/80 rounded-2xl p-4">
<div className="flex items-center justify-between mb-3">
@@ -881,6 +883,16 @@ export default function Events() {
</div>
<div className="grid grid-cols-2 gap-2.5">
{selectedClub.socialLinks?.website && (
<Link
to={selectedClub.socialLinks.website}
onClick={() => setSelectedClub(null)}
className="flex items-center gap-2 p-2.5 rounded-xl bg-gradient-to-r from-[#EC4899] via-[#F43F5E] to-[#E11D48] text-white hover:from-pink-600 hover:to-rose-600 transition-all text-xs font-bold shadow-xs col-span-2 justify-center"
>
<Rocket className="w-4 h-4 text-white shrink-0 animate-pulse" />
<span>Launch RAISE Incubator Portal →</span>
</Link>
)}
{selectedClub.socialLinks?.instagram && (
<a

48
src/pages/Faculty/Faculty.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useMemo, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Search, Users, Filter, ArrowUpDown, BookOpen, ChevronRight, AlertTriangle, Sparkles, X } from 'lucide-react';
import { Search, Users, Filter, ArrowUpDown, BookOpen, ChevronRight, Sparkles, X } from 'lucide-react';
import FacultyCard from '@/components/FacultyCard/FacultyCard';
import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
import { FACULTY_DATA, DEPARTMENTS } from '@/constants';
@@ -8,17 +8,17 @@ import { Link, useSearchParams } from 'react-router-dom';
import { getStoredImsSession } from '@/services/imsService';
const DEPT_MAP: Record<string, { abrv: string; full: string }> = {
'Computer Science & Engineering': { abrv: 'CSE', full: 'Computer Science and Engineering' },
'Computer Science & Business Systems': { abrv: 'CSBS', full: 'Computer Science and Business Systems' },
'Artificial Intelligence & Machine Learning': { abrv: 'AIML', full: 'Artificial Intelligence and Machine Learning' },
'Electronics & Communication Engineering': { abrv: 'ECE', full: 'Electronics and Communication Engineering' },
'Computer Science & Engineering': { abrv: 'CSE', full: 'Computer Science & Engineering' },
'Computer Science & Business Systems': { abrv: 'CSBS', full: 'Computer Science & Business Systems' },
'Artificial Intelligence & Machine Learning': { abrv: 'AIML', full: 'Artificial Intelligence & Machine Learning' },
'Electronics & Communication Engineering': { abrv: 'ECE', full: 'Electronics & Communication Engineering' },
'Mechanical Engineering': { abrv: 'MECH', full: 'Mechanical Engineering' },
'Civil Engineering': { abrv: 'CIVIL', full: 'Civil Engineering' },
'Artificial Intelligence & Data Science': { abrv: 'AI&DS', full: 'Artificial Intelligence and Data Science' },
'Electrical & Electronics Engineering': { abrv: 'EEE', full: 'Electrical and Electronics Engineering' },
'Artificial Intelligence & Data Science': { abrv: 'AI & DS', full: 'Artificial Intelligence & Data Science' },
'Electrical & Electronics Engineering': { abrv: 'EEE', full: 'Electrical & Electronics Engineering' },
'Communication and Computer Engineering': { abrv: 'CCE', full: 'Communication and Computer Engineering' },
'Electronics Engineering VLSI (Design and Technology)': { abrv: 'EE VLSI (D&T)', full: 'Electronics Engineering (VLSI Design and Technology)' },
'Humanities & Sciences': { abrv: 'H&S', full: 'Humanities and Sciences' },
'Electronics Engineering VLSI (Design and Technology)': { abrv: 'EE VLSI (D&T)', full: 'Electronics Engineering VLSI (Design and Technology)' },
'Humanities & Sciences': { abrv: 'H&S', full: 'Humanities & Sciences' },
'M.Tech (Data Science)': { abrv: 'M.TECH-DS', full: 'M.Tech (Data Science)' },
'Mathematics': { abrv: 'MATHS', full: 'Mathematics' },
'M.E. (VLSI Design)': { abrv: 'MEVLSI', full: 'M.E. (VLSI Design)' },
@@ -109,8 +109,13 @@ export default function Faculty() {
}, [filteredAndSortedFaculty]);
const departmentOrder = useMemo(() => {
return DEPARTMENTS.filter(d => d !== 'All Departments');
}, []);
const presentDepts = Object.keys(groupedFaculty);
const sorted = DEPARTMENTS.filter(d => d !== 'All Departments');
presentDepts.forEach(d => {
if (!sorted.includes(d)) sorted.push(d);
});
return sorted;
}, [groupedFaculty]);
return (
<div className="min-h-screen relative overflow-hidden bg-[#F8FAFC]">
@@ -173,27 +178,6 @@ export default function Faculty() {
</motion.div>
)}
{/* Under Development Banner */}
<motion.div
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
className="bg-amber-50 border border-amber-200 rounded-2xl p-4 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 text-amber-900 shadow-2xs"
>
<div className="flex items-center gap-3">
<div className="w-9 h-9 rounded-xl bg-amber-500/10 border border-amber-500/20 flex items-center justify-center shrink-0">
<AlertTriangle className="w-5 h-5 text-amber-600" />
</div>
<div>
<div className="text-xs font-bold uppercase tracking-wider text-amber-700" style={{ fontFamily: 'Inter, sans-serif' }}>Under Development</div>
<div className="text-xs font-medium text-amber-900" style={{ fontFamily: 'Inter, sans-serif' }}>
Currently displaying sample mock faculty profiles. Official RIT faculty directory integration is in progress.
</div>
</div>
</div>
<span className="px-3 py-1 rounded-full bg-amber-100 border border-amber-300 text-[11px] font-bold text-amber-800 shrink-0">
Mock Data Active
</span>
</motion.div>
{/* Faculty Hero Section */}
<div className="grid grid-cols-1 lg:grid-cols-12 gap-6 items-stretch">

379
src/pages/Notes/Notes.tsx
View File

@@ -1,10 +1,12 @@
import { useState, useRef, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
import { motion } from 'framer-motion';
import { Search, Download, Filter, BookOpen, FileText, ScrollText, BookMarked, ChevronRight, ArrowLeft, ExternalLink, Code, Globe, GitBranch, Cloud, Palette, Shield, DollarSign, BarChart3, Users, Megaphone, TrendingUp, UserCheck, ClipboardList, ShoppingCart, Cpu, Activity, LayoutGrid, Layers, Zap, Settings, Gauge, Radio, Wifi, Bot, Sun, Wrench, Binary, BatteryCharging, CircuitBoard, ShieldCheck, BrainCircuit, FlaskConical, Lock, Terminal, Dna, Microscope, Sparkles, Smartphone, Monitor, Server, CheckCircle2, Database, Briefcase, AlertTriangle, RefreshCw } from 'lucide-react';
import { Search, Download, Filter, BookOpen, FileText, ScrollText, BookMarked, ChevronRight, ArrowLeft, ExternalLink, Code, Globe, GitBranch, Cloud, Palette, Shield, DollarSign, BarChart3, Users, Megaphone, TrendingUp, UserCheck, ClipboardList, ShoppingCart, Cpu, Activity, LayoutGrid, Layers, Zap, Settings, Gauge, Radio, Wifi, Bot, Sun, Wrench, Binary, BatteryCharging, CircuitBoard, ShieldCheck, BrainCircuit, FlaskConical, Lock, Terminal, Dna, Microscope, Sparkles, Smartphone, Monitor, Server, CheckCircle2, Database, Briefcase, AlertTriangle, RefreshCw, Ticket, Award, QrCode } from 'lucide-react';
import SectionTitle from '@/components/SectionTitle/SectionTitle';
const MOODLE_URL = 'http://182.74.17.142/moodle/login/index.php';
const GATE_PASS_URL = 'http://182.74.17.142/gatepass/login';
const PROFICIENCY_URL = 'http://182.74.17.142/proficiency/login';
import { getBackendUrl } from '@/lib/utils';
import { StaggerContainer, StaggerItem } from '@/components/AnimatedContainer/AnimatedContainer';
import { TOOLKIT_ITEMS, DEPARTMENTS } from '@/constants';
@@ -1329,6 +1331,7 @@ export default function Notes() {
const [selectedCategory, setSelectedCategory] = useState<number | null>(null);
const [selectedLanguage, setSelectedLanguage] = useState<number | null>(null);
const [selectedTool, setSelectedTool] = useState<{ name: string; desc: string; url: string; category: string; bg: string; color: string } | null>(null);
const [activePortalTab, setActivePortalTab] = useState<'moodle' | 'gatepass' | 'proficiency'>('moodle');
const [notes, setNotes] = useState<any[]>([]);
@@ -1363,6 +1366,10 @@ export default function Notes() {
}, []);
useEffect(() => {
const portalParam = searchParams.get('portal');
if (portalParam === 'gatepass' || portalParam === 'proficiency' || portalParam === 'moodle') {
setActivePortalTab(portalParam as any);
}
if (searchParams.get('section') === 'toolkit') {
setTimeout(() => {
toolkitRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
@@ -1919,114 +1926,304 @@ export default function Notes() {
) : (
<div>
<div className="mb-12">
{/* Moodle Academic Portal Hero Hub */}
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
className="bg-white rounded-3xl border border-[#E5E7EB] p-8 md:p-10 shadow-sm relative overflow-hidden mb-8"
style={{ boxShadow: '0 4px 25px -5px rgba(0,0,0,0.05)' }}
>
{/* Subtle Decorative Background Glow */}
<div className="absolute -right-20 -top-20 w-80 h-80 bg-orange-500/5 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -left-20 -bottom-20 w-80 h-80 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
<div className="relative z-10 max-w-3xl mx-auto text-center">
{/* Header Badge */}
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-xs font-bold text-[#F97316] mb-6">
<BookOpen className="w-4 h-4 text-[#F97316]" />
<span>Official RIT Learning Management System</span>
</div>
{/* Main Heading */}
<h2 className="text-3xl sm:text-4xl font-extrabold text-[#1E293B] mb-4 leading-tight" style={{ fontFamily: 'Playfair Display, serif' }}>
Access Academic Notes & Study Materials on{' '}
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
Moodle
</span>
</h2>
{/* 1. MOODLE LMS CARD */}
{activePortalTab === 'moodle' && (
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
className="bg-white rounded-3xl border border-[#E5E7EB] p-8 md:p-10 shadow-sm relative overflow-hidden mb-8"
style={{ boxShadow: '0 4px 25px -5px rgba(0,0,0,0.05)' }}
>
<div className="absolute -right-20 -top-20 w-80 h-80 bg-orange-500/5 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -left-20 -bottom-20 w-80 h-80 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
<p className="text-base text-[#64748B] mb-8 leading-relaxed max-w-2xl mx-auto" style={{ fontFamily: 'Inter, sans-serif' }}>
All official semester notes, previous year question papers (PYQs), syllabus data, and lab manuals are hosted directly on the official Rajalakshmi Institute of Technology Moodle server.
</p>
{/* Primary Launch Action Buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
<a
href={MOODLE_URL}
target="_blank"
rel="noopener noreferrer"
className="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 rounded-2xl text-base font-bold text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all cursor-pointer"
style={{
fontFamily: 'Poppins, sans-serif',
background: 'linear-gradient(135deg, #F97316, #FB923C)',
}}
>
<ExternalLink className="w-5 h-5" />
Launch Official RIT Moodle Portal
</a>
<button
onClick={() => {
navigator.clipboard.writeText(MOODLE_URL);
alert('Moodle URL copied to clipboard!');
}}
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-4 rounded-2xl border border-[#E5E7EB] hover:border-[#F97316] bg-[#F8FAFC] hover:bg-white text-sm font-semibold text-[#475569] hover:text-[#F97316] transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<Globe className="w-4 h-4 text-[#64748B]" />
Copy Moodle Direct URL
</button>
</div>
{/* Feature Highlights Grid */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left border-t border-[#F1F5F9] pt-8">
<div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-600">
<ShieldCheck className="w-4 h-4" />
<div className="relative z-10 max-w-3xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-xs font-bold text-[#F97316] mb-6">
<BookOpen className="w-4 h-4 text-[#F97316]" />
<span>Official RIT Learning Management System</span>
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
100% Direct & Secure
<h2 className="text-3xl sm:text-4xl font-extrabold text-[#1E293B] mb-4 leading-tight" style={{ fontFamily: 'Playfair Display, serif' }}>
Access Academic Notes & Study Materials on{' '}
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
Moodle
</span>
</h2>
<p className="text-base text-[#64748B] mb-8 leading-relaxed max-w-2xl mx-auto" style={{ fontFamily: 'Inter, sans-serif' }}>
All official semester notes, previous year question papers (PYQs), syllabus data, and lab manuals are hosted directly on the official Rajalakshmi Institute of Technology Moodle server.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
<a
href={MOODLE_URL}
target="_blank"
rel="noopener noreferrer"
className="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 rounded-2xl text-base font-bold text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all cursor-pointer"
style={{
fontFamily: 'Poppins, sans-serif',
background: 'linear-gradient(135deg, #F97316, #FB923C)',
}}
>
<ExternalLink className="w-5 h-5" />
Launch Official RIT Moodle Portal
</a>
<button
onClick={() => {
navigator.clipboard.writeText(MOODLE_URL);
alert('Moodle URL copied to clipboard!');
}}
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-4 rounded-2xl border border-[#E5E7EB] hover:border-[#F97316] bg-[#F8FAFC] hover:bg-white text-sm font-semibold text-[#475569] hover:text-[#F97316] transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<Globe className="w-4 h-4 text-[#64748B]" />
Copy Moodle Direct URL
</button>
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Authenticates directly on official college server <code className="bg-slate-200/80 px-1 py-0.5 rounded text-[10px]">182.74.17.142</code>.
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left border-t border-[#F1F5F9] pt-8">
<div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-600">
<ShieldCheck className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
100% Direct & Secure
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Authenticates directly on official college server <code className="bg-slate-200/80 px-1 py-0.5 rounded text-[10px]">182.74.17.142</code>.
</div>
</div>
<div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-600">
<FileText className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Official Semester Notes
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Complete 1st to 8th Semester course notes, PYQs, and assignments.
</div>
</div>
<div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-600">
<Lock className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Student Login
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Log in using your RIT Register Number and official Moodle password.
</div>
</div>
</div>
</div>
</motion.div>
)}
<div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center text-blue-600">
<FileText className="w-4 h-4" />
{/* 2. STUDENT GATE PASS CARD */}
{activePortalTab === 'gatepass' && (
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
className="bg-white rounded-3xl border border-[#E5E7EB] p-8 md:p-10 shadow-sm relative overflow-hidden mb-8"
style={{ boxShadow: '0 4px 25px -5px rgba(0,0,0,0.05)' }}
>
<div className="absolute -right-20 -top-20 w-80 h-80 bg-orange-500/5 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -left-20 -bottom-20 w-80 h-80 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
<div className="relative z-10 max-w-3xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-xs font-bold text-[#F97316] mb-6">
<Ticket className="w-4 h-4 text-[#F97316]" />
<span>Official RIT Campus Gate Pass Portal</span>
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Official Semester Notes
<h2 className="text-3xl sm:text-4xl font-extrabold text-[#1E293B] mb-4 leading-tight" style={{ fontFamily: 'Playfair Display, serif' }}>
Request & Manage Out-Passes on{' '}
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
Student Gate Pass
</span>
</h2>
<p className="text-base text-[#64748B] mb-8 leading-relaxed max-w-2xl mx-auto" style={{ fontFamily: 'Inter, sans-serif' }}>
Official digital campus out-pass system for day scholars and hostellers. Submit leave requests, track warden approvals, and present digital QR passes to campus security.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
<button
onClick={() => {
alert('Student Gate Pass Portal dummy link triggered! You can provide the live URL anytime to connect it.');
}}
className="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 rounded-2xl text-base font-bold text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all cursor-pointer"
style={{
fontFamily: 'Poppins, sans-serif',
background: 'linear-gradient(135deg, #F97316, #FB923C)',
}}
>
<ExternalLink className="w-5 h-5" />
Launch Student Gate Pass Portal
</button>
<button
onClick={() => {
navigator.clipboard.writeText(GATE_PASS_URL);
alert('Student Gate Pass URL copied to clipboard!');
}}
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-4 rounded-2xl border border-[#E5E7EB] hover:border-[#F97316] bg-[#F8FAFC] hover:bg-white text-sm font-semibold text-[#475569] hover:text-[#F97316] transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<Globe className="w-4 h-4 text-[#64748B]" />
Copy Gate Pass Direct URL
</button>
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Complete 1st to 8th Semester course notes, PYQs, and assignments.
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left border-t border-[#F1F5F9] pt-8">
<div className="p-4 rounded-2xl bg-emerald-50/50 border border-emerald-100 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-emerald-500/10 border border-emerald-500/20 flex items-center justify-center text-emerald-600">
<QrCode className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Digital QR Clearance
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Generate real-time encrypted QR code for security verification at campus gates.
</div>
</div>
<div className="p-4 rounded-2xl bg-emerald-50/50 border border-emerald-100 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-teal-500/10 border border-teal-500/20 flex items-center justify-center text-teal-600">
<CheckCircle2 className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Warden & Parent Approval
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Automated SMS and email notifications to wardens, mentors, and registered guardians.
</div>
</div>
<div className="p-4 rounded-2xl bg-emerald-50/50 border border-emerald-100 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-green-500/10 border border-green-500/20 flex items-center justify-center text-green-600">
<ShieldCheck className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Verified RIT Student ID
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Authenticates securely with official college Roll Number & registered portal password.
</div>
</div>
</div>
</div>
</motion.div>
)}
<div className="p-4 rounded-2xl bg-[#F8FAFC] border border-[#E5E7EB]/70 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-600">
<Lock className="w-4 h-4" />
{/* 3. STUDENT PROFICIENCY CARD */}
{activePortalTab === 'proficiency' && (
<motion.div
initial={{ opacity: 0, y: 16 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.4 }}
className="bg-white rounded-3xl border border-[#E5E7EB] p-8 md:p-10 shadow-sm relative overflow-hidden mb-8"
style={{ boxShadow: '0 4px 25px -5px rgba(0,0,0,0.05)' }}
>
<div className="absolute -right-20 -top-20 w-80 h-80 bg-orange-500/5 rounded-full blur-3xl pointer-events-none" />
<div className="absolute -left-20 -bottom-20 w-80 h-80 bg-amber-500/5 rounded-full blur-3xl pointer-events-none" />
<div className="relative z-10 max-w-3xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-orange-50 border border-orange-200 text-xs font-bold text-[#F97316] mb-6">
<Award className="w-4 h-4 text-[#F97316]" />
<span>Official RIT Skill Evaluation & Readiness System</span>
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Student Login
<h2 className="text-3xl sm:text-4xl font-extrabold text-[#1E293B] mb-4 leading-tight" style={{ fontFamily: 'Playfair Display, serif' }}>
Track Skill Milestones & Credentials on{' '}
<span style={{ background: 'linear-gradient(135deg, #F97316, #FB923C)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', backgroundClip: 'text' }}>
Student Proficiency
</span>
</h2>
<p className="text-base text-[#64748B] mb-8 leading-relaxed max-w-2xl mx-auto" style={{ fontFamily: 'Inter, sans-serif' }}>
Official RIT skill evaluation platform for tracking domain competencies, technical certifications, placement readiness scores, and verified proficiency badges.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-10">
<button
onClick={() => {
alert('Student Proficiency Portal dummy link triggered! You can provide the live URL anytime to connect it.');
}}
className="w-full sm:w-auto inline-flex items-center justify-center gap-3 px-8 py-4 rounded-2xl text-base font-bold text-white shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all cursor-pointer"
style={{
fontFamily: 'Poppins, sans-serif',
background: 'linear-gradient(135deg, #F97316, #FB923C)',
}}
>
<ExternalLink className="w-5 h-5" />
Launch Student Proficiency Portal
</button>
<button
onClick={() => {
navigator.clipboard.writeText(PROFICIENCY_URL);
alert('Student Proficiency URL copied to clipboard!');
}}
className="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-6 py-4 rounded-2xl border border-[#E5E7EB] hover:border-[#F97316] bg-[#F8FAFC] hover:bg-white text-sm font-semibold text-[#475569] hover:text-[#F97316] transition-all cursor-pointer"
style={{ fontFamily: 'Poppins, sans-serif' }}
>
<Globe className="w-4 h-4 text-[#64748B]" />
Copy Proficiency Direct URL
</button>
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Log in using your RIT Register Number and official Moodle password.
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-left border-t border-[#F1F5F9] pt-8">
<div className="p-4 rounded-2xl bg-purple-50/50 border border-purple-100 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-purple-500/10 border border-purple-500/20 flex items-center justify-center text-purple-600">
<TrendingUp className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Skill Radar & Domain Scores
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Visualize competency scores across programming, core engineering, and analytical reasoning.
</div>
</div>
<div className="p-4 rounded-2xl bg-purple-50/50 border border-purple-100 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-indigo-600">
<Sparkles className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Placement Readiness
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Live feedback on mock interview performances, coding assessments, and company cutoffs.
</div>
</div>
<div className="p-4 rounded-2xl bg-purple-50/50 border border-purple-100 flex flex-col gap-2">
<div className="w-8 h-8 rounded-xl bg-violet-500/10 border border-violet-500/20 flex items-center justify-center text-violet-600">
<Award className="w-4 h-4" />
</div>
<div className="text-xs font-bold text-[#1E293B]" style={{ fontFamily: 'Poppins, sans-serif' }}>
Verified Credentials
</div>
<div className="text-[11px] text-[#64748B]" style={{ fontFamily: 'Inter, sans-serif' }}>
Upload, verify, and generate shareable badges for NPTEL, Coursera & RIT certification credits.
</div>
</div>
</div>
</div>
</div>
{/* Technical Security Note */}
<div className="mt-6 text-[11px] text-[#94A3B8] leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
ℹ️ <span className="font-semibold text-[#64748B]">Security Note:</span> To protect student session privacy and prevent clickjacking attacks, RIT&apos;s Moodle server enforces opening the portal directly in a secure browser tab rather than inside third-party frames (<code className="bg-slate-100 px-1 py-0.5 rounded text-[10px]">X-Frame-Options: SAMEORIGIN</code>).
</div>
</div>
</motion.div>
</motion.div>
)}
</div>
</div>
</div>
)}
)}
</div>
</div>
);

61
src/pages/Toolkit/Toolkit.tsx
View File

@@ -1404,6 +1404,65 @@ export default function Toolkit() {
<SectionTitle tag="Useful Downloads" title="Student" highlight="Toolkit" align="left" />
<StaggerContainer className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-20">
{TOOLKIT_ITEMS.map((item) => {
if (item.title === 'GPA and internal calculator') {
return (
<StaggerItem key={item.id} className="col-span-1 md:col-span-2 flex">
<motion.div
onClick={() => setSelectedToolkit('gpa')}
whileHover={{ y: -4, boxShadow: '0 20px 40px -12px rgba(239,68,68,0.22)' }}
className="relative w-full p-7 md:p-8 bg-gradient-to-r from-[#FFF7ED] via-[#FEF2F2] to-[#FFF1F2] rounded-[26px] border-2 border-[#FECACA] hover:border-[#FCA5A5] cursor-pointer group transition-all shadow-md hover:shadow-xl overflow-hidden flex flex-col md:flex-row items-start md:items-center justify-between gap-6"
>
{/* Top Gradient Bar */}
<div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-[#FF6B00] via-[#EF4444] to-[#F97316]" />
<div className="flex items-start md:items-center gap-5 flex-1 min-w-0 z-10">
<div className="w-16 h-16 md:w-18 md:h-18 rounded-2xl bg-gradient-to-tr from-[#EF4444] via-[#F97316] to-[#FF6B00] text-white flex items-center justify-center shrink-0 font-bold shadow-lg shadow-rose-500/25 group-hover:scale-105 transition-transform">
<Calculator className="w-8 h-8 md:w-9 md:h-9" />
</div>
<div className="flex-1 min-w-0">
<div className="flex flex-wrap items-center gap-2.5 mb-1.5">
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-extrabold bg-gradient-to-r from-[#EF4444] to-[#F97316] text-white shadow-xs tracking-wide uppercase">
<Sparkles className="w-3.5 h-3.5 animate-pulse" /> POPULAR UTILITY
</span>
<span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-semibold bg-white/90 text-[#991B1B] border border-red-200 shadow-2xs">
RIT Regulations
</span>
</div>
<h3 className="text-xl md:text-2xl font-extrabold text-[#1E293B] group-hover:text-[#EF4444] transition-colors mb-1.5" style={{ fontFamily: 'Plus Jakarta Sans, sans-serif' }}>
GPA, CGPA & Internal Marks Calculator
</h3>
<p className="text-sm text-[#475569] leading-relaxed max-w-2xl" style={{ fontFamily: 'Inter, sans-serif' }}>
Calculate your semester GPA, overall CGPA, and internal assessment marks based on official department course regulations and grade points.
</p>
<div className="flex flex-wrap items-center gap-3 mt-3 text-xs font-medium text-[#64748B]">
<span className="flex items-center gap-1.5 text-rose-700 font-semibold bg-rose-50 px-2.5 py-1 rounded-lg border border-rose-200/80">
<CheckCircle2 className="w-3.5 h-3.5 text-rose-500" /> Semester GPA
</span>
<span className="flex items-center gap-1.5 text-orange-700 font-semibold bg-orange-50 px-2.5 py-1 rounded-lg border border-orange-200/80">
<CheckCircle2 className="w-3.5 h-3.5 text-orange-500" /> Cumulative CGPA
</span>
<span className="flex items-center gap-1.5 text-amber-700 font-semibold bg-amber-50 px-2.5 py-1 rounded-lg border border-amber-200/80">
<CheckCircle2 className="w-3.5 h-3.5 text-amber-500" /> Internal Score
</span>
</div>
</div>
</div>
<div className="flex items-center gap-2 z-10 self-end md:self-center shrink-0">
<button className="px-6 py-3 bg-gradient-to-r from-[#EF4444] via-[#F97316] to-[#FF6B00] hover:from-[#DC2626] hover:to-[#EA580C] text-white font-bold text-sm rounded-xl shadow-md group-hover:shadow-lg group-hover:scale-105 transition-all flex items-center gap-2">
Calculate Now
<ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
</button>
</div>
</motion.div>
</StaggerItem>
);
}
const iconConfig = TOOLKIT_ICONS[item.title] || { icon: Code, bg: '#FFF7ED', color: '#F97316' };
const IconComponent = iconConfig.icon;
return (
@@ -1422,8 +1481,6 @@ export default function Toolkit() {
setSelectedToolkit('ai');
} else if (item.title === 'Biotech tools') {
setSelectedToolkit('biotech');
} else if (item.title === 'GPA and internal calculator') {
setSelectedToolkit('gpa');
} else if (item.url && item.url !== '#') {
window.open(item.url, '_blank');
}