feat: add personalized time-based greeting with user name and active prayer count

src/app/page.tsx

@@ -227,6 +227,7 @@ export default function Home() {
           todayCount={prayers.filter(p => p.date === new Date().toISOString().split('T')[0]).length}
           onStartPraying={() => setActiveTab('compose')}
           onSelectPrayer={handleSelectPrayer}
+          userName={user.displayName || user.email || undefined}
         />
       )}
 

src/components/HomePage.tsx

@@ -20,9 +20,10 @@ interface HomePageProps {
   todayCount: number;
   onStartPraying: () => void;
   onSelectPrayer: (prayer: Prayer) => void;
+  userName?: string;
 }
 
-export default function HomePage({ prayers, todayCount, onStartPraying, onSelectPrayer }: HomePageProps) {
+export default function HomePage({ prayers, todayCount, onStartPraying, onSelectPrayer, userName }: HomePageProps) {
   const today = new Date().toISOString().split('T')[0];
   const todayPrayers = prayers.filter(p => p.date === today);
   const recentPrayers = prayers.slice(0, 5);
@@ -30,6 +31,28 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
   const uniqueDays = new Set(prayers.map(p => p.date)).size;
   const answeredPrayers = prayers.filter(p => p.answered).length;
   
+  // Get greeting based on time of day
+  const getGreeting = () => {
+    const hour = new Date().getHours();
+    if (hour < 12) return 'Good morning';
+    if (hour < 18) return 'Good afternoon';
+    return 'Good evening';
+  };
+  
+  // Get first name from display name or email
+  const getFirstName = () => {
+    if (!userName) return 'friend';
+    // If it's an email, get the part before @
+    if (userName.includes('@')) {
+      return userName.split('@')[0];
+    }
+    // If it's a full name, get first name
+    return userName.split(' ')[0];
+  };
+  
+  // Count active prayer requests (not answered)
+  const activePrayerCount = prayers.filter(p => !p.answered).length;
+  
   // Calculate actual streak - consecutive days with prayers
   const calculateStreak = () => {
     if (prayers.length === 0) return 0;
@@ -102,12 +125,21 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
           </div>
         </div>
 
-        {/* Header */}
+        {/* Header with Personalized Greeting */}
         <div className="max-w-md mx-auto mb-12">
-          <h1 className="text-5xl font-bold text-white mb-2 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
+          <h1 className="text-4xl font-bold text-white mb-3">
-            Haver
+            {getGreeting()}, {getFirstName()}!
           </h1>
-          <p className="text-slate-400">
+          {activePrayerCount > 0 ? (
+            <p className="text-lg text-slate-300">
+              You have <span className="font-bold text-blue-400">{activePrayerCount}</span> {activePrayerCount === 1 ? 'thing' : 'things'} that need prayer today.
+            </p>
+          ) : (
+            <p className="text-lg text-slate-300">
+              All caught up! Start a new prayer to keep your journey going.
+            </p>
+          )}
+          <p className="text-slate-400 mt-2">
             {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
           </p>
         </div>