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