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.