Add bottom navigation, History and Settings pages with improved UI styling

src/pages/HomePage.tsx

@@ -1,8 +1,12 @@
 import { useAuth } from '../contexts/AuthContext'
 import { Link } from 'react-router-dom'
+import { useState } from 'react'
+import BottomNav from '../components/BottomNav'
 
 export default function HomePage() {
   const { user, loading, signOut } = useAuth()
+  const [entry, setEntry] = useState('')
+  const [title, setTitle] = useState('')
 
   if (loading) {
     return (
@@ -24,11 +28,32 @@ export default function HomePage() {
     )
   }
 
-  const displayName =
-    user.displayName ?? user.email ?? 'there'
+  const displayName = user.displayName ?? user.email ?? 'there'
+  
+  // Get current date formatted like "THURSDAY, OCT 24"
+  const today = new Date()
+  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('')
+  }
 
   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">
@@ -38,10 +63,32 @@ export default function HomePage() {
           </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 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"
+              className="journal-title-input"
+              placeholder="Title your thoughts..."
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+            />
+            <textarea
+              className="journal-entry-textarea"
+              placeholder=""
+              value={entry}
+              onChange={(e) => setEntry(e.target.value)}
+            />
+          </div>
+        </div>
       </main>
+
+      <BottomNav />
     </div>
   )
 }