google sign in page done

src/pages/HomePage.tsx

@@ -0,0 +1,47 @@
+import { useAuth } from '../contexts/AuthContext'
+import { Link } from 'react-router-dom'
+
+export default function HomePage() {
+  const { user, loading, signOut } = useAuth()
+
+  if (loading) {
+    return (
+      <div className="home-page">
+        <p>Loading…</p>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return (
+      <div className="home-page">
+        <h1>Grateful Journal</h1>
+        <p>Sign in to start your journal.</p>
+        <Link to="/login" className="home-login-link">
+          Go to login
+        </Link>
+      </div>
+    )
+  }
+
+  const displayName =
+    user.displayName ?? user.email ?? 'there'
+
+  return (
+    <div className="home-page">
+      <header className="home-header">
+        <h1>Grateful Journal</h1>
+        <div className="home-user">
+          <span className="home-username">{displayName}</span>
+          <button type="button" className="home-sign-out" onClick={() => signOut()}>
+            Sign out
+          </button>
+        </div>
+      </header>
+      <main className="home-main">
+        <p className="home-welcome">Hello, {displayName}.</p>
+        <p className="home-sub">Your writing space will go here.</p>
+      </main>
+    </div>
+  )
+}

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>
+  )
+}