Small home header

app/components/Button.js

@@ -38,7 +38,7 @@ export default function Button({
     default:
       "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
     secondary:
-      "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-secondary)] hover:text-[var(--color-content-default-primary)] hover:border-[var(--border-color-default-primary)] active:bg-[var(--color-surface-default-tertiary)] active:text-[var(--color-content-default-primary)] active:border-[var(--border-color-default-primary)] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
+      "bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_#FFFDD2] focus:blur-[0px] active:outline-[1.5px] active:outline-inset active:outline-[var(--color-content-default-brand-primary)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
   };
 
   const hoverOutlineStyles = {

app/components/HeaderTab.js

@@ -1,14 +1,19 @@
 export default function HeaderTab({ children, className = "", ...props }) {
   return (
     <div
-      className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] pl-[var(--spacing-measures-spacing-012)] h-[40px] ${className}`}
+      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}`}
       {...props}
     >
       {children}
       <img
-        src="/assets/Union.svg"
+        src="/assets/Union_xsm.svg"
         alt="Union"
-        className="absolute bottom-[0px] -right-[55px] w-[61px] h-[24px]"
+        className="absolute -bottom-[3px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden"
+      />
+      <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"
       />
     </div>
   );

app/components/HomeHeader.js

@@ -25,7 +25,11 @@ export default function HomeHeader() {
       size: "homeHeaderXsmall",
       showText: false,
     },
-    { breakpoint: "hidden sm:block md:hidden", size: "header", showText: true },
+    {
+      breakpoint: "hidden sm:block md:hidden",
+      size: "homeHeaderSm",
+      showText: true,
+    },
     {
       breakpoint: "hidden md:block lg:hidden",
       size: "headerMd",
@@ -99,8 +103,8 @@ export default function HomeHeader() {
   };
 
   return (
-    <header className="w-full bg-transparent">
-      <div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
+    <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)]">
         <HeaderTab className="flex items-center self-end">
           <div>
             {logoConfig.map((config, index) => (
@@ -118,8 +122,8 @@ export default function HomeHeader() {
               </MenuBar>
             </div>
 
-            <div className="hidden sm:block md:hidden absolute left-1/2 transform -translate-x-1/2">
-              <MenuBar className="gap-[var(--spacing-scale-001)]">
+            <div className="hidden sm:block md:hidden sm:ml-[var(--spacing-scale-002)]">
+              <MenuBar size="xsmall">
                 {renderNavigationItems("xsmall")}
                 {renderLoginButton("xsmall")}
               </MenuBar>

app/components/Logo.js

@@ -15,6 +15,13 @@ export default function Logo({ size = "default", showText = true }) {
       lineHeight: "leading-[14.24px]",
       iconSize: "w-[14.11px] h-[14.11px]",
     },
+    homeHeaderSm: {
+      containerHeight: "h-[21.06px]",
+      gap: "gap-[3.19px]",
+      textSize: "text-[11.69px]",
+      lineHeight: "leading-[14.39px]",
+      iconSize: "w-[14.39px] h-[14.39px]",
+    },
     header: {
       containerHeight: "h-[20.85px]",
       gap: "gap-[4.21px]",
@@ -62,6 +69,8 @@ export default function Logo({ size = "default", showText = true }) {
   const config =
     size === "homeHeaderXsmall"
       ? sizes.homeHeaderXsmall
+      : size === "homeHeaderSm"
+      ? sizes.homeHeaderSm
       : size === "header"
       ? sizes.header
       : size === "headerMd"
@@ -86,7 +95,7 @@ export default function Logo({ size = "default", showText = true }) {
       {showText && (
         <div
           className={`font-['Bricolage_Grotesque'] ${
-            size === "homeHeaderXsmall"
+            size === "homeHeaderXsmall" || size === "homeHeaderSm"
               ? "text-[var(--color-content-inverse-primary)]"
               : "text-[var(--color-content-default-primary)]"
           } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
@@ -102,7 +111,9 @@ export default function Logo({ size = "default", showText = true }) {
         width={27.05}
         height={27.05}
         className={`flex-shrink-0 ${config.iconSize} ${
-          size === "homeHeaderXsmall" ? "filter brightness-0" : ""
+          size === "homeHeaderXsmall" || size === "homeHeaderSm"
+            ? "filter brightness-0"
+            : ""
         }`}
       />
     </div>

app/components/MenuBarItem.js

@@ -10,12 +10,12 @@ export default function MenuBarItem({
   const variantStyles = {
     default:
       "bg-transparent text-[var(--color-content-default-brand-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-brand-primary)] active:bg-transparent active:text-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
-    home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-inverse-primary)] active:bg-transparent active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
+    home: "bg-transparent text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-content-default-brand-accent)] hover:text-[var(--color-content-inverse-primary)] active:bg-transparent active:text-[var(--color-content-inverse-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
   };
 
   const activeOutlineStyles = {
     xsmall:
-      "active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
+      "active:outline-1 active:outline-[var(--color-content-default-primary)] active:outline-offset-1",
     default:
       "active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
     large:
@@ -24,6 +24,19 @@ export default function MenuBarItem({
       "active:outline-2 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1",
   };
 
+  const homeOutlineStyles = {
+    xsmall:
+      "active:outline-1 active:outline-[var(--color-content-default-primary)]",
+    xsmallUseCases:
+      "active:outline-1 active:outline-[var(--color-content-default-primary)]",
+    default:
+      "active:outline-1 active:outline-[var(--color-content-default-primary)]",
+    large:
+      "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
+    xlarge:
+      "active:outline-2 active:outline-[var(--color-content-default-primary)]",
+  };
+
   const sizeStyles = {
     default:
       "px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
@@ -59,7 +72,11 @@ export default function MenuBarItem({
     finalVariant = "default";
   }
 
-  const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${activeOutlineStyles[size]} ${className}`;
+  const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${
+    finalVariant === "home"
+      ? homeOutlineStyles[size]
+      : activeOutlineStyles[size]
+  } ${className}`;
 
   if (disabled) {
     return (