Login Page - Copy this React, Tailwind Component to your project

Design a visually captivating dark mode login page for a university student portal, incorporating 3D design elements and subtle Moroccan traditional touches. The design should use an elegant Arabic font, convey a welcoming feel with an Amazigh greeting, and create a seamless, user-friendly experience. 1. General Layout: University Name: Display the university name at the top in Arabic, "كلية العلوم القانونية والاقتصادية والاجتماعية - أيت ملول". Use a beautiful and playful Arabic font like "Mothana" or "Cairo", which gives a light, modern, and approachable feel while still maintaining elegance. Student Portal Section: Just below the university name, display the section name "مصلحة الشؤون الطلابية" in a slightly smaller but still playful Arabic font for consistency. Welcome Message in Amazigh: Add the text "ⴰⵎⵓⵣⵉⵖ ⴰⴳⵯⵓⴷⵉⴼ" (meaning "Welcome" in Amazigh) beneath the section name, in a stylized, welcoming font that contrasts slightly with the Arabic script, ensuring it's legible but unique. Background: The background should have a dark gradient that transitions from midnight blue to deep purple or charcoal black, giving it a rich and calming feel. The Zellige pattern should be integrated into the background with a subtle 3D embossed effect that only becomes visible as the user interacts with the page, adding depth and texture without overwhelming the interface. 2. Input Fields: Fields for Email and Password: Use rounded input fields with a sleek 3D effect, having a slightly glowing teal border when hovered or focused. The fields should have a dark grey background and soft white text, with a subtle 3D shadow effect inside the field to make it appear lifted. The text should be in Arabic, displaying "البريد الإلكتروني" and "كلمة المرور", with a playful and modern Arabic font that complements the overall design. Focus Effect: On focus, the fields should glow softly in neon teal with a smooth 3D transition effect, making them feel interactive and modern. 3. Submit Button (Login): The login button should have a matte dark color, such as deep charcoal grey with a 3D, beveled effect that gives the button a raised, interactive appearance. On hover, the button should transition to a neon teal or gold with a smooth 3D glowing effect to emphasize interactivity. The button text, "دخول", should be in bold white or light grey, contrasting well with the dark background. 4. Additional Elements: Footer: The footer area should include subtle geometric Moroccan designs in light 3D textures, such as traditional Arabesque patterns or Moroccan lanterns. These should be integrated seamlessly into the background with low opacity, creating a sense of depth without cluttering the design. Icons: Use interactive, 3D icons that reflect Moroccan culture, such as traditional lanterns or geometric Moroccan patterns, placed subtly within the design. These icons should glow in neon teal on hover for added interactivity. 5. Color Palette and Textures: Primary Colors: Use a dark mode palette with shades of midnight blue, deep purple, charcoal black, neon teal, and gold to provide a sleek, modern aesthetic with a touch of warmth. Text and Highlights: Use neon teal for interactive elements (like buttons and input fields), with neon gold accents on hover or for emphasis. Background Texture: The Zellige tile pattern should be subtly integrated into the background, providing a 3D embossed effect. This should only be visible as the user interacts with the page, maintaining a clean look while adding depth. 6. User Experience (UX) Considerations: The layout should be minimalistic yet elegant, ensuring that the most important elements (login fields and button) are easy to find and interact with. Smooth, 3D animations should be used for all interactive elements (e.g., glowing borders, pulsing buttons), making the page feel dynamic without being overwhelming. Hover Animations: Ensure all interactive elements, like the login button and input fields, have smooth glowing or pulsing effects to guide the user’s attention. Responsive Design: Ensure the page adapts seamlessly to mobile, tablet, and desktop screens, maintaining the 3D depth and vibrant colors while optimizing for smaller screen sizes. 7. Accessibility: Ensure that all text is highly readable with good contrast, especially in dark mode. The neon accents will make important information stand out, while maintaining legibility. Use responsive font sizes to ensure readability on all devices and ensure the interactive elements (buttons and input fields) are large enough for easy touch interaction on mobile devices. For error messages, use a soft red or orange glow for visibility, integrated with the dark theme to remain in harmony with the rest of the design. Overall Theme: The design should combine futuristic dark mode aesthetics with 3D interactive elements, while integrating traditional Moroccan styles in a way that feels both modern and culturally rich. The addition of an Amazigh greeting enhances the welcoming feel, while the sleek font choices and 3D effects create an engaging, dynamic experience for the users.