Initial project upload

frontend/components/AuthShell.tsx

@@ -0,0 +1,38 @@
+import { ShieldHalf } from "lucide-react";
+import AuthCarousel from "./AuthCarousel";
+
+export default function AuthShell({ title, subtitle, children }: {
+  title: string; subtitle?: string; children: React.ReactNode;
+}) {
+  return (
+    <div className="min-h-screen grid lg:grid-cols-2">
+      {/* Left — form */}
+      <div className="flex flex-col justify-center px-6 sm:px-10 py-10">
+        <div className="w-full max-w-sm mx-auto">
+          <div className="flex items-center gap-2 font-extrabold text-xl mb-8">
+            <span className="h-9 w-9 rounded-lg bg-brand-600 text-white grid place-items-center">
+              <ShieldHalf className="h-5 w-5" />
+            </span>
+            VerifyPack
+          </div>
+          <h1 className="text-2xl font-extrabold">{title}</h1>
+          {subtitle && <p className="text-slate-500 mt-1 text-sm">{subtitle}</p>}
+          <div className="mt-6">{children}</div>
+        </div>
+      </div>
+      {/* Right — promo carousel */}
+      <AuthCarousel />
+    </div>
+  );
+}
+
+export function Field({ label, ...props }: any) {
+  return (
+    <label className="block mb-4">
+      <span className="text-sm font-medium text-slate-700">{label}</span>
+      <input {...props}
+        className="mt-1 w-full px-3 py-2.5 rounded-lg border border-slate-200 text-sm
+                   focus:outline-none focus:ring-2 focus:ring-brand-500/30" />
+    </label>
+  );
+}