style: refine greeting section with peace blessing and new verse intro

components/Header/index.tsx

@@ -7,6 +7,7 @@ interface HeaderProps {
 }
 
 const Header: React.FC<HeaderProps> = ({ onMenuClick, pageTitle }) => {
+  const [hasError, setHasError] = React.useState(false);
   return (
     <header
       data-cmp="Header"
@@ -55,9 +56,19 @@ const Header: React.FC<HeaderProps> = ({ onMenuClick, pageTitle }) => {
             <p className="text-foreground text-sm font-medium">Community Admin</p>
             <p className="text-muted-foreground text-xs">Super Administrator</p>
           </div>
-          <div className="bg-primary/10 border-primary/20 flex h-9 w-9 shrink-0 items-center justify-center rounded-full border">
-            <User className="text-primary h-5 w-5" />
-          </div>
+          {hasError ? (
+            <div className="w-10 h-10 rounded-full border border-border bg-muted flex items-center justify-center">
+              <User className="w-6 h-6 text-muted-foreground" />
+            </div>
+          ) : (
+            <img
+              src="/images/IMG_84271.jpg"
+              alt="Profile"
+              className="w-10 h-10 rounded-full object-cover border border-border"
+              /* If image fails to load, set hasError to true */
+              onError={() => setHasError(true)}
+            />
+          )}
         </div>
       </div>
     </header>