Login Page - Copy this React, Tailwind Component to your project
Develop-a-next-generation-dark-mode-login-page-for-a-university-student-portal-with-a-Moroccan-inspired-aesthetic.-The-design-should-incorporate:-Existing-Text-Content:-Amazigh-greeting:-"ⴰⵎⵓⵣⵉⵖ-ⴰⴳⵯⵓⴷⵉⴼ".-University-name:-"كلية-العلوم-القانونية-والاقتصادية-والاجتماعية---أيت-ملول".-Section-name:-"مصلحة-الشؤون-الطلابية".-Company-Branding:-Prominently-feature-the-developer-name-TOP-SOLAY-in-a-visually-sophisticated-way.-Enhanced-Design-and-Features:-Introduce-cutting-edge-aesthetics,-new-features,-and-immersive-interactions-for-a-modern-experience.-1.-Layout-&-Branding-Header-Section:-Place-the-university-name-("كلية-العلوم-القانونية-والاقتصادية-والاجتماعية---أيت-ملول")-and-the-section-name-("مصلحة-الشؤون-الطلابية")-in-luxurious-gold-gradient-text,-positioned-at-the-top-center.-Add-"ⴰⵎⵓⵣⵉⵖ-ⴰⴳⵯⵓⴷⵉⴼ"-directly-below-in-a-glowing-teal-gradient-with-a-subtle-shadow-effect.-Include-the-TOP-SOLAY-logo-or-name-at-the-bottom-left-corner-of-the-page-with-a-modern-sans-serif-font,-styled-in-sleek-white-with-a-faint-glow.-Form-Panel:-The-login-form-should-be-centered,-slightly-elevated-with-a-3D-glass-effect:-Input-Fields:-Rounded-fields-in-a-semi-transparent-smoky-black-(#1c1c1e)-with-glowing-teal-borders-when-active.-Placeholder-text-in-soft-white,-dynamically-transitioning-to-bold-teal-when-the-field-is-selected.-Login-Button:-Update-to-a-dynamic-gradient-button-transitioning-between-royal-blue-(#0077be)-and-golden-amber-(#f8b400).-Add-a-hover-animation-where-the-button-slightly-enlarges,-and-the-gradient-shifts-dynamically.-Right-Panel:-Visual-Features:-Add-Moroccan-Zellige-artwork-faintly-embossed-in-the-background,-with-animations-triggered-on-hover,-such-as-soft-glowing-tile-patterns.-Introduce-a-3D-illustration-of-a-graduation-cap-with-interactive-movement:-Users-hovering-over-the-cap-can-see-it-spin-slowly-or-light-up-with-gold-highlights.-2.-Enhanced-Colors-Primary-Colors:-Deep-Midnight-Blue-(#1b1f3a):-For-the-dark-background,-offering-a-sophisticated-and-calming-effect.-Vibrant-Teal-(#00adb5):-Used-in-borders,-glows,-and-interactivity-for-modernity.-Gold-Gradient-(#f5b50b-to-#ffd700):-For-headings-and-decorative-highlights,-symbolizing-prestige-and-excellence.-Secondary-Colors:-Slate-Gray-(#2c2c34):-For-neutral-sections-to-balance-contrast.-Soft-White-(#f4f4f8):-For-text-and-placeholder-content.-Royal-Blue-(#0077be):-To-emphasize-action-oriented-elements-like-buttons.-3.-Typography-Arabic-Fonts:-Title-and-header-fonts:-"Scheherazade-New"-for-elegance.-Secondary-text:-"Amiri",-balancing-readability-with-sophistication.-Amazigh-Greeting:-Render-in-a-bold-yet-soft-gradient-font-for-cultural-emphasis.-TOP-SOLAY-Branding:-Use-a-modern-font-like-"Poppins"-for-a-clean,-professional-feel.-4.-New-Features-Multi-Step-Login-Assistance:-Add-a-step-by-step-login-guide-at-the-top-right,-with-icons:-Enter-Email-(graduation-cap-icon).-Enter-Password-(lock-icon).-Click-Login-(arrow-icon).-Each-step-highlights-dynamically-as-users-progress.-Language-Toggle:-Add-a-toggle-switch-for-Arabic-and-English-in-the-top-right-corner.-Visual-Enhancements:-Loading-Animation:-When-submitting-the-form,-display-a-spinning-Zellige-motif-in-a-golden-glow.-Interactive-Tiles:-Moroccan-Zellige-tiles-in-the-background-animate-slightly-as-users-move-their-cursor,-creating-a-dynamic-and-welcoming-feel.-Social-Login-Options:-Introduce-Google-and-Facebook-login-buttons-below-the-main-form,-styled-to-match-the-dark-theme.-Security-Badge:-Add-a-"Secured-by-TOP-SOLAY"-badge-below-the-login-form,-featuring-a-lock-icon-and-subtle-glow-animation.-5.-Footer-Section-Add-a-footer-bar-with:-Quick-Links:-"FAQ,"-"Support,"-"Terms-of-Service."-A-TOP-SOLAY-tagline:-"Innovative-Solutions-for-Modern-Education,"-in-a-soft-glow-font.-User-Experience-Enhancements-Responsiveness:-Ensure-all-features-scale-perfectly-for-mobile-and-tablet-screens,-adapting-the-layout-without-losing-interactivity.-Performance-Optimization:-Use-lightweight-animations-to-ensure-the-interface-loads-quickly.
