feat: sign in page

app/auth/SignIn/page.tsx

@@ -0,0 +1,83 @@
+"use client"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useRouter } from "next/router"
+import { useForm } from "react-hook-form"
+import * as z from "zod"
+import { loginSchema } from "zodSchema/login"
+import Image from "next/image"
+
+export default function SignIn() {
+  return (
+    <section className="relative h-[100vh]">
+      <div className=" rigth-[50%] absolute -z-10 align-middle opacity-[0.7] blur-[40px] max-md:right-[10%]">
+        <Image
+          src="/images/auth-illustration.svg"
+          alt="hero"
+          width="1440"
+          height="450"
+          className="block h-auto max-w-none"
+        />
+      </div>
+      <div className="relative ml-auto mr-auto flex max-w-6xl justify-center pl-6 pr-6">
+        <div className="pb-20 pt-40 ">
+          <div className="flex flex-col items-center justify-center">
+            <Image src="/images/logoicon.png" alt="logo" width="100" height="100" />
+            <div className="mb-4 max-w-2xl text-4xl font-extrabold capitalize leading-none tracking-tight text-white md:text-4xl xl:text-5xl">
+              <h2 className="bg-gradient-to-r from-slate-400 via-white to-slate-400 bg-clip-text p-5 text-center text-transparent">
+                Sign In To Your Account
+              </h2>
+            </div>
+            <div className="w-[80%]">
+              <form className="w-full max-w-lg">
+                <label className="mb-2 block text-sm font-bold text-white" htmlFor="email">
+                  Email
+                </label>
+                <input
+                  className=" w-full appearance-none rounded  bg-[#1e293b] px-3 py-2 leading-tight text-white focus:outline-[#F5887A]"
+                  id="email"
+                  type="text"
+                  placeholder="youremail@website.com"
+                />
+                <label className="mb-2 mt-4 block text-sm font-bold text-white" htmlFor="password">
+                  Password
+                </label>
+                <input
+                  className=" w-full appearance-none rounded  bg-[#1e293b] px-3 py-2 leading-tight text-gray-700 shadow focus:outline-[#F5887A]"
+                  id="password"
+                  type="password"
+                  placeholder="Password"
+                />
+                <button
+                  className="focus:shadow-outline focus:shadow-outline hover:shadow-outline mt-4 w-full rounded-full bg-[#F5887A] px-4 py-2 font-bold text-white transition-all hover:bg-[#F0B37D] focus:outline-none"
+                  type="button"
+                >
+                  Sign In
+                </button>
+              </form>
+
+              <div className="mt-4 flex items-center justify-center text-center">
+                <p className="text-slate-500"> Don't have an account?&nbsp; </p>
+                <a className="text-[#F5887A]" href="#">
+                  Sign Up
+                </a>
+              </div>
+              <div className="my-[10px] flex items-center justify-between">
+                <div className="h-[1px] w-[40%] bg-slate-500"></div>
+                <p className="text-slate-500">OR</p>
+                <div className="h-[1px] w-[40%] bg-slate-500"></div>
+              </div>
+            </div>
+            <div className="flex items-center justify-between">
+              <button className=" border-conic-gradient relative inline-flex h-9 w-full items-center justify-between rounded-full border-[1px]  border-gray-400 border-transparent bg-gradient-to-br from-gray-900 to-gray-800 px-4 py-1 text-white transition-all">
+                Sign In With Google
+              </button>
+              <button className="border-conic-gradient h-9 w-full items-center justify-between rounded-full border-[1px] border-gray-400 bg-gradient-to-br from-gray-900  to-gray-800">
+                Sign In With Facebook
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

app/auth/SignUp/page.tsx

@@ -0,0 +1,32 @@
+import React, { useState } from "react"
+
+const SignUpPage: React.FC = () => {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+
+  const handleSignUp = () => {
+    // Implement your sign-up logic here
+    console.log("Sign up button clicked")
+    console.log("Email:", email)
+    console.log("Password:", password)
+  }
+
+  return (
+    <div>
+      <h1>Sign Up</h1>
+      <form>
+        <label>Email:</label>
+        <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <br />
+        <label>Password:</label>
+        <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <br />
+        <button type="button" onClick={handleSignUp}>
+          Sign Up
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default SignUpPage