Stable version with additional styling

components/layout/app-nav.tsx

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation";
 import {
   Home,
   ListPlus,
+  Palette,
   ShoppingBag,
   Sparkles,
   UserRound,
@@ -19,10 +20,12 @@ const gridColsClass = {
   3: "grid-cols-3",
   4: "grid-cols-4",
   5: "grid-cols-5",
+  6: "grid-cols-6",
 } as const;
 
 const navIcons = {
   [routes.avatar]: Home,
+  [routes.customize]: Palette,
   [routes.habits]: ListPlus,
   [routes.dailyQuiz]: Sparkles,
   [routes.shop]: ShoppingBag,
@@ -37,14 +40,21 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
   const pathname = usePathname();
   const columnCount = Math.min(
     items.length,
-    5,
+    6,
   ) as keyof typeof gridColsClass;
 
   return (
-    <nav className="fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80">
+    <nav
+      className="fixed inset-x-0 bottom-0 z-50 border-t-2 border-border bg-background/95 shadow-[0_-4px_0_0_hsl(280_45%_28%/0.35)] backdrop-blur supports-[backdrop-filter]:bg-background/90"
+      style={{ height: "var(--bottom-nav-height)" }}
+    >
+      <div
+        aria-hidden
+        className="pointer-events-none absolute inset-x-0 top-0 h-px bg-secondary/40"
+      />
       <div
         className={cn(
-          "mx-auto grid max-w-lg gap-1 px-1 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
+          "mx-auto grid h-full max-w-6xl gap-1 px-2 pb-[max(0.5rem,env(safe-area-inset-bottom))] pt-2",
           gridColsClass[columnCount],
         )}
       >
@@ -59,18 +69,20 @@ export function AppNav({ items = appNavItems }: AppNavProps) {
               key={item.href}
               href={item.href}
               className={cn(
-                "flex flex-col items-center gap-1 rounded-lg px-1 py-2 text-[9px] font-medium leading-tight transition-colors",
+                "flex flex-col items-center justify-center gap-1.5 border-2 px-1 py-2 text-[9px] leading-none transition-all duration-75",
                 isActive
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                  ? "border-secondary bg-primary text-primary-foreground shadow-[var(--retro-shadow-sm)] -translate-y-0.5"
+                  : "border-transparent text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground hover:-translate-y-0.5",
               )}
             >
-              <Icon className="h-4 w-4" />
-              <span>{item.shortLabel}</span>
+              <Icon className="h-5 w-5 shrink-0" strokeWidth={2.5} />
+              <span className="max-w-full truncate uppercase tracking-wide">
+                {item.shortLabel}
+              </span>
             </Link>
           );
         })}
       </div>
     </nav>
   );
-}
+}

components/layout/app-page-header.tsx

@@ -0,0 +1,33 @@
+import { cn } from "@/lib/utils";
+
+type AppPageHeaderProps = {
+  title: string;
+  description?: string;
+  eyebrow?: string;
+  wide?: boolean;
+};
+
+export function AppPageHeader({
+  title,
+  description,
+  eyebrow,
+  wide = false,
+}: AppPageHeaderProps) {
+  return (
+    <header className="border-b-2 border-border bg-card/60 shadow-[var(--retro-shadow-sm)]">
+      <div className={cn("mx-auto px-5 py-5", wide ? "max-w-6xl" : "max-w-lg")}>
+        {eyebrow ? (
+          <p className="mb-2 text-xs uppercase tracking-[0.2em] text-muted-foreground">
+            {eyebrow}
+          </p>
+        ) : null}
+        <h1 className="text-sm">{title}</h1>
+        {description ? (
+          <p className="mt-2 text-xs leading-relaxed text-muted-foreground">
+            {description}
+          </p>
+        ) : null}
+      </div>
+    </header>
+  );
+}

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>
   );
 }