login page update

src/pages/LoginPage.tsx

@@ -2,7 +2,7 @@ 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'
+import { TreeAnimation } from '../components/TreeAnimation'
 
 export default function LoginPage() {
   const { user, loading, signInWithGoogle } = useAuth()
@@ -12,9 +12,7 @@ export default function LoginPage() {
 
   useEffect(() => {
     if (loading) return
-    if (user) {
-      navigate('/', { replace: true })
-    }
+    if (user) navigate('/', { replace: true })
   }, [user, loading, navigate])
 
   async function handleGoogleSignIn() {
@@ -31,31 +29,46 @@ export default function LoginPage() {
 
   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 className="lp lp--loading" aria-live="polite">
+        <span className="login-page__spinner" aria-hidden />
+        <p>Loading…</p>
       </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}
+    <div className="lp">
+      {/* ── Left: animated tree hero ─────────────────── */}
+      <div className="lp__hero">
+        <TreeAnimation />
+        <div className="lp__hero-words">
+          <p className="lp__quote">Grow your gratitude.</p>
+          <p className="lp__subquote">One small moment at a time.</p>
+        </div>
+      </div>
+
+      {/* ── Right: login panel ───────────────────────── */}
+      <div className="lp__panel">
+        <div className="lp__form">
+          <div className="lp__brand">
+            <span className="lp__icon" aria-hidden>🌱</span>
+            <h1 className="lp__title">Grateful Journal</h1>
+          </div>
+
+          <p className="lp__tagline">
+            A private space for gratitude and reflection.<br />
+            No feeds. No noise. Just you and your thoughts.
           </p>
-        )}
-      </LoginCard>
+
+          <div className="lp__actions">
+            <GoogleSignInButton loading={signingIn} onClick={handleGoogleSignIn} />
+            <p className="lp__privacy">🔒 End-to-end encrypted. We never read your entries.</p>
+            {error && (
+              <p className="lp__error" role="alert">{error}</p>
+            )}
+          </div>
+        </div>
+      </div>
     </div>
   )
 }