feat: redesign login and splash screen with playful visual lift

src/frontend/routes/index.tsx

@@ -1,7 +1,6 @@
-import { Button, Container, Group, Stack, Text, Title } from '@mantine/core'
+import { Button, Box, Center, Stack, Text, Title } from '@mantine/core'
 import { Link, createFileRoute } from '@tanstack/react-router'
-import { SiBun } from 'react-icons/si'
+import { TbLogin } from 'react-icons/tb'
-import { TbBrandReact, TbLogin, TbRocket } from 'react-icons/tb'
 
 export const Route = createFileRoute('/')({
   component: HomePage,
@@ -9,28 +8,67 @@ export const Route = createFileRoute('/')({
 
 function HomePage() {
   return (
-    <Container size="sm" py="xl">
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
-      <Stack align="center" gap="lg">
+      {/* background blobs */}
-        <Group gap="lg">
+      <Box style={{
-          <SiBun size={64} color="#fbf0df" />
+        position: 'absolute', top: '-15%', left: '-10%',
-          <TbBrandReact size={64} color="#61dafb" />
+        width: 500, height: 500, borderRadius: '50%',
-        </Group>
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
 
-        <Title order={1}>Bun + Elysia + Vite + React</Title>
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
+        <Stack align="center" gap="xl">
+          <img
+            src="/src/logo.svg"
+            width={72}
+            height={72}
+            alt="logo"
+            style={{ borderRadius: 20, boxShadow: '0 4px 32px rgba(124,58,237,0.5)', display: 'block' }}
+          />
 
-        <Text c="dimmed" ta="center" maw={480}>
+          <Stack align="center" gap={8}>
-          Full-stack starter template with Mantine UI, TanStack Router, and session-based auth.
+            <Title
-        </Text>
+              order={1}
+              c="white"
+              fw={800}
+              ta="center"
+              style={{ fontSize: '2.6rem', letterSpacing: '-0.5px', lineHeight: 1.15 }}
+            >
+              Monitoring System
+            </Title>
+            <Text c="dimmed" ta="center" size="md" maw={320} lh={1.6}>
+              Pantau semua aplikasi dalam satu tempat, real-time.
+            </Text>
+          </Stack>
 
-        <Group>
+          <Button
-          <Button component={Link} to="/login" leftSection={<TbLogin size={18} />} variant="filled">
+            component={Link}
-            Login
+            to="/login"
+            leftSection={<TbLogin size={18} />}
+            size="md"
+            style={{
+              background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+              border: 'none',
+              paddingInline: 32,
+            }}
+          >
+            Masuk
           </Button>
-          <Button component={Link} to="/dashboard" leftSection={<TbRocket size={18} />} variant="light">
+        </Stack>
-            Dashboard
+      </Center>
-          </Button>
+    </Box>
-        </Group>
-      </Stack>
-    </Container>
   )
 }

src/frontend/routes/login.tsx

@@ -1,10 +1,10 @@
 import { useLogin } from '@/frontend/hooks/useAuth'
 import {
   Alert,
+  Box,
   Button,
   Center,
   Divider,
-  Paper,
   PasswordInput,
   Stack,
   Text,
@@ -38,6 +38,14 @@ export const Route = createFileRoute('/login')({
   component: LoginPage,
 })
 
+const OAUTH_ERRORS: Record<string, string> = {
+  google_denied: 'Login dengan Google dibatalkan.',
+  invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
+  token_failed: 'Gagal menukar token Google, silakan coba lagi.',
+  userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
+  account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
+}
+
 function LoginPage() {
   const login = useLogin()
   const { error: searchError } = Route.useSearch()
@@ -49,69 +57,117 @@ function LoginPage() {
     login.mutate({ email, password })
   }
 
+  const errorMessage = login.isError
+    ? login.error.message
+    : searchError
+      ? (OAUTH_ERRORS[searchError] ?? 'Login dengan Google gagal, silakan coba lagi.')
+      : null
+
   return (
-    <Center mih="100vh">
+    <Box style={{ minHeight: '100vh', background: '#1a1a2e', position: 'relative', overflow: 'hidden' }}>
-      <Paper shadow="md" p="xl" radius="md" w={400} withBorder>
+      {/* background blobs */}
-        <form onSubmit={handleSubmit}>
+      <Box style={{
-          <Stack gap="md">
+        position: 'absolute', top: '-15%', left: '-10%',
-            <Title order={2} ta="center">
+        width: 500, height: 500, borderRadius: '50%',
-              Login
+        background: 'radial-gradient(circle, rgba(124,58,237,0.25) 0%, transparent 70%)',
-            </Title>
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', bottom: '-20%', right: '-10%',
+        width: 600, height: 600, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(79,70,229,0.2) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
+      <Box style={{
+        position: 'absolute', top: '50%', left: '60%',
+        width: 300, height: 300, borderRadius: '50%',
+        background: 'radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%)',
+        pointerEvents: 'none',
+      }} />
 
-            {(login.isError || searchError) && (
+      <Center mih="100vh" style={{ position: 'relative', zIndex: 1 }}>
-              <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
+        <Box
-                {login.isError ? login.error.message : (
+          p="xl"
-                  {
+          w={400}
-                    google_denied: 'Login dengan Google dibatalkan.',
+          style={{
-                    invalid_state: 'Sesi OAuth tidak valid, silakan coba lagi.',
+            background: 'rgba(36,36,36,0.75)',
-                    token_failed: 'Gagal menukar token Google, silakan coba lagi.',
+            backdropFilter: 'blur(20px)',
-                    userinfo_failed: 'Gagal mengambil info akun Google, silakan coba lagi.',
+            borderRadius: 20,
-                    account_disabled: 'Akun Anda telah dinonaktifkan. Hubungi admin untuk informasi lebih lanjut.',
+            border: '1px solid rgba(124,58,237,0.35)',
-                  }[searchError ?? ''] ?? 'Login dengan Google gagal, silakan coba lagi.'
+            boxShadow: '0 0 0 1px rgba(124,58,237,0.1), 0 8px 32px rgba(0,0,0,0.4), 0 0 60px rgba(124,58,237,0.12)',
-                )}
+          }}
-              </Alert>
+        >
-            )}
+          <form onSubmit={handleSubmit}>
+            <Stack gap="md">
+              {/* header */}
+              <Stack gap={8} align="center" mb={4}>
+                <img
+                  src="/src/logo.svg"
+                  width={56}
+                  height={56}
+                  alt="logo"
+                  style={{ borderRadius: 14, boxShadow: '0 4px 20px rgba(124,58,237,0.45)', display: 'block' }}
+                />
+                <Title order={2} fw={700} ta="center" c="white">
+                  Monitoring System
+                </Title>
+                <Text c="dimmed" size="sm" ta="center">
+                  Masuk untuk melanjutkan
+                </Text>
+              </Stack>
 
-            <TextInput
+              {errorMessage && (
-              label="Email"
+                <Alert icon={<TbAlertCircle size={16} />} color="red" variant="light">
-              placeholder="email@example.com"
+                  {errorMessage}
-              leftSection={<TbMail size={16} />}
+                </Alert>
-              value={email}
+              )}
-              onChange={(e) => setEmail(e.currentTarget.value)}
-              required
-            />
 
-            <PasswordInput
+              <TextInput
-              label="Password"
+                label="Email"
-              placeholder="Password"
+                placeholder="email@example.com"
-              leftSection={<TbLock size={16} />}
+                leftSection={<TbMail size={16} />}
-              value={password}
+                value={email}
-              onChange={(e) => setPassword(e.currentTarget.value)}
+                onChange={(e) => setEmail(e.currentTarget.value)}
-              required
+                required
-            />
+              />
 
-            <Button
+              <PasswordInput
-              type="submit"
+                label="Password"
-              fullWidth
+                placeholder="Password"
-              leftSection={<TbLogin size={18} />}
+                leftSection={<TbLock size={16} />}
-              loading={login.isPending}
+                value={password}
-            >
+                onChange={(e) => setPassword(e.currentTarget.value)}
-              Sign in
+                required
-            </Button>
+              />
 
-            <Divider label="or" labelPosition="center" />
+              <Button
+                type="submit"
+                fullWidth
+                leftSection={<TbLogin size={18} />}
+                loading={login.isPending}
+                mt={4}
+                style={{
+                  background: 'linear-gradient(135deg, #4f46e5, #7c3aed)',
+                  border: 'none',
+                }}
+              >
+                Sign in
+              </Button>
 
-            <Button
+              <Divider label="atau" labelPosition="center" />
-              variant="default"
+
-              fullWidth
+              <Button
-              leftSection={<FcGoogle size={18} />}
+                variant="default"
-              onClick={() => { window.location.href = '/api/auth/google' }}
+                fullWidth
-            >
+                leftSection={<FcGoogle size={18} />}
-              Continue with Google
+                onClick={() => { window.location.href = '/api/auth/google' }}
-            </Button>
+              >
-          </Stack>
+                Continue with Google
-        </form>
+              </Button>
-      </Paper>
+            </Stack>
-    </Center>
+          </form>
+        </Box>
+      </Center>
+    </Box>
   )
 }