website refactor

apps/website/app/leagues/[id]/layout.tsx

@@ -1,6 +1,7 @@
 import { notFound } from 'next/navigation';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
 import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
+import { Text } from '@/ui/Text';
 
 export default async function LeagueLayout({
   children,
@@ -27,7 +28,7 @@ export default async function LeagueLayout({
         leagueDescription="Failed to load league"
         tabs={[]}
       >
-        <div className="text-center text-gray-400">Failed to load league</div>
+        <Text align="center" className="text-gray-400">Failed to load league</Text>
       </LeagueDetailTemplate>
     );
   }

apps/website/app/leagues/[id]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation';
 import { LeagueDetailTemplate } from '@/templates/LeagueDetailTemplate';
 import { LeagueDetailPageQuery } from '@/lib/page-queries/page-queries/LeagueDetailPageQuery';
 import { LeagueDetailViewDataBuilder } from '@/lib/builders/view-data/LeagueDetailViewDataBuilder';
+import { ErrorBanner } from '@/components/ui/ErrorBanner';
 
 interface Props {
   params: { id: string };
@@ -26,11 +27,11 @@ export default async function Page({ params }: Props) {
       default:
         // Return error state
         return (
-          <div className="min-h-screen bg-deep-graphite py-12 px-4 sm:px-6 lg:px-8">
-            <div className="max-w-6xl mx-auto">
-              <div className="text-center text-gray-400">Failed to load league details</div>
-            </div>
-          </div>
+          <ErrorBanner
+            title="Load Failed"
+            message="Failed to load league details"
+            variant="error"
+          />
         );
     }
   }