import React, { useState, useEffect } from 'react'; import { UserCheck, Mail, BookOpen, Laptop, Wifi, CreditCard, HelpCircle, Globe, ShieldCheck, ArrowRight, ExternalLink, MessageSquare, Library, Key, Info, CheckCircle2, Lock, Smartphone, ShieldAlert, ClipboardCheck, UserPlus, ChevronRight, ChevronLeft, FileText, MessageCircle } from 'lucide-react'; const App = () => { const [selectedProduct, setSelectedProduct] = useState(null); const [activeStep, setActiveStep] = useState(0); const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { setIsLoaded(true); }, []); const products = [ { id: 'ecomm', title: 'e-Community', icon: , color: 'bg-blue-500', description: 'The central student portal for administrative tasks.', features: ['Course Registration', 'Examination Results', 'Financial Statements', 'Hostel Applications'], link: 'https://ecomm.umpsa.edu.my' }, { id: 'kalam', title: 'KALAM', icon: , color: 'bg-orange-500', description: 'UMPSA Learning Management System (LMS) for academic content.', features: ['Lecture Notes', 'Assignment Submission', 'Online Quizzes', 'Class Announcements'], link: 'https://kalam.umpsa.edu.my' }, { id: 'm365', title: 'Microsoft 365', icon: , color: 'bg-red-500', description: 'Professional productivity suite provided for free to all students.', features: ['Outlook Email', '1TB OneDrive Storage', 'Microsoft Teams', 'Word/Excel/PowerPoint'], link: 'https://portal.office.com' }, { id: 'eduroam', title: 'Eduroam WiFi', icon: , color: 'bg-teal-500', description: 'World-wide roaming access service for the research & education community.', features: ['Campus-wide WiFi', 'Global Connectivity', 'Secure Login', 'Free Access'], link: '#' }, { id: 'digitalid', title: 'Digital ID / ADAB', icon: , color: 'bg-indigo-600', description: 'Your mobile identity and attendance tracking system.', features: ['QR Attendance', 'E-Wallet Integration', 'Student Verification', 'Event Registration'], link: '#' }, { id: 'library', title: 'e-Resources', icon: , color: 'bg-purple-500', description: 'Access to thousands of journals, books, and research papers online.', features: ['Scopus/ScienceDirect', 'IEEE Xplore', 'Digital Thesis', 'Online Catalog'], link: 'https://library.umpsa.edu.my' } ]; // SVG Illustrations for Steps const StepIllustration = ({ step }) => { switch(step) { case 0: // Credentials (Offer Letter) return ( OFFER LETTER ID: KA24XXX ); case 1: // Portal (e-Community Browser) return ( {/* Browser Frame */} {/* Page Content */} e-Community {/* Form Fields Mockup */} {/* First Time Login Button */} First Time Login (Student) {/* Cursor */} ); case 2: // Password return ( ******** ); case 3: // MFA return ( OTP Sent ); case 4: // Success return ( SUCCESS! ); default: return null; } }; const activationSteps = [ { title: "Find Credentials", icon: , detail: "Refer to your offer letter or registration email. You will find your Student ID (e.g., KA24001)." }, { title: "First Time Login", icon: , detail: (

) }, { title: "Set Secure Password", icon: , detail: "Click the link in your email to set a new password. It must contain at least 12 characters, including Uppercase, Lowercase, Numbers, and Symbols." }, { title: "Register for MFA", icon: , detail: "Enable Multi-Factor Authentication (MFA). We recommend using the Microsoft Authenticator app for the fastest and most secure experience." }, { title: "Access Granted", icon: , detail: "Log in to e-Community. Success means your UMPSA-ID is now active for all services including WiFi (Eduroam), Office 365, and KALAM." } ]; const handleNext = () => setActiveStep((prev) => (prev < activationSteps.length - 1 ? prev + 1 : prev)); const handleBack = () => setActiveStep((prev) => (prev > 0 ? prev - 1 : prev)); return (

); }; export default App;