google sign in page done

src/pages/LoginPage.tsx

@@ -0,0 +1,61 @@
+import { useAuth } from '../contexts/AuthContext'
+import { useNavigate } from 'react-router-dom'
+import { useEffect, useState } from 'react'
+import { GoogleSignInButton } from '../components/GoogleSignInButton'
+import { LoginCard } from '../components/LoginCard'
+
+export default function LoginPage() {
+  const { user, loading, signInWithGoogle } = useAuth()
+  const navigate = useNavigate()
+  const [signingIn, setSigningIn] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (loading) return
+    if (user) {
+      navigate('/', { replace: true })
+    }
+  }, [user, loading, navigate])
+
+  async function handleGoogleSignIn() {
+    setError(null)
+    setSigningIn(true)
+    try {
+      await signInWithGoogle()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Sign-in failed')
+    } finally {
+      setSigningIn(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="login-page">
+        <div className="login-page__loading" aria-live="polite">
+          <span className="login-page__spinner" aria-hidden />
+          <p>Loading…</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="login-page">
+      <LoginCard
+        title="Grateful Journal"
+        tagline="A minimal, private space for gratitude and reflection. No feeds, no noise—just you and your thoughts."
+      >
+        <GoogleSignInButton
+          loading={signingIn}
+          onClick={handleGoogleSignIn}
+        />
+        {error && (
+          <p className="login-card__error" role="alert">
+            {error}
+          </p>
+        )}
+      </LoginCard>
+    </div>
+  )
+}