New look: slate-indigo panels, pink accent, Poppins, and a gradient card for your song

Inspired by a dashboard design the user shared.
- App: new palette and fonts, borderless rounded panels with soft shadows, a pink-to-blue
  gradient card for your own song (text and controls switch to white on it), flat cards for
  friends, a 'Hi Chris, welcome back' header, an outline bell, and a pink pill on the active tab.
- Website: the same look, plus a wide-screen layout with a sidebar, the page in a rounded panel,
  and a right column with your profile, recent activity and recent plays. Phones keep the top
  bar and bottom tabs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011Y2iUsKEWDuRGjK5FPmcUP

apps/web/src/app/layout.tsx

@@ -1,12 +1,11 @@
 import type { Metadata, Viewport } from 'next';
-import { Inter, Space_Grotesk } from 'next/font/google';
+import { Poppins } from 'next/font/google';
 import Link from 'next/link';
-import { Nav } from '@/components/Nav';
+import { Shell } from '@/components/Shell';
 import { Providers } from '@/components/Providers';
 import './globals.css';
 
-const inter = Inter({ subsets: ['latin'], variable: '--font-inter', display: 'swap' });
-const spaceGrotesk = Space_Grotesk({ subsets: ['latin'], variable: '--font-space-grotesk', display: 'swap' });
+const poppins = Poppins({ subsets: ['latin'], weight: ['400', '500', '600', '700'], variable: '--font-poppins', display: 'swap' });
 
 // Previews need absolute image URLs. In production the API lives at <site>/api, so its origin is the site's.
 const siteUrl = process.env.SITE_URL ?? new URL(process.env.NEXT_PUBLIC_API_URL ?? 'http://localhost:3737').origin;
@@ -21,23 +20,26 @@ export const metadata: Metadata = {
 };
 
 export const viewport: Viewport = {
-  themeColor: '#07070b',
+  themeColor: '#2a2942',
   viewportFit: 'cover',
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" className={`${inter.variable} ${spaceGrotesk.variable}`}>
+    <html lang="en" className={poppins.variable}>
       <body>
-        <div className="ambient" aria-hidden />
         <Providers>
-          <Nav />
-          <main className="container">{children}</main>
-          <footer className="footer">
-            <Link href="/privacy">Privacy</Link>
-            <Link href="/terms">Terms</Link>
-            <a href="mailto:app@musicshare.binarygnome.com">Contact</a>
-          </footer>
+          <Shell
+            footer={
+              <footer className="footer">
+                <Link href="/privacy">Privacy</Link>
+                <Link href="/terms">Terms</Link>
+                <a href="mailto:app@musicshare.binarygnome.com">Contact</a>
+              </footer>
+            }
+          >
+            {children}
+          </Shell>
         </Providers>
       </body>
     </html>