refactor: rename Settings tab to About, remove SettingsPage component

src/components/AboutPage.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useAuth } from '@/context/AuthContext';
+
+interface AboutPageProps {
+  userEmail?: string;
+}
+
+export default function AboutPage({ userEmail }: AboutPageProps) {
+  const { logout } = useAuth();
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-4 pb-32 pt-8">
+      <div className="max-w-md mx-auto">
+        {/* Header */}
+        <div className="text-center mb-8">
+          <h1 className="text-4xl font-bold text-white mb-2">About</h1>
+          <p className="text-slate-400">Prayer Journal App</p>
+        </div>
+
+        {/* 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">
+            <h2 className="text-lg font-semibold text-white mb-4">Account</h2>
+            <div className="space-y-3">
+              <div>
+                <p className="text-sm font-medium text-slate-400">Email</p>
+                <p className="text-white">{userEmail || 'Not set'}</p>
+              </div>
+            </div>
+          </div>
+
+          {/* App Info Section */}
+          <div className="border-b border-slate-700 pb-6">
+            <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>
+            </div>
+          </div>
+
+          {/* Logout Section */}
+          <div>
+            <button
+              onClick={() => setShowConfirm(true)}
+              className="w-full px-4 py-3 bg-red-600 hover:bg-red-700 text-white font-medium rounded-lg transition-colors"
+            >
+              Logout
+            </button>
+          </div>
+        </div>
+
+        {/* Logout Confirmation Modal */}
+        {showConfirm && (
+          <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+            <div className="bg-slate-800 rounded-xl p-6 max-w-sm w-full">
+              <h2 className="text-xl font-bold text-white mb-2">Logout?</h2>
+              <p className="text-slate-400 mb-6">Are you sure you want to logout?</p>
+              <div className="flex gap-3">
+                <button
+                  onClick={() => setShowConfirm(false)}
+                  className="flex-1 px-4 py-2 rounded-lg bg-slate-700 text-white font-medium hover:bg-slate-600 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={() => logout()}
+                  className="flex-1 px-4 py-2 rounded-lg bg-red-600 text-white font-medium hover:bg-red-700 transition-colors"
+                >
+                  Logout
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}