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

Design an immersive login page for a university student portal, using a dark mode theme with carefully curated colors. The design should include a dual panel layout, replacing the university logo with a graduation cap icon, and adding modern Moroccan cultural touches. Prioritize usability, visual hierarchy, and trustworthiness through refined typography, 3D effects, and vivid color accents. 1. Layout Design Left Panel: Login Form Header Section: Display the university name: "كلية العلوم القانونية والاقتصادية والاجتماعية أيت ملول", styled in a luxurious Arabic font like "Amiri" with a golden gradient overlay. Below it, include the student affairs section name: "مصلحة الشؤون الطلابية", in a slightly smaller font, accented with a vibrant teal glow to distinguish it. Add the Amazigh welcome message: "ⴰⵎⵓⵣⵉⵖ ⴰⴳⵯⵓⴷⵉⴼ", using "Hapex Berber", styled with a gentle neon gradient (teal and orange) for a modern touch. Login Form: Input Fields: Rounded fields with a 3D depth effect, bordered with a subtle gradient transitioning between gold and teal. Placeholder text (e.g., "البريد الإلكتروني", "كلمة المرور") in a modern sans serif font like "Noto Sans Arabic" for clarity. Submit Button: A beveled 3D button in a gradient of deep teal to glowing amber, with a soft shadow to enhance its clickability. Text: "دخول", in bold white with a slight embossed effect. Forgot Password: Place "نسيت كلمة السر؟" as an interactive link with a soft underline glow that transitions to amber on hover. Right Panel: Trust & Visual Section Graduation Cap Icon: Use a golden 3D rendered cap with realistic highlights and soft glowing edges to symbolize academic focus. Informational Cards: Introduce two to three transparent cards with: University Achievements: E.g., "Ranked Top 10 in Morocco." Student Testimonials: E.g., “This portal helps me stay on track!” Each card features minimalist Moroccan tile patterns as a faint background, giving a cultural yet modern vibe. Add a 3D hover effect: Cards lift slightly and glow faintly when hovered over. Animated Background: Integrate a subtle, rotating Moroccan Zellige pattern in the background, rendered in low opacity gradients of teal and orange, to add depth without distraction. 2. Color Palette Primary Colors: Midnight Black (#101820): For the main background, creating a sleek dark mode foundation. Vibrant Teal (#00bfb2): For accents, glowing elements, and interactive borders. Warm Amber (#f8a51b): For highlights and CTA buttons, symbolizing energy and success. Secondary Colors: Deep Plum (#1d1135): For subtle gradients in headers or section dividers, adding richness. Slate Gray (#2e2e3a): For form fields and neutral sections, ensuring high contrast and legibility. Highlight Colors: Soft White (#f4f4f8): For text and placeholder content against dark backgrounds. Gold Gradient (#d4af37 to #f9c74f): For headings, icons, and decorative elements. 3. Typography Arabic Fonts: "Amiri" for titles and headings, providing elegance. "Noto Sans Arabic" for smaller text and input fields, ensuring readability. Amazigh Text: "Hapex Berber" with gradient coloring to make the greeting welcoming and visually distinct. 4. 3D Effects and Animations Interactive Elements: Buttons: Use a press down 3D effect when clicked, with the gradient shifting slightly darker for a tactile feel. Input Fields: Borders glow softly in teal when focused, with a subtle pulsing animation. Graduation Cap Icon: Add a gentle spinning animation or glow when the user hovers over the icon. Background Patterns: Incorporate a 3D Moroccan Zellige tile pattern in the main background, visible as a faint overlay with interactive animations (e.g., tiles brighten subtly on hover). 5. Additional Features Trust Section (Right Panel): Cards include clickable links to "Help Desk," "FAQ," and "Contact Support." Add a live chat icon with a teal glow for immediate assistance. Footer Section: Thin footer with minimalist Zellige borders, styled in gradient gold and teal, housing links like "Privacy Policy" and "Terms of Service." UX Enhancements Visual Balance: Use the color palette strategically to balance warmth (amber/gold) and calmness (teal), ensuring the design feels inviting yet professional. Cultural Relevance: Moroccan tiles and Arabic fonts evoke tradition, while gradients and 3D effects emphasize modernity. User Engagement: Subtle animations like hover glows and interactive cards keep users engaged without overwhelming them.