Fix org name not showing in tab title, homepage, and backend pages

The browser tab title, homepage "Welcome to..." heading, and the
backend status/API docs pages all had the "Cross Code" default
hardcoded instead of reading the configured org_name setting.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/app/layout.tsx

@@ -44,10 +44,11 @@ async function getServerSettings(): Promise<SiteSettings> {
 export async function generateMetadata(): Promise<Metadata> {
   const settings = await getServerSettings();
   const faviconUrl = settings.favicon_url ? resolveToApiOrigin(settings.favicon_url) : null;
+  const displayName = settings.org_name || appName;
 
   return {
-    title: appName,
-    description: `Manage and register for events with ${appName}`,
+    title: displayName,
+    description: `Manage and register for events with ${displayName}`,
     icons: {
       icon: faviconUrl || "/favicon.ico",
     },

frontend/src/app/page.tsx

@@ -3,6 +3,7 @@ import { Navbar } from "@/components/layout/Navbar";
 import { Footer } from "@/components/layout/Footer";
 import { JoinUsButton } from "@/components/home/JoinUsButton";
 import { appName } from "@/lib/siteConfig";
+import { API_BASE } from "@/lib/api";
 import { Calendar, ArrowRight, CalendarCheck, Users, Heart, ShieldCheck } from "lucide-react";
 
 type Event = {
@@ -26,8 +27,22 @@ const FEATURES = [
   { icon: Heart, title: "Make an Impact", description: "Be part of what God is doing and make a difference together." },
 ];
 
+async function getOrgName(): Promise<string> {
+    try {
+        const res = await fetch(`${API_BASE}/api/settings`, { next: { revalidate: 60 } });
+        if (!res.ok) return appName;
+        const settings = await res.json();
+        return settings?.org_name || appName;
+    } catch {
+        return appName;
+    }
+}
+
 export default async function HomePage() {
-    const events = await apiFetch<Event[]>("/api/events", { nextOptions: { next: { revalidate: 60 } } });
+    const [events, displayName] = await Promise.all([
+        apiFetch<Event[]>("/api/events", { nextOptions: { next: { revalidate: 60 } } }),
+        getOrgName(),
+    ]);
     const now = Date.now();
     const upcoming = (events || []).filter(e => {
         const t = new Date(e.startDate).getTime();
@@ -52,7 +67,7 @@ export default async function HomePage() {
                                 {sorted.length} upcoming event{sorted.length === 1 ? "" : "s"}
                             </div>
                         )}
-                        <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-gray-900">Welcome to {appName}</h1>
+                        <h1 className="text-4xl sm:text-5xl font-bold mb-4 text-gray-900">Welcome to {displayName}</h1>
                         <p className="text-gray-600 text-lg mb-8">Experience unforgettable moments. Powered by purpose.</p>
                         <div className="flex flex-wrap items-center justify-center gap-3">
                             <a href="/events" className="inline-flex items-center gap-2 px-6 py-2.5 bg-brand-600 text-white rounded-xl hover:bg-brand-700 shadow-sm font-medium transition-colors">