Auth Page - Copy this React, Tailwind Component to your project
Create-an-elegant-and-dynamic-UI-for-**ChatVerse's**-**login**,-**signup**,-and-**forgot-password**-pages-using-**React.js**.-Ensure-the-design-is-responsive-for-mobile,-tablet,-and-desktop-screens,-incorporating-modern-UI-components,-animations,-and-a-professional-look-with-error-and-success-message-handling.-----####-**General-Design-and-Features**-1.-**Color-Palette**:---Primary:-Deep-blue-(#2D4F87)---Secondary:-Teal/Aqua-(#3AAFA9)---Background:-Light-gray-(#F9FAFB)-and-white-(#FFFFFF)---Error:-Red-(#FF5A5F);-Success:-Green-(#28A745)-2.-**Fonts-&-Icons**:---Fonts:-Use-**Roboto**-or-**Poppins**-for-a-clean-and-modern-look.---Icons:-Use-**Material-UI-Icons**-for-intuitive,-lightweight-symbols.---Use-animated-SVGs-or-Lottie-files-for-visual-enhancement-(e.g.,-loading-animations,-success-confirmation).-3.-**UI-Components**:---**Inputs**:-Styled-input-fields-with-clear-labels-and-placeholders.---**Buttons**:-Rounded,-hoverable-buttons-with-smooth-transitions.---**Error/Success-Messages**:-Dynamically-display-messages-above-the-form-fields-in-a-styled,-noticeable-box.-4.-**Animations**:---Use-**React-Transition-Group**-or-**Framer-Motion**-for-smooth-page-transitions-(e.g.,-fade-or-slide-animations).---Include-subtle-animations-for-button-clicks-and-input-field-focus.-----####-**Page-Specific-Features**-1.-**Login-Page**:---**Form-Fields**:---Email---Password---"Remember-Me"-Checkbox---**Buttons**:---Login---Link-to-Signup-and-Forgot-Password---**Dynamic-Features**:---Display-error-messages-for-invalid-credentials.---Show-success-messages-for-successful-logins.---**Animation**:---Fade-in-transition-for-the-form-on-page-load.-2.-**Signup-Page**:---**Form-Fields**:---Name---Email---Password---Confirm-Password---**Dynamic-Validation**:---Show-live-validation-feedback-(e.g.,-password-strength-meter,-matching-confirmation-password).---**Buttons**:---Signup---Link-to-Login---**Error-Handling**:---Highlight-invalid-fields-with-a-red-border-and-error-text.---**Success-Handling**:---Show-a-success-message-or-redirect-to-the-login-page-with-a-success-toast.---**Animation**:---Slide-in-transition-from-the-right-for-the-form.-3.-**Forgot-Password-Page**:---**Form-Fields**:---Email-Address---**Buttons**:---Send-Reset-Link---Link-to-Login---**Dynamic-Features**:---Success-message-when-reset-email-is-sent.---Error-message-for-invalid-or-unregistered-email-addresses.---**Animation**:---Bounce-effect-for-the-"Send-Reset-Link"-button-when-clicked.-----####-**Responsive-Design**---**Mobile-View**:-Compact,-single-column-layout-with-large-buttons-and-inputs.---**Tablet-View**:-Centered-layout-with-slightly-more-spacing-and-larger-fonts.---**Desktop-View**:-Two-column-layout-with-one-side-showing-the-form-and-the-other-an-attractive-illustration-or-branding-content.-----####-**Technical-Setup**-1.-**React-Components**:---Reusable-components-for-input-fields,-buttons,-and-error/success-messages.-2.-**State-Management**:---Use-React's-`useState`-and-`useEffect`-for-local-state-or-**Redux**-for-global-state-management.-3.-**API-Integration**:---Configure-API-calls-for-login,-signup,-and-password-reset-using-`Axios`-or-`Fetch-API`.---Handle-async-validation-and-display-messages-dynamically.-4.-**Libraries**:---**Material-UI**-or-**Tailwind-CSS**-for-styling.---**React-Router**-for-navigation.---**Framer-Motion**-for-animations.----
