Large header breakpoint

app/components/Avatar.js

@@ -5,10 +5,10 @@ export default function Avatar({
   className = "",
   ...props
 }) {
-  // Size styles - avatars scale to fit inside the 60px container
   const sizeStyles = {
-    small: "w-4 h-4", // 16px x 16px to fit in 60px container
+    small: "w-5 h-5",
-    // Add more sizes as needed: medium, large, xlarge
+    medium: "w-[18px] h-[18px]",
+    xlarge: "w-[32px] h-[32px]",
   };
 
   const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`;

app/components/AvatarContainer.js

@@ -4,10 +4,10 @@ export default function AvatarContainer({
   className = "",
   ...props
 }) {
-  // Size styles - container sizes to fit content, not fixed dimensions
   const sizeStyles = {
-    small: "flex -space-x-2", // Just flex with -8px spacing, no fixed width/height
+    small: "flex -space-x-2",
-    // Add more sizes as needed: medium, large, xlarge
+    medium: "flex -space-x-[var(--spacing-scale-009)]",
+    xlarge: "flex -space-x-[13px]",
   };
 
   const baseStyles = `items-center ${sizeStyles[size]} ${className}`;

app/components/Button.js

@@ -12,56 +12,52 @@ export default function Button({
   ariaLabel,
   ...props
 }) {
-  // Size styles
   const sizeStyles = {
     xsmall:
       "px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
     small:
       "px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",
-    // Add more sizes as needed: medium, large, xlarge
+    large:
+      "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
   };
 
-  // Font styles based on size
   const fontStyles = {
     xsmall:
       "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
     small:
       "font-['Inter'] text-[10px] leading-[12.5px] font-medium tracking-[0%]",
+    large:
+      "font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
   };
 
-  // Variant styles
   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",
     secondary:
-      "bg-transparent text-[var(--color-content-default-primary)] border-2 border-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-tertiary)] hover:text-[var(--color-content-default-primary)] active:bg-[var(--color-surface-default-secondary)] active:text-[var(--color-content-default-primary)] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_#FFFDD2] focus:outline-none disabled:bg-[var(--color-surface-default-tertiary)] disabled:text-[var(--color-content-default-tertiary)] disabled:border-[var(--color-content-default-tertiary)] disabled:cursor-not-allowed disabled:opacity-50",
+      "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`;
+  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]}`;
 
-  // Determine which variant to use
   let finalVariant = variant;
   if (disabled) {
-    finalVariant = "default"; // The disabled state is handled by disabled: utilities
+    finalVariant = "default";
   }
 
-  const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
+  const combinedStyles = `${baseStyles} ${className}`;
 
-  // Accessibility attributes
   const accessibilityProps = {
     ...(ariaLabel && { "aria-label": ariaLabel }),
-    ...(disabled && { "aria-disabled": true }),
+    ...(target && { target }),
-    ...(onClick && { role: "button", tabIndex: 0 }),
+    ...(rel && { rel }),
   };
 
-  // If href is provided, render as anchor tag
   if (href && !disabled) {
     return (
       <a
         href={href}
-        target={target}
-        rel={rel}
         className={combinedStyles}
+        onClick={onClick}
         {...accessibilityProps}
         {...props}
       >
@@ -70,7 +66,6 @@ export default function Button({
     );
   }
 
-  // Render as button
   return (
     <button
       type={type}

app/components/Header.js

@@ -8,7 +8,7 @@ import Avatar from "./Avatar";
 export default function Header() {
   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] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-120,120px)] lg:py-[var(--spacing-measures-spacing-016,16px)]">
+      <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">
             <Logo size="header" showText={false} />
@@ -16,9 +16,12 @@ export default function Header() {
           <div className="hidden sm:block md:hidden">
             <Logo size="header" showText={true} />
           </div>
-          <div className="hidden md:block">
+          <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">
@@ -43,7 +46,7 @@ export default function Header() {
             </MenuBar>
           </div>
 
-          <div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-024)]">
+          <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
                 href="#"
@@ -61,30 +64,78 @@ export default function Header() {
             </MenuBar>
           </div>
 
-          <div className="hidden md:flex items-center">
+          <div className="hidden lg:block absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
+            <MenuBar size="large">
+              <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">
             <MenuBarItem
               href="#"
               size="xsmall"
-              className="mr-[var(--spacing-scale-006)]"
+              className="mr-[var(--spacing-scale-010)]"
             >
               Log in
             </MenuBarItem>
             <Button size="xsmall">
-              <AvatarContainer size="small">
+              <AvatarContainer size="medium">
                 <Avatar
                   src="/assets/Avatar_1.png"
                   alt="Avatar 1"
-                  size="small"
+                  size="medium"
                 />
                 <Avatar
                   src="/assets/Avatar_2.png"
                   alt="Avatar 2"
-                  size="small"
+                  size="medium"
                 />
                 <Avatar
                   src="/assets/Avatar_3.png"
                   alt="Avatar 3"
-                  size="small"
+                  size="medium"
+                />
+              </AvatarContainer>
+              <span>Create rule</span>
+            </Button>
+          </div>
+
+          <div className="hidden lg:flex items-center">
+            <MenuBarItem
+              href="#"
+              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>

app/components/Logo.js

@@ -23,11 +23,11 @@ export default function Logo({ size = "default", showText = true }) {
       iconSize: "w-[22.02px] h-[22.02px]",
     },
     headerLg: {
-      containerHeight: "h-[36px]",
+      containerHeight: "h-[27.05px]",
-      gap: "gap-[7px]",
+      gap: "gap-[6.55px]",
-      textSize: "text-[20px]",
+      textSize: "text-[21.97px]",
-      lineHeight: "leading-[24px]",
+      lineHeight: "leading-[27.05px]",
-      iconSize: "w-[24px] h-[24px]",
+      iconSize: "w-[27.05px] h-[27.05px]",
     },
     footer: {
       containerHeight: "h-[calc(40px*1.37)]",

app/components/MenuBar.js

@@ -1,5 +1,17 @@
-export default function MenuBar({ children, className = "", ...props }) {
+export default function MenuBar({
-  const baseStyles = `flex items-center px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)] ${className}`;
+  children,
+  className = "",
+  size = "default",
+  ...props
+}) {
+  const sizeStyles = {
+    default:
+      "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
+    large:
+      "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-012)]",
+  };
+
+  const baseStyles = `flex items-center ${sizeStyles[size]} ${className}`;
 
   return (
     <nav className={baseStyles} {...props}>

app/components/MenuBarItem.js

@@ -17,6 +17,8 @@ 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)]",
+    large:
+      "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]",
   };
 
   const textStyles = {
@@ -24,6 +26,8 @@ export default function MenuBarItem({
       "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
     xsmall:
       "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
+    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`;