app/components/Avatar.js

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

app/components/AvatarContainer.js

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

app/components/Button.js

@@ -32,12 +32,12 @@ export default function Button({
 
   const variantStyles = {
     default:
-      "bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] border-2 border-transparent hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:border-[var(--border-color-default-brandprimary)] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-[var(--border-color-default-brandprimary)] focus:bg-[var(--color-surface-inverse-primary)] focus:text-[var(--color-content-inverse-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
+      "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-1 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-[1.5px] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 focus:bg-[var(--color-surface-inverse-primary)] focus:text-[var(--color-content-inverse-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
     secondary:
       "bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] border-2 border-[var(--border-color-default-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)] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none 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",
   };
 
-  const baseStyles = `inline-flex items-center justify-start ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 cursor-pointer ${variantStyles[variant]}`;
+  const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 cursor-pointer ${variantStyles[variant]}`;
 
   let finalVariant = variant;
   if (disabled) {

app/components/Header.js

@@ -6,163 +6,132 @@ import AvatarContainer from "./AvatarContainer";
 import Avatar from "./Avatar";
 
 export default function Header() {
+  const navigationItems = [
+    { href: "#", text: "Use cases", extraPadding: true },
+    { href: "#", text: "Learn" },
+    { href: "#", text: "About" },
+  ];
+
+  const avatarImages = [
+    { src: "/assets/Avatar_1.png", alt: "Avatar 1" },
+    { src: "/assets/Avatar_2.png", alt: "Avatar 2" },
+    { src: "/assets/Avatar_3.png", alt: "Avatar 3" },
+  ];
+
+  const logoConfig = [
+    { breakpoint: "block sm:hidden", size: "header", showText: false },
+    { breakpoint: "hidden sm:block md:hidden", size: "header", showText: true },
+    {
+      breakpoint: "hidden md:block lg:hidden",
+      size: "headerMd",
+      showText: true,
+    },
+    { breakpoint: "hidden lg:block", size: "headerLg", showText: true },
+  ];
+
+  const renderNavigationItems = (size) => {
+    return navigationItems.map((item, index) => (
+      <MenuBarItem
+        key={index}
+        href={item.href}
+        size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
+      >
+        {item.text}
+      </MenuBarItem>
+    ));
+  };
+
+  const renderAvatarGroup = (containerSize, avatarSize) => {
+    return (
+      <AvatarContainer size={containerSize}>
+        {avatarImages.map((avatar, index) => (
+          <Avatar
+            key={index}
+            src={avatar.src}
+            alt={avatar.alt}
+            size={avatarSize}
+          />
+        ))}
+      </AvatarContainer>
+    );
+  };
+
+  const renderLoginButton = (size, marginRight) => {
+    return (
+      <MenuBarItem href="#" size={size} className={marginRight}>
+        Log in
+      </MenuBarItem>
+    );
+  };
+
+  const renderCreateRuleButton = (
+    buttonSize,
+    containerSize,
+    avatarSize,
+    marginLeft
+  ) => {
+    return (
+      <Button size={buttonSize} className={marginLeft}>
+        {renderAvatarGroup(containerSize, avatarSize)}
+        <span>Create rule</span>
+      </Button>
+    );
+  };
+
+  const renderLogo = (size, showText) => {
+    return <Logo size={size} showText={showText} />;
+  };
+
   return (
     <header className="bg-[var(--color-surface-default-primary)] w-full border-b border-[var(--border-color-default-tertiary)]">
       <div className="flex items-center justify-between mx-auto max-w-[1920px] h-[40px] lg:h-[84px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
         <div>
-          <div className="block sm:hidden">
+          {logoConfig.map((config, index) => (
-            <Logo size="header" showText={false} />
+            <div key={index} className={config.breakpoint}>
-          </div>
+              {renderLogo(config.size, config.showText)}
-          <div className="hidden sm:block md:hidden">
-            <Logo size="header" showText={true} />
-          </div>
-          <div className="hidden md:block lg:hidden">
-            <Logo size="headerMd" showText={true} />
-          </div>
-          <div className="hidden lg:block">
-            <Logo size="headerLg" showText={true} />
             </div>
+          ))}
         </div>
 
         <div className="flex items-center">
-          <div className="block md:hidden">
+          <div className="block sm:hidden">
             <MenuBar className="gap-[var(--spacing-scale-001)]">
-              <MenuBarItem
+              {renderNavigationItems("xsmall")}
-                href="#"
+              {renderLoginButton("xsmall")}
-                size="xsmall"
+            </MenuBar>
-                className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
+          </div>
-              >
+
-                Use cases
+          <div className="hidden sm:block md:hidden absolute left-1/2 transform -translate-x-1/2">
-              </MenuBarItem>
+            <MenuBar className="gap-[var(--spacing-scale-001)]">
-              <MenuBarItem href="#" size="xsmall">
+              {renderNavigationItems("xsmall")}
-                Learn
+              {renderLoginButton("xsmall")}
-              </MenuBarItem>
-              <MenuBarItem href="#" size="xsmall">
-                About
-              </MenuBarItem>
-              <MenuBarItem href="#" size="xsmall">
-                Log in
-              </MenuBarItem>
             </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)]">
-              <MenuBarItem
+              {renderNavigationItems("xsmall")}
-                href="#"
-                size="xsmall"
-                className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
-              >
-                Use cases
-              </MenuBarItem>
-              <MenuBarItem href="#" size="xsmall">
-                Learn
-              </MenuBarItem>
-              <MenuBarItem href="#" size="xsmall">
-                About
-              </MenuBarItem>
             </MenuBar>
           </div>
 
           <div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
-            <MenuBar size="large">
+            <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
-              <MenuBarItem
-                href="#"
-                size="large"
-                className="px-[var(--spacing-scale-002)] py-[var(--spacing-scale-002)]"
-              >
-                Use cases
-              </MenuBarItem>
-              <MenuBarItem href="#" size="large">
-                Learn
-              </MenuBarItem>
-              <MenuBarItem href="#" size="large">
-                About
-              </MenuBarItem>
-            </MenuBar>
           </div>
 
-          <div className="hidden md:block lg:hidden">
+          <div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
-            <MenuBarItem
+            <div className="flex items-center">
-              href="#"
+              {renderLoginButton("xsmall", "mr-[var(--spacing-scale-010)]")}
-              size="xsmall"
+              {renderCreateRuleButton("xsmall", "medium", "medium")}
-              className="mr-[var(--spacing-scale-010)]"
+            </div>
-            >
-              Log in
-            </MenuBarItem>
-            <Button size="xsmall">
-              <AvatarContainer size="medium">
-                <Avatar
-                  src="/assets/Avatar_1.png"
-                  alt="Avatar 1"
-                  size="medium"
-                />
-                <Avatar
-                  src="/assets/Avatar_2.png"
-                  alt="Avatar 2"
-                  size="medium"
-                />
-                <Avatar
-                  src="/assets/Avatar_3.png"
-                  alt="Avatar 3"
-                  size="medium"
-                />
-              </AvatarContainer>
-              <span>Create rule</span>
-            </Button>
           </div>
 
           <div className="hidden lg:flex items-center">
-            <MenuBarItem
+            {renderLoginButton("large", "mr-[var(--spacing-scale-012)]")}
-              href="#"
+            {renderCreateRuleButton("large", "xlarge", "xlarge")}
-              size="large"
-              className="mr-[var(--spacing-scale-012)]"
-            >
-              Log in
-            </MenuBarItem>
-            <Button size="large">
-              <AvatarContainer size="xlarge">
-                <Avatar
-                  src="/assets/Avatar_1.png"
-                  alt="Avatar 1"
-                  size="xlarge"
-                />
-                <Avatar
-                  src="/assets/Avatar_2.png"
-                  alt="Avatar 2"
-                  size="xlarge"
-                />
-                <Avatar
-                  src="/assets/Avatar_3.png"
-                  alt="Avatar 3"
-                  size="xlarge"
-                />
-              </AvatarContainer>
-              <span>Create rule</span>
-            </Button>
           </div>
 
           <div className="block md:hidden">
-            <Button size="xsmall" className="ml-[var(--spacing-scale-006)]">
+            {renderCreateRuleButton("xsmall", "small", "small")}
-              <AvatarContainer size="small">
-                <Avatar
-                  src="/assets/Avatar_1.png"
-                  alt="Avatar 1"
-                  size="small"
-                />
-                <Avatar
-                  src="/assets/Avatar_2.png"
-                  alt="Avatar 2"
-                  size="small"
-                />
-                <Avatar
-                  src="/assets/Avatar_3.png"
-                  alt="Avatar 3"
-                  size="small"
-                />
-              </AvatarContainer>
-              <span>Create rule</span>
-            </Button>
           </div>
         </div>
       </div>

app/components/Logo.js

@@ -10,7 +10,7 @@ export default function Logo({ size = "default", showText = true }) {
     },
     header: {
       containerHeight: "h-[20.85px]",
-      gap: "gap-[2.11px]",
+      gap: "gap-[4.21px]",
       textSize: "text-[11.57px]",
       lineHeight: "leading-[14.24px]",
       iconSize: "w-[14.24px] h-[14.24px]",
@@ -48,6 +48,8 @@ export default function Logo({ size = "default", showText = true }) {
   const config =
     size === "header"
       ? sizes.header
+      : size === "headerMd"
+      ? sizes.headerMd
       : size === "headerLg"
       ? sizes.headerLg
       : size === "footer"

app/components/MenuBarItem.js

@@ -9,7 +9,7 @@ export default function MenuBarItem({
 }) {
   const variantStyles = {
     default:
-      "bg-transparent text-[var(--color-content-default-brand-primary)] border border-transparent 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)] active:border-[var(--color-content-default-brand-primary)] disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
+      "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)] active:outline-1 active:outline-[var(--color-content-default-brand-primary)] active:outline-offset-1 disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:opacity-50 disabled:cursor-not-allowed",
   };
 
   const sizeStyles = {
@@ -17,17 +17,22 @@ export default function MenuBarItem({
       "px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-016)] gap-[var(--spacing-scale-004)]",
     xsmall:
       "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)]",
     large:
       "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
   };
 
+  const smallTextStyle =
+    "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]";
+  const largeTextStyle =
+    "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]";
+
   const textStyles = {
-    default:
+    default: smallTextStyle,
-      "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
+    xsmall: smallTextStyle,
-    xsmall:
+    xsmallUseCases: smallTextStyle,
-      "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
+    large: largeTextStyle,
-    large:
-      "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
   };
 
   const baseStyles = `inline-flex items-center ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${textStyles[size]} transition-all duration-200 cursor-pointer`;

app/tailwind.css

@@ -11,8 +11,7 @@
   --breakpoint-sm: 430px;
   --breakpoint-md: 640px;
   --breakpoint-lg: 1024px;
-  --breakpoint-xl: 1280px;
+  --breakpoint-xl: 1440px;
-  --breakpoint-2xl: 1536px;
 
   /* Reset default Tailwind configuration */
   --color-*: initial;