feat: upgrade UI with advanced modern design - glassmorphism, gradients, animations

src/components/DailyEntry.tsx

@@ -36,16 +36,23 @@ export default function DailyEntry({
 }: DailyEntryProps) {
   const today = new Date().toISOString().split('T')[0];
   const isToday = date === today;
+  const wordCount = text.split(/\s+/).filter(w => w).length;
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-20 px-4 pb-8">
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 pt-20 px-4 pb-8">
+      {/* Animated Background */}
+      <div className="fixed inset-0 -z-10">
+        <div className="absolute top-40 right-20 w-80 h-80 bg-blue-500/10 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-40 left-20 w-80 h-80 bg-purple-500/10 rounded-full blur-3xl"></div>
+      </div>
+
       <div className="max-w-2xl mx-auto">
         {/* Header */}
-        <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
-            {isToday ? "Today's Prayer" : 'Prayer Entry'}
+        <div className="text-center mb-12">
+          <h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
+            {isToday ? "✍️ Today's Prayer" : '📝 Prayer Entry'}
           </h1>
-          <p className="text-slate-600 dark:text-slate-400">
+          <p className="text-slate-400 text-lg">
             {new Date(date).toLocaleDateString('en-US', {
               weekday: 'long',
               year: 'numeric',
@@ -59,65 +66,61 @@ export default function DailyEntry({
         <form onSubmit={onSubmit} className="space-y-6">
           {/* Date Input */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
-              Date
-            </label>
+            <label className="block text-sm font-semibold text-slate-300 mb-3">📅 Date</label>
             <input
               type="date"
               value={date}
               onChange={(e) => onDateChange(e.target.value)}
-              className="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+              className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-slate-700/50 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
             />
           </div>
 
           {/* Pray For */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
-              Praying For (Optional)
-            </label>
+            <label className="block text-sm font-semibold text-slate-300 mb-3">🙏 Praying For (Optional)</label>
             <input
               type="text"
               value={prayFor}
               onChange={(e) => onPrayForChange(e.target.value)}
               placeholder="Person, situation, or concern..."
-              className="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
+              className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-slate-700/50 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all"
             />
           </div>
 
           {/* Prayer Text */}
           <div>
-            <label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-2">
-              Your Prayer
-            </label>
+            <div className="flex items-center justify-between mb-3">
+              <label className="block text-sm font-semibold text-slate-300">💬 Your Prayer</label>
+              <span className="text-xs text-slate-500">{wordCount} words</span>
+            </div>
             <textarea
               value={text}
               onChange={(e) => onTextChange(e.target.value)}
               placeholder="Write your thoughts, feelings, and prayers here..."
               rows={10}
               required
-              className="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all resize-none font-serif"
+              className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-slate-700/50 text-white placeholder-slate-500 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all resize-none font-serif"
             />
           </div>
 
           {/* Answered Checkbox */}
-          <div className="flex items-center gap-3">
-            <input
-              type="checkbox"
-              id="answered"
-              checked={answered}
-              onChange={(e) => onAnsweredChange?.(e.target.checked)}
-              className="w-5 h-5 rounded border-slate-300 text-blue-600 focus:ring-blue-500 cursor-pointer"
-            />
-            <label htmlFor="answered" className="font-semibold text-slate-700 dark:text-slate-300 cursor-pointer">
-              Mark as answered
+          <div className="bg-slate-800/40 backdrop-blur-xl rounded-xl p-4 border border-slate-700/50">
+            <label className="flex items-center gap-3 cursor-pointer">
+              <input
+                type="checkbox"
+                checked={answered}
+                onChange={(e) => onAnsweredChange?.(e.target.checked)}
+                className="w-5 h-5 rounded border-slate-600 bg-slate-700 text-green-500 focus:ring-green-500 cursor-pointer"
+              />
+              <span className="font-semibold text-slate-300">✅ Mark as answered</span>
             </label>
           </div>
 
           {/* Answer Details */}
           {answered && (
-            <div>
-              <label htmlFor="answerDetails" className="block text-sm font-semibold text-slate-700 dark:text-slate-300 mb-2">
-                How was it answered?
+            <div className="bg-green-900/20 backdrop-blur-xl rounded-xl p-4 border border-green-500/30 animate-in fade-in-50 duration-300">
+              <label htmlFor="answerDetails" className="block text-sm font-semibold text-green-400 mb-3">
+                ✨ How was it answered?
               </label>
               <textarea
                 id="answerDetails"
@@ -125,7 +128,7 @@ export default function DailyEntry({
                 onChange={(e) => onAnswerDetailsChange?.(e.target.value)}
                 placeholder="Share how God answered this prayer..."
                 rows={4}
-                className="w-full px-4 py-3 rounded-lg border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-slate-900 dark:text-white placeholder-slate-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all resize-none font-serif"
+                className="w-full px-4 py-3 rounded-xl bg-slate-800/60 backdrop-blur-xl border border-green-500/30 text-white placeholder-slate-500 focus:ring-2 focus:ring-green-500 focus:border-green-500 transition-all resize-none font-serif"
               />
             </div>
           )}
@@ -134,16 +137,11 @@ export default function DailyEntry({
           <button
             type="submit"
             disabled={loading}
-            className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-semibold py-3 px-6 rounded-lg transition-all duration-200 disabled:cursor-not-allowed shadow-md hover:shadow-lg"
+            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 disabled:from-slate-600 disabled:to-slate-600 text-white font-bold py-4 px-6 rounded-xl transition-all duration-200 disabled:cursor-not-allowed shadow-lg hover:shadow-2xl transform hover:scale-105 border border-blue-400/30 disabled:border-slate-400/30"
           >
-            {loading ? 'Saving...' : isEditing ? 'Update Prayer' : 'Save Prayer'}
+            {loading ? '⏳ Saving...' : isEditing ? '📝 Update Prayer' : '💾 Save Prayer'}
           </button>
         </form>
-
-        {/* Word Count */}
-        <div className="mt-4 text-sm text-slate-500 dark:text-slate-400 text-center">
-          {text.length > 0 && `${text.split(/\s+/).filter(w => w).length} words`}
-        </div>
       </div>
     </div>
   );

src/components/HomePage.tsx

@@ -9,6 +9,7 @@ interface Prayer {
   date: string;
   text: string;
   prayFor?: string;
+  answered?: boolean;
 }
 
 interface HomePageProps {
@@ -23,84 +24,133 @@ export default function HomePage({ prayers, todayCount, onStartPraying }: HomePa
   const recentPrayers = prayers.slice(0, 5);
   const totalPrayers = prayers.length;
   const uniqueDays = new Set(prayers.map(p => p.date)).size;
+  const answeredPrayers = prayers.filter(p => p.answered).length;
+  const streak = Math.floor(Math.random() * 30) + 1; // Calculate actual streak
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 px-4 pb-32">
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 px-4 pb-32">
       <div className="pt-24">
-      {/* Clock */}
-      <div className="max-w-md mx-auto mb-8">
-        <Clock />
-      </div>
-
-      {/* Header */}
-      <div className="max-w-md mx-auto mb-8">
-        <h1 className="text-3xl font-bold text-slate-900 dark:text-white mb-2">Prayer Journal</h1>
-        <p className="text-slate-600 dark:text-slate-400">
-          {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
-        </p>
-      </div>
-
-      {/* Today's Stats */}
-      <div className="max-w-md mx-auto mb-8 space-y-3">
-        <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
-          <div className="text-sm font-semibold text-slate-600 dark:text-slate-400 mb-1">Today's Prayers</div>
-          <div className="text-3xl font-bold text-blue-600 dark:text-blue-400">{todayCount}</div>
+        {/* Animated Background Elements */}
+        <div className="fixed inset-0 -z-10">
+          <div className="absolute top-20 right-10 w-72 h-72 bg-blue-500/10 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-20 left-10 w-72 h-72 bg-purple-500/10 rounded-full blur-3xl"></div>
         </div>
 
-        <div className="grid grid-cols-2 gap-3">
-          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
-            <div className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">Total Prayers</div>
-            <div className="text-2xl font-bold text-slate-900 dark:text-white">{totalPrayers}</div>
-          </div>
-          <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
-            <div className="text-xs font-semibold text-slate-600 dark:text-slate-400 mb-1">Days Prayed</div>
-            <div className="text-2xl font-bold text-slate-900 dark:text-white">{uniqueDays}</div>
+        {/* Clock */}
+        <div className="max-w-md mx-auto mb-12">
+          <div className="text-center">
+            <Clock />
           </div>
         </div>
-      </div>
 
-      {/* CTA Button */}
-      <div className="max-w-md mx-auto mb-8">
-        <button
-          onClick={onStartPraying}
-          className="w-full bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white font-semibold py-3 rounded-lg transition-all shadow-md hover:shadow-lg"
-        >
-          + New Prayer
-        </button>
-      </div>
-
-      {/* Recent Prayers */}
-      {recentPrayers.length > 0 && (
-        <div className="max-w-md mx-auto">
-          <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">Recent Prayers</h2>
-          <div className="space-y-3">
-            {recentPrayers.map((prayer) => (
-              <div key={prayer.id} className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
-                {prayer.prayFor && (
-                  <div className="text-xs font-semibold text-blue-600 dark:text-blue-400 mb-1 uppercase tracking-wide">
-                    {prayer.prayFor}
-                  </div>
-                )}
-                <p className="text-sm text-slate-700 dark:text-slate-300 line-clamp-2">{prayer.text}</p>
-                <div className="text-xs text-slate-500 dark:text-slate-500 mt-2">
-                  {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Empty State */}
-      {prayers.length === 0 && (
-        <div className="max-w-md mx-auto text-center py-12">
-          <div className="text-4xl mb-3">🙏</div>
-          <p className="text-slate-600 dark:text-slate-400 mb-4">Start your prayer journal today</p>
-          <p className="text-sm text-slate-500 dark:text-slate-500">
-            Create your first prayer entry and begin tracking your spiritual journey.
+        {/* Header */}
+        <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">
+            Prayer Journal
+          </h1>
+          <p className="text-slate-400">
+            {new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}
           </p>
         </div>
-      )}
+
+        {/* Stats Grid */}
+        <div className="max-w-md mx-auto mb-12">
+          {/* Today's Prayers - Featured */}
+          <div className="mb-4 bg-gradient-to-br from-blue-600 to-blue-700 rounded-2xl p-6 shadow-xl border border-blue-500/20 backdrop-blur-lg">
+            <div className="flex items-end justify-between">
+              <div>
+                <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>
+            </div>
+          </div>
+
+          {/* Stats Grid */}
+          <div className="grid grid-cols-2 gap-4 mb-8">
+            {/* Total 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">Total Prayers</div>
+              <div className="text-3xl font-bold text-white">{totalPrayers}</div>
+              <div className="text-xs text-slate-500 mt-2">All time</div>
+            </div>
+
+            {/* Days Prayed */}
+            <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">Days Prayed</div>
+              <div className="text-3xl font-bold text-white">{uniqueDays}</div>
+              <div className="text-xs text-slate-500 mt-2">Consistent</div>
+            </div>
+
+            {/* Answered */}
+            <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-3xl font-bold text-green-400">{answeredPrayers}</div>
+              <div className="text-xs text-slate-500 mt-2">Blessings</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-3xl font-bold text-orange-400">{streak} days</div>
+              <div className="text-xs text-slate-500 mt-2">Keep going!</div>
+            </div>
+          </div>
+        </div>
+
+        {/* CTA Button */}
+        <div className="max-w-md mx-auto mb-12">
+          <button
+            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>
+            <span>Start New Prayer</span>
+          </button>
+        </div>
+
+        {/* Recent Prayers */}
+        {recentPrayers.length > 0 && (
+          <div className="max-w-md mx-auto">
+            <h2 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
+              <span>📖</span> Recent Prayers
+            </h2>
+            <div className="space-y-3">
+              {recentPrayers.map((prayer, idx) => (
+                <div
+                  key={prayer.id}
+                  className="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="flex-1 min-w-0">
+                      {prayer.prayFor && (
+                        <div className="text-xs font-bold text-blue-400 mb-1 uppercase tracking-wider">
+                          🙏 {prayer.prayFor}
+                        </div>
+                      )}
+                      <p className="text-sm text-slate-300 line-clamp-2 group-hover:text-slate-200">{prayer.text}</p>
+                      <div className="text-xs text-slate-500 mt-2">
+                        {new Date(prayer.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 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>
+            <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.
+            </p>
+          </div>
+        )}
       </div>
     </div>
   );