tlv84yb7n: Build the sign-in screen and signed-in placeholder shell

src/app/globals.css

@@ -0,0 +1,15 @@
+:root { --red: #E8202A; --ink: #111; --grey: #6b6b6b; --line: #d9d9d9; --bg: #f5f5f5; }
+* { box-sizing: border-box; }
+body { margin: 0; font-family: Roboto, system-ui, sans-serif; color: var(--ink); background: var(--bg); }
+.center { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
+.card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px 24px; display: flex; flex-direction: column; gap: 8px; }
+.card h1 { font-size: 22px; margin: 12px 0 8px; }
+label { font-size: 14px; font-weight: 500; margin-top: 8px; }
+input { font: inherit; padding: 12px; border: 1px solid #999; border-radius: 8px; background: #fff; color: var(--ink); }
+input:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
+button { font: inherit; font-weight: 500; margin-top: 16px; padding: 12px; border: 0; border-radius: 8px; background: var(--red); color: #fff; cursor: pointer; }
+button:disabled { opacity: .5; cursor: not-allowed; }
+.error { margin: 0 0 4px; padding: 10px 12px; border: 1px solid var(--red); border-radius: 8px; color: #a8141b; background: #fff3f3; font-size: 14px; }
+.shell header { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--line); }
+.shell header div { display: flex; flex-direction: column; font-size: 14px; }
+.shell header span { color: var(--grey); }

src/app/layout.tsx

@@ -1,5 +1,9 @@
 import type { Metadata } from "next";
 import type { ReactNode } from "react";
+import { Roboto } from "next/font/google";
+import "./globals.css";
+
+const roboto = Roboto({ subsets: ["latin"], weight: ["400", "500", "700"] });
 
 export const metadata: Metadata = {
   title: "Minnect feed browser",
@@ -8,7 +12,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" className={roboto.className}>
       <body>{children}</body>
     </html>
   );

src/app/page.tsx

@@ -1,12 +1,5 @@
-// Placeholder home page. The sign-in screen and the feed UI are built in
-// later tasks (tlv84yb7n and the feed tasks). This task delivers the server
-// session routes under /api/session.
+import { App } from "@/components/App";
 
 export default function HomePage() {
-  return (
-    <main style={{ maxWidth: 640, margin: "0 auto", padding: "2rem 1rem" }}>
-      <h1>Minnect feed browser</h1>
-      <p>The sign-in screen is built in a later task.</p>
-    </main>
-  );
+  return <App />;
 }