Large home header

app/components/Avatar.js

@@ -8,6 +8,7 @@ export default function Avatar({
   const sizeStyles = {
     small: "w-[16px] h-[16px]",
     medium: "w-[18px] h-[18px]",
+    large: "w-[24px] h-[24px]",
     xlarge: "w-[32px] h-[32px]",
   };
 

app/components/AvatarContainer.js

@@ -7,6 +7,7 @@ export default function AvatarContainer({
   const sizeStyles = {
     small: "flex -space-x-2",
     medium: "flex -space-x-[9px]",
+    large: "flex -space-x-[10px]",
     xlarge: "flex -space-x-[13px]",
   };
 

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] 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}`}
+      className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] sm:rounded-t-[24px] md:rounded-t-[24px] lg:rounded-t-[24px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] 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-[2.5px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block"
+        className="absolute -bottom-[3px] lg:-bottom-[2.5px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block"
       />
     </div>
   );

app/components/HomeHeader.js

@@ -37,7 +37,7 @@ export default function HomeHeader() {
     },
     {
       breakpoint: "hidden lg:block xl:hidden",
-      size: "headerLg",
+      size: "homeHeaderLg",
       showText: true,
     },
     { breakpoint: "hidden xl:block", size: "headerXl", showText: true },
@@ -53,9 +53,12 @@ export default function HomeHeader() {
           (size === "xsmall" ||
             size === "default" ||
             size === "home" ||
-            size === "homeMd")
+            size === "homeMd" ||
+            size === "large")
             ? size === "home" || size === "homeMd"
               ? "homeMd"
+              : size === "large"
+              ? "large"
               : "xsmallUseCases"
             : size
         }
@@ -63,7 +66,8 @@ export default function HomeHeader() {
           size === "xsmall" ||
           size === "default" ||
           size === "home" ||
-          size === "homeMd"
+          size === "homeMd" ||
+          size === "large"
             ? "home"
             : "default"
         }
@@ -121,8 +125,8 @@ 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] 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 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)]">
+        <HeaderTab className="flex items-center justify-between lg:gap-[var(--spacing-scale-120)] self-end">
           <div>
             {logoConfig.map((config, index) => (
               <div key={index} className={config.breakpoint}>
@@ -150,21 +154,13 @@ export default function HomeHeader() {
               <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)]">
+            <div className="hidden lg:block xl:hidden">
               <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
             </div>
 
             <div className="hidden xl:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-032)]">
               <MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
             </div>
-
-            <div className="hidden lg:flex xl:hidden items-center">
-              {renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
-            </div>
-
-            <div className="hidden xl:flex items-center">
-              {renderLoginButton("xlarge", "mr-[var(--spacing-scale-012)]")}
-            </div>
           </div>
         </HeaderTab>
 
@@ -179,7 +175,8 @@ export default function HomeHeader() {
           </div>
         </div>
         <div className="hidden lg:flex xl:hidden items-center">
-          {renderCreateRuleButton("large", "xlarge", "xlarge")}
+          {renderLoginButton("large", "mr-[var(--spacing-scale-004)]")}
+          {renderCreateRuleButton("large", "large", "large")}
         </div>
         <div className="hidden xl:flex items-center">
           {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}

app/components/Logo.js

@@ -29,6 +29,13 @@ export default function Logo({ size = "default", showText = true }) {
       lineHeight: "leading-[22.02px]",
       iconSize: "w-[22.02px] h-[22.02px]",
     },
+    homeHeaderLg: {
+      containerHeight: "h-[28px]",
+      gap: "gap-[6.55px]",
+      textSize: "text-[21.97px]",
+      lineHeight: "leading-[27.05px]",
+      iconSize: "w-[27.05px] h-[27.05px]",
+    },
     header: {
       containerHeight: "h-[20.85px]",
       gap: "gap-[4.21px]",
@@ -80,6 +87,8 @@ export default function Logo({ size = "default", showText = true }) {
       ? sizes.homeHeaderSm
       : size === "homeHeaderMd"
       ? sizes.homeHeaderMd
+      : size === "homeHeaderLg"
+      ? sizes.homeHeaderLg
       : size === "header"
       ? sizes.header
       : size === "headerMd"
@@ -106,7 +115,8 @@ export default function Logo({ size = "default", showText = true }) {
           className={`font-['Bricolage_Grotesque'] ${
             size === "homeHeaderXsmall" ||
             size === "homeHeaderSm" ||
-            size === "homeHeaderMd"
+            size === "homeHeaderMd" ||
+            size === "homeHeaderLg"
               ? "text-[var(--color-content-inverse-primary)]"
               : "text-[var(--color-content-default-primary)]"
           } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
@@ -124,7 +134,8 @@ export default function Logo({ size = "default", showText = true }) {
         className={`flex-shrink-0 ${config.iconSize} ${
           size === "homeHeaderXsmall" ||
           size === "homeHeaderSm" ||
-          size === "homeHeaderMd"
+          size === "homeHeaderMd" ||
+          size === "homeHeaderLg"
             ? "filter brightness-0"
             : ""
         }`}

app/components/MenuBarItem.js

@@ -37,6 +37,8 @@ export default function MenuBarItem({
       "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
     homeUseCases:
       "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
+    largeUseCases:
+      "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
     large:
       "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
     xlarge: