55 lines
2.7 KiB
TypeScript
55 lines
2.7 KiB
TypeScript
import { Metadata } from 'next';
|
||
import Link from 'next/link';
|
||
import React from 'react';
|
||
import ForgotPasswordForm from '@/components/auth/components-auth-forgot-form';
|
||
|
||
export const metadata: Metadata = {
|
||
title: 'Forgot Password',
|
||
};
|
||
|
||
export default function ForgotPasswordPage() {
|
||
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" />
|
||
|
||
{/* ===== FORGOT PASSWORD CARD ===== */}
|
||
<div className="relative z-10 w-full max-w-[460px] p-8 rounded-3xl bg-white/10 backdrop-blur-xl border border-white/20 shadow-2xl">
|
||
|
||
{/* Logo / Heading */}
|
||
<div className="flex flex-col items-center mb-6">
|
||
<img
|
||
src="/assets/images/logo_sb.png"
|
||
alt="SocialBuddy Logo"
|
||
className="h-[110px] w-[110px]"
|
||
/>
|
||
<h1 className="text-xl text-white font-medium mt-3">
|
||
Forgot your password?
|
||
</h1>
|
||
<p className="text-sm text-gray-300 mt-1 text-center">
|
||
Enter your email and we’ll send you a reset link
|
||
</p>
|
||
</div>
|
||
|
||
{/* Forgot Password Form */}
|
||
<ForgotPasswordForm />
|
||
|
||
{/* Back to login */}
|
||
<div className="text-center text-sm text-gray-400 mt-6">
|
||
Remember your password?{' '}
|
||
<Link href="/login" className="text-blue-400 hover:underline">
|
||
SIGN IN
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
} |