Skip to content

Commit c66cff3

Browse files
author
Aysel
committed
completed static onboarding page
1 parent bce6c7a commit c66cff3

2 files changed

Lines changed: 167 additions & 0 deletions

File tree

‎apps/frontend/app/login/page.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
// apps/frontend/app/login/page.tsx
2+
export default function LoginPage() {
3+
return (
4+
<div className="flex min-h-screen items-center justify-center bg-white p-4">
5+
<div className="w-full max-w-md border border-black rounded-lg p-8 space-y-6">
6+
<h1 className="text-4xl text-center mb-8">Login</h1>
7+
8+
<div className="space-y-4">
9+
<div>
10+
<label className="block text-sm font-medium mb-1">Email</label>
11+
<input type="email" className="w-full p-2 border border-black rounded-sm" />
12+
</div>
13+
14+
<div>
15+
<label className="block text-sm font-medium mb-1">Password</label>
16+
<input type="password" className="w-full p-2 border border-black rounded-sm" />
17+
<div className="text-right mt-1">
18+
<button className="text-xs hover:underline">Forgot Password?</button>
19+
</div>
20+
</div>
21+
</div>
22+
23+
<button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors text-lg">
24+
Login
25+
</button>
26+
27+
<div className="relative border-t border-gray-400 my-8">
28+
<span className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-2"></span>
29+
</div>
30+
31+
<div className="space-y-3">
32+
<button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
33+
Login with Github
34+
</button>
35+
<button className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors">
36+
Login with Google
37+
</button>
38+
</div>
39+
40+
<p className="text-center text-sm mt-4">
41+
Dont have an account? <a href="/signup" className="hover:underline font-semibold">Register</a>
42+
</p>
43+
</div>
44+
</div>
45+
);
46+
}

‎apps/frontend/app/signup/page.tsx‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import Link from "next/link";
5+
6+
export default function SignupPage() {
7+
const [isSignedUp, setIsSignedUp] = useState(false);
8+
9+
// --- Onboarding View (Matches Figma) ---
10+
if (isSignedUp) {
11+
return (
12+
<div className="flex min-h-screen items-center justify-center bg-white p-4">
13+
<div className="w-full max-w-lg border border-black rounded-lg p-8 relative">
14+
{/* Back Arrow to return to Register */}
15+
<button
16+
onClick={() => setIsSignedUp(false)}
17+
className="absolute top-8 left-8 text-xl"
18+
>
19+
←
20+
</button>
21+
22+
<div className="text-center mb-8">
23+
<h1 className="text-3xl font-medium">Welcome to CS+SG</h1>
24+
<p className="text-sm">Set up your basic profile</p>
25+
</div>
26+
27+
<div className="flex gap-8 mb-6">
28+
{/* Avatar Section */}
29+
<div className="relative">
30+
<div className="w-32 h-32 rounded-full border border-black flex items-center justify-center overflow-hidden">
31+
<div className="relative w-full h-full">
32+
<div className="absolute inset-0 border-t border-black rotate-45 origin-center scale-150"></div>
33+
<div className="absolute inset-0 border-t border-black -rotate-45 origin-center scale-150"></div>
34+
</div>
35+
</div>
36+
<button className="absolute bottom-0 right-0 bg-white border border-black rounded-full p-1 w-8 h-8 flex items-center justify-center">
37+
✎
38+
</button>
39+
</div>
40+
41+
{/* Identity Fields */}
42+
<div className="flex-1 space-y-4">
43+
<div>
44+
<label className="block text-sm mb-1">First Name</label>
45+
<input type="text" className="w-full border border-black p-2 rounded-sm" />
46+
</div>
47+
<div>
48+
<label className="block text-sm mb-1">Last Name</label>
49+
<input type="text" className="w-full border border-black p-2 rounded-sm" />
50+
</div>
51+
<div>
52+
<label className="block text-sm mb-1">Pronouns</label>
53+
<select className="w-full border border-black p-2 rounded-sm bg-white">
54+
<option value=""></option>
55+
<option value="he-him">He/Him</option>
56+
<option value="she-her">She/Her</option>
57+
<option value="they-them">They/Them</option>
58+
</select>
59+
</div>
60+
</div>
61+
</div>
62+
63+
{/* Links Section */}
64+
<div className="space-y-2">
65+
<label className="block text-sm">Links</label>
66+
<div className="flex gap-2">
67+
<input type="text" className="flex-1 border border-black p-2 rounded-sm" />
68+
<button className="border border-black px-4 py-2 hover:bg-gray-100 transition-colors">
69+
Add
70+
</button>
71+
</div>
72+
<div className="space-y-1">
73+
<div className="flex items-center gap-2 border-b border-gray-400 py-2">
74+
<span className="text-sm cursor-pointer hover:text-red-500">✕</span>
75+
</div>
76+
<div className="flex items-center gap-2 border-b border-gray-400 py-2">
77+
<span className="text-sm cursor-pointer hover:text-red-500">✕</span>
78+
</div>
79+
</div>
80+
</div>
81+
82+
<button className="w-full mt-8 text-center font-medium hover:underline">
83+
Done
84+
</button>
85+
</div>
86+
</div>
87+
);
88+
}
89+
90+
// --- Register View ---
91+
return (
92+
<div className="flex min-h-screen items-center justify-center bg-white p-4">
93+
<div className="w-full max-w-md border border-black rounded-lg p-8 space-y-6">
94+
<h1 className="text-4xl text-center mb-8">Register</h1>
95+
96+
<div className="space-y-4">
97+
<div>
98+
<label className="block text-sm font-medium mb-1">Email</label>
99+
<input type="email" className="w-full p-2 border border-black rounded-sm" />
100+
</div>
101+
102+
<div>
103+
<label className="block text-sm font-medium mb-1">Password</label>
104+
<input type="password" className="w-full p-2 border border-black rounded-sm" />
105+
</div>
106+
</div>
107+
108+
<button
109+
onClick={() => setIsSignedUp(true)}
110+
className="w-full py-3 bg-gray-200 hover:bg-gray-300 rounded transition-colors text-lg"
111+
>
112+
Register
113+
</button>
114+
115+
<p className="text-center text-sm mt-4">
116+
Have an account? <Link href="/login" className="hover:underline font-semibold">Login</Link>
117+
</p>
118+
</div>
119+
</div>
120+
);
121+
}

0 commit comments

Comments
 (0)