feat: add app icon branding to all remaining page headers

- CalendarView header now displays icon
- ReflectionsList header now displays icon
- AnsweredPrayers header now displays icon
- ThingsToPrayFor header now displays icon

Completes visual identity unification across all main screens

src/components/HomePage.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useEffect } from 'react';
 import Clock from './Clock';
+import { HandHeart, CheckCircle2, PenSquare, BookOpen, Sparkles, Flame, BarChart3, MessageSquare } from 'lucide-react';
 
 interface Prayer {
   id: string;
@@ -130,6 +131,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
 
         {/* Header with Personalized Greeting */}
         <div className="max-w-md mx-auto mb-12 text-center">
+          <img src="/icon-192x192.png" alt="Haver icon" className="w-12 h-12 mx-auto mb-3 rounded" />
           <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-3">
             {getGreeting()}, {getFirstName()}!
           </h1>
@@ -139,8 +141,8 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
                 You have <span className="font-bold text-blue-400">{activePrayerCount}</span> {activePrayerCount === 1 ? 'thing' : 'things'} that need prayer today.
               </p>
               {prayedTodayCount > 0 && (
-                <p className="mt-1">
-                  You've prayed for <span className="font-bold text-green-400">{prayedTodayCount}</span> of them! 🙏
+                <p className="mt-1 inline-flex items-center gap-2">
+                  <HandHeart className="w-5 h-5 text-green-400" /> You've prayed for <span className="font-bold text-green-400">{prayedTodayCount}</span> of them!
                 </p>
               )}
             </div>
@@ -163,7 +165,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
                 <div className="text-blue-200 text-sm font-semibold mb-2">Today's Prayers</div>
                 <div className="text-5xl font-bold text-white">{todayCount}</div>
               </div>
-              <div className="text-4xl opacity-30">📿</div>
+              <HandHeart className="w-10 h-10 text-white opacity-20" />
             </div>
           </div>
 
@@ -185,14 +187,14 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
 
             {/* Answered Prayers */}
             <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
-              <div className="text-slate-400 text-xs font-semibold mb-2">✅ Answered</div>
+              <div className="text-slate-400 text-xs font-semibold mb-2 inline-flex items-center gap-1.5"><CheckCircle2 className="w-4 h-4" /> Answered</div>
               <div className="text-3xl font-bold text-green-400">{answeredPrayers}</div>
               <div className="text-xs text-slate-500 mt-2">{answeredPercentage}% answered</div>
             </div>
 
             {/* Streak */}
             <div className="bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50 hover:border-slate-600 transition-all">
-              <div className="text-slate-400 text-xs font-semibold mb-2">🔥 Streak</div>
+              <div className="text-slate-400 text-xs font-semibold mb-2 inline-flex items-center gap-1.5"><Flame className="w-4 h-4" /> Streak</div>
               <div className="text-3xl font-bold text-orange-400">{streak}</div>
               <div className="text-xs text-slate-500 mt-2">consecutive days</div>
             </div>
@@ -202,14 +204,14 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
           <div className="grid grid-cols-2 gap-4 mb-8">
             {/* Avg Prayer Length */}
             <div className="bg-purple-900/20 backdrop-blur-xl rounded-xl p-4 border border-purple-500/30">
-              <div className="text-purple-300 text-xs font-semibold mb-2">📊 Avg Length</div>
+              <div className="text-purple-300 text-xs font-semibold mb-2 inline-flex items-center gap-1.5"><BarChart3 className="w-4 h-4" /> Avg Length</div>
               <div className="text-2xl font-bold text-purple-200">{avgPrayerLength}</div>
               <div className="text-xs text-purple-400 mt-2">characters</div>
             </div>
 
             {/* Most Prayed For */}
             <div className="bg-pink-900/20 backdrop-blur-xl rounded-xl p-4 border border-pink-500/30">
-              <div className="text-pink-300 text-xs font-semibold mb-2">💝 Most Prayed For</div>
+              <div className="text-pink-300 text-xs font-semibold mb-2 inline-flex items-center gap-1.5"><HandHeart className="w-4 h-4" /> Most Prayed For</div>
               {mostPrayedFor ? (
                 <>
                   <div className="text-sm font-bold text-pink-200 line-clamp-1">{mostPrayedFor[0]}</div>
@@ -231,7 +233,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
             onClick={onStartPraying}
             className="w-full bg-gradient-to-r from-blue-600 via-blue-500 to-purple-600 hover:from-blue-700 hover:via-blue-600 hover:to-purple-700 text-white font-bold py-4 px-6 rounded-xl transition-all shadow-lg hover:shadow-2xl transform hover:scale-105 border border-blue-400/30 flex items-center justify-center gap-2"
           >
-            <span className="text-xl">✍️</span>
+            <PenSquare className="w-5 h-5" />
             <span>Start New Prayer</span>
           </button>
         </div>
@@ -243,7 +245,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
             return (
               <div className="max-w-md mx-auto mb-12">
                 <h2 className="text-lg font-bold text-amber-400 mb-4 flex items-center gap-2">
-                  <span>🙏</span> Things to Pray For
+                  <HandHeart className="w-5 h-5" /> Things to Pray For
                 </h2>
                 <div className="bg-amber-900/20 backdrop-blur-xl rounded-xl p-5 border border-amber-500/30 hover:border-amber-400/50 transition-all">
                   <div className="text-3xl font-bold text-amber-300 mb-2">{pendingPrayers.length}</div>
@@ -269,7 +271,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
         {recentPrayers.length > 0 && (
           <div className="max-w-md mx-auto mb-12">
             <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
-              <span>📖</span> Recent Prayers
+              <BookOpen className="w-5 h-5" /> Recent Prayers
             </h2>
             <div className="space-y-3">
               {recentPrayers.map((prayer, idx) => (
@@ -279,11 +281,11 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
                   className="w-full text-left group bg-slate-800/60 backdrop-blur-xl rounded-xl p-4 shadow-md border border-slate-700/50 hover:border-blue-500/50 transition-all hover:shadow-xl hover:bg-slate-800/80 transform hover:translate-x-1"
                 >
                   <div className="flex items-start gap-3">
-                    <div className="text-2xl">{prayer.answered ? '✅' : '📝'}</div>
+                    <div className="text-2xl">{prayer.answered ? <CheckCircle2 className="w-6 h-6 text-green-400" /> : <PenSquare className="w-6 h-6 text-blue-400" />}</div>
                     <div className="flex-1 min-w-0">
                       {prayer.prayFor && (
-                        <div className="text-xs font-bold text-blue-400 mb-1 uppercase tracking-wider">
-                          🙏 {prayer.prayFor}
+                        <div className="text-xs font-bold text-blue-400 mb-1 uppercase tracking-wider inline-flex items-center gap-1.5">
+                          <HandHeart className="w-3.5 h-3.5" /> {prayer.prayFor}
                         </div>
                       )}
                       <p className="text-sm text-slate-300 line-clamp-2 group-hover:text-slate-200">{prayer.text}</p>
@@ -303,7 +305,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
         {recentAnswered.length > 0 && (
           <div className="max-w-md mx-auto mb-12">
             <h2 className="text-lg font-bold text-green-400 mb-4 flex items-center gap-2">
-              <span>✨</span> Recently Answered
+              <Sparkles className="w-5 h-5" /> Recently Answered
             </h2>
             <div className="space-y-3">
               {recentAnswered.map((prayer) => (
@@ -312,17 +314,17 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
                   className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 hover:border-green-400/50 transition-all"
                 >
                   <div className="flex items-start gap-3">
-                    <div className="text-2xl">✅</div>
+                    <CheckCircle2 className="w-6 h-6 text-green-400" />
                     <div className="flex-1 min-w-0">
                       {prayer.prayFor && (
-                        <div className="text-xs font-bold text-green-300 mb-1 uppercase tracking-wider">
-                          🙏 {prayer.prayFor}
+                        <div className="text-xs font-bold text-green-300 mb-1 uppercase tracking-wider inline-flex items-center gap-1.5">
+                          <HandHeart className="w-3.5 h-3.5" /> {prayer.prayFor}
                         </div>
                       )}
                       <p className="text-sm text-slate-300 line-clamp-2">{prayer.text}</p>
                       {prayer.answerDetails && (
-                        <p className="text-xs text-green-400 mt-2 italic">
-                          💬 "{prayer.answerDetails.substring(0, 60)}..."
+                        <p className="text-xs text-green-400 mt-2 italic inline-flex items-center gap-1.5">
+                          <MessageSquare className="w-4 h-4" /> "{prayer.answerDetails.substring(0, 60)}..."
                         </p>
                       )}
                       <div className="text-xs text-slate-500 mt-2">
@@ -339,7 +341,7 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
         {/* Empty State */}
         {prayers.length === 0 && (
           <div className="max-w-md mx-auto text-center py-12">
-            <div className="text-6xl mb-4 animate-bounce">🙏</div>
+            <Sparkles className="w-12 h-12 mb-4 text-blue-400 animate-pulse mx-auto" />
             <p className="text-white font-semibold mb-2">Start Your Prayer Journey</p>
             <p className="text-slate-400 mb-6">
               Create your first prayer entry and begin tracking your spiritual journey.