Skip to content

Commit 3f1fafe

Browse files
mrepol742mrepol742
authored
Merge pull request hallofcodes#7 from 0x3EF8/ui-enhancements
style: UI improvements for landing, auth, and dashboard
2 parents 9615a7a + 5990335 commit 3f1fafe

12 files changed

Lines changed: 458 additions & 150 deletions

File tree

‎app/(auth)/login/page.tsx‎

Lines changed: 80 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import Link from "next/link";
22
import Image from "next/image";
33
import LoginForm from "@/app/components/auth/LoginForm";
44
import { Metadata } from "next";
5-
import Footer from "@/app/components/layout/Footer";
65

76
export const metadata: Metadata = {
87
title: "Login - DevPulse",
@@ -12,31 +11,91 @@ export const metadata: Metadata = {
1211

1312
export default async function Login() {
1413
return (
15-
<>
16-
<div className="min-h-screen flex items-center justify-center bg-[#0a0a1a] text-white px-4 grid-bg relative">
17-
<div className="glow-orb w-[400px] h-[400px] bg-indigo-600/10 top-1/4 left-1/2 -translate-x-1/2" />
18-
19-
<div className="w-full max-w-lg glass-card p-10 relative z-10">
20-
<div className="flex items-center gap-3 mb-2">
21-
<Image src="/logo.svg" alt="DevPulse Logo" width={36} height={36} />
22-
<h2 className="text-2xl font-bold gradient-text">DevPulse</h2>
23-
</div>
24-
<p className="mb-8 text-gray-400 text-sm">
25-
Welcome back! Please enter your credentials to log in.
14+
<div className="min-h-screen flex bg-[#0a0a1a] text-white">
15+
{/* Left Side - Visual / Branding */}
16+
<div className="hidden lg:flex lg:w-1/2 relative flex-col justify-between p-12 border-r border-white/5 bg-gradient-to-br from-[#0a0a1a] to-[#0a0a1a] overflow-hidden">
17+
{/* Background elements */}
18+
<div className="absolute inset-0 grid-bg opacity-30" />
19+
20+
<div className="relative z-10">
21+
<Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition">
22+
<Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
23+
<span className="text-2xl font-bold tracking-tight text-white">DevPulse</span>
24+
</Link>
25+
</div>
26+
27+
<div className="relative z-10 max-w-md">
28+
<h1 className="text-4xl font-extrabold mb-5 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400">
29+
Welcome back to your dashboard.
30+
</h1>
31+
<p className="text-gray-400 text-lg leading-relaxed mb-8">
32+
Access your personalized coding metrics, compare your stats, and keep your productivity streak alive.
2633
</p>
34+
35+
<div className="glass-card border border-white/5 rounded-2xl p-5 bg-white/5 backdrop-blur-md shadow-2xl">
36+
<div className="flex items-center gap-2 mb-4">
37+
<div className="w-3 h-3 rounded-full bg-red-500/80"></div>
38+
<div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
39+
<div className="w-3 h-3 rounded-full bg-green-500/80"></div>
40+
<span className="ml-2 text-xs font-mono text-gray-500">devpulse-auth.ts</span>
41+
</div>
42+
<div className="space-y-1.5 font-mono text-sm">
43+
<div className="flex">
44+
<span className="text-indigo-400 mr-2">import</span>
45+
<span className="text-gray-200">{"{ Metrics }"}</span>
46+
<span className="text-indigo-400 mx-2">from</span>
47+
<span className="text-green-400">&apos;@devpulse/core&apos;</span>
48+
<span className="text-gray-400">;</span>
49+
</div>
50+
<div className="flex mt-2">
51+
<span className="text-purple-400 mr-2">await</span>
52+
<span className="text-blue-400">Metrics</span>
53+
<span className="text-gray-200">.</span>
54+
<span className="text-yellow-200">syncToday</span>
55+
<span className="text-gray-200">();</span>
56+
</div>
57+
<div className="flex mt-3">
58+
<span className="text-emerald-400/80">
59+
{"// Connection established. Ready to track. ⚡"}
60+
</span>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<div className="relative z-10 text-sm text-gray-500 font-medium">
67+
&copy; {new Date().getFullYear()} DevPulse. All rights reserved.
68+
</div>
69+
</div>
70+
71+
{/* Right Side - Form */}
72+
<div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-8 sm:p-12 xl:p-20 relative">
73+
<div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
74+
75+
<div className="w-full max-w-sm relative z-10">
76+
<div className="lg:hidden flex items-center justify-center gap-3 mb-10">
77+
<Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
78+
<h2 className="text-3xl font-bold text-white">DevPulse</h2>
79+
</div>
80+
81+
<div className="mb-8 text-left">
82+
<h2 className="text-3xl font-bold text-white mb-2">Log in</h2>
83+
<p className="text-gray-400">Enter your credentials to access your account.</p>
84+
</div>
2785

2886
<LoginForm />
2987

30-
<Link
31-
href="/signup"
32-
className="block mt-6 text-center text-sm text-gray-500 hover:text-gray-300 transition"
33-
>
34-
Don&apos;t have an account? <span className="text-indigo-400">Sign Up</span>
35-
</Link>
88+
<p className="mt-8 text-center text-sm text-gray-400">
89+
Don&apos;t have an account?{" "}
90+
<Link
91+
href="/signup"
92+
className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
93+
>
94+
Sign up
95+
</Link>
96+
</p>
3697
</div>
3798
</div>
38-
39-
<Footer />
40-
</>
99+
</div>
41100
);
42101
}

‎app/(auth)/signup/page.tsx‎

Lines changed: 81 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import Link from "next/link";
22
import Image from "next/image";
33
import SignupForm from "@/app/components/auth/SignupForm";
44
import { Metadata } from "next";
5-
import Footer from "@/app/components/layout/Footer";
65

76
export const metadata: Metadata = {
87
title: "Sign Up - DevPulse",
@@ -12,33 +11,93 @@ export const metadata: Metadata = {
1211

1312
export default async function Signup() {
1413
return (
15-
<>
16-
<div className="min-h-screen flex items-center justify-center bg-[#0a0a1a] text-white px-4 grid-bg relative">
17-
<div className="glow-orb w-[400px] h-[400px] bg-purple-600/10 top-1/4 left-1/2 -translate-x-1/2" />
18-
19-
<div className="w-full max-w-lg glass-card p-10 relative z-10">
20-
<div className="flex items-center gap-3 mb-2">
21-
<Image src="/logo.svg" alt="DevPulse Logo" width={36} height={36} />
22-
<h2 className="text-2xl font-bold gradient-text">DevPulse</h2>
23-
</div>
24-
<p className="mb-8 text-gray-400 text-sm">
25-
Create your account to start monitoring your coding activity and
26-
competing on leaderboards!
14+
<div className="min-h-screen flex bg-[#0a0a1a] text-white">
15+
{/* Left Side - Visual / Branding */}
16+
<div className="hidden lg:flex lg:w-1/2 relative flex-col justify-between p-12 border-r border-white/5 bg-gradient-to-br from-[#0a0a1a] to-[#0a0a1a] overflow-hidden">
17+
{/* Background elements */}
18+
<div className="absolute inset-0 grid-bg opacity-30" />
19+
20+
<div className="relative z-10">
21+
<Link href="/" className="flex items-center gap-3 w-fit hover:opacity-80 transition">
22+
<Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
23+
<span className="text-2xl font-bold tracking-tight text-white">DevPulse</span>
24+
</Link>
25+
</div>
26+
27+
<div className="relative z-10 max-w-md">
28+
<h1 className="text-4xl font-extrabold mb-5 leading-tight text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-400">
29+
Start measuring your coding pulse.
30+
</h1>
31+
<p className="text-gray-400 text-lg leading-relaxed mb-8">
32+
Join thousands of developers tracking their progress, competing on leaderboards, and leveling up their skills.
2733
</p>
34+
35+
<div className="glass-card border border-white/5 rounded-2xl p-5 bg-white/5 backdrop-blur-md shadow-2xl">
36+
<div className="flex items-center gap-2 mb-4">
37+
<div className="w-3 h-3 rounded-full bg-red-500/80"></div>
38+
<div className="w-3 h-3 rounded-full bg-yellow-500/80"></div>
39+
<div className="w-3 h-3 rounded-full bg-green-500/80"></div>
40+
<span className="ml-2 text-xs font-mono text-gray-500">setup.ts</span>
41+
</div>
42+
<div className="space-y-1.5 font-mono text-sm">
43+
<div className="flex">
44+
<span className="text-purple-400 mr-2">const</span>
45+
<span className="text-blue-400">dev</span>
46+
<span className="text-gray-200 mx-2">=</span>
47+
<span className="text-indigo-400 mr-2">new</span>
48+
<span className="text-yellow-200">Developer</span>
49+
<span className="text-gray-200">();</span>
50+
</div>
51+
<div className="flex mt-2">
52+
<span className="text-blue-400">dev</span>
53+
<span className="text-gray-200">.</span>
54+
<span className="text-yellow-200">connect</span>
55+
<span className="text-gray-200">(</span>
56+
<span className="text-green-400">&apos;wakatime&apos;</span>
57+
<span className="text-gray-200">);</span>
58+
</div>
59+
<div className="flex mt-3">
60+
<span className="text-emerald-400/80">
61+
{"// Your journey begins here. 🚀"}
62+
</span>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<div className="relative z-10 text-sm text-gray-500 font-medium">
69+
&copy; {new Date().getFullYear()} DevPulse. All rights reserved.
70+
</div>
71+
</div>
72+
73+
{/* Right Side - Form */}
74+
<div className="w-full lg:w-1/2 flex flex-col justify-center items-center p-8 sm:p-12 xl:p-20 relative">
75+
<div className="absolute inset-0 grid-bg opacity-20 lg:hidden" />
76+
77+
<div className="w-full max-w-sm relative z-10">
78+
<div className="lg:hidden flex items-center justify-center gap-3 mb-10">
79+
<Image src="/logo.svg" alt="DevPulse Logo" width={40} height={40} />
80+
<h2 className="text-3xl font-bold text-white">DevPulse</h2>
81+
</div>
82+
83+
<div className="mb-8 text-left">
84+
<h2 className="text-3xl font-bold text-white mb-2">Create an account</h2>
85+
<p className="text-gray-400">Start tracking your coding stats today.</p>
86+
</div>
2887

2988
<SignupForm />
3089

31-
<Link
32-
href="/login"
33-
className="block mt-6 text-center text-sm text-gray-500 hover:text-gray-300 transition"
34-
>
90+
<p className="mt-8 text-center text-sm text-gray-400">
3591
Already have an account?{" "}
36-
<span className="text-indigo-400">Log In</span>
37-
</Link>
92+
<Link
93+
href="/login"
94+
className="text-indigo-400 hover:text-indigo-300 font-semibold transition-colors underline-offset-4 hover:underline"
95+
>
96+
Log in
97+
</Link>
98+
</p>
3899
</div>
39100
</div>
40-
41-
<Footer />
42-
</>
101+
</div>
43102
);
44103
}

‎app/(public)/leaderboard/[slug]/page.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ export default async function LeaderboardPage(props: {
5151

5252
return (
5353
<div className="min-h-screen bg-[#0a0a1a] text-white grid-bg relative">
54-
<div className="glow-orb w-[400px] h-[400px] bg-indigo-600/8 top-0 right-1/4" />
55-
5654
<div className="max-w-5xl mx-auto p-6 md:p-10 relative z-10">
5755
<LeaderboardHeader leaderboard={leaderboard} isOwner={isOwner} />
5856
<LeaderboardTable

‎app/(user)/update-password/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export default async function UpdatePassword() {
1212
return (
1313
<>
1414
<div className="min-h-screen flex items-center justify-center bg-[#0a0a1a] text-white px-4 grid-bg relative">
15-
<div className="glow-orb w-[400px] h-[400px] bg-purple-600/10 top-1/4 left-1/2 -translate-x-1/2" />
1615

1716
<div className="w-full max-w-lg glass-card p-10 relative z-10">
1817
<div className="flex items-center gap-3 mb-2">

‎app/components/dashboard/LeaderbordList.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import Link from "next/link";
21
import { createClient } from "../../lib/supabase/server";
32
import BoardList from "../BoardList";
43

@@ -22,13 +21,18 @@ export default async function LeaderboardsList() {
2221
.eq("user_id", user.id)
2322
.neq("role", "owner");
2423

24+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
2525
const joinedBoards = joined?.map((j: any) => j.leaderboards) || [];
2626

2727
const ownedCount = owned?.length || 0;
2828
const joinedCount = joinedBoards.length;
2929

3030
return (
31-
<div className="glass-card p-6 h-full">
31+
<div
32+
className="glass-card p-6 h-full"
33+
data-aos="fade-up"
34+
data-aos-delay="200"
35+
>
3236
<div className="flex items-center justify-between mb-5">
3337
<h3 className="text-xs font-semibold text-indigo-400 uppercase tracking-widest">
3438
Your Leaderboards
@@ -57,7 +61,7 @@ export default async function LeaderboardsList() {
5761
<p className="text-[10px] uppercase tracking-widest text-gray-700 font-semibold mt-4 mb-2">
5862
Joined ({joinedCount})
5963
</p>
60-
{joinedBoards.map((board: any) => (
64+
{joinedBoards.map((board: { id: string; name: string; slug: string; join_code: string }) => (
6165
<BoardList key={board.id} board={board} />
6266
))}
6367
</>

‎app/components/dashboard/Navbar.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,6 @@ export default function DashboardLayout({
167167
collapsed ? "ml-[68px]" : "ml-[240px]"
168168
}`}
169169
>
170-
<div className="glow-orb w-[500px] h-[500px] bg-indigo-600/5 top-0 right-0" />
171-
<div className="glow-orb w-[300px] h-[300px] bg-purple-600/5 bottom-0 left-1/3" />
172-
173170
<div className="relative z-10">{children}</div>
174171
</main>
175172
</div>

‎app/components/dashboard/Settings/Profile.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@
33
import { useState } from "react";
44
import { createClient } from "../../../lib/supabase/client";
55
import { toast } from "react-toastify";
6+
import type { User } from "@supabase/supabase-js";
67

7-
export default function UserProfile({ user }: any) {
8+
export default function UserProfile({ user }: { user: User }) {
89
const supabase = createClient();
910
const [originalName, setOriginalName] = useState(
1011
user?.user_metadata?.name || "",

‎app/components/dashboard/Settings/ResetPassword.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ import { useRef, useState } from "react";
44
import { createClient } from "../../../lib/supabase/client";
55
import { toast } from "react-toastify";
66
import HCaptcha from "@hcaptcha/react-hcaptcha";
7+
import { User } from "@supabase/supabase-js";
78

8-
export default function ResetPassword({ user }: any) {
9+
export default function ResetPassword({ user }: { user: User }) {
910
const supabase = createClient();
1011
const [email] = useState(user?.email || "");
1112
const [loading, setLoading] = useState(false);

0 commit comments

Comments
 (0)