Skip to content

feat: redesign login page #40

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
fernandonogueira merged 1 commit into from
May 30, 2026
Merged

feat: redesign login page #40

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
Binary file modified bun.lockb
View file
Open in desktop
Binary file not shown.
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"antd": "^6.1.4",
"axios": "^1.13.2",
"dayjs": "^1.11.19",
"framer-motion": "^12.40.0",
"posthog-js": "^1.319.0",
"react": "^19.0.0",
"react-dom": "^19.0.0",
Expand Down
323 changes: 323 additions & 0 deletions src/pages/login/Login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,323 @@
.login-page {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh;
width: 100%;
background: #ffffff;
}

.login-brand {
position: relative;
overflow: hidden;
color: #ffffff;
padding: 56px 64px;
display: flex;
flex-direction: column;
justify-content: space-between;
isolation: isolate;
background:
radial-gradient(1200px 800px at 100% 0%, rgba(20, 184, 166, 0.35), transparent 55%),
linear-gradient(160deg, #0e7490 0%, #155e75 55%, #0f3a4d 100%);
}

.login-brand::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
linear-gradient(transparent 95%, rgba(255, 255, 255, 0.06) 95%),
linear-gradient(90deg, transparent 95%, rgba(255, 255, 255, 0.06) 95%);
background-size: 56px 56px;
mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 100%);
}

.login-brand-header {
display: flex;
align-items: center;
gap: 12px;
position: relative;
z-index: 1;
}

.login-brand-wordmark {
color: #ffffff;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.01em;
}

.login-brand-body {
position: relative;
z-index: 1;
max-width: 560px;
display: flex;
flex-direction: column;
gap: 40px;
}

.login-brand-copy {
max-width: 480px;
}

.login-brand-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.92);
border-radius: 999px;
font-size: 12.5px;
font-weight: 500;
letter-spacing: 0.02em;
margin-bottom: 22px;
}

.login-brand-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 999px;
background: #34d399;
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.22);
}

.login-brand-headline {
font-size: clamp(34px, 3.6vw, 46px);
line-height: 1.08;
font-weight: 700;
letter-spacing: -0.025em;
margin: 0 0 18px;
color: #ffffff;
}

.login-brand-sub {
font-size: 16px;
line-height: 1.55;
color: rgba(255, 255, 255, 0.74);
margin: 0;
max-width: 460px;
}

.login-preview {
position: relative;
border-radius: 14px;
background: rgba(15, 42, 56, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.4);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 13px;
color: rgba(255, 255, 255, 0.92);
overflow: hidden;
}

.login-preview-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.03);
}

.login-preview-title {
display: flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.78);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 12.5px;
}

.login-preview-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: 999px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
background: rgba(245, 158, 11, 0.16);
color: #fcd34d;
border: 1px solid rgba(245, 158, 11, 0.35);
}

.login-preview-body {
padding: 14px 16px 16px;
display: flex;
flex-direction: column;
gap: 10px;
}

.login-preview-resource {
color: rgba(255, 255, 255, 0.78);
}

.login-preview-resource .login-preview-marker {
color: #fcd34d;
margin-right: 8px;
}

.login-preview-line {
padding-left: 20px;
white-space: pre;
}

.login-preview-line.removed {
color: #fca5a5;
}

.login-preview-line.added {
color: #86efac;
}

.login-preview-footer {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 16px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
color: rgba(255, 255, 255, 0.72);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-size: 12.5px;
}

.login-preview-footer-dot {
width: 6px;
height: 6px;
border-radius: 999px;
background: #34d399;
}

.login-brand-footer {
position: relative;
z-index: 1;
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}

.login-action {
display: flex;
align-items: center;
justify-content: center;
padding: 48px 32px;
background: #ffffff;
}

.login-action-inner {
width: 100%;
max-width: 380px;
display: flex;
flex-direction: column;
align-items: stretch;
}

.login-action-mark {
width: 52px;
height: 52px;
border-radius: 12px;
background: linear-gradient(135deg, #0891b2 0%, #14b8a6 100%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-weight: 700;
font-size: 24px;
box-shadow: 0 8px 20px rgba(8, 145, 178, 0.28);
margin-bottom: 28px;
}

.login-action h2 {
font-size: 26px;
font-weight: 600;
color: #1e293b;
margin: 0 0 8px;
letter-spacing: -0.015em;
}

.login-action-sub {
color: #64748b;
font-size: 15px;
line-height: 1.5;
margin: 0 0 28px;
}

.login-github-button.ant-btn {
height: 48px;
font-size: 15px;
font-weight: 500;
border-radius: 10px;
box-shadow: 0 6px 16px rgba(8, 145, 178, 0.28);
}

.login-divider {
display: flex;
align-items: center;
gap: 12px;
color: #94a3b8;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
margin: 28px 0 4px;
}

.login-divider::before,
.login-divider::after {
content: "";
flex: 1;
height: 1px;
background: #e2e8f0;
}

.login-fineprint {
margin-top: 20px;
color: #94a3b8;
font-size: 12.5px;
line-height: 1.5;
text-align: center;
}

@media (max-width: 1180px) {
.login-brand {
padding: 48px 48px;
}
}

@media (max-width: 900px) {
.login-page {
grid-template-columns: 1fr;
}

.login-brand {
padding: 36px 24px 40px;
}

.login-brand-body {
gap: 28px;
}

.login-brand-headline {
font-size: 30px;
}

.login-preview {
font-size: 12.5px;
}

.login-brand-footer {
display: none;
}

.login-action {
padding: 40px 24px 56px;
}
}
Loading