add foundations and guides to footer and header

Author: davemooreuws

src/components/Footer.tsx

@@ -79,6 +79,18 @@ function SmallPrint() {
           >
             Support
           </Link>
+          <Link
+            href={'/get-started/foundations/why-nitric'}
+            className="text-xs text-zinc-600 hover:underline dark:text-zinc-400"
+          >
+            Foundations
+          </Link>
+          <Link
+            href={'/guides'}
+            className="text-xs text-zinc-600 hover:underline dark:text-zinc-400"
+          >
+            Guides
+          </Link>
         </div>
         <div className="flex gap-4">
           <SocialLink href="https://x.com/nitric_io" icon={XIcon}>

src/components/layout/Header.tsx

@@ -16,17 +16,26 @@ import { ThemeToggle } from '@/components/ThemeToggle'
 import { cn } from '@/lib/utils'
 import GitHubStarCount from '../GitHubStarCount'
 import { GitHubIcon } from '../icons/GitHubIcon'
+import { usePathname } from 'next/navigation'
 
 function TopLevelNavItem({
   className,
+  parentHref,
   ...props
-}: ComponentPropsWithoutRef<typeof Link>) {
+}: ComponentPropsWithoutRef<typeof Link> & { parentHref?: string }) {
+  const pathname = usePathname()
+
+  const isActive = parentHref
+    ? pathname.startsWith(parentHref)
+    : pathname === props.href
+
   return (
     <li>
       <Link
         {...props}
         className={cn(
           'text-sm font-semibold leading-5 text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-white',
+          isActive && 'text-zinc-900 dark:text-white',
           className,
         )}
       />
@@ -73,25 +82,26 @@ export const Header = forwardRef<
       <Link href="/" aria-label="Home" className="hidden lg:block">
         <Logo className="h-6" />
       </Link>
-      <div className="hidden lg:block">
-        <Search />
-      </div>
+
       <div className="flex items-center gap-5 lg:hidden">
         <MobileNavigation />
         <Link href="/" aria-label="Home">
           <Logo className="h-6" />
         </Link>
       </div>
       <div className="flex items-center gap-5">
-        <nav className="hidden md:block">
+        <nav className="hidden lg:block">
           <ul role="list" className="flex items-center gap-8">
             <TopLevelNavItem
-              href={'https://nitric.io'}
-              target="_blank"
-              rel="noreferrer noopener"
+              parentHref="/get-started/foundations"
+              href="/get-started/foundations/why-nitric"
             >
-              Nitric.io
+              Foundations
             </TopLevelNavItem>
+            <TopLevelNavItem href="/guides">Guides</TopLevelNavItem>
+            <li>
+              <Search />
+            </li>
 
             <TopLevelNavItem
               className="group flex items-center"

src/components/layout/Search.tsx

@@ -58,12 +58,12 @@ export function Search() {
     <>
       <button
         type="button"
-        className="lg:w-92 group hidden h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-1 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-zinc-200 md:hover:ring-zinc-300 dark:md:bg-zinc-800/70 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-zinc-700/40 dark:md:hover:ring-zinc-500 lg:flex"
+        className="lg:w-92 group hidden h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-52 md:flex-none md:rounded-lg md:py-1 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-zinc-200 md:hover:ring-zinc-300 dark:md:bg-zinc-800/70 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-zinc-700/40 dark:md:hover:ring-zinc-500 lg:flex"
         onClick={onOpen}
       >
         <SearchIcon className="h-5 w-5 flex-none fill-zinc-400 group-hover:fill-zinc-500 dark:fill-zinc-500 md:group-hover:fill-zinc-400" />
         <span className="sr-only transition-colors dark:group-hover:text-white md:not-sr-only md:ml-2 md:text-zinc-500 md:dark:text-zinc-400">
-          Search documentation
+          Search
         </span>
         {modifierKey && (
           <kbd className="ml-auto hidden font-medium text-zinc-400 dark:text-zinc-500 md:block">