feat(web): Next.js 15 shell — design tokens, landing, auth pages

apps/web/app/(marketing)/layout.tsx

@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import { Logo } from '@/components/logo';
+
+export default function MarketingLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen flex-col">
+      <header className="sticky top-0 z-50 border-b border-[--color-border] bg-[--color-bg]/80 backdrop-blur-md">
+        <div className="mx-auto flex h-12 max-w-6xl items-center justify-between px-6">
+          <div className="flex items-center gap-6">
+            <Logo />
+            <nav className="hidden items-center gap-5 text-[13px] text-[--color-fg-muted] md:flex">
+              <Link href="/#how" className="transition-colors hover:text-[--color-fg]">
+                How it works
+              </Link>
+              <Link href="/#pricing" className="transition-colors hover:text-[--color-fg]">
+                Pricing
+              </Link>
+              <Link href="/docs" className="transition-colors hover:text-[--color-fg]">
+                Docs
+              </Link>
+              <Link href="/changelog" className="transition-colors hover:text-[--color-fg]">
+                Changelog
+              </Link>
+            </nav>
+          </div>
+          <div className="flex items-center gap-2">
+            <Link
+              href="/login"
+              className="rounded-md px-3 py-1.5 text-[13px] text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
+            >
+              Sign in
+            </Link>
+            <Link
+              href="/login"
+              className="rounded-md bg-[--color-accent] px-3 py-1.5 text-[13px] font-medium text-white transition-colors duration-200 hover:bg-[#5557e8]"
+            >
+              Start building
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main className="flex-1">{children}</main>
+      <footer className="border-t border-[--color-border] py-8">
+        <div className="mx-auto flex max-w-6xl flex-col gap-4 px-6 text-[12px] text-[--color-fg-subtle] md:flex-row md:items-center md:justify-between">
+          <div className="flex items-center gap-2">
+            <span className="size-1.5 animate-pulse rounded-full bg-emerald-400" />
+            <span>All systems operational</span>
+          </div>
+          <div className="flex flex-wrap gap-x-5 gap-y-1">
+            <Link href="/docs" className="transition-colors hover:text-[--color-fg]">
+              Docs
+            </Link>
+            <Link href="/security" className="transition-colors hover:text-[--color-fg]">
+              Security
+            </Link>
+            <Link href="/privacy" className="transition-colors hover:text-[--color-fg]">
+              Privacy
+            </Link>
+            <Link href="/terms" className="transition-colors hover:text-[--color-fg]">
+              Terms
+            </Link>
+          </div>
+          <div>&copy; {new Date().getFullYear()} BuildMyMCPServer</div>
+        </div>
+      </footer>
+    </div>
+  );
+}