Login Page - Copy this React, Tailwind Component to your project
Develop-an-immersive,-modern-dark-mode-login-page-for-a-university-portal.-The-design-should-focus-on-meticulously-chosen-colors,-cultural-relevance-with-Moroccan-Zellige-inspired-patterns,-and-interactive-3D-elements.-Ensure-that-the-button-color-stands-out-while-harmonizing-with-the-overall-palette.-Incorporate-additional-updates-for-enhanced-aesthetics-and-functionality.-1.-Updated-Button-Design-Button-Color:-Change-the-button-color-to-a-gradient-of-vibrant-ruby-red-(#e63946)-transitioning-into-deep-coral-orange-(#f3722c).-This-choice:-Creates-a-strong-visual-contrast-against-the-dark-mode-background.-Evokes-warmth-and-urgency,-encouraging-user-interaction.-Add-a-subtle-3D-beveled-effect-to-make-the-button-tactile,-with-a-soft-glow-border-in-amber.-Hover-Effect:-On-hover,-the-button-should-shift-the-gradient-to-a-brighter-ruby-red-(#ff4d6d)-with-a-pulsing-glow-effect.-Button-Text:-Text-remains-bold-white-(#ffffff)-for-clarity,-with-a-drop-shadow-for-depth.-2.-Layout-Enhancements-Left-Panel:-Login-Form-Header-Section:-University-Name-("كلية-العلوم-القانونية-والاقتصادية-والاجتماعية---أيت-ملول")-remains-styled-in-golden-gradient-text-(#d4af37-to-#f9c74f)-for-elegance.-Add-a-thin-decorative-line-below-the-university-name,-styled-as-a-golden-Moroccan-tile-motif-for-subtle-flair.-Below-the-student-affairs-name-("مصلحة-الشؤون-الطلابية"),-add-small-icons-(e.g.,-a-book-or-quill)-with-matching-color-accents.-Form-Input-Fields:-Background:-Slightly-translucent-charcoal-gray-(#2c2c2e)-with-rounded-corners.-Borders:-Glowing-teal-accent-(#00adb5)-when-focused,-fading-smoothly-when-inactive.-Placeholder-Text:-Styled-in-soft-white-(#f4f4f8)-for-readability.-Right-Panel:-Visual-Section-Graduation-Cap-Icon:-Update-the-cap-to-have-subtle-3D-texturing-with-highlights-that-shift-as-the-user-moves-the-cursor-over-the-icon.-Surround-it-with-a-faint-circular-glow-in-golden-amber,-reinforcing-academic-prestige.-Interactive-Cards:-Add-soft-gradient-shadows-to-the-cards-for-a-floating-effect.-Update-the-Moroccan-tile-background-within-each-card-to-be-slightly-embossed-for-added-texture.-Include-a-live-news-ticker-at-the-bottom-of-the-right-panel,-scrolling-updates-like-"Registration-Deadline-Approaching!".-3.-Enhanced-Colors-and-Background-Primary-Background:-Use-a-deep-midnight-gradient-(#101820-to-#212529)-to-give-depth-while-maintaining-a-modern-dark-mode-aesthetic.-Zellige-Pattern-Integration:-Emboss-a-Moroccan-tile-motif-faintly-in-the-background,-using-a-gradient-of-muted-gold-and-teal.-Add-a-dynamic-shimmer-effect-to-specific-tile-edges-when-the-cursor-hovers-nearby,-creating-a-subtle-interactive-experience.-Highlight-Colors:-Use-ruby-red-for-CTAs,-golden-amber-for-accents,-and-vibrant-teal-for-interactive-borders-to-maintain-visual-balance.-4.-Typography-Updates-Arabic-Fonts:-Upgrade-to-"Scheherazade-New",-offering-a-balance-of-elegance-and-readability-for-Arabic-text.-Welcome-Message-in-Amazigh:-Render-the-Amazigh-text-("ⴰⵎⵓⵣⵉⵖ-ⴰⴳⵯⵓⴷⵉⴼ")-in-a-soft-gradient-of-teal-to-amber,-with-a-slight-3D-embossing-for-emphasis.-5.-Additional-Updates-Footer-Section:-Add-a-thin,-illuminated-Zellige-border-at-the-bottom-of-the-page,-incorporating-a-rotating-gradient-of-amber-and-teal.-Include-navigation-links-for-"Contact-Support,"-"Privacy-Policy,"-and-"Help-Desk"-in-minimalist-text.-Interactive-Animations:-Introduce-a-soft-parallax-effect-to-the-Moroccan-tile-background,-giving-a-subtle-sense-of-movement.-Add-a-loading-spinner-with-a-glowing-Zellige-pattern-while-the-page-initializes.-User-Centric-Design-Enhancements-Ensure-the-design-is-fully-responsive-across-devices.-The-color-palette-emphasizes-visual-hierarchy,-making-interactive-elements-like-the-login-button-and-CTAs-stand-out-naturally.-Moroccan-cultural-elements-are-seamlessly-blended-into-the-design-for-identity-and-relevance.-This-refined-prompt-enhances-the-modernity,-cultural-integration,-and-functionality-of-the-student-login-page,-while-emphasizing-bold-and-harmonious-colors,-interactive-elements,-and-an-inviting-dark-mode-experience.
