Stable version with additional styling

components/layout/app-shell.tsx

@@ -1,25 +1,32 @@
+import { AppPageHeader } from "@/components/layout/app-page-header";
+import { cn } from "@/lib/utils";
+
 type AppShellProps = {
   children: React.ReactNode;
   title?: string;
   description?: string;
+  wide?: boolean;
 };
 
-export function AppShell({ children, title, description }: AppShellProps) {
+export function AppShell({
+  children,
+  title,
+  description,
+  wide = false,
+}: AppShellProps) {
   return (
-    <div className="min-h-svh bg-background">
-      {(title || description) && (
-        <header className="border-b border-border/60 bg-card/40">
-          <div className="mx-auto max-w-lg px-5 py-5">
-            {title ? (
-              <h1 className="text-xl font-semibold tracking-tight">{title}</h1>
-            ) : null}
-            {description ? (
-              <p className="mt-1 text-sm text-muted-foreground">{description}</p>
-            ) : null}
-          </div>
-        </header>
-      )}
-      <main className="mx-auto max-w-lg px-5 py-6">{children}</main>
+    <div className="relative bg-background bg-[radial-gradient(circle_at_20%_0%,hsl(var(--primary)/0.12)_0%,transparent_45%),radial-gradient(circle_at_80%_100%,hsl(var(--secondary)/0.1)_0%,transparent_40%)]">
+      {title ? (
+        <AppPageHeader title={title} description={description} wide={wide} />
+      ) : null}
+      <main
+        className={cn(
+          "mx-auto px-5 py-6",
+          wide ? "max-w-6xl" : "max-w-lg",
+        )}
+      >
+        {children}
+      </main>
     </div>
   );
 }