Add cross-platform prayer reminder notifications with ReminderBanner component

src/app/page.tsx

@@ -5,6 +5,7 @@ import { useAuth } from '@/context/AuthContext';
 import Login from '@/components/Login';
 import LoadingSkeleton from '@/components/LoadingSkeleton';
 import BottomNav from '@/components/BottomNav';
+import ReminderBanner from '@/components/ReminderBanner';
 import DailyEntry from '@/components/DailyEntry';
 import CalendarView from '@/components/CalendarView';
 import ReflectionsList from '@/components/ReflectionsList';
@@ -219,6 +220,7 @@ export default function Home() {
 
   return (
     <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800">
+      <ReminderBanner userEmail={user.email || undefined} />
       <BottomNav activeTab={activeTab} onTabChange={setActiveTab} />
 
       {activeTab === 'home' && (

src/components/ReminderBanner.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+
+interface ReminderBannerProps {
+  userEmail?: string;
+}
+
+export default function ReminderBanner({ userEmail }: ReminderBannerProps) {
+  const [showBanner, setShowBanner] = useState(false);
+  const [reminderTime, setReminderTime] = useState('09:00');
+  const [isTime, setIsTime] = useState(false);
+
+  useEffect(() => {
+    // Check if reminders are enabled and if it's reminder time
+    const remindersEnabled = localStorage.getItem('prayerRemindersEnabled') === 'true';
+    const savedTime = localStorage.getItem('prayerReminderTime') || '09:00';
+    const lastReminderDate = localStorage.getItem('lastPrayerReminderDate');
+    
+    setReminderTime(savedTime);
+
+    if (!remindersEnabled) return;
+
+    // Check if we should show the banner
+    const checkIfTimeToRemind = () => {
+      const now = new Date();
+      const [hours, minutes] = savedTime.split(':').map(Number);
+      const reminderTodayTime = new Date();
+      reminderTodayTime.setHours(hours, minutes, 0, 0);
+
+      // Check if current time is within 5 minutes of reminder time
+      const timeDiff = Math.abs(now.getTime() - reminderTodayTime.getTime());
+      const withinWindow = timeDiff < 5 * 60 * 1000; // 5 minute window
+
+      if (withinWindow) {
+        // Check if we already showed reminder today
+        const today = new Date().toISOString().split('T')[0];
+        const lastDate = lastReminderDate?.split('T')[0];
+
+        if (lastDate !== today) {
+          setIsTime(true);
+          setShowBanner(true);
+          localStorage.setItem('lastPrayerReminderDate', new Date().toISOString());
+        }
+      }
+    };
+
+    checkIfTimeToRemind();
+    
+    // Check every minute
+    const interval = setInterval(checkIfTimeToRemind, 60000);
+    return () => clearInterval(interval);
+  }, []);
+
+  if (!showBanner) return null;
+
+  return (
+    <div className="fixed top-0 left-0 right-0 z-40 p-4">
+      <div className="max-w-md mx-auto bg-gradient-to-r from-blue-600 to-blue-500 rounded-lg shadow-lg p-4 animate-in slide-in-from-top">
+        <div className="flex items-start gap-3">
+          <div className="text-2xl mt-1">🙏</div>
+          <div className="flex-1">
+            <h3 className="font-semibold text-white">Time to Pray</h3>
+            <p className="text-blue-100 text-sm mt-1">
+              Take a moment to connect with God and pray.
+            </p>
+          </div>
+          <button
+            onClick={() => setShowBanner(false)}
+            className="text-blue-200 hover:text-white transition-colors mt-1"
+          >
+            ✕
+          </button>
+        </div>
+        <div className="mt-3 flex gap-2">
+          <button
+            onClick={() => setShowBanner(false)}
+            className="flex-1 px-3 py-2 bg-blue-700 hover:bg-blue-800 text-white text-sm font-medium rounded transition-colors"
+          >
+            Dismiss
+          </button>
+          <button
+            onClick={() => {
+              setShowBanner(false);
+              window.location.href = '/?tab=compose';
+            }}
+            className="flex-1 px-3 py-2 bg-white hover:bg-blue-50 text-blue-600 text-sm font-medium rounded transition-colors"
+          >
+            Compose Prayer
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}