Login Page - Copy this React, Tailwind Component to your project
Develop a next generation dark mode login page for a university student portal with a Moroccan inspired aesthetic. The design should incorporate: Existing Text Content: Amazigh greeting: "ⴰⵎⵓⵣⵉⵖ ⴰⴳⵯⵓⴷⵉⴼ". University name: "كلية العلوم القانونية والاقتصادية والاجتماعية أيت ملول". Section name: "مصلحة الشؤون الطلابية". Company Branding: Prominently feature the developer name TOP SOLAY in a visually sophisticated way. Enhanced Design and Features: Introduce cutting edge aesthetics, new features, and immersive interactions for a modern experience. 1. Layout & Branding Header Section: Place the university name ("كلية العلوم القانونية والاقتصادية والاجتماعية أيت ملول") and the section name ("مصلحة الشؤون الطلابية") in luxurious gold gradient text, positioned at the top center. Add "ⴰⵎⵓⵣⵉⵖ ⴰⴳⵯⵓⴷⵉⴼ" directly below in a glowing teal gradient with a subtle shadow effect. Include the TOP SOLAY logo or name at the bottom left corner of the page with a modern sans serif font, styled in sleek white with a faint glow. Form Panel: The login form should be centered, slightly elevated with a 3D glass effect: Input Fields: Rounded fields in a semi transparent smoky black (#1c1c1e) with glowing teal borders when active. Placeholder text in soft white, dynamically transitioning to bold teal when the field is selected. Login Button: Update to a dynamic gradient button transitioning between royal blue (#0077be) and golden amber (#f8b400). Add a hover animation where the button slightly enlarges, and the gradient shifts dynamically. Right Panel: Visual Features: Add Moroccan Zellige artwork faintly embossed in the background, with animations triggered on hover, such as soft glowing tile patterns. Introduce a 3D illustration of a graduation cap with interactive movement: Users hovering over the cap can see it spin slowly or light up with gold highlights. 2. Enhanced Colors Primary Colors: Deep Midnight Blue (#1b1f3a): For the dark background, offering a sophisticated and calming effect. Vibrant Teal (#00adb5): Used in borders, glows, and interactivity for modernity. Gold Gradient (#f5b50b to #ffd700): For headings and decorative highlights, symbolizing prestige and excellence. Secondary Colors: Slate Gray (#2c2c34): For neutral sections to balance contrast. Soft White (#f4f4f8): For text and placeholder content. Royal Blue (#0077be): To emphasize action oriented elements like buttons. 3. Typography Arabic Fonts: Title and header fonts: "Scheherazade New" for elegance. Secondary text: "Amiri", balancing readability with sophistication. Amazigh Greeting: Render in a bold yet soft gradient font for cultural emphasis. TOP SOLAY Branding: Use a modern font like "Poppins" for a clean, professional feel. 4. New Features Multi Step Login Assistance: Add a step by step login guide at the top right, with icons: Enter Email (graduation cap icon). Enter Password (lock icon). Click Login (arrow icon). Each step highlights dynamically as users progress. Language Toggle: Add a toggle switch for Arabic and English in the top right corner. Visual Enhancements: Loading Animation: When submitting the form, display a spinning Zellige motif in a golden glow. Interactive Tiles: Moroccan Zellige tiles in the background animate slightly as users move their cursor, creating a dynamic and welcoming feel. Social Login Options: Introduce Google and Facebook login buttons below the main form, styled to match the dark theme. Security Badge: Add a "Secured by TOP SOLAY" badge below the login form, featuring a lock icon and subtle glow animation. 5. Footer Section Add a footer bar with: Quick Links: "FAQ," "Support," "Terms of Service." A TOP SOLAY tagline: "Innovative Solutions for Modern Education," in a soft glow font. User Experience Enhancements Responsiveness: Ensure all features scale perfectly for mobile and tablet screens, adapting the layout without losing interactivity. Performance Optimization: Use lightweight animations to ensure the interface loads quickly.
