account settings and account creation

app/(account)/layout.tsx

@@ -1,59 +1,57 @@
-// app/(account)/layout.tsx
 import Link from "next/link";
-import AccountChrome from "./AccountChrome";
 
 const nav = [
-  { href: "/account", label: "My Account" },
-  { href: "/account/settings", label: "Settings" },
-  { href: "/vault", label: "My Vault" },
+  { name: "Profile", href: "/account/profile" },
+  { name: "Security", href: "/account/security" },
+  { name: "My Vault", href: "/account/vault" },
+  { name: "Favorite Parts", href: "/account/favorites" },
 ];
 
-export default function AccountLayout({ children }: { children: React.ReactNode }) {
+export default function AccountLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
-    <div className="min-h-screen">
-      <AccountChrome />
-
-      <div className="mx-auto w-full max-w-6xl px-4 py-6">
-        {/* Header */}
-        <div className="mb-6 flex flex-col gap-3 sm:flex-row sm:items-end sm:justify-between">
+    <div className="min-h-screen bg-black text-zinc-50">
+      <div className="mx-auto max-w-6xl px-4 py-10">
+        <div className="flex items-start justify-between gap-4">
           <div>
-            <div className="text-[11px] uppercase tracking-[0.22em] text-white/50">
+            <div className="text-xs tracking-[0.25em] uppercase text-zinc-400">
               Account
             </div>
-            <h1 className="mt-1 text-2xl font-semibold text-white/90">
-              Settings & Profile
-            </h1>
-            <p className="mt-1 text-sm text-white/60">
+            <h1 className="mt-2 text-3xl font-semibold">Settings & Profile</h1>
+            <p className="mt-2 text-sm text-zinc-400">
               Profile, password, and account settings.
             </p>
           </div>
 
           <Link
             href="/builder"
-            className="inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 px-3 py-2 text-sm font-semibold text-white/80 hover:bg-white/10"
+            className="rounded-lg border border-white/10 bg-white/5 px-4 py-2 text-sm hover:bg-white/10"
           >
             ← Back to Builder
           </Link>
         </div>
 
-        <div className="grid gap-6 lg:grid-cols-12">
-          <aside className="lg:col-span-3 rounded-2xl border border-white/10 bg-white/5 p-4">
-            <nav className="flex flex-col gap-1">
+        <div className="mt-10 grid grid-cols-1 gap-8 lg:grid-cols-12">
+          {/* Sidebar */}
+          <aside className="lg:col-span-3">
+            <nav className="rounded-xl border border-white/10 bg-white/5 p-2">
               {nav.map((item) => (
                 <Link
                   key={item.href}
                   href={item.href}
-                  className="rounded-lg px-3 py-2 text-sm text-white/70 hover:bg-white/10 hover:text-white"
+                  className="block rounded-lg px-3 py-2 text-sm text-zinc-200 hover:bg-white/5"
                 >
-                  {item.label}
+                  {item.name}
                 </Link>
               ))}
             </nav>
           </aside>
 
-          <main className="lg:col-span-9 rounded-2xl border border-white/10 bg-white/5 p-5">
-            {children}
-          </main>
+          {/* Content */}
+          <main className="lg:col-span-9">{children}</main>
         </div>
       </div>
     </div>