Skip to content

feat(auth): implement premium split-screen authentication UI #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nitinmohan18 merged 1 commit into from
Jun 27, 2026
Merged

feat(auth): implement premium split-screen authentication UI #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 124 additions & 0 deletions app/(auth)/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import Image from "next/image";
import Link from "next/link";
import { Sparkles, BookOpen, GraduationCap } from "lucide-react";

export default function AuthLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="flex min-h-[100dvh] w-full">
{/* Left Side - Brand & Features (Hidden on Mobile) */}
<div className="relative hidden w-1/2 flex-col justify-between overflow-hidden bg-[#00008B] lg:flex">
{/* Background Gradients & Effects */}
<div className="absolute inset-0 z-0">
<div className="absolute -left-[10%] top-[-10%] h-[500px] w-[500px] rounded-full bg-blue-500/20 blur-[120px]" />
<div className="absolute -right-[10%] bottom-[-10%] h-[500px] w-[500px] rounded-full bg-indigo-500/20 blur-[120px]" />
<div className="absolute inset-0 bg-[url('/noise.png')] opacity-20 mix-blend-overlay" />
</div>

{/* Top Logo */}
<div className="relative z-10 p-10">
<Link
href="/"
className="flex items-center gap-3 transition-opacity hover:opacity-90"
>
<div className="relative flex h-12 w-12 items-center justify-center overflow-hidden rounded-xl bg-white/10 backdrop-blur-md">
<Image
src="/hl-logo.png"
alt="Hyper Learning Logo"
width={32}
height={32}
className="object-contain"
/>
</div>
<span className="text-xl font-bold text-white tracking-tight">
Hyper Learning
</span>
</Link>
</div>

{/* Center Content */}
<div className="relative z-10 flex flex-col justify-center p-10 xl:p-16">
<h1 className="text-4xl font-extrabold tracking-tight text-white xl:text-5xl">
Welcome to the future of learning.
</h1>
<p className="mt-6 text-lg text-blue-100/80 leading-relaxed max-w-md">
Join thousands of engineering students who are studying smarter with
AI-powered notes, mapped syllabus, and instant tutor assistance.
</p>

<div className="mt-12 space-y-6">
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-blue-200 backdrop-blur-sm">
<BookOpen className="h-6 w-6" />
</div>
<div>
<h3 className="font-semibold text-white">AI-Powered Notes</h3>
<p className="text-sm text-blue-200/70">
Concept explanations tailored for exams.
</p>
</div>
</div>
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-blue-200 backdrop-blur-sm">
<GraduationCap className="h-6 w-6" />
</div>
<div>
<h3 className="font-semibold text-white">Mapped PYQs</h3>
<p className="text-sm text-blue-200/70">
Previous year questions mapped to topics.
</p>
</div>
</div>
<div className="flex items-center gap-4">
<div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-white/10 text-blue-200 backdrop-blur-sm">
<Sparkles className="h-6 w-6" />
</div>
<div>
<h3 className="font-semibold text-white">Instant AI Tutor</h3>
<p className="text-sm text-blue-200/70">
Clear your doubts 24/7 on any subject.
</p>
</div>
</div>
</div>
</div>

{/* Bottom Footer */}
<div className="relative z-10 p-10 text-sm text-blue-200/50">
© {new Date().getFullYear()} Hyper Learning. All rights reserved.
</div>
</div>

{/* Right Side - Auth Forms */}
<div className="relative flex w-full flex-col justify-center items-center bg-background p-6 sm:p-12 lg:w-1/2">
<div className="absolute inset-0 z-0 lg:hidden">
<div className="absolute top-0 right-0 h-[300px] w-[300px] rounded-full bg-blue-500/5 blur-[100px]" />
</div>

{/* Mobile Logo Header */}
<div className="absolute top-6 left-6 z-10 lg:hidden">
<Link
href="/"
className="flex items-center gap-3 transition-opacity hover:opacity-80"
>
<div className="relative flex h-10 w-10 items-center justify-center overflow-hidden rounded-xl bg-blue-600">
<Image
src="/hl-logo.png"
alt="Hyper Learning Logo"
width={24}
height={24}
className="object-contain"
/>
</div>
</Link>
</div>

{/* Auth Container */}
<div className="relative z-10 w-full max-w-[400px]">{children}</div>
</div>
</div>
);
}
109 changes: 108 additions & 1 deletion app/(auth)/sign-in/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,110 @@
import Link from "next/link";
import { ArrowRight } from "lucide-react";

