generated from muhtadeetaron/nextjs-template
67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import Image from "next/image";
|
|
import BackgroundWrapper from "@/components/BackgroundWrapper";
|
|
|
|
export default function Home() {
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<BackgroundWrapper>
|
|
<div className="mx-10 h-screen">
|
|
<div className="h-full flex flex-col justify-around pt-10">
|
|
{/* Logo Container */}
|
|
<div className="w-full" style={{ aspectRatio: "368/89" }}>
|
|
<Image
|
|
src="/images/logo/logo.png"
|
|
alt="Logo"
|
|
width={368}
|
|
height={89}
|
|
className="w-full h-full object-contain"
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{/* Login Graphic */}
|
|
<div className="w-full h-1/2">
|
|
<Image
|
|
src="/images/static/login-graphic-1.png"
|
|
alt="Login illustration"
|
|
width={400}
|
|
height={300}
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Action Buttons */}
|
|
<div className="flex flex-col gap-4">
|
|
<button
|
|
onClick={() => router.replace("/login")}
|
|
className="w-full h-[60px] flex justify-center items-center border border-[#113768] rounded-full bg-transparent hover:bg-[#113768] hover:text-white transition-colors duration-200"
|
|
>
|
|
<span
|
|
className="font-medium"
|
|
style={{ fontFamily: "Montserrat, sans-serif" }}
|
|
>
|
|
Login
|
|
</span>
|
|
</button>
|
|
|
|
<p
|
|
className="text-center font-medium"
|
|
style={{ fontFamily: "Montserrat, sans-serif" }}
|
|
>
|
|
Don't have an account?{" "}
|
|
<Link href="/register" className="text-[#276ac0] hover:underline">
|
|
Register here
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BackgroundWrapper>
|
|
);
|
|
}
|