register and login card ready

.eslintrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true
+  },
+  extends: [
+    'plugin:react/recommended',
+    'standard-with-typescript'
+  ],
+  overrides: [
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module'
+  },
+  plugins: [
+    'react'
+  ],
+  rules: {
+  }
+}

components/AuthCard.tsx

@@ -0,0 +1,67 @@
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import React, { useState } from 'react'
+import CurtainButton from './CurtainButton'
+import GradientButton from './GradientButton'
+
+interface Props {
+  type: 'register' | 'login'
+}
+
+
+
+const AuthCard = ({type}: Props) => {
+  const [eyeSlash, setEyeSlash] = useState(true)
+  const router = useRouter();
+
+  const handleRedirect = () => {
+    if (type === 'register'){
+      router.push('/auth/login')
+    } else {
+      router.push('/auth/register')
+    }
+  }
+
+  const eyeClickHandler = () =>{
+    setEyeSlash(!eyeSlash)
+  }
+
+  return (
+    <div className='flex flex-row'>
+      <div className='lg:space-y-12 md:space-y-16 flex flex-col ml-[4rem] lg:mt-[4rem] md:mt-[6rem] w-full' >
+        <div className='flex flex-col lg:space-y-2 md:space-y-6 '>
+          <input
+            className='bg-transparent outline-none outline text-white focus:border-b-[1px]'
+            type="email"
+            name='email'
+            placeholder='Email' />
+        </div>
+
+        <div className='flex flex-col lg:space-y-2 md:space-y-6'>
+          <div className='flex flex-row'>
+          <input
+            className='bg-transparent outline-none outline text-white focus:border-b-[1px]'
+            type={eyeSlash ? 'password' : 'text'}
+            name='password'
+            placeholder='Passsword' />
+            {eyeSlash ? 
+            <i onClick={eyeClickHandler} className="w-5 text-gray-500 text-sm cursor-pointer relative top-1 fa-regular fa-eye-slash"></i> :
+            <i onClick={eyeClickHandler} className="w-5 text-gray-500 text-sm cursor-pointer relative top-1 fa-regular fa-eye"></i>}
+
+            </div>
+            {type==='register' ? null : <span className='relative bottom-6 lg:bottom-1 text-gray-500 cursor-pointer text-xs'>forgot password?</span>}
+
+        </div>
+      </div>
+      <div className='flex flex-col m-[15%] mt-[20%] text-center space-y-2'>
+
+      <GradientButton text={type==='register' ? 'Register' : 'Login'}/>
+      <span 
+      onClick={handleRedirect}
+      className='text-gray-500 text-sm underline cursor-pointer'>{type==='register'? 'Login?' : 'Register?'}</span>
+      </div>
+    </div>
+  )
+}
+
+export default AuthCard

components/CurtainButton.tsx

@@ -0,0 +1,27 @@
+import Router, { useRouter } from 'next/router'
+import React from 'react'
+
+interface Props {
+    text: String,
+    link: string
+}
+
+const CurtainButton = ({text, link}: Props) => {
+   const router = useRouter()
+   const handleClick = () => {
+    console.log(link)
+    router.push(link)
+   }
+  return (
+    <div>
+        <a onClick={handleClick} className="w-24 cursor-pointer relative inline-flex items-center justify-start px-6 py-3 overflow-hidden font-medium transition-all bg-white rounded-lg hover:bg-white group">
+<span className="w-48 h-48 rounded rotate-[-40deg] bg-[#0f0] absolute bottom-0 left-0 -translate-x-full ease-out duration-500 transition-all translate-y-full mb-9 ml-9 group-hover:ml-0 group-hover:mb-32 group-hover:translate-x-0"></span>
+<span className="relative text-center w-full text-black transition-colors duration-300 ease-in-out group-hover:text-black">
+    {text}
+</span>
+</a>
+    </div>
+  )
+}
+
+export default CurtainButton

components/GradientButton.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+interface Props {
+    text: String
+}
+
+const GradientButton = ({text}: Props) => {
+  return (
+    <div
+    className='transition-all ease-in-out hover:text-lg'
+    ><a href="#_" className="relative w-24 items-center justify-center inline-block p-4 px-5 py-3 overflow-hidden font-medium text-indigo-600 rounded-lg shadow-2xl group">
+    <span className="absolute top-0 left-0 w-40 h-40 -mt-10 -ml-3 transition-all duration-700 bg-grey-500 rounded-full blur-md ease"></span>
+    <span className="absolute inset-0 w-full transition duration-700 group-hover:rotate-180 ease">
+    <span className="absolute bottom-0 left-0 w-24 h-24 -ml-10 bg-gray-600 rounded-full blur-md"></span>
+    <span className="absolute bottom-0 right-0 w-24 h-24 -mr-10 bg-[#0f0] rounded-full blur-md"></span>
+    </span>
+    <span className="relative text-black font-light hover:text-lg transition-all ease-in-out">{text}</span>
+    </a></div>
+  )
+}
+
+export default GradientButton