refactor: rename Settings tab to About, remove SettingsPage component

src/app/page.tsx

@@ -8,7 +8,7 @@ import BottomNav from '@/components/BottomNav';
 import DailyEntry from '@/components/DailyEntry';
 import CalendarView from '@/components/CalendarView';
 import ReflectionsList from '@/components/ReflectionsList';
-import SettingsPage from '@/components/SettingsPage';
+import AboutPage from '@/components/AboutPage';
 import HomePage from '@/components/HomePage';
 import AnsweredPrayers from '@/components/AnsweredPrayers';
 import { db } from '@/lib/firebase';
@@ -26,7 +26,7 @@ interface Prayer {
 }
 
 export default function Home() {
-  const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'settings'>('home');
+  const [activeTab, setActiveTab] = useState<'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'about'>('home');
   const [prayers, setPrayers] = useState<Prayer[]>([]);
   const [editingPrayer, setEditingPrayer] = useState<Prayer | null>(null);
   
@@ -240,7 +240,7 @@ export default function Home() {
         />
       )}
 
-      {activeTab === 'settings' && <SettingsPage userEmail={user.email || undefined} />}
+      {activeTab === 'about' && <AboutPage userEmail={user.email || undefined} />
     </div>
   );
 }

src/components/AboutPage.tsx

@@ -3,11 +3,11 @@
 import React, { useState } from 'react';
 import { useAuth } from '@/context/AuthContext';
 
-interface SettingsPageProps {
+interface AboutPageProps {
   userEmail?: string;
 }
 
-export default function SettingsPage({ userEmail }: SettingsPageProps) {
+export default function AboutPage({ userEmail }: AboutPageProps) {
   const { logout } = useAuth();
   const [showConfirm, setShowConfirm] = useState(false);
 
@@ -16,11 +16,11 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
       <div className="max-w-md mx-auto">
         {/* Header */}
         <div className="text-center mb-8">
-          <h1 className="text-4xl font-bold text-white mb-2">Settings</h1>
+          <h1 className="text-4xl font-bold text-white mb-2">About</h1>
-          <p className="text-slate-400">Manage your account</p>
+          <p className="text-slate-400">Prayer Journal App</p>
         </div>
 
-        {/* Settings Card */}
+        {/* About Card */}
         <div className="bg-slate-800 rounded-lg shadow-sm p-4 space-y-6">
           {/* Account Section */}
           <div className="border-b border-slate-700 pb-6">
@@ -33,9 +33,9 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
             </div>
           </div>
 
-          {/* About Section */}
+          {/* App Info Section */}
           <div className="border-b border-slate-700 pb-6">
-            <h2 className="text-lg font-semibold text-white mb-4">About</h2>
+            <h2 className="text-lg font-semibold text-white mb-4">App Info</h2>
             <div className="space-y-2 text-sm text-slate-400">
               <p>Prayer Journal v1.0</p>
               <p>A simple, private space for your daily prayers and reflections.</p>

src/components/BottomNav.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 import { useAuth } from '@/context/AuthContext';
 
 interface BottomNavProps {
-  activeTab: 'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'settings';
+  activeTab: 'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'about';
-  onTabChange: (tab: 'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'settings') => void;
+  onTabChange: (tab: 'home' | 'compose' | 'journal' | 'answered' | 'reflections' | 'about') => void;
 }
 
 export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
@@ -17,7 +17,7 @@ export default function BottomNav({ activeTab, onTabChange }: BottomNavProps) {
     { id: 'journal' as const, label: 'Journal', icon: '📅' },
     { id: 'answered' as const, label: 'Answered', icon: '✅' },
     { id: 'reflections' as const, label: 'Reflections', icon: '📖' },
-    { id: 'settings' as const, label: 'Settings', icon: '⚙️' },
+    { id: 'about' as const, label: 'About', icon: 'ℹ️' },
   ];
 
   return (