From 2aa6842c9d3f6ff17ade34aa8f2c389157db0b0d Mon Sep 17 00:00:00 2001
From: rabble <evan@protest.net>
Date: Mon, 9 Mar 2026 22:21:47 +1300
Subject: [PATCH 1/3] Rebuild mobile-first web UI surfaces

---
 src/components/AppFooter.tsx           |  6 +--
 src/components/AppPage.tsx             | 75 ++++++++++++++++++++++++++
 src/components/AppSectionNav.tsx       | 41 ++++++++++++++
 src/components/CreatorSectionNav.tsx   | 60 +++++++++++++++++++++
 src/components/DiscoverySectionNav.tsx | 59 ++++++++++++++++++++
 src/components/MarketingLayout.tsx     |  6 +--
 src/pages/AboutPage.tsx                |  2 +-
 src/pages/AuthenticityPage.tsx         |  2 +-
 src/pages/FAQPage.tsx                  |  2 +-
 src/pages/GetEmbedPage.tsx             |  2 +-
 src/pages/HashtagDiscoveryPage.tsx     | 20 ++++---
 src/pages/HumanCreatedPage.tsx         |  2 +-
 src/pages/ListsPage.tsx                | 68 +++++++++++------------
 src/pages/OpenSourcePage.tsx           |  2 +-
 src/pages/ProofModePage.tsx            |  2 +-
 src/pages/UniversalUserPage.tsx        | 34 ++++++++----
 src/pages/VideoPage.tsx                | 25 ++++-----
 17 files changed, 335 insertions(+), 73 deletions(-)
 create mode 100644 src/components/AppPage.tsx
 create mode 100644 src/components/AppSectionNav.tsx
 create mode 100644 src/components/CreatorSectionNav.tsx
 create mode 100644 src/components/DiscoverySectionNav.tsx

