app/components/Header.js

@@ -5,7 +5,7 @@ import Button from "./Button";
 import AvatarContainer from "./AvatarContainer";
 import Avatar from "./Avatar";
 
-export default function Header() {
+export default function Header({ onToggle }) {
   const navigationItems = [
     { href: "#", text: "Use cases", extraPadding: true },
     { href: "#", text: "Learn" },
@@ -40,6 +40,7 @@ export default function Header() {
         key={index}
         href={item.href}
         size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
+        onClick={onToggle}
       >
         {item.text}
       </MenuBarItem>

app/components/HeaderTab.js

@@ -8,17 +8,17 @@ export default function HeaderTab({ children, className = "", ...props }) {
       <img
         src="/assets/Union_xsm.svg"
         alt="Union"
-        className="absolute -bottom-[3px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden"
+        className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
       />
       <img
         src="/assets/Union_sm_md_lg.svg"
         alt="Union"
-        className="absolute -bottom-[3px] lg:-bottom-[2.8px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden"
+        className="absolute -bottom-[3.5px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
       />
       <img
         src="/assets/Union_xlg.svg"
         alt="Union"
-        className="absolute -bottom-[5.3px] -right-[94px] w-[105px] h-[53px] hidden xl:block"
+        className="absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"
       />
     </div>
   );

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)]">

app/components/MenuBarItem.js

@@ -22,6 +22,8 @@ export default function MenuBarItem({
       "active:outline-[1.5px] active:outline-[var(--color-content-default-brand-primary)]",
     large:
       "active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)]",
+    homeXlarge:
+      "active:outline-[2px] active:outline-[var(--color-content-default-brand-primary)]",
     xlarge:
       "active:outline-2 active:outline-[var(--color-content-default-brand-primary)]",
   };
@@ -59,11 +61,11 @@ export default function MenuBarItem({
     homeUseCases:
       "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
     large:
-      "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
+      "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)] h-[44px]",
     homeXlarge:
       "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]",
     xlarge:
-      "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
+      "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)] h-[44px]",
   };
 
   const smallTextStyle =

app/globals.css

@@ -2,3 +2,8 @@
 @tailwind components;
 @tailwind utilities;
 @import "./tailwind.css";
+
+body {
+  background-color: black;
+  min-height: 100vh;
+}

app/layout.js

@@ -1,5 +1,6 @@
 import { Inter, Bricolage_Grotesque } from "next/font/google";
 import "./globals.css";
+import HomeHeader from "./components/HomeHeader";
 import Footer from "./components/Footer";
 
 const inter = Inter({
@@ -19,6 +20,7 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <body className={`${inter.variable} ${bricolageGrotesque.variable}`}>
         <div className="min-h-screen flex flex-col">
+          <HomeHeader />
           <main className="flex-1">{children}</main>
           <Footer />
         </div>

app/page.js

@@ -1,10 +1,3 @@
-import HomeHeader from "./components/HomeHeader";
-
 export default function Page() {
-  return (
-    <>
-      <HomeHeader />
-      <main>{/* Your home page content will go here */}</main>
-    </>
-  );
+  return <div>{/* home page content will go here */}</div>;
 }