export default function SignInPage() {
return <div>Sign In Page</div>;
return (
<div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-700">
<div className="flex flex-col gap-2 text-center lg:text-left">
<h1 className="text-3xl font-bold tracking-tight text-foreground">
Welcome back
</h1>
<p className="text-muted-foreground text-sm">
Enter your credentials to access your workspace
</p>
</div>

<form className="flex flex-col gap-5 mt-2">
<div className="flex flex-col gap-1.5">
<label
htmlFor="email"
className="text-sm font-medium text-foreground"
>
Email address
</label>
<input
id="email"
type="email"
placeholder="name@student.university.edu"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>

<div className="flex flex-col gap-1.5">
<div className="flex items-center justify-between">
<label
htmlFor="password"
className="text-sm font-medium text-foreground"
>
Password
</label>
<Link
href="#"
className="text-xs font-medium text-[#1D4ED8] transition-colors hover:text-[#1E40AF] dark:text-blue-400 dark:hover:text-blue-300"
>
Forgot password?
</Link>
</div>
<input
id="password"
type="password"
placeholder="••••••••"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>

<button
type="button"
className="group mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-[#1D4ED8] px-4 py-3.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#1E40AF] hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 dark:bg-blue-600 dark:hover:bg-blue-700"
>
Sign In
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
</button>
</form>

<div className="relative mt-2">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-border" />
</div>
<div className="relative flex justify-center text-xs">
<span className="bg-background px-3 text-muted-foreground">
Or continue with
</span>
</div>
</div>

<button
type="button"
className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-5 w-5"
>
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
GitHub
</button>

<p className="text-center text-sm text-muted-foreground mt-2">
Don&apos;t have an account?{" "}
<Link
href="/sign-up"
className="font-semibold text-[#1D4ED8] transition-colors hover:text-[#1E40AF] hover:underline dark:text-blue-400 dark:hover:text-blue-300"
>
Sign up
</Link>
</p>
</div>
);
}
137 changes: 136 additions & 1 deletion app/(auth)/sign-up/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,138 @@
import Link from "next/link";
import { ArrowRight } from "lucide-react";

export default function SignUpPage() {
return <div>Sign Up Page</div>;
return (
<div className="flex flex-col gap-6 w-full animate-in fade-in slide-in-from-bottom-4 duration-700">
<div className="flex flex-col gap-2 text-center lg:text-left">
<h1 className="text-3xl font-bold tracking-tight text-foreground">
Create an account
</h1>
<p className="text-muted-foreground text-sm">
Join thousands of students learning smarter
</p>
</div>

<form className="flex flex-col gap-5 mt-2">
<div className="grid grid-cols-2 gap-4">
<div className="flex flex-col gap-1.5">
<label
htmlFor="firstName"
className="text-sm font-medium text-foreground"
>
First name
</label>
<input
id="firstName"
type="text"
placeholder="John"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>
<div className="flex flex-col gap-1.5">
<label
htmlFor="lastName"
className="text-sm font-medium text-foreground"
>
Last name
</label>
<input
id="lastName"
type="text"
placeholder="Doe"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>
</div>

<div className="flex flex-col gap-1.5">
<label
htmlFor="email"
className="text-sm font-medium text-foreground"
>
Email address
</label>
<input
id="email"
type="email"
placeholder="name@student.university.edu"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
</div>

<div className="flex flex-col gap-1.5">
<label
htmlFor="password"
className="text-sm font-medium text-foreground"
>
Password
</label>
<input
id="password"
type="password"
placeholder="••••••••"
className="rounded-xl border border-border bg-background px-4 py-3 text-sm shadow-sm transition-colors focus:border-[#1D4ED8] focus:outline-none focus:ring-1 focus:ring-[#1D4ED8] dark:bg-muted/20"
required
/>
<p className="text-xs text-muted-foreground mt-1">
Must be at least 8 characters long.
</p>
</div>

<button
type="button"
className="group mt-2 flex w-full items-center justify-center gap-2 rounded-xl bg-[#1D4ED8] px-4 py-3.5 text-sm font-semibold text-white shadow-md transition-all hover:bg-[#1E40AF] hover:shadow-lg focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2 dark:bg-blue-600 dark:hover:bg-blue-700"
>
Create Account
<ArrowRight className="h-4 w-4 transition-transform group-hover:translate-x-1" />
</button>
</form>

<div className="relative mt-2">
<div className="absolute inset-0 flex items-center">
<div className="w-full border-t border-border" />
</div>
<div className="relative flex justify-center text-xs">
<span className="bg-background px-3 text-muted-foreground">
Or sign up with
</span>
</div>
</div>

<button
type="button"
className="flex w-full items-center justify-center gap-3 rounded-xl border border-border bg-background px-4 py-3.5 text-sm font-medium text-foreground shadow-sm transition-all hover:bg-muted/50 hover:shadow focus:outline-none focus-visible:ring-2 focus-visible:ring-[#1D4ED8] focus-visible:ring-offset-2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className="mr-2 h-5 w-5"
>
<path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
<path d="M9 18c-4.51 2-5-2-7-2" />
</svg>
GitHub
</button>

<p className="text-center text-sm text-muted-foreground mt-2">
Already have an account?{" "}
<Link
href="/sign-in"
className="font-semibold text-[#1D4ED8] transition-colors hover:text-[#1E40AF] hover:underline dark:text-blue-400 dark:hover:text-blue-300"
>
Sign in
</Link>
</p>
</div>
);
}
Loading