Student Portal Login - Copy this React, Tailwind Component to your project
Prompt-for-UI/UX-Design-of-University-Student-Portal-Login-Page-with-Moroccan-Traditional-Touch:-Design-a-login-page-for-a-student-portal-of-a-university,-incorporating-Moroccan-traditional-elements-with-a-modern-and-clean-UI/UX-approach.-The-design-should-blend-the-heritage-of-Moroccan-culture-with-user-centric-functionality.-1.-General-Layout:-University-Name:-At-the-top,-display-the-university-name-in-Arabic-"كلية-العلوم-القانونية-والاقتصادية-والاجتماعية---أيت-ملول"-using-a-traditional-Arabic-calligraphy-style-(such-as-Diwani-or-Thuluth).-Student-Portal-Section:-Directly-below-the-university-name,-display-the-section-name-in-Arabic-"مصلحة-الشؤون-الطلابية"-in-a-slightly-smaller-size,-maintaining-the-same-traditional-Arabic-calligraphy.-The-layout-should-have-a-dynamic-gradient-background-transitioning-from-deep-blue-to-gold-(representing-Moroccan-colors),-creating-a-calm-and-elegant-vibe.-Incorporate-subtle-Moroccan-Zellige-tile-patterns-in-the-corners-or-as-a-border,-with-a-faded-transparent-effect-to-keep-the-focus-on-the-login-form.-2.-Input-Fields:-Fields-for-Email-and-Password:-Use-large,-clean,-rounded-input-fields-with-subtle-borders.-Text-inside-the-fields-should-be-clear-and-in-Arabic,-reflecting-labels-such-as-"البريد-الإلكتروني"-and-"كلمة-المرور".-Include-iconography-(e.g.,-a-lock-icon-for-the-password-field)-with-a-traditional-Moroccan-design-style,-maintaining-modern-usability.-When-the-user-interacts-with-the-fields-(hover-or-focus),-they-should-change-color-to-mint-green-or-blue,-with-a-soft-shadow-effect-to-highlight-the-action.-3.-Submit-Button-(Login):-The-login-button-should-be-prominently-displayed-with-rounded-corners-and-a-deep-golden-color-that-contrasts-nicely-with-the-background.-Upon-hover,-the-button-should-subtly-change-to-a-darker-golden-shade-with-a-gentle-rising-animation-to-emphasize-interactivity.-The-button-text-should-be-in-Arabic,-displaying-"دخول"-clearly-in-white.-4.-Additional-Elements:-Footer:-In-the-footer-area,-add-decorative-motifs-inspired-by-Moroccan-architecture-or-traditional-designs,-but-in-a-minimalistic-style-so-as-not-to-clutter-the-interface.-Icons:-Use-Moroccan-themed-small-icons,-like-traditional-lanterns-or-geometric-shapes,-subtly-placed-along-the-edges-or-as-a-small-watermark.-5.-Color-Palette-and-Textures:-Primary-colors:-Deep-blues,-gold,-terracotta,-mint-green,-and-beige-for-balance.-Use-warm-tones-such-as-earthy-reds-and-browns-mixed-with-gold-highlights-to-evoke-Moroccan-style.-Background-texture:-Use-a-faded-Zellige-tile-pattern-to-add-depth-while-keeping-the-focus-on-the-login-functionality.-6.-User-Experience-(UX)-Considerations:-Ensure-the-interface-is-clean-and-minimalistic,-without-too-much-clutter,-making-it-easy-for-users-to-focus-on-login-tasks.-The-form-should-have-a-clear-visual-hierarchy,-with-the-most-important-information-(email,-password)-at-the-top.-Interactive-feedback-should-be-visible-when-the-user-clicks-on-the-fields,-with-soft-animations-that-improve-the-overall-experience-without-being-distracting.-Responsive-Design:-Ensure-that-the-page-adapts-to-mobile-and-tablet-screens,-with-a-layout-that-adjusts-smoothly.-Error-Messages:-Use-soft-red-tones-or-golden-highlights-for-error-notifications-to-blend-with-the-design.-7.-Accessibility:-Make-sure-the-font-is-legible-and-has-good-contrast-against-the-background.-For-example,-use-white-or-light-colored-text-against-dark-backgrounds-to-ensure-readability.-Provide-enough-spacing-between-elements-to-make-the-interface-more-comfortable-for-interaction-on-both-desktop-and-mobile-devices.-Overall-Theme:-The-final-design-should-be-an-elegant-blend-of-modern-functionality-with-Moroccan-traditional-aesthetics,-ensuring-that-the-login-page-feels-both-welcoming-and-culturally-rooted-while-being-easy-to-navigate-and-interactive-for-students.
