feat: always show Most Prayed For box with motivational message when empty

src/components/HomePage.tsx

@@ -208,13 +208,20 @@ export default function HomePage({ prayers, todayCount, onStartPraying, onSelect
             </div>
 
             {/* Most Prayed For */}
-            {mostPrayedFor && (
-              <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-sm font-bold text-pink-200 line-clamp-1">{mostPrayedFor[0]}</div>
-                <div className="text-xs text-pink-400 mt-2">{mostPrayedFor[1]} times</div>
-              </div>
-            )}
+            <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>
+              {mostPrayedFor ? (
+                <>
+                  <div className="text-sm font-bold text-pink-200 line-clamp-1">{mostPrayedFor[0]}</div>
+                  <div className="text-xs text-pink-400 mt-2">{mostPrayedFor[1]} times</div>
+                </>
+              ) : (
+                <>
+                  <div className="text-sm font-bold text-pink-200">Start praying!</div>
+                  <div className="text-xs text-pink-400 mt-2">Click "Mark Prayed" to build your prayer focus</div>
+                </>
+              )}
+            </div>
           </div>
         </div>