From 6d2e045af6a3abaa0ea07876b12de33a9faedc89 Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Wed, 6 Aug 2025 14:50:11 -0600
Subject: [PATCH] Medium home header

---
 app/components/Button.js      |  2 +-
 app/components/HeaderTab.js   |  4 +--
 app/components/HomeHeader.js  | 48 ++++++++++++++++++++++-------------
 app/components/Logo.js        | 17 +++++++++++--
 app/components/MenuBar.js     |  2 ++
 app/components/MenuBarItem.js | 25 ++++++++++++++----
 6 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/app/components/Button.js b/app/components/Button.js
index 2460489..bfc3145 100644
--- a/app/components/Button.js
+++ b/app/components/Button.js
@@ -27,7 +27,7 @@ export default function Button({
     xsmall:
       "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
     small:
-      "font-['Inter'] text-[10px] leading-[12.5px] font-medium tracking-[0%]",
+      "font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
     large:
       "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
     xlarge:
diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js
index ad97bf5..40f51f3 100644
--- a/app/components/HeaderTab.js
+++ b/app/components/HeaderTab.js
@@ -1,7 +1,7 @@
 export default function HeaderTab({ children, className = "", ...props }) {
   return (
     <div
-      className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] sm:rounded-t-[24px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] sm:pr-[var(--spacing-scale-006)] ${className}`}
+      className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] sm:rounded-t-[24px] md:rounded-t-[24px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-032)] ${className}`}
       {...props}
     >
       {children}
@@ -13,7 +13,7 @@ export default function HeaderTab({ children, className = "", ...props }) {
       <img
         src="/assets/Union_sm_md_lg.svg"
         alt="Union"
-        className="absolute -bottom-[3px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block"
+        className="absolute -bottom-[2.5px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block"
       />
     </div>
   );
diff --git a/app/components/HomeHeader.js b/app/components/HomeHeader.js
index e919e4a..c730a6c 100644
--- a/app/components/HomeHeader.js
+++ b/app/components/HomeHeader.js
@@ -32,7 +32,7 @@ export default function HomeHeader() {
     },
     {
       breakpoint: "hidden md:block lg:hidden",
-      size: "headerMd",
+      size: "homeHeaderMd",
       showText: true,
     },
     {
@@ -48,8 +48,25 @@ export default function HomeHeader() {
       <MenuBarItem
         key={index}
         href={item.href}
-        size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
-        variant={size === "xsmall" ? "home" : "default"}
+        size={
+          item.extraPadding &&
+          (size === "xsmall" ||
+            size === "default" ||
+            size === "home" ||
+            size === "homeMd")
+            ? size === "home" || size === "homeMd"
+              ? "homeMd"
+              : "xsmallUseCases"
+            : size
+        }
+        variant={
+          size === "xsmall" ||
+          size === "default" ||
+          size === "home" ||
+          size === "homeMd"
+            ? "home"
+            : "default"
+        }
       >
         {item.text}
       </MenuBarItem>
@@ -76,7 +93,7 @@ export default function HomeHeader() {
       <MenuBarItem
         href="#"
         size={size}
-        variant={size === "xsmall" ? "home" : "default"}
+        variant={size === "xsmall" || size === "default" ? "home" : "default"}
         className={marginRight}
       >
         Log in
@@ -104,7 +121,7 @@ export default function HomeHeader() {
 
   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] lg:h-[84px] 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)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
+      <div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[84px] 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:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
         <HeaderTab className="flex items-center self-end">
           <div>
             {logoConfig.map((config, index) => (
@@ -116,23 +133,21 @@ export default function HomeHeader() {
 
           <div className="flex items-center">
             <div className="block sm:hidden -me-[2px]">
-              <MenuBar size="xsmall">
+              <MenuBar size="default">
                 {renderNavigationItems("xsmall")}
                 {renderLoginButton("xsmall")}
               </MenuBar>
             </div>
 
             <div className="hidden sm:block md:hidden sm:ml-[var(--spacing-scale-002)]">
-              <MenuBar size="xsmall">
+              <MenuBar size="default">
                 {renderNavigationItems("xsmall")}
                 {renderLoginButton("xsmall")}
               </MenuBar>
             </div>
 
-            <div className="hidden md:block lg:hidden absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
-              <MenuBar className="gap-[var(--spacing-scale-001)]">
-                {renderNavigationItems("xsmall")}
-              </MenuBar>
+            <div className="hidden md:block lg:hidden md:-ml-[var(--spacing-scale-012)]">
+              <MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
             </div>
 
             <div className="hidden lg:block xl:hidden absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
@@ -143,12 +158,6 @@ export default function HomeHeader() {
               <MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
             </div>
 
-            <div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
-              <div className="flex items-center">
-                {renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")}
-              </div>
-            </div>
-
             <div className="hidden lg:flex xl:hidden items-center">
               {renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
             </div>
@@ -164,7 +173,10 @@ export default function HomeHeader() {
           {renderCreateRuleButton("xsmall", "small", "small")}
         </div>
         <div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
-          {renderCreateRuleButton("xsmall", "medium", "medium")}
+          <div className="flex items-center">
+            {renderLoginButton("homeMd", "mr-[var(--spacing-scale-010)]")}
+            {renderCreateRuleButton("small", "medium", "medium")}
+          </div>
         </div>
         <div className="hidden lg:flex xl:hidden items-center">
           {renderCreateRuleButton("large", "xlarge", "xlarge")}
diff --git a/app/components/Logo.js b/app/components/Logo.js
index b4f989f..69fadd0 100644
--- a/app/components/Logo.js
+++ b/app/components/Logo.js
@@ -22,6 +22,13 @@ export default function Logo({ size = "default", showText = true }) {
       lineHeight: "leading-[14.39px]",
       iconSize: "w-[14.39px] h-[14.39px]",
     },
+    homeHeaderMd: {
+      containerHeight: "h-[32.24px]",
+      gap: "gap-[4.89px]",
+      textSize: "text-[17.89px]",
+      lineHeight: "leading-[22.02px]",
+      iconSize: "w-[22.02px] h-[22.02px]",
+    },
     header: {
       containerHeight: "h-[20.85px]",
       gap: "gap-[4.21px]",
@@ -71,6 +78,8 @@ export default function Logo({ size = "default", showText = true }) {
       ? sizes.homeHeaderXsmall
       : size === "homeHeaderSm"
       ? sizes.homeHeaderSm
+      : size === "homeHeaderMd"
+      ? sizes.homeHeaderMd
       : size === "header"
       ? sizes.header
       : size === "headerMd"
@@ -95,7 +104,9 @@ export default function Logo({ size = "default", showText = true }) {
       {showText && (
         <div
           className={`font-['Bricolage_Grotesque'] ${
-            size === "homeHeaderXsmall" || size === "homeHeaderSm"
+            size === "homeHeaderXsmall" ||
+            size === "homeHeaderSm" ||
+            size === "homeHeaderMd"
               ? "text-[var(--color-content-inverse-primary)]"
               : "text-[var(--color-content-default-primary)]"
           } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
@@ -111,7 +122,9 @@ export default function Logo({ size = "default", showText = true }) {
         width={27.05}
         height={27.05}
         className={`flex-shrink-0 ${config.iconSize} ${
-          size === "homeHeaderXsmall" || size === "homeHeaderSm"
+          size === "homeHeaderXsmall" ||
+          size === "homeHeaderSm" ||
+          size === "homeHeaderMd"
             ? "filter brightness-0"
             : ""
         }`}
diff --git a/app/components/MenuBar.js b/app/components/MenuBar.js
index ff52961..e3188fc 100644
--- a/app/components/MenuBar.js
+++ b/app/components/MenuBar.js
@@ -9,6 +9,8 @@ export default function MenuBar({
       "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] rounded-[4px]",
     default:
       "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
+    medium:
+      "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-004)]",
     large:
       "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]",
   };
diff --git a/app/components/MenuBarItem.js b/app/components/MenuBarItem.js
index 9709e6f..4d54fc1 100644
--- a/app/components/MenuBarItem.js
+++ b/app/components/MenuBarItem.js
@@ -15,13 +15,15 @@ export default function MenuBarItem({
 
   const activeOutlineStyles = {
     xsmall:
-      "active:outline-1 active:outline-[var(--color-content-default-primary)] active:outline-offset-1",
+      "active:outline-1 active:outline-[var(--color-content-default-primary)]",
     default:
-      "active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
+      "active:outline-1 active:outline-[var(--color-content-default-brand-primary)]",
+    homeMd:
+      "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)] active:outline-offset-1",
+      "active:outline-[1.75px] active:outline-[var(--color-content-default-brand-primary)]",
     xlarge:
-      "active:outline-2 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
+      "active:outline-2 active:outline-[var(--color-content-default-brand-primary)]",
   };
 
   const homeOutlineStyles = {
@@ -30,7 +32,11 @@ export default function MenuBarItem({
     xsmallUseCases:
       "active:outline-1 active:outline-[var(--color-content-default-primary)]",
     default:
-      "active:outline-1 active:outline-[var(--color-content-default-primary)]",
+      "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
+    homeMd:
+      "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
+    homeUseCases:
+      "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
     large:
       "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
     xlarge:
@@ -44,6 +50,10 @@ export default function MenuBarItem({
       "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
     xsmallUseCases:
       "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)] gap-[var(--spacing-scale-004)]",
+    homeMd:
+      "px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]",
+    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)]",
     xlarge:
@@ -52,6 +62,8 @@ export default function MenuBarItem({
 
   const smallTextStyle =
     "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
+  const mediumTextStyle =
+    "font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]";
   const largeTextStyle =
     "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
   const xlargeTextStyle =
@@ -61,6 +73,9 @@ export default function MenuBarItem({
     default: smallTextStyle,
     xsmall: smallTextStyle,
     xsmallUseCases: smallTextStyle,
+    home: smallTextStyle,
+    homeMd: mediumTextStyle,
+    homeUseCases: mediumTextStyle,
     large: largeTextStyle,
     xlarge: xlargeTextStyle,
   };