Login Page - Copy this React, Tailwind Component to your project
Login Page Design Prompt: Design an eye catching login page for the IoT Based Voice Enabled Smart Vehicle Automation system using React and CSS. The page should feel modern, sleek, and highly responsive, with a futuristic tech driven theme. Here's the breakdown: Color Scheme: Use a deep, dark gradient background that transitions from midnight blue to electric purple, evoking a sense of technology and innovation. Add neon accent colors like bright cyan or electric green for the login box and button borders. These should contrast sharply with the darker background, drawing attention to the interactive elements. Text should be in white or light gray to stand out clearly, with hover effects that change color (e.g., hover: neon blue or teal). The buttons should feature a bold, contrasting color such as vibrant orange or teal, with a subtle glowing effect on hover. Layout and Structure: Center the login box on the page, with rounded corners and subtle shadows to give it depth. Minimalist design: Keep the form simple with only two input fields (email/phone and password) and a submit button. Include a small icon or logo at the top of the form, possibly a glowing vehicle or IoT related icon to reinforce the brand. Below the login button, include "Forgot Password?" and "Sign Up" links, with subtle hover effects (e.g., underline or color change). Typography: Use sleek, futuristic fonts for the title and input labels (e.g., Montserrat, Poppins). Headings (e.g., "Login") should be large and bold, while form labels and placeholder text should be light and legible. Animations and Effects: Input fields should have a subtle glow effect on focus, with borders lighting up in a neon color (e.g., teal or green). The login button should have a smooth transition on hover, with a slight color shift (e.g., from teal to bright cyan) and a soft glowing shadow that expands when hovered. Hover effects on links such as "Forgot Password?" and "Sign Up", where the text smoothly changes color or animates with an underline. Background Effects: Include subtle, animated elements in the background, such as softly moving gradient lines or glowing particles that give the feel of technology and motion. Add a slightly transparent layer between the background and the login box to give it a floating, futuristic feel. Responsiveness: Ensure the page is fully responsive, adjusting the size of the login box, text, and buttons for smaller screens. On mobile, use a hamburger menu to allow users to access other links (e.g., "Sign Up", "Contact Us"). The design should shrink proportionally but retain all effects and usability on mobile and tablet. Icons and Imagery: Use IoT related icons or illustrations (e.g., a car, a cloud, or a voice command symbol) subtly around the form or in the background. Keep the icon design minimalist, ensuring it complements the clean and futuristic look without overwhelming the user. Overall Feel: The page should feel futuristic and high tech, with subtle animations and bold contrasts. It should evoke a sense of trust and modernity, aligning with the IoT based vehicle automation theme. The neon accents, glowing buttons, and sleek typography should give it a cutting edge look, suitable for a tech savvy audience.
