219 lines
11 KiB
TypeScript
219 lines
11 KiB
TypeScript
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 { Metadata } from 'next';
|
|
import Link from 'next/link';
|
|
import React from 'react';
|
|
|
|
export const metadata: Metadata = {
|
|
title: 'Register Cover',
|
|
};
|
|
|
|
const CoverRegister = () => {
|
|
return (
|
|
<div>
|
|
{/* Background gradient */}
|
|
<div className="absolute inset-0">
|
|
<img
|
|
src="/assets/images/auth/bg-gradient.png"
|
|
alt="background"
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative flex min-h-screen items-center justify-center bg-[url(/assets/images/auth/bg.png)] bg-cover bg-center bg-no-repeat px-6 py-10 dark:bg-[#060818] sm:px-16">
|
|
{/* Decorative images */}
|
|
<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.png"
|
|
alt="image"
|
|
className="absolute bottom-0 end-[28%]"
|
|
/>
|
|
|
|
{/* Main container */}
|
|
<div className="relative flex w-full max-w-[1502px] flex-col justify-between overflow-hidden rounded-md bg-white/60 backdrop-blur-lg dark:bg-black/50 lg:min-h-[758px] lg:flex-row lg:gap-10 xl:gap-0">
|
|
|
|
{/* LEFT SIDE */}
|
|
<div
|
|
className="relative hidden w-full items-center justify-center
|
|
bg-[linear-gradient(135deg,#006AE0_0%,#00B4DB_50%,#19D4FB_100%)]
|
|
|
|
|
|
p-5 lg:inline-flex lg:max-w-[835px]
|
|
xl:-ms-28 ltr:xl:skew-x-[14deg] rtl:xl:skew-x-[-14deg]"
|
|
>
|
|
<div className="absolute inset-y-0 w-8 from-primary/10 via-transparent to-transparent ltr:-right-10 ltr:bg-gradient-to-r rtl:-left-10 rtl:bg-gradient-to-l xl:w-16 ltr:xl:-right-20 rtl:xl:-left-20"></div>
|
|
|
|
{/* Centered Image */}
|
|
<div className="ltr:xl:-skew-x-[14deg] rtl:xl:skew-x-[14deg] flex items-center justify-center w-full">
|
|
<img
|
|
src="/assets/images/auth/sign-up.webp"
|
|
alt="Login Illustration"
|
|
className="max-w-[430px] w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* RIGHT SIDE */}
|
|
<div className="relative flex flex-col items-center justify-center w-full px-6 sm:px-10 lg:px-14 pt-10 pb-12">
|
|
|
|
{/* Triple Logos */}
|
|
<div
|
|
className="absolute top-6 left-1/2 z-10 -translate-x-1/2
|
|
flex flex-row flex-nowrap items-center justify-center
|
|
gap-3 sm:gap-5 md:gap-6 lg:gap-8
|
|
px-2 w-full max-w-[95%] sm:max-w-[90%] md:max-w-[85%] lg:max-w-[70%]
|
|
overflow-hidden mb-6 sm:mb-8 ipad-fix"
|
|
>
|
|
{/* Logo 1 */}
|
|
<Link href="/" className="block flex-shrink-0">
|
|
<img
|
|
src="/assets/images/auth/turn14_logo.png"
|
|
alt="Turn14"
|
|
className="h-[16px] sm:h-[26px] md:h-[36px] lg:h-[48px] xl:h-[60px]
|
|
w-auto object-contain opacity-90 hover:opacity-100 transition-opacity duration-300"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Logo 2 */}
|
|
<Link href="/" className="block flex-shrink-0">
|
|
<img
|
|
src="/assets/images/auth/data.webp"
|
|
alt="Data4Autos"
|
|
className="h-[20px] sm:h-[26px] md:h-[36px] lg:h-[48px] xl:h-[60px]
|
|
w-auto object-contain opacity-90 hover:opacity-100 transition-opacity duration-300"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Logo 3 */}
|
|
<Link href="/" className="block flex-shrink-0">
|
|
<img
|
|
src="/assets/images/auth/ebay.webp"
|
|
alt="eBay"
|
|
className="h-[18px] sm:h-[26px] md:h-[36px] lg:h-[48px] xl:h-[60px]
|
|
w-auto object-contain opacity-90 hover:opacity-100 transition-opacity duration-300"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* signup Section */}
|
|
<div className="w-full max-w-[440px] mt-8 sm:mt-10 lg:mt-20">
|
|
<div className="mb-8 sm:mb-10 text-center">
|
|
<h1 className="text-3xl font-extrabold uppercase !leading-snug text-[#19d4fb] 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>
|
|
|
|
{/* Register Form */}
|
|
<ComponentsAuthRegisterForm />
|
|
|
|
{/* Divider */}
|
|
<div className="relative my-6 text-center md:my-8">
|
|
<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>
|
|
|
|
{/* Social Icons */}
|
|
<div className="mb-10 md:mb-14">
|
|
<ul className="flex justify-center gap-3.5 text-white">
|
|
<li>
|
|
<Link
|
|
href="#"
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
|
|
style={{
|
|
background:
|
|
'linear-gradient(135deg, #0EA5E9 0%, #19D4FB 50%, #67E8F9 100%)',
|
|
}}
|
|
>
|
|
<IconInstagram />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#"
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
|
|
style={{
|
|
background:
|
|
'linear-gradient(135deg, #0EA5E9 0%, #19D4FB 50%, #67E8F9 100%)',
|
|
}}
|
|
>
|
|
<IconFacebookCircle />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#"
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
|
|
style={{
|
|
background:
|
|
'linear-gradient(135deg, #0EA5E9 0%, #19D4FB 50%, #67E8F9 100%)',
|
|
}}
|
|
>
|
|
<IconTwitter fill={true} />
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="#"
|
|
className="inline-flex h-8 w-8 items-center justify-center rounded-full p-0 transition hover:scale-110"
|
|
style={{
|
|
background:
|
|
'linear-gradient(135deg, #0EA5E9 0%, #19D4FB 50%, #67E8F9 100%)',
|
|
}}
|
|
>
|
|
<IconGoogle />
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Login link */}
|
|
<div className="text-center dark:text-white mt-4 mb-6">
|
|
Already have an account?
|
|
<Link
|
|
href="/login"
|
|
className="uppercase text-primary underline transition hover:text-black dark:hover:text-white"
|
|
>
|
|
SIGN IN
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer text */}
|
|
<p className="absolute bottom-6 w-full text-center text-xs text-gray-600 dark:text-white">
|
|
© {new Date().getFullYear()}. Data4Autos All Rights Reserved.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CoverRegister;
|