130 lines
6.6 KiB
TypeScript
130 lines
6.6 KiB
TypeScript
import React from "react";
|
|
import IconGoogle from "@/components/icon/icon-google";
|
|
import Link from "next/link";
|
|
import ComponentsAuthRegisterForm from "@/components/auth/components-auth-register-form";
|
|
export default function PremiumLoginPage() {
|
|
return (
|
|
<div className="min-h-screen w-full flex items-center justify-center bg-black relative overflow-hidden">
|
|
{/* Background abstract neon lines */}
|
|
{/* <div
|
|
className="absolute inset-0 bg-cover bg-center opacity-60"
|
|
style={{
|
|
backgroundImage:
|
|
"url('https://as2.ftcdn.net/jpg/03/43/34/57/1000_F_343345747_wJfBUpacjstgfxqK6XyH45jXXZTeHx44.jpg')",
|
|
}}
|
|
></div> */}
|
|
{/* 🔥 Background YouTube Video */}
|
|
<div className="absolute inset-0 w-full h-full overflow-hidden">
|
|
{/* <iframe
|
|
className="w-full h-full object-cover"
|
|
src="https://www.youtube.com/embed/g6qV2cQ2Fhw?autoplay=1&mute=1&controls=0&showinfo=0&rel=0&loop=1&playlist=g6qV2cQ2Fhw"
|
|
allow="autoplay; fullscreen"
|
|
allowFullScreen
|
|
/> */}
|
|
<video
|
|
className="w-full h-full object-cover"
|
|
autoPlay
|
|
loop
|
|
muted
|
|
playsInline
|
|
>
|
|
<source src="/assets/images/auth/D4A_ebay_background-1.mp4" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
{/* Glass card */}
|
|
<div className="relative z-10 bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl rounded-2xl p-10 w-full max-w-lg text-white animate-fadeIn">
|
|
{/* <h2 className="text-3xl font-semibold text-center mb-8">Login</h2> */}
|
|
{/* Login Form Section */}
|
|
<div className="w-full max-w-[440px] ">
|
|
<div className="mb-10">
|
|
<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">
|
|
Enter your email and password to register
|
|
</p>
|
|
</div>
|
|
|
|
{/* Login form */}
|
|
<ComponentsAuthRegisterForm />
|
|
|
|
{/* <div className="text-center mt-4">
|
|
<a href="/forgot-password" className="text-sm text-blue-500 hover:underline">
|
|
Forgot Password?
|
|
</a>
|
|
</div> */}
|
|
|
|
{/* Divider */}
|
|
<div className="relative my-7">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<span className="w-full border-t border-white/20"></span>
|
|
</div>
|
|
<div className="relative flex justify-center text-sm">
|
|
<span className="px-3 bg-black/40 backdrop-blur-md text-white/80">
|
|
OR
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social icons */}
|
|
<div className="mb-10 md:mb-[20px]">
|
|
<ul className="flex justify-center gap-3.5 text-white">
|
|
{/* <li>
|
|
<Link
|
|
href="#"
|
|
className="inline-flex h-10 w-10 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="https://ebay.backend.data4autos.com/api/auth/facebook/"
|
|
className="inline-flex h-10 w-10 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, #1E3A8A 0%, #2563EB 50%, #00C6FF 100%)' }}
|
|
>
|
|
<IconTwitter fill={true} />
|
|
</Link>
|
|
</li> */}
|
|
<li>
|
|
<Link
|
|
href="https://ebay.backend.data4autos.com/api/auth/google/"
|
|
className="inline-flex h-10 w-10 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>
|
|
|
|
{/* Sign-up link */}
|
|
<div className="text-center dark:text-white">
|
|
Already have an account?
|
|
<Link
|
|
href="/login"
|
|
className="uppercase text-[#19d4fb] underline transition hover:text-black dark:hover:text-white"
|
|
>
|
|
SIGN IN
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
} |