Changes to tidy up header

app/components/HomeHeader.js

@@ -1,3 +1,6 @@
+"use client";
+
+import { useState } from "react";
 import Logo from "./Logo";
 import MenuBar from "./MenuBar";
 import MenuBarItem from "./MenuBarItem";
@@ -5,8 +8,11 @@ import Button from "./Button";
 import AvatarContainer from "./AvatarContainer";
 import Avatar from "./Avatar";
 import HeaderTab from "./HeaderTab";
+import Header from "./Header";
 
 export default function HomeHeader() {
+  const [showRegularHeader, setShowRegularHeader] = useState(false);
+
   const navigationItems = [
     { href: "#", text: "Use cases", extraPadding: true },
     { href: "#", text: "Learn" },
@@ -75,6 +81,7 @@ export default function HomeHeader() {
             ? "home"
             : "default"
         }
+        onClick={() => setShowRegularHeader(!showRegularHeader)}
       >
         {item.text}
       </MenuBarItem>
@@ -127,6 +134,10 @@ export default function HomeHeader() {
     return <Logo size={size} showText={showText} />;
   };
 
+  if (showRegularHeader) {
+    return <Header onToggle={() => setShowRegularHeader(false)} />;
+  }
+
   return (
     <header className="w-full bg-transparent overflow-hidden">
       <div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]">