diff --git a/src/components/AppFooter.tsx b/src/components/AppFooter.tsx
index 5f6d39d96..8a01e14b8 100644
--- a/src/components/AppFooter.tsx
+++ b/src/components/AppFooter.tsx
@@ -7,9 +7,9 @@ export function AppFooter() {
   const { t } = useTranslation();
 
   return (
-    <footer className="mt-auto border-t border-brand-dark-green py-6 pb-[calc(1.5rem+4rem+env(safe-area-inset-bottom))] md:pb-6 bg-brand-dark-green">
-      <div className="container">
-        <div className="max-w-5xl mx-auto">
+    <footer className="mt-auto bg-transparent px-4 pb-[calc(1.5rem+4rem+env(safe-area-inset-bottom))] pt-6 md:px-6 md:pb-6">
+      <div className="mx-auto max-w-6xl">
+        <div className="rounded-[32px] border border-brand-green/30 bg-brand-dark-green px-5 py-6 shadow-[0_24px_60px_rgba(8,29,23,0.35)] sm:px-6">
           {/* Main Footer Content - Side by side on desktop */}
           <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-6 mb-6">
             {/* Left side - Email signup */}
diff --git a/src/components/AppPage.tsx b/src/components/AppPage.tsx
new file mode 100644
index 000000000..51ad079eb
--- /dev/null
+++ b/src/components/AppPage.tsx
@@ -0,0 +1,75 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '@/lib/utils';
+
+type AppPageWidth = 'feed' | 'default' | 'detail' | 'wide' | 'full';
+
+const widthClassMap: Record<AppPageWidth, string> = {
+  feed: 'max-w-[42rem]',
+  default: 'max-w-[48rem]',
+  detail: 'max-w-[52rem]',
+  wide: 'max-w-[72rem]',
+  full: 'max-w-[88rem]',
+};
+
+interface AppPageProps extends HTMLAttributes<HTMLElement> {
+  width?: AppPageWidth;
+}
+
+interface AppPageHeaderProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  eyebrow?: ReactNode;
+  title: ReactNode;
+  description?: ReactNode;
+  actions?: ReactNode;
+  titleClassName?: string;
+  descriptionClassName?: string;
+}
+
+export function AppPage({
+  children,
+  className,
+  width = 'default',
+  ...props
+}: AppPageProps) {
+  return (
+    <section className={cn('app-page', className)} {...props}>
+      <div className={cn('app-page__inner', widthClassMap[width])}>
+        {children}
+      </div>
+    </section>
+  );
+}
+
+export function AppPageHeader({
+  eyebrow,
+  title,
+  description,
+  actions,
+  children,
+  className,
+  titleClassName,
+  descriptionClassName,
+  ...props
+}: AppPageHeaderProps) {
+  return (
+    <header className={cn('app-page__header', className)} {...props}>
+      <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
+        <div className="min-w-0 space-y-2">
+          {eyebrow ? <div className="app-eyebrow">{eyebrow}</div> : null}
+          <h1 className={cn('app-title', titleClassName)}>{title}</h1>
+          {description ? (
+            <p className={cn('app-subtitle', descriptionClassName)}>
+              {description}
+            </p>
+          ) : null}
+        </div>
+        {actions ? (
+          <div className="flex shrink-0 items-center gap-2 self-start md:pt-1">
+            {actions}
+          </div>
+        ) : null}
+      </div>
+      {children}
+    </header>
+  );
+}
diff --git a/src/components/AppSectionNav.tsx b/src/components/AppSectionNav.tsx
new file mode 100644
index 000000000..f1947fb9a
--- /dev/null
+++ b/src/components/AppSectionNav.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+
+import { SmartLink } from '@/components/SmartLink';
+import { cn } from '@/lib/utils';
+
+interface AppSectionNavItem {
+  label: ReactNode;
+  to: string;
+  icon?: ReactNode;
+  active?: boolean;
+  ownerPubkey?: string | null;
+}
+
+interface AppSectionNavProps {
+  items: AppSectionNavItem[];
+  className?: string;
+}
+
+export function AppSectionNav({ items, className }: AppSectionNavProps) {
+  if (!items.length) {
+    return null;
+  }
+
+  return (
+    <nav className={cn('app-chip-row', className)} aria-label="Section navigation">
+      <div className="flex gap-2 pb-2">
+        {items.map((item) => (
+          <SmartLink
+            key={`${item.to}-${typeof item.label === 'string' ? item.label : 'nav-item'}`}
+            to={item.to}
+            ownerPubkey={item.ownerPubkey}
+            className={cn('app-chip min-w-fit', item.active && 'app-chip-active')}
+          >
+            {item.icon}
+            <span>{item.label}</span>
+          </SmartLink>
+        ))}
+      </div>
+    </nav>
+  );
+}
diff --git a/src/components/CreatorSectionNav.tsx b/src/components/CreatorSectionNav.tsx
new file mode 100644
index 000000000..ca1d056c5
--- /dev/null
+++ b/src/components/CreatorSectionNav.tsx
@@ -0,0 +1,60 @@
+import {
+  ChartBar as BarChart3,
+  LinkSimple as Link2,
+  List,
+  Shield,
+  UserCircle as UserRound,
+} from '@phosphor-icons/react';
+
+import { AppSectionNav } from '@/components/AppSectionNav';
+
+type CreatorSection = 'analytics' | 'lists' | 'moderation' | 'linked-accounts' | 'profile';
+
+interface CreatorSectionNavProps {
+  active: CreatorSection;
+  profilePath?: string;
+}
+
+export function CreatorSectionNav({
+  active,
+  profilePath,
+}: CreatorSectionNavProps) {
+  return (
+    <AppSectionNav
+      items={[
+        {
+          label: 'Analytics',
+          to: '/analytics',
+          icon: <BarChart3 className="h-4 w-4" />,
+          active: active === 'analytics',
+        },
+        {
+          label: 'Lists',
+          to: '/lists',
+          icon: <List className="h-4 w-4" />,
+          active: active === 'lists',
+        },
+        {
+          label: 'Moderation',
+          to: '/settings/moderation',
+          icon: <Shield className="h-4 w-4" />,
+          active: active === 'moderation',
+        },
+        {
+          label: 'Linked Accounts',
+          to: '/settings/linked-accounts',
+          icon: <Link2 className="h-4 w-4" />,
+          active: active === 'linked-accounts',
+        },
+        ...(profilePath
+          ? [{
+              label: 'Profile',
+              to: profilePath,
+              icon: <UserRound className="h-4 w-4" />,
+              active: active === 'profile',
+            }]
+          : []),
+      ]}
+    />
+  );
+}
diff --git a/src/components/DiscoverySectionNav.tsx b/src/components/DiscoverySectionNav.tsx
new file mode 100644
index 000000000..ccbd4796f
--- /dev/null
+++ b/src/components/DiscoverySectionNav.tsx
@@ -0,0 +1,59 @@
+import {
+  Compass,
+  Fire as Flame,
+  Hash,
+  SquaresFour as LayoutGrid,
+  Trophy,
+} from '@phosphor-icons/react';
+
+import { AppSectionNav } from '@/components/AppSectionNav';
+
+type DiscoverySection =
+  | 'discover'
+  | 'trending'
+  | 'hashtags'
+  | 'categories'
+  | 'leaderboard';
+
+interface DiscoverySectionNavProps {
+  active: DiscoverySection;
+}
+
+export function DiscoverySectionNav({ active }: DiscoverySectionNavProps) {
+  return (
+    <AppSectionNav
+      items={[
+        {
+          label: 'Discover',
+          to: '/discovery/classics',
+          icon: <Compass className="h-4 w-4" />,
+          active: active === 'discover',
+        },
+        {
+          label: 'Trending',
+          to: '/trending',
+          icon: <Flame className="h-4 w-4" />,
+          active: active === 'trending',
+        },
+        {
+          label: 'Hashtags',
+          to: '/hashtags',
+          icon: <Hash className="h-4 w-4" />,
+          active: active === 'hashtags',
+        },
+        {
+          label: 'Categories',
+          to: '/category',
+          icon: <LayoutGrid className="h-4 w-4" />,
+          active: active === 'categories',
+        },
+        {
+          label: 'Leaderboard',
+          to: '/leaderboard',
+          icon: <Trophy className="h-4 w-4" />,
+          active: active === 'leaderboard',
+        },
+      ]}
+    />
+  );
+}
diff --git a/src/components/MarketingLayout.tsx b/src/components/MarketingLayout.tsx
index 2b67549e9..e24ab5c2a 100644
--- a/src/components/MarketingLayout.tsx
+++ b/src/components/MarketingLayout.tsx
@@ -10,11 +10,11 @@ interface MarketingLayoutProps {
 
 export function MarketingLayout({ children }: MarketingLayoutProps) {
   return (
-    <div className="min-h-screen flex flex-col bg-background">
+    <div className="min-h-screen flex flex-col bg-background text-foreground">
       <MarketingHeader />
-      <div className="flex-1 pt-16">
+      <main className="marketing-shell pt-[6.25rem] md:pt-28">
         {children}
-      </div>
+      </main>
       <AppFooter />
     </div>
   );
diff --git a/src/pages/AboutPage.tsx b/src/pages/AboutPage.tsx
index 6fc091414..473c7c596 100644
--- a/src/pages/AboutPage.tsx
+++ b/src/pages/AboutPage.tsx
@@ -18,7 +18,7 @@ export function AboutPage() {
 
   return (
     <MarketingLayout>
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <div className="marketing-page marketing-page--default marketing-stack">
       <ZendeskWidget />
       <h1 className="text-4xl font-bold mb-8">{t('title')}</h1>
 
diff --git a/src/pages/AuthenticityPage.tsx b/src/pages/AuthenticityPage.tsx
index 1ac6c9321..e4260f114 100644
--- a/src/pages/AuthenticityPage.tsx
+++ b/src/pages/AuthenticityPage.tsx
@@ -14,7 +14,7 @@ export function AuthenticityPage() {
 
   return (
     <MarketingLayout>
-      <div className="container max-w-4xl mx-auto py-8 px-4 space-y-8">
+      <div className="marketing-page marketing-page--default marketing-stack">
       <ZendeskWidget />
       {/* Hero Section */}
       <div className="text-center space-y-4 py-8">
diff --git a/src/pages/FAQPage.tsx b/src/pages/FAQPage.tsx
index 82377ddb1..689ac8c0f 100644
--- a/src/pages/FAQPage.tsx
+++ b/src/pages/FAQPage.tsx
@@ -74,7 +74,7 @@ export function FAQPage() {
 
   return (
     <MarketingLayout>
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <div className="marketing-page marketing-page--default marketing-stack">
       <ZendeskWidget />
       <div className="text-center space-y-4 mb-8">
         <div className="flex items-center justify-center gap-3">
diff --git a/src/pages/GetEmbedPage.tsx b/src/pages/GetEmbedPage.tsx
index 6318c3353..f433a3469 100644
--- a/src/pages/GetEmbedPage.tsx
+++ b/src/pages/GetEmbedPage.tsx
@@ -79,7 +79,7 @@ export function GetEmbedPage() {
 
   return (
     <MarketingLayout>
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <div className="marketing-page marketing-page--default marketing-stack">
         <div className="flex items-center gap-3 mb-2">
           <Code className="h-8 w-8 text-brand-green" />
           <h1 className="text-4xl font-bold">{t('getEmbedPage.title')}</h1>
diff --git a/src/pages/HashtagDiscoveryPage.tsx b/src/pages/HashtagDiscoveryPage.tsx
index b3faf7267..45c5c17d8 100644
--- a/src/pages/HashtagDiscoveryPage.tsx
+++ b/src/pages/HashtagDiscoveryPage.tsx
@@ -2,15 +2,23 @@
 // ABOUTME: Includes search functionality and hashtag statistics with enhanced explorer
 
 import { HashtagExplorer } from '@/components/HashtagExplorer';
+import { AppPage, AppPageHeader } from '@/components/AppPage';
+import { DiscoverySectionNav } from '@/components/DiscoverySectionNav';
 
 export function HashtagDiscoveryPage() {
   return (
-    <div className="container mx-auto px-4 py-6">
-      <div className="max-w-6xl mx-auto">
-        <HashtagExplorer />
-      </div>
-    </div>
+    <AppPage width="wide">
+      <AppPageHeader
+        eyebrow="Conversation clusters"
+        title="Hashtags"
+        description="Follow live topics, niches, and recurring community memes."
+      >
+        <DiscoverySectionNav active="hashtags" />
+      </AppPageHeader>
+
+      <HashtagExplorer />
+    </AppPage>
   );
 }
 
-export default HashtagDiscoveryPage;
\ No newline at end of file
+export default HashtagDiscoveryPage;
diff --git a/src/pages/HumanCreatedPage.tsx b/src/pages/HumanCreatedPage.tsx
index 92af4f7f3..4b01c167c 100644
--- a/src/pages/HumanCreatedPage.tsx
+++ b/src/pages/HumanCreatedPage.tsx
@@ -12,7 +12,7 @@ export default function HumanCreatedPage() {
 
   return (
     <MarketingLayout>
-      <div className="container max-w-4xl mx-auto px-4 py-8">
+      <div className="marketing-page marketing-page--default marketing-stack">
       <div className="space-y-8">
         {/* Header */}
         <div className="text-center space-y-4">
diff --git a/src/pages/ListsPage.tsx b/src/pages/ListsPage.tsx
index f4a1219be..f2703721d 100644
--- a/src/pages/ListsPage.tsx
+++ b/src/pages/ListsPage.tsx
@@ -18,6 +18,8 @@ import { genUserName } from '@/lib/genUserName';
 import { CreateListDialog } from '@/components/CreateListDialog';
 import { formatDistanceToNow } from 'date-fns';
 import { getSafeProfileImage } from '@/lib/imageUtils';
+import { AppPage, AppPageHeader } from '@/components/AppPage';
+import { CreatorSectionNav } from '@/components/CreatorSectionNav';
 
 interface ListCardProps {
   id: string;
@@ -35,7 +37,7 @@ function ListCard({ list }: { list: ListCardProps }) {
   const authorName = authorMetadata?.name || genUserName(list.pubkey);
 
   return (
-    <Card className="hover:shadow-lg transition-shadow">
+    <Card className="app-surface transition-transform duration-200 hover:-translate-y-0.5">
       <CardHeader>
         <div className="flex items-start justify-between">
           <div className="flex-1">
@@ -107,43 +109,43 @@ export default function ListsPage() {
   const [showCreateDialog, setShowCreateDialog] = useState(false);
   const { data: followedPubkeys } = useFollowList();
   const { data: followedUsersLists, isLoading: discoverLoading } = useFollowedUsersLists(followedPubkeys);
+  const profilePath = user ? `/profile/${nip19.npubEncode(user.pubkey)}` : undefined;
 
   return (
-    <div className="container max-w-6xl mx-auto px-4 py-8">
-      {/* Header */}
-      <div className="mb-8">
-        <div className="flex items-center justify-between mb-4">
-          <h1 className="text-3xl font-bold flex items-center gap-2">
+    <AppPage width="full">
+      <AppPageHeader
+        eyebrow="Collect and curate"
+        title={(
+          <span className="flex items-center gap-3">
             <List className="h-8 w-8" />
-            Video Lists
-          </h1>
-          {user && (
-            <Button onClick={() => setShowCreateDialog(true)}>
-              <Plus className="h-4 w-4 mr-2" />
-              Create List
-            </Button>
-          )}
-        </div>
-        <p className="text-muted-foreground">
-          Discover curated collections of videos from the community
-        </p>
-      </div>
+            <span>Video Lists</span>
+          </span>
+        )}
+        description="Build collections, follow community curation, and move between creator workflows faster."
+        actions={user ? (
+          <Button onClick={() => setShowCreateDialog(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Create List
+          </Button>
+        ) : undefined}
+      >
+        <CreatorSectionNav active="lists" profilePath={profilePath} />
+      </AppPageHeader>
 
-      {/* Tabs */}
       <Tabs defaultValue={user ? 'my-lists' : 'trending'} className="space-y-6">
-        <TabsList>
+        <TabsList className={`app-tab-list ${user ? 'grid-cols-3' : 'grid-cols-2'} sm:w-fit`}>
           {user && (
-            <TabsTrigger value="my-lists">
-              <List className="h-4 w-4 mr-2" />
+            <TabsTrigger value="my-lists" className="gap-2 rounded-[20px]">
+              <List className="mr-2 h-4 w-4" />
               My Lists
             </TabsTrigger>
           )}
-          <TabsTrigger value="trending">
-            <TrendingUp className="h-4 w-4 mr-2" />
+          <TabsTrigger value="trending" className="gap-2 rounded-[20px]">
+            <TrendingUp className="mr-2 h-4 w-4" />
             Trending
           </TabsTrigger>
-          <TabsTrigger value="discover">
-            <Users className="h-4 w-4 mr-2" />
+          <TabsTrigger value="discover" className="gap-2 rounded-[20px]">
+            <Users className="mr-2 h-4 w-4" />
             Discover
           </TabsTrigger>
         </TabsList>
@@ -172,7 +174,7 @@ export default function ListsPage() {
                 ))}
               </div>
             ) : (
-              <Card className="border-dashed">
+              <Card className="app-surface border-2 border-dashed">
                 <CardContent className="py-12 text-center">
                   <List className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                   <p className="text-muted-foreground mb-4">
@@ -217,7 +219,7 @@ export default function ListsPage() {
               </div>
             </>
           ) : (
-            <Card className="border-dashed">
+            <Card className="app-surface border-2 border-dashed">
               <CardContent className="py-12 text-center">
                 <TrendingUp className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                 <p className="text-muted-foreground">
@@ -231,7 +233,7 @@ export default function ListsPage() {
         {/* Discover Tab */}
         <TabsContent value="discover" className="space-y-6">
           {!user ? (
-            <Card className="border-dashed">
+            <Card className="app-surface border-2 border-dashed">
               <CardContent className="py-12 text-center">
                 <Users className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                 <p className="text-muted-foreground mb-4">
@@ -266,7 +268,7 @@ export default function ListsPage() {
               </div>
             </>
           ) : followedPubkeys && followedPubkeys.length > 0 ? (
-            <Card className="border-dashed">
+            <Card className="app-surface border-2 border-dashed">
               <CardContent className="py-12 text-center">
                 <Users className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                 <p className="text-muted-foreground">
@@ -278,7 +280,7 @@ export default function ListsPage() {
               </CardContent>
             </Card>
           ) : (
-            <Card className="border-dashed">
+            <Card className="app-surface border-2 border-dashed">
               <CardContent className="py-12 text-center">
                 <Users className="h-12 w-12 mx-auto mb-4 text-muted-foreground" />
                 <p className="text-muted-foreground mb-4">
@@ -297,6 +299,6 @@ export default function ListsPage() {
           onClose={() => setShowCreateDialog(false)}
         />
       )}
-    </div>
+    </AppPage>
   );
 }
diff --git a/src/pages/OpenSourcePage.tsx b/src/pages/OpenSourcePage.tsx
index f693054af..01ce082f1 100644
--- a/src/pages/OpenSourcePage.tsx
+++ b/src/pages/OpenSourcePage.tsx
@@ -15,7 +15,7 @@ export function OpenSourcePage() {
 
   return (
     <MarketingLayout>
-      <div className="container mx-auto px-4 py-8 max-w-4xl">
+      <div className="marketing-page marketing-page--default marketing-stack">
       <ZendeskWidget />
       <h1 className="text-4xl font-bold mb-8">{t('title')}</h1>
 
diff --git a/src/pages/ProofModePage.tsx b/src/pages/ProofModePage.tsx
index 88ca7a899..9d699087e 100644
--- a/src/pages/ProofModePage.tsx
+++ b/src/pages/ProofModePage.tsx
@@ -12,7 +12,7 @@ export function ProofModePage() {
 
   return (
     <MarketingLayout>
-      <div className="container max-w-4xl mx-auto py-8 px-4 space-y-8">
+      <div className="marketing-page marketing-page--default marketing-stack">
       {/* Hero Section */}
       <div className="space-y-4">
         <div className="flex items-center gap-3">
diff --git a/src/pages/UniversalUserPage.tsx b/src/pages/UniversalUserPage.tsx
index 4eeeeb927..ef85443bb 100644
--- a/src/pages/UniversalUserPage.tsx
+++ b/src/pages/UniversalUserPage.tsx
@@ -13,6 +13,7 @@ import { debugLog } from '@/lib/debug';
 import { nip05CandidatesFromUrlSegment } from '@/lib/profileLinks';
 import { resolveNip05ToPubkey } from '@/lib/nip05Resolve';
 import { DIVINE_APEX_DOMAINS } from '@/lib/nip05Utils';
+import { AppPage, AppPageHeader } from '@/components/AppPage';
 import ProfilePage from './ProfilePage';
 
 const VINE_USER_ID_PATTERN = /^\d{15,20}$/;
@@ -382,8 +383,13 @@ export function UniversalUserPage() {
 
   if (isLoading) {
     return (
-      <div className="container max-w-4xl mx-auto px-4 py-8">
-        <Card className="border-dashed">
+      <AppPage width="detail">
+        <AppPageHeader
+          eyebrow="Profile lookup"
+          title="Finding user"
+          description={`Resolving ${isVineUserId(userId || '') ? 'Vine' : 'NIP-05'} identifier ${userId || ''}.`}
+        />
+        <Card className="app-surface border-2 border-dashed">
           <CardContent className="py-12">
             <div className="flex flex-col items-center justify-center space-y-4">
               <Loader2 className="h-8 w-8 animate-spin text-primary" />
@@ -396,14 +402,19 @@ export function UniversalUserPage() {
             </div>
           </CardContent>
         </Card>
-      </div>
+      </AppPage>
     );
   }
 
   if (error) {
     return (
-      <div className="container max-w-4xl mx-auto px-4 py-8">
-        <Card className="border-destructive">
+      <AppPage width="detail">
+        <AppPageHeader
+          eyebrow="Profile lookup"
+          title="User not found"
+          description="We could not resolve this identifier into a diVine profile."
+        />
+        <Card className="app-surface border-destructive">
           <CardContent className="py-12">
             <div className="flex flex-col items-center justify-center space-y-4">
               <AlertCircle className="h-12 w-12 text-destructive" />
@@ -424,13 +435,18 @@ export function UniversalUserPage() {
             </div>
           </CardContent>
         </Card>
-      </div>
+      </AppPage>
     );
   }
 
   return (
-    <div className="container max-w-4xl mx-auto px-4 py-8">
-      <Card className="border-dashed">
+    <AppPage width="detail">
+      <AppPageHeader
+        eyebrow="Profile lookup"
+        title="Redirecting"
+        description="We found a matching user and are opening their profile."
+      />
+      <Card className="app-surface border-2 border-dashed">
         <CardContent className="py-12">
           <div className="flex flex-col items-center justify-center space-y-4">
             <Loader2 className="h-8 w-8 animate-spin text-primary" />
@@ -438,6 +454,6 @@ export function UniversalUserPage() {
           </div>
         </CardContent>
       </Card>
-    </div>
+    </AppPage>
   );
 }
diff --git a/src/pages/VideoPage.tsx b/src/pages/VideoPage.tsx
index 2b7daf6b9..467bef0b2 100644
--- a/src/pages/VideoPage.tsx
+++ b/src/pages/VideoPage.tsx
@@ -26,6 +26,7 @@ import { debugLog } from '@/lib/debug';
 import { getVisiblePlaybackCount } from '@/lib/playbackCount';
 import { reportFunnelcakeFallback } from '@/lib/funnelcakeFallbackReporting';
 import type { ParsedVideoData, UserInteractions } from '@/types/video';
+import { AppPage } from '@/components/AppPage';
 
 export function VideoPage() {
   const { t } = useTranslation();
@@ -548,20 +549,20 @@ export function VideoPage() {
   // Check for missing ID after all hooks
   if (!id) {
     return (
-      <div className="container py-6">
+      <AppPage width="detail">
         <Card className="border-destructive/50">
           <CardContent className="py-12 text-center">
             <p className="text-destructive">{t('videoPage.noVideoId')}</p>
           </CardContent>
         </Card>
-      </div>
+      </AppPage>
     );
   }
 
   // Show error state if video not found
   if (!isLoading && !currentVideo) {
     return (
-      <div className="container py-6">
+      <AppPage width="detail">
         <Card className="border-dashed">
           <CardContent className="py-12 text-center space-y-4">
             <p className="text-muted-foreground text-lg font-semibold">{t('videoPage.notFoundTitle')}</p>
@@ -573,7 +574,7 @@ export function VideoPage() {
             </p>
           </CardContent>
         </Card>
-      </div>
+      </AppPage>
     );
   }
 
@@ -585,8 +586,8 @@ export function VideoPage() {
   if (showFeedLoading) {
     // Show feed-style loading when we have context but videos haven't loaded yet
     return (
-      <div className="container py-6">
-        <div className="sticky top-0 z-20 bg-background/95 backdrop-blur-sm border-b pb-3 mb-4 -mx-4 px-4">
+      <AppPage width="detail">
+        <div className="sticky top-[calc(var(--app-header-height)+var(--sat)+0.5rem)] z-20 mb-4 app-surface-muted px-4 py-3">
           <div className="flex items-center justify-between max-w-xl mx-auto">
             <button
               onClick={handleGoBack}
@@ -639,15 +640,15 @@ export function VideoPage() {
             </Card>
           ))}
         </div>
-      </div>
+      </AppPage>
     );
   }
 
   if (showFeedMode) {
     return (
-      <div className="container py-6">
+      <AppPage width="detail">
         {/* Header with close button */}
-        <div className="sticky top-0 z-20 bg-background/95 backdrop-blur-sm border-b pb-3 mb-4 -mx-4 px-4">
+        <div className="sticky top-[calc(var(--app-header-height)+var(--sat)+0.5rem)] z-20 mb-4 app-surface-muted px-4 py-3">
           <div className="flex items-center justify-between max-w-xl mx-auto">
             <button
               onClick={handleGoBack}
@@ -731,13 +732,13 @@ export function VideoPage() {
             );
           })}
         </InfiniteScroll>
-      </div>
+      </AppPage>
     );
   }
 
   // Single video mode: show just the current video with navigation
   return (
-    <div className="container py-6">
+    <AppPage width="detail">
       {/* Subtle Navigation Context Info */}
       {context && (
         <div className="mb-4">
@@ -854,7 +855,7 @@ export function VideoPage() {
           </div>
         </div>
       )}
-    </div>
+    </AppPage>
   );
 }
 

From 9b239a1a314d5bd6e548d5f7b63579705b0c8d8a Mon Sep 17 00:00:00 2001
From: rabble <evan@protest.net>
Date: Sat, 4 Jul 2026 13:05:56 +1200
Subject: [PATCH 2/3] fix(ui): style mobile app primitives

---
 src/styles/brand-utilities.css         | 102 +++++++++++++++++++++++++
 tests/brand/app-primitives-css.test.ts |  21 +++++
 2 files changed, 123 insertions(+)
 create mode 100644 tests/brand/app-primitives-css.test.ts

diff --git a/src/styles/brand-utilities.css b/src/styles/brand-utilities.css
index 71314ce6b..f2b6c8d06 100644
--- a/src/styles/brand-utilities.css
+++ b/src/styles/brand-utilities.css
@@ -1,5 +1,107 @@
 /* Divine brand utilities — applied in @layer components so they compose with tailwind */
 @layer components {
+  .app-page {
+    width: 100%;
+    padding: 1rem max(1rem, var(--sar)) calc(5rem + var(--sab)) max(1rem, var(--sal));
+  }
+
+  .app-page__inner {
+    width: 100%;
+    margin-inline: auto;
+  }
+
+  .app-page__header {
+    margin-bottom: 1.25rem;
+  }
+
+  .app-eyebrow {
+    color: hsl(var(--primary));
+    font-size: 0.8125rem;
+    font-weight: 700;
+    line-height: 1.2;
+    letter-spacing: 0;
+  }
+
+  .app-title {
+    color: hsl(var(--foreground));
+    font-family: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
+    font-size: 1.75rem;
+    font-weight: 800;
+    line-height: 1;
+    letter-spacing: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .app-subtitle {
+    max-width: 42rem;
+    color: hsl(var(--muted-foreground));
+    font-size: 0.9375rem;
+    line-height: 1.55;
+    letter-spacing: 0;
+  }
+
+  .app-chip-row {
+    margin-bottom: 1rem;
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scrollbar-width: none;
+  }
+
+  .app-chip-row::-webkit-scrollbar {
+    display: none;
+  }
+
+  .app-chip {
+    display: inline-flex;
+    min-height: 2.5rem;
+    align-items: center;
+    justify-content: center;
+    gap: 0.4rem;
+    border: 2px solid hsl(var(--border));
+    border-radius: 999px;
+    background: hsl(var(--background));
+    color: hsl(var(--foreground));
+    padding: 0.5rem 0.875rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+    line-height: 1;
+    letter-spacing: 0;
+    white-space: nowrap;
+    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
+                box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .app-chip:hover {
+    border-color: hsl(var(--brand-dark-green));
+    background: hsl(var(--accent));
+  }
+
+  .app-chip-active {
+    border-color: hsl(var(--brand-dark-green));
+    background: hsl(var(--primary));
+    color: hsl(var(--primary-foreground));
+    box-shadow: 3px 3px 0 0 hsl(var(--brand-dark-green));
+  }
+
+  @media (min-width: 768px) {
+    .app-page {
+      padding: 1.5rem max(1.5rem, var(--sar)) 2.5rem max(1.5rem, var(--sal));
+    }
+
+    .app-page__header {
+      margin-bottom: 1.5rem;
+    }
+
+    .app-title {
+      font-size: 2.25rem;
+    }
+
+    .app-subtitle {
+      font-size: 1rem;
+    }
+  }
+
   /* Chunky offset shadows — no blur, solid color. Named by accent. */
   .brand-offset-shadow-green  { box-shadow: 6px 6px 0 0 hsl(var(--brand-green)); }
   .brand-offset-shadow-pink   { box-shadow: 6px 6px 0 0 hsl(var(--brand-pink)); }
diff --git a/tests/brand/app-primitives-css.test.ts b/tests/brand/app-primitives-css.test.ts
new file mode 100644
index 000000000..edf39e6bc
--- /dev/null
+++ b/tests/brand/app-primitives-css.test.ts
@@ -0,0 +1,21 @@
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import { describe, expect, it } from 'vitest';
+
+const css = readFileSync(resolve(process.cwd(), 'src/styles/brand-utilities.css'), 'utf8');
+
+describe('app primitive CSS', () => {
+  it.each([
+    'app-page',
+    'app-page__inner',
+    'app-page__header',
+    'app-eyebrow',
+    'app-title',
+    'app-subtitle',
+    'app-chip-row',
+    'app-chip',
+    'app-chip-active',
+  ])('defines .%s', (className) => {
+    expect(css).toContain(`.${className}`);
+  });
+});

From 59deee0e8b4f5d6d9d3af1bc2202b31f80737aa6 Mon Sep 17 00:00:00 2001
From: Liz Sweigart <127434495+NotThatKindOfDrLiz@users.noreply.github.com>
Date: Wed, 22 Jul 2026 19:00:55 -0500
Subject: [PATCH 3/3] fix(ui): define migrated layout primitives

---
 src/components/MarketingHeader.tsx     | 25 +++++------
 src/index.css                          |  7 +++
 src/styles/brand-utilities.css         | 48 +++++++++++++++++++++
 tests/brand/app-primitives-css.test.ts | 60 +++++++++++++++++++-------
 4 files changed, 111 insertions(+), 29 deletions(-)

diff --git a/src/components/MarketingHeader.tsx b/src/components/MarketingHeader.tsx
index d2c2f4b40..b69d6eca4 100644
--- a/src/components/MarketingHeader.tsx
+++ b/src/components/MarketingHeader.tsx
@@ -3,6 +3,7 @@
 
 import { Link } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import { ArrowRight } from "@phosphor-icons/react";
 
 export function MarketingHeader() {
   const { t } = useTranslation();
@@ -10,9 +11,8 @@ export function MarketingHeader() {
   return (
     <nav className="fixed top-0 left-0 right-0 z-50 bg-brand-dark-green border-b border-brand-green">
       <div className="container mx-auto px-4">
-        <div className="flex items-center justify-between h-16">
-          {/* Logo */}
-          <Link to="/">
+        <div className="flex h-16 items-center justify-between gap-4">
+          <Link to="/" className="shrink-0">
             <img
               src="/divine-logo.svg"
               alt="Divine"
@@ -20,8 +20,7 @@ export function MarketingHeader() {
             />
           </Link>
 
-          {/* Navigation Links */}
-          <div className="flex items-center gap-8">
+          <div className="hidden items-center gap-8 md:flex">
             <a
               href="https://about.divine.video/"
               className="text-sm font-medium text-brand-off-white hover:text-brand-green transition-colors"
@@ -52,16 +51,14 @@ export function MarketingHeader() {
             >
               {t('menu.merch')}
             </Link>
-            <Link
-              to="/discovery"
-              className="inline-flex items-center gap-1.5 px-4 py-2 text-sm font-semibold bg-primary text-primary-foreground rounded-full hover:brightness-110 transition-colors"
-            >
-              Try it
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 7l5 5m0 0l-5 5m5-5H6" />
-              </svg>
-            </Link>
           </div>
+          <Link
+            to="/discovery"
+            className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:brightness-110"
+          >
+            Try it
+            <ArrowRight className="h-4 w-4" />
+          </Link>
         </div>
       </div>
     </nav>
diff --git a/src/index.css b/src/index.css
index 8cbf58563..15230b9fa 100644
--- a/src/index.css
+++ b/src/index.css
@@ -76,6 +76,7 @@
     --sar: env(safe-area-inset-right, 0px);
     --sab: env(safe-area-inset-bottom, 0px);
     --sal: env(safe-area-inset-left, 0px);
+    --app-header-height: 4rem;
 
     /* Design tokens for improved styling */
     --radius-small: 0.5rem;
@@ -183,6 +184,12 @@
 
     --sidebar-ring: 158 67% 46%;
   }
+
+  @media (min-width: 768px) {
+    :root {
+      --app-header-height: 0px;
+    }
+  }
 }
 
 /* Prevent browser overflow anchoring from shifting feed on dynamic updates */
diff --git a/src/styles/brand-utilities.css b/src/styles/brand-utilities.css
index f2b6c8d06..586a61486 100644
--- a/src/styles/brand-utilities.css
+++ b/src/styles/brand-utilities.css
@@ -1,5 +1,25 @@
 /* Divine brand utilities — applied in @layer components so they compose with tailwind */
 @layer components {
+  .marketing-shell {
+    width: 100%;
+  }
+
+  .marketing-page {
+    width: 100%;
+    margin-inline: auto;
+    padding: 2rem max(1rem, var(--sar));
+  }
+
+  .marketing-page--default {
+    max-width: 56rem;
+  }
+
+  .marketing-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
   .app-page {
     width: 100%;
     padding: 1rem max(1rem, var(--sar)) calc(5rem + var(--sab)) max(1rem, var(--sal));
@@ -84,7 +104,35 @@
     box-shadow: 3px 3px 0 0 hsl(var(--brand-dark-green));
   }
 
+  .app-surface {
+    border-color: hsl(var(--brand-light-green));
+    background: hsl(var(--card));
+    color: hsl(var(--card-foreground));
+  }
+
+  .app-surface-muted {
+    border: 1px solid hsl(var(--border));
+    border-radius: 1rem;
+    background: hsl(var(--background) / 0.95);
+    color: hsl(var(--foreground));
+    box-shadow: 0 1px 0 0 hsl(var(--border));
+    backdrop-filter: blur(12px);
+  }
+
+  .app-tab-list {
+    display: grid;
+    width: 100%;
+    height: auto;
+    min-height: 3rem;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
   @media (min-width: 768px) {
+    .marketing-page {
+      padding: 2.5rem max(1.5rem, var(--sar));
+    }
+
     .app-page {
       padding: 1.5rem max(1.5rem, var(--sar)) 2.5rem max(1.5rem, var(--sal));
     }
diff --git a/tests/brand/app-primitives-css.test.ts b/tests/brand/app-primitives-css.test.ts
index edf39e6bc..34e82c5d8 100644
--- a/tests/brand/app-primitives-css.test.ts
+++ b/tests/brand/app-primitives-css.test.ts
@@ -1,21 +1,51 @@
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
+import { readdirSync, readFileSync, statSync } from 'node:fs';
+import { join, resolve } from 'node:path';
 import { describe, expect, it } from 'vitest';
 
-const css = readFileSync(resolve(process.cwd(), 'src/styles/brand-utilities.css'), 'utf8');
+const brandUtilitiesCss = readFileSync(resolve(process.cwd(), 'src/styles/brand-utilities.css'), 'utf8');
+const indexCss = readFileSync(resolve(process.cwd(), 'src/index.css'), 'utf8');
+
+function getSourceFiles(dir: string): string[] {
+  return readdirSync(dir).flatMap((entry) => {
+    const path = join(dir, entry);
+    const stat = statSync(path);
+
+    if (stat.isDirectory()) {
+      return getSourceFiles(path);
+    }
+
+    return /\.(ts|tsx)$/.test(path) && !/\.test\.tsx?$/.test(path) ? [path] : [];
+  });
+}
+
+function getReferencedPrimitiveClasses(): string[] {
+  const classNames = new Set<string>();
+  const primitiveClassPattern = /(?<!-)\b(?:app|marketing)-[A-Za-z0-9_-]+/g;
+
+  for (const sourceFile of getSourceFiles(resolve(process.cwd(), 'src'))) {
+    const source = readFileSync(sourceFile, 'utf8');
+    const classNameLines = source.split('\n').filter((line) => line.includes('className'));
+
+    for (const line of classNameLines) {
+      for (const match of line.matchAll(primitiveClassPattern)) {
+        classNames.add(match[0]);
+      }
+    }
+  }
+
+  return [...classNames].sort();
+}
 
 describe('app primitive CSS', () => {
-  it.each([
-    'app-page',
-    'app-page__inner',
-    'app-page__header',
-    'app-eyebrow',
-    'app-title',
-    'app-subtitle',
-    'app-chip-row',
-    'app-chip',
-    'app-chip-active',
-  ])('defines .%s', (className) => {
-    expect(css).toContain(`.${className}`);
+  it('defines every referenced app and marketing primitive class', () => {
+    const missingClassNames = getReferencedPrimitiveClasses().filter(
+      (className) => !brandUtilitiesCss.includes(`.${className}`),
+    );
+
+    expect(missingClassNames).toEqual([]);
+  });
+
+  it('defines the app header height token used by sticky app surfaces', () => {
+    expect(indexCss).toContain('--app-header-height:');
   });
 });