✨ ogin and register page

app/(auth)/layout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const AuthLayout = ({ children }: { children: React.ReactNode }) => {
-    return <div className="min-h-screen text-black dark:text-white-dark">{children} </div>;
+    return <div className="min-h-screen text-black dark:text-white-dark">{children}</div>;
 };
 
 export default AuthLayout;

app/(auth)/login/page.tsx

@@ -0,0 +1,48 @@
+import IconFacebookCircle from '@/components/icon/icon-facebook-circle';
+import IconGoogle from '@/components/icon/icon-google';
+import IconInstagram from '@/components/icon/icon-instagram';
+import IconTwitter from '@/components/icon/icon-twitter';
+
+import Link from 'next/link';
+import { Metadata } from 'next';
+import React from 'react';
+import ComponentsAuthLoginForm from '@/components/auth/components-auth-login-form';
+
+type Props = {}
+
+const LoginPage = (props: Props) => {
+    return (
+        <div>
+            <div className="absolute inset-0">
+                <img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" />
+            </div>
+
+            <div className="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
+                <img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
+                <img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" />
+                <img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" />
+                <img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" />
+                <div className="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]">
+                    <div className="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]">
+                        <div className="mx-auto w-full max-w-[440px]">
+                            <div className="mb-10">
+                                <h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign in</h1>
+                                <p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to login</p>
+                            </div>
+                            <ComponentsAuthLoginForm />
+
+                            <div className="text-center dark:text-white">
+                                Don&apos;t have an account ?&nbsp;
+                                <Link href="/register" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
+                                    SIGN UP
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default LoginPage

app/(auth)/register/page.tsx

@@ -0,0 +1,52 @@
+import ComponentsAuthRegisterForm from '@/components/auth/components-auth-register-form';
+import IconFacebookCircle from '@/components/icon/icon-facebook-circle';
+import IconGoogle from '@/components/icon/icon-google';
+import IconInstagram from '@/components/icon/icon-instagram';
+import IconTwitter from '@/components/icon/icon-twitter';
+import Link from 'next/link';
+import React from 'react';
+
+
+type Props = {}
+
+const RegisterPage = (props: Props) => {
+    return (
+        <div>
+            <div className="absolute inset-0">
+                <img src="/assets/images/auth/bg-gradient.png" alt="image" className="h-full w-full object-cover" />
+            </div>
+
+            <div className="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/map.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
+                <img src="/assets/images/auth/coming-soon-object1.png" alt="image" className="absolute left-0 top-1/2 h-full max-h-[893px] -translate-y-1/2" />
+                <img src="/assets/images/auth/coming-soon-object2.png" alt="image" className="absolute left-24 top-0 h-40 md:left-[30%]" />
+                <img src="/assets/images/auth/coming-soon-object3.png" alt="image" className="absolute right-0 top-0 h-[300px]" />
+                <img src="/assets/images/auth/polygon-object.svg" alt="image" className="absolute bottom-0 end-[28%]" />
+                <div className="relative w-full max-w-[870px] rounded-md bg-[linear-gradient(45deg,#fff9f9_0%,rgba(255,255,255,0)_25%,rgba(255,255,255,0)_75%,_#fff9f9_100%)] p-2 dark:bg-[linear-gradient(52.22deg,#0E1726_0%,rgba(14,23,38,0)_18.66%,rgba(14,23,38,0)_51.04%,rgba(14,23,38,0)_80.07%,#0E1726_100%)]">
+                    <div className="relative flex flex-col justify-center rounded-md bg-white/60 px-6 py-20 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px]">
+
+                        <div className="mx-auto w-full max-w-[440px]">
+                            <div className="mb-10">
+                                <h1 className="text-3xl font-extrabold uppercase !leading-snug text-primary md:text-4xl">Sign Up</h1>
+                                <p className="text-base font-bold leading-normal text-white-dark">Enter your email and password to register</p>
+                            </div>
+                            <ComponentsAuthRegisterForm />
+                            <div className="relative my-7 text-center md:mb-9">
+                                <span className="absolute inset-x-0 top-1/2 h-px w-full -translate-y-1/2 bg-white-light dark:bg-white-dark"></span>
+                                <span className="relative bg-white px-2 font-bold uppercase text-white-dark dark:bg-dark dark:text-white-light">or</span>
+                            </div>
+
+                            <div className="text-center dark:text-white">
+                                Already have an account ?&nbsp;
+                                <Link href="/auth/boxed-signin" className="uppercase text-primary underline transition hover:text-black dark:hover:text-white">
+                                    SIGN IN
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default RegisterPage

components/auth/components-auth-login-form.tsx

@@ -0,0 +1,41 @@
+'use client';
+import IconLockDots from '@/components/icon/icon-lock-dots';
+import IconMail from '@/components/icon/icon-mail';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const ComponentsAuthLoginForm = () => {
+    const router = useRouter();
+    const submitForm = (e: any) => {
+        e.preventDefault();
+        router.push('/');
+    };
+
+    return (
+        <form className="space-y-5 dark:text-white" onSubmit={submitForm}>
+            <div>
+                <label htmlFor="Email">Email</label>
+                <div className="relative text-white-dark">
+                    <input id="Email" type="email" placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
+                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
+                        <IconMail fill={true} />
+                    </span>
+                </div>
+            </div>
+            <div>
+                <label htmlFor="Password">Password</label>
+                <div className="relative text-white-dark">
+                    <input id="Password" type="password" placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
+                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
+                        <IconLockDots fill={true} />
+                    </span>
+                </div>
+            </div>
+            <button type="submit" className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
+                Sign in
+            </button>
+        </form>
+    );
+};
+
+export default ComponentsAuthLoginForm;

components/auth/components-auth-register-form.tsx

@@ -0,0 +1,51 @@
+'use client';
+import IconLockDots from '@/components/icon/icon-lock-dots';
+import IconMail from '@/components/icon/icon-mail';
+import IconUser from '@/components/icon/icon-user';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+
+const ComponentsAuthRegisterForm = () => {
+    const router = useRouter();
+
+    const submitForm = (e: any) => {
+        e.preventDefault();
+        router.push('/');
+    };
+    return (
+        <form className="space-y-5 dark:text-white" onSubmit={submitForm}>
+            {/* <div>
+                <label htmlFor="Name">Name</label>
+                <div className="relative text-white-dark">
+                    <input id="Name" type="text" placeholder="Enter Name" className="form-input ps-10 placeholder:text-white-dark" />
+                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
+                        <IconUser fill={true} />
+                    </span>
+                </div>
+            </div> */}
+            <div>
+                <label htmlFor="Email">Email</label>
+                <div className="relative text-white-dark">
+                    <input id="Email" type="email" placeholder="Enter Email" className="form-input ps-10 placeholder:text-white-dark" />
+                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
+                        <IconMail fill={true} />
+                    </span>
+                </div>
+            </div>
+            <div>
+                <label htmlFor="Password">Password</label>
+                <div className="relative text-white-dark">
+                    <input id="Password" type="password" placeholder="Enter Password" className="form-input ps-10 placeholder:text-white-dark" />
+                    <span className="absolute start-4 top-1/2 -translate-y-1/2">
+                        <IconLockDots fill={true} />
+                    </span>
+                </div>
+            </div>
+            <button type="submit" className="btn btn-gradient !mt-6 w-full border-0 uppercase shadow-[0_10px_20px_-10px_rgba(67,97,238,0.44)]">
+                Sign Up
+            </button>
+        </form>
+    );
+};
+
+export default ComponentsAuthRegisterForm;

public/assets/images/auth/polygon-object.svg

@@ -0,0 +1,9 @@
+<svg width="403" height="203" viewBox="0 0 403 203" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.5" d="M84.1429 22.5C92.1814 8.57695 107.037 6.30518e-07 123.114 -8.68407e-07L279.153 -8.31927e-06C295.229 -2.1888e-06 310.085 8.57695 318.124 22.5L396.143 157.633C404.181 171.556 404.181 188.71 396.143 202.633L318.124 337.767C310.085 351.69 295.229 360.267 279.153 360.267L123.114 360.267C107.037 360.267 92.1814 351.69 84.1429 337.767L6.12366 202.633C-1.91481 188.71 -1.91481 171.556 6.12366 157.633L84.1429 22.5Z" fill="url(#paint0_linear_1271_92615)"/>
+<defs>
+<linearGradient id="paint0_linear_1271_92615" x1="51.8148" y1="337.506" x2="355.795" y2="63.7325" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8B50E8"/>
+<stop offset="1" stop-color="#EA6161"/>
+</linearGradient>
+</defs>
+</svg>