2026-01-02 01:38:00 +05:30

62 lines
2.9 KiB
TypeScript

import ComponentsAuthRegisterForm from '@/components/auth/components-auth-register-form';
import { Metadata } from 'next';
import Link from 'next/link';
import React from 'react';
export const metadata: Metadata = {
title: 'Sign Up',
};
export default function BoxedSignUp() {
return (
<div className="relative min-h-screen overflow-hidden bg-[#0a0b17] flex items-center justify-center p-4">
{/* ===== Background Glows ===== */}
<div className="absolute top-[180px] left-52 w-[100px] h-[100px] bg-[#1d8be0] rounded-full blur-2xl opacity-90" />
<div className="absolute top-10 left-0 w-[60px] h-[60px] bg-[#6cb655] rounded-full blur-2xl opacity-90" />
<div className="absolute -left-[80px] bottom-[140px] w-[100px] h-[200px] bg-[#db21d9] blur-3xl opacity-90" />
<div className="absolute bottom-20 left-[440px] w-[60px] h-[60px] bg-[#db21d9] rounded-full blur-xl opacity-80" />
<div className="absolute top-[100px] right-[260px] w-[100px] h-[100px] bg-[#f28f50] rounded-full blur-2xl opacity-80" />
<div className="absolute top-10 right-0 w-[60px] h-[60px] bg-[#6cb655] rounded-full blur-2xl opacity-90" />
<div className="absolute bottom-20 right-[180px] w-[80px] h-[80px] bg-[#783e8d] rounded-full blur-2xl opacity-80" />
<div className="absolute top-[280px] -right-[20px] w-[160px] h-[160px] bg-[#f1b74d] rounded-full blur-2xl opacity-90" />
{/* ===== SIGN UP CARD ===== */}
<div className="relative z-10 w-full max-w-[540px] p-8 rounded-3xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl">
{/* Logo */}
<div className="flex flex-col items-center justify-center mb-6">
<img
src="/assets/images/logo_sb.png"
alt="SocialBuddy Logo"
className="h-[120px] w-[120px]
drop-shadow-[0_0_6px_rgba(0,111,171,0.65),
0_0_8px_rgba(243,195,56,0.55),
0_0_10px_rgba(226,50,118,0.50),
0_0_10px_rgba(243,195,56,0.45),
0_0_10px_rgba(20,71,209,0.40)]"
/>
<h1 className="text-xl text-white font-medium text-center mt-3">
Create Your SocialBuddy Account
</h1>
</div>
{/* Register Form */}
<ComponentsAuthRegisterForm />
{/* Footer link */}
<div className="text-center text-gray-400 text-sm mt-6">
Already have an account?{' '}
<Link
href="/login"
className="text-blue-400 hover:underline"
>
SIGN IN
</Link>
</div>
</div>
</div>
);
}