From abce00ca4745ac1051c2263fa29adc7363d4f971 Mon Sep 17 00:00:00 2001 From: Firman Ramdhani <33869609+firmanramdhani@users.noreply.github.com> Date: Mon, 27 Jul 2026 22:57:16 +0700 Subject: [PATCH] feat: UI login page --- apps/web/src/apps/auth/login/index.tsx | 314 ++++++++++++++++++++++++- apps/web/src/main.css | 29 +++ 2 files changed, 342 insertions(+), 1 deletion(-) diff --git a/apps/web/src/apps/auth/login/index.tsx b/apps/web/src/apps/auth/login/index.tsx index fb9b00c..4667697 100644 --- a/apps/web/src/apps/auth/login/index.tsx +++ b/apps/web/src/apps/auth/login/index.tsx @@ -1,3 +1,315 @@ +import { TextInput, PasswordInput, Checkbox, Button, Divider } from '@repo/ui/components'; +import { Mail, Lock, LogIn, Apple, Globe, MessageCircle } from 'lucide-react'; + +const GoogleIcon = (props: any) => ( + + + + + + +); + +const MicrosoftIcon = (props: any) => ( + + + + + + +); + +const AndroidIcon = (props: any) => ( + + + + +); + +const ChromeIcon = (props: any) => ( + + + + + + +); + +const Ring = ({ size }: { size: number }) => ( +
+); + +const IconCircle = ({ x, y, children }: { x: number; y: number; children: React.ReactNode }) => ( +
+ {children} +
+); + export default function LoginPage() { - return
Login Page
; + return ( +
+ {/* Left Column - Login Form */} +
+ {/* Logo (Top Left) */} +
+ {/* Image Logo (Uncomment and set src to your logo path) */} + {/* Logo */} + + {/* Text Logo (Remove if using image) */} +
+ E +
+
Eigen
+
+ +
+ {/* Header */} +
+
+
+
+
+ +
+
+ +

+ Login to your account! +

+

+ Enter your registered email address and password to login! +

+ + {/* Form */} +
+ } + size="md" + styles={{ + label: { color: '#64748b', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }, + input: { borderRadius: '10px', border: '1px solid #e2e8f0', color: '#1e293b' }, + }} + /> + + } + size="md" + styles={{ + label: { color: '#64748b', fontSize: '13px', fontWeight: 500, marginBottom: '6px' }, + input: { borderRadius: '10px', border: '1px solid #e2e8f0', color: '#1e293b' }, + }} + /> + + + + + + + +
+ + + +
+
+
+
+ + {/* Right Column - Graphic */} +
+ {/* 1. Glossy & Glassmorphic Orbs */} +
+
+
+

+ Write Better{' '} + + Everywhere + +

+ + {/* Graphics Area */} +
+ {/* Concentric Rings */} + + + + + + {/* Center Logo */} +
+
+ {/* Glowing backdrop */} +
+ {/* Custom P/Pen Logo from reference */} + + + + + +
+
+ + {/* Orbiting Icons */} + + {/* Ring 1 (r=100) */} +
+ + + +
+ +
+ + + +
+ + {/* Ring 2 (r=150) */} +
+ + + +
+ +
+ + y! + +
+ + {/* Ring 3 (r=210) */} +
+ + + +
+ +
+ + + +
+ + {/* Ring 4 (r=270) */} +
+ + + +
+
+ +

+ Compatible with{' '} + Gmail, Outlook Web, LinkedIn and most web editors for + a smooth writing experience anywhere online. +

+ + {/* Pagination Indicators */} +
+
+
+
+
+
+
+ ); } diff --git a/apps/web/src/main.css b/apps/web/src/main.css index 1a6a0b5..1e9abaa 100644 --- a/apps/web/src/main.css +++ b/apps/web/src/main.css @@ -1,3 +1,32 @@ @import 'tailwindcss'; @import '@repo/ui/theme.css'; @source "../../../packages/ui/src"; + +/* ========================================= + ANIMATION: FLOATING + ========================================= */ + +/* --- Keyframes Definition --- */ +@keyframes floating { + 0%, + 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); /* Peak float distance (adjust as needed) */ + } +} + +/* --- Main Utility Class --- */ +.animate-floating { + animation: floating 4s ease-in-out infinite; +} + +/* --- Speed Variations (Optional) --- */ +.animate-floating-fast { + animation: floating 3s ease-in-out infinite; +} + +.animate-floating-slow { + animation: floating 5s ease-in-out infinite; +}