fixed nav, added sanity and guides pages

components/BuilderNav.tsx

@@ -119,24 +119,15 @@ export function BuilderNav({ activeCategoryId }: BuilderNavProps) {
         {/* LEFT SIDE: primary nav */}
         {/* ------------------------------------------------------------------ */}
 
-        <Link
-          href="/builder"
-          className="font-semibold text-neutral-100 hover:text-white tracking-[0.25em] uppercase text-[11px]"
-        >
-          Builder
-        </Link>
+        {/* Section label — makes the catalog bar purpose unmistakable */}
+        <span className="text-[9px] font-bold tracking-[0.2em] uppercase text-zinc-600 select-none pr-3 border-r border-zinc-800">
+          Parts
+        </span>
 
         {renderDropdown("Lower Parts", lower)}
         {renderDropdown("Upper Parts", upper)}
         {renderDropdown("Accessories", accessories)}
 
-        <Link
-          href="/builds"
-          className="font-medium text-neutral-300 hover:text-white tracking-[0.25em] uppercase text-[11px]"
-        >
-          Builds
-        </Link>
-
         {/* ------------------------------------------------------------------ */}
         {/* RIGHT SIDE: actions + state */}
         {/* IMPORTANT: this is the ONLY `ml-auto` in the nav to avoid conflicts */}

components/BuilderNavConditional.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { BuilderNav } from "./BuilderNav";
+
+/**
+ * Wraps BuilderNav with pathname-aware visibility.
+ * The catalog bar is irrelevant on guide pages — hide it there.
+ */
+export function BuilderNavConditional() {
+  const pathname = usePathname();
+
+  // Hide catalog bar on guide pages — part categories don't apply when reading an article
+  if (pathname.startsWith("/guides")) return null;
+
+  return <BuilderNav />;
+}
+
+export default BuilderNavConditional;

components/PortableTextRenderer.tsx

@@ -0,0 +1,91 @@
+'use client'
+
+import { PortableText, type PortableTextComponents } from 'next-sanity'
+import Image from 'next/image'
+import { urlFor } from '@/lib/sanity'
+
+const components: PortableTextComponents = {
+  block: {
+    normal: ({ children }) => (
+      <p className="mb-5 leading-relaxed text-zinc-300">{children}</p>
+    ),
+    h1: ({ children }) => (
+      <h1 className="mb-4 mt-10 text-3xl font-semibold text-zinc-100">{children}</h1>
+    ),
+    h2: ({ children }) => (
+      <h2 className="mb-3 mt-8 text-2xl font-semibold text-zinc-100">{children}</h2>
+    ),
+    h3: ({ children }) => (
+      <h3 className="mb-2 mt-6 text-xl font-semibold text-zinc-100">{children}</h3>
+    ),
+    blockquote: ({ children }) => (
+      <blockquote className="my-6 border-l-2 border-amber-400/60 pl-4 text-zinc-400 italic">
+        {children}
+      </blockquote>
+    ),
+  },
+  marks: {
+    strong: ({ children }) => (
+      <strong className="font-semibold text-zinc-100">{children}</strong>
+    ),
+    em: ({ children }) => <em className="italic text-zinc-300">{children}</em>,
+    code: ({ children }) => (
+      <code className="rounded bg-zinc-800 px-1.5 py-0.5 font-mono text-sm text-amber-300">
+        {children}
+      </code>
+    ),
+    link: ({ value, children }) => (
+      <a
+        href={value?.href}
+        target={value?.href?.startsWith('http') ? '_blank' : undefined}
+        rel={value?.href?.startsWith('http') ? 'noopener noreferrer' : undefined}
+        className="text-amber-400 underline underline-offset-2 hover:text-amber-300"
+      >
+        {children}
+      </a>
+    ),
+  },
+  list: {
+    bullet: ({ children }) => (
+      <ul className="mb-5 ml-6 list-disc space-y-1.5 text-zinc-300">{children}</ul>
+    ),
+    number: ({ children }) => (
+      <ol className="mb-5 ml-6 list-decimal space-y-1.5 text-zinc-300">{children}</ol>
+    ),
+  },
+  listItem: {
+    bullet: ({ children }) => <li className="leading-relaxed">{children}</li>,
+    number: ({ children }) => <li className="leading-relaxed">{children}</li>,
+  },
+  types: {
+    image: ({ value }) => {
+      if (!value?.asset) return null
+      return (
+        <figure className="my-8">
+          <div className="relative overflow-hidden rounded-lg">
+            <Image
+              src={urlFor(value).width(800).url()}
+              alt={value.alt ?? ''}
+              width={800}
+              height={450}
+              className="w-full object-cover"
+            />
+          </div>
+          {value.caption && (
+            <figcaption className="mt-2 text-center text-xs text-zinc-500">
+              {value.caption}
+            </figcaption>
+          )}
+        </figure>
+      )
+    },
+  },
+}
+
+export function PortableTextRenderer({ value }: { value: unknown[] }) {
+  return (
+    <div className="prose-battl">
+      <PortableText value={value as any} components={components} />
+    </div>
+  )
+}

components/TopNav.tsx

@@ -18,15 +18,17 @@ function NavLink({
   title?: string;
 }) {
   const pathname = usePathname();
-  const active = pathname === href;
+  const active = pathname === href || pathname.startsWith(href + '/');
 
   return (
     <Link
       href={href}
       title={title}
       className={[
-        "text-xs font-medium transition-colors",
-        active ? "text-zinc-100" : "text-zinc-400 hover:text-zinc-100",
+        "relative text-xs font-medium transition-colors pb-0.5",
+        active
+          ? "text-zinc-100 after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-amber-400"
+          : "text-zinc-400 hover:text-zinc-100",
       ].join(" ")}
     >
       {children}
@@ -55,6 +57,13 @@ export function TopNav() {
           />
         </Link>
 
+        {/* Centre: primary nav links */}
+        <nav className="hidden sm:flex items-center gap-5">
+          <NavLink href="/builder">Builder</NavLink>
+          <NavLink href="/guides">Guides</NavLink>
+          <NavLink href="/builds">Community</NavLink>
+        </nav>
+
         {/* Right side actions */}
         <div className="flex items-center justify-end gap-3 sm:gap-4">
           <ThemeToggle />