Skip to content

Commit f971e7a

Browse files
cliff-de-techcliff-de-tech
committed
feat: Add custom branded sign-in and sign-up pages
- Sign-in: Blue gradient with features list, social proof stats - Sign-up: Purple gradient with value props, user avatars - Split layout: Branding on left, Clerk form on right - Dark mode support, responsive design - Custom Clerk component styling
1 parent 1fa732d commit f971e7a

File tree

2 files changed

+337
-4
lines changed

2 files changed

+337
-4
lines changed

‎web/src/pages/sign-in/[[...index]].tsx‎

Lines changed: 163 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,170 @@
11
import { SignIn } from "@clerk/nextjs";
2+
import Link from "next/link";
3+
import { useRouter } from "next/router";
4+
import { useEffect, useState } from "react";
25

36
export default function SignInPage() {
7+
const router = useRouter();
8+
const [mounted, setMounted] = useState(false);
9+
10+
useEffect(() => {
11+
setMounted(true);
12+
}, []);
13+
14+
if (!mounted) {
15+
return null;
16+
}
17+
418
return (
5-
<div className="min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-900">
6-
<SignIn path="/sign-in" routing="path" signUpUrl="/sign-up" />
19+
<div className="min-h-screen flex">
20+
{/* Left Side - Branding */}
21+
<div className="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-blue-600 via-purple-600 to-indigo-700 relative overflow-hidden">
22+
{/* Background Pattern */}
23+
<div className="absolute inset-0 opacity-10">
24+
<div className="absolute top-20 left-20 w-72 h-72 bg-white rounded-full blur-3xl"></div>
25+
<div className="absolute bottom-20 right-20 w-96 h-96 bg-white rounded-full blur-3xl"></div>
26+
</div>
27+
28+
<div className="relative z-10 flex flex-col justify-center px-12 xl:px-20 text-white">
29+
{/* Logo */}
30+
<div className="flex items-center gap-3 mb-12">
31+
<div className="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
32+
<svg className="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24">
33+
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
34+
</svg>
35+
</div>
36+
<span className="text-2xl font-bold">Post Bot</span>
37+
</div>
38+
39+
{/* Main Heading */}
40+
<h1 className="text-4xl xl:text-5xl font-bold mb-6 leading-tight">
41+
Turn your code into<br />
42+
<span className="text-blue-200">professional content</span>
43+
</h1>
44+
45+
<p className="text-lg text-blue-100 mb-10 max-w-md">
46+
Transform your GitHub activity into engaging LinkedIn posts with AI-powered content generation.
47+
</p>
48+
49+
{/* Features */}
50+
<div className="space-y-4">
51+
<div className="flex items-center gap-3">
52+
<div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
53+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
54+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
55+
</svg>
56+
</div>
57+
<span className="text-blue-100">Scan GitHub commits, PRs, and pushes</span>
58+
</div>
59+
<div className="flex items-center gap-3">
60+
<div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
61+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
62+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
63+
</svg>
64+
</div>
65+
<span className="text-blue-100">AI generates professional posts</span>
66+
</div>
67+
<div className="flex items-center gap-3">
68+
<div className="w-8 h-8 bg-white/20 rounded-lg flex items-center justify-center">
69+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
70+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
71+
</svg>
72+
</div>
73+
<span className="text-blue-100">One-click publish to LinkedIn</span>
74+
</div>
75+
</div>
76+
77+
{/* Testimonial/Stats */}
78+
<div className="mt-12 pt-8 border-t border-white/20">
79+
<div className="flex items-center gap-8">
80+
<div>
81+
<div className="text-3xl font-bold">10K+</div>
82+
<div className="text-sm text-blue-200">Posts Generated</div>
83+
</div>
84+
<div>
85+
<div className="text-3xl font-bold">500+</div>
86+
<div className="text-sm text-blue-200">Active Users</div>
87+
</div>
88+
<div>
89+
<div className="text-3xl font-bold">4.9★</div>
90+
<div className="text-sm text-blue-200">User Rating</div>
91+
</div>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
97+
{/* Right Side - Sign In Form */}
98+
<div className="w-full lg:w-1/2 flex items-center justify-center p-8 bg-gray-50 dark:bg-gray-900">
99+
<div className="w-full max-w-md">
100+
{/* Mobile Logo */}
101+
<div className="lg:hidden flex items-center justify-center gap-3 mb-8">
102+
<div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center">
103+
<svg className="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
104+
<path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" />
105+
</svg>
106+
</div>
107+
<span className="text-xl font-bold text-gray-900 dark:text-white">Post Bot</span>
108+
</div>
109+
110+
{/* Header */}
111+
<div className="text-center mb-8">
112+
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
113+
Welcome back
114+
</h2>
115+
<p className="text-gray-600 dark:text-gray-400">
116+
Sign in to continue to your dashboard
117+
</p>
118+
</div>
119+
120+
{/* Clerk Sign In Component */}
121+
<div className="clerk-container">
122+
<SignIn
123+
path="/sign-in"
124+
routing="path"
125+
signUpUrl="/sign-up"
126+
appearance={{
127+
elements: {
128+
rootBox: "mx-auto w-full",
129+
card: "shadow-none bg-transparent",
130+
headerTitle: "hidden",
131+
headerSubtitle: "hidden",
132+
socialButtonsBlockButton: "bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors",
133+
formButtonPrimary: "bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all",
134+
footerActionLink: "text-blue-600 hover:text-blue-700",
135+
formFieldInput: "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600",
136+
formFieldLabel: "text-gray-700 dark:text-gray-300",
137+
identityPreviewEditButton: "text-blue-600",
138+
formResendCodeLink: "text-blue-600",
139+
}
140+
}}
141+
/>
142+
</div>
143+
144+
{/* Footer */}
145+
<div className="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
146+
<p>
147+
Don&apos;t have an account?{' '}
148+
<Link href="/sign-up" className="text-blue-600 hover:text-blue-700 font-medium">
149+
Sign up for free
150+
</Link>
151+
</p>
152+
</div>
153+
154+
{/* Back to Home */}
155+
<div className="mt-6 text-center">
156+
<Link
157+
href="/"
158+
className="text-sm text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 inline-flex items-center gap-1"
159+
>
160+
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
161+
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
162+
</svg>
163+
Back to home
164+
</Link>
165+
</div>
166+
</div>
167+
</div>
7168
</div>
8169
);
9170
}

0 commit comments

Comments
 (0)