ui enhance

src/pages/HomePage.tsx

@@ -10,36 +10,29 @@ export default function HomePage() {
 
   if (loading) {
     return (
-      <div className="home-page">
-        <p>Loading…</p>
+      <div className="home-page" style={{ alignItems: 'center', justifyContent: 'center' }}>
+        <p style={{ color: '#9ca3af' }}>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 className="home-page" style={{ alignItems: 'center', justifyContent: 'center', gap: '1rem' }}>
+        <h1 style={{ fontFamily: 'Playfair Display, Georgia, serif', color: '#1a1a1a' }}>Grateful Journal</h1>
+        <p style={{ color: '#6b7280' }}>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'
-  
-  // Get current date formatted like "THURSDAY, OCT 24"
+  // Format date: "THURSDAY, OCT 24"
   const today = new Date()
-  const dateString = today.toLocaleDateString('en-US', { 
-    weekday: 'long', 
-    month: 'short', 
-    day: 'numeric' 
-  }).toUpperCase()
+  const dateString = today
+    .toLocaleDateString('en-US', { weekday: 'long', month: 'short', day: 'numeric' })
+    .toUpperCase()
 
   const handleWrite = () => {
-    console.log('Saving entry:', { title, entry })
     // TODO: Save to Firebase
     setTitle('')
     setEntry('')
@@ -47,29 +40,12 @@ export default function HomePage() {
 
   return (
     <div className="home-page">
-      <div className="home-bg-decoration">
-        <div className="bg-orb bg-orb-1"></div>
-        <div className="bg-orb bg-orb-2"></div>
-        <div className="bg-orb bg-orb-3"></div>
-        <div className="bg-pattern"></div>
-      </div>
-      
-      <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="journal-container">
         <div className="journal-card">
           <div className="journal-date">{dateString}</div>
-          
+
           <h2 className="journal-prompt">What are you grateful for today?</h2>
-          
+
           <div className="journal-writing-area">
             <input
               type="text"
@@ -92,3 +68,4 @@ export default function HomePage() {
     </div>
   )
 }
+