xsmall home header breakpoint

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-[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)] 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: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",
   };
 
   const hoverOutlineStyles = {

app/components/HeaderTab.js

@@ -0,0 +1,15 @@
+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}`}
+      {...props}
+    >
+      {children}
+      <img
+        src="/assets/Union.svg"
+        alt="Union"
+        className="absolute bottom-[0px] -right-[55px] w-[61px] h-[24px]"
+      />
+    </div>
+  );
+}

app/components/HomeHeader.js

@@ -0,0 +1,174 @@
+import Logo from "./Logo";
+import MenuBar from "./MenuBar";
+import MenuBarItem from "./MenuBarItem";
+import Button from "./Button";
+import AvatarContainer from "./AvatarContainer";
+import Avatar from "./Avatar";
+import HeaderTab from "./HeaderTab";
+
+export default function HomeHeader() {
+  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: "homeHeaderXsmall",
+      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 xl:hidden",
+      size: "headerLg",
+      showText: true,
+    },
+    { breakpoint: "hidden xl:block", size: "headerXl", showText: true },
+  ];
+
+  const renderNavigationItems = (size) => {
+    return navigationItems.map((item, index) => (
+      <MenuBarItem
+        key={index}
+        href={item.href}
+        size={item.extraPadding && size === "xsmall" ? "xsmallUseCases" : size}
+        variant={size === "xsmall" ? "home" : "default"}
+      >
+        {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}
+        variant={size === "xsmall" ? "home" : "default"}
+        className={marginRight}
+      >
+        Log in
+      </MenuBarItem>
+    );
+  };
+
+  const renderCreateRuleButton = (
+    buttonSize,
+    containerSize,
+    avatarSize,
+    marginLeft
+  ) => {
+    return (
+      <Button size={buttonSize} className={marginLeft} variant="secondary">
+        {renderAvatarGroup(containerSize, avatarSize)}
+        <span>Create rule</span>
+      </Button>
+    );
+  };
+
+  const renderLogo = (size, showText) => {
+    return <Logo size={size} showText={showText} />;
+  };
+
+  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)]">
+        <HeaderTab className="flex items-center self-end">
+          <div>
+            {logoConfig.map((config, index) => (
+              <div key={index} className={config.breakpoint}>
+                {renderLogo(config.size, config.showText)}
+              </div>
+            ))}
+          </div>
+
+          <div className="flex items-center">
+            <div className="block sm:hidden -me-[2px]">
+              <MenuBar size="xsmall">
+                {renderNavigationItems("xsmall")}
+                {renderLoginButton("xsmall")}
+              </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)]">
+                {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>
+
+            <div className="hidden lg:block xl:hidden absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]">
+              <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 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>
+
+            <div className="hidden xl:flex items-center">
+              {renderLoginButton("xlarge", "mr-[var(--spacing-scale-012)]")}
+            </div>
+          </div>
+        </HeaderTab>
+
+        {/* Create rule button positioned outside HeaderTab */}
+        <div className="block md:hidden">
+          {renderCreateRuleButton("xsmall", "small", "small")}
+        </div>
+        <div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
+          {renderCreateRuleButton("xsmall", "medium", "medium")}
+        </div>
+        <div className="hidden lg:flex xl:hidden items-center">
+          {renderCreateRuleButton("large", "xlarge", "xlarge")}
+        </div>
+        <div className="hidden xl:flex items-center">
+          {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
+        </div>
+      </div>
+    </header>
+  );
+}

app/components/Logo.js

@@ -8,6 +8,13 @@ export default function Logo({ size = "default", showText = true }) {
       lineHeight: "leading-[27.05px]",
       iconSize: "w-[27.05px] h-[27.05px]",
     },
+    homeHeaderXsmall: {
+      containerHeight: "h-[14.11px]",
+      gap: "gap-[4.21px]",
+      textSize: "text-[11.57px]",
+      lineHeight: "leading-[14.24px]",
+      iconSize: "w-[14.11px] h-[14.11px]",
+    },
     header: {
       containerHeight: "h-[20.85px]",
       gap: "gap-[4.21px]",
@@ -53,7 +60,9 @@ export default function Logo({ size = "default", showText = true }) {
   };
 
   const config =
-    size === "header"
+    size === "homeHeaderXsmall"
+      ? sizes.homeHeaderXsmall
+      : size === "header"
       ? sizes.header
       : size === "headerMd"
       ? sizes.headerMd
@@ -76,7 +85,11 @@ export default function Logo({ size = "default", showText = true }) {
       {/* Logo Text - only show if showText is true */}
       {showText && (
         <div
-          className={`font-['Bricolage_Grotesque'] text-[var(--color-content-default-primary)] ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
+          className={`font-['Bricolage_Grotesque'] ${
+            size === "homeHeaderXsmall"
+              ? "text-[var(--color-content-inverse-primary)]"
+              : "text-[var(--color-content-default-primary)]"
+          } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
         >
           CommunityRule
         </div>
@@ -88,7 +101,9 @@ export default function Logo({ size = "default", showText = true }) {
         alt="CommunityRule Logo Icon"
         width={27.05}
         height={27.05}
-        className={`flex-shrink-0 ${config.iconSize}`}
+        className={`flex-shrink-0 ${config.iconSize} ${
+          size === "homeHeaderXsmall" ? "filter brightness-0" : ""
+        }`}
       />
     </div>
   );

app/components/MenuBar.js

@@ -5,6 +5,8 @@ export default function MenuBar({
   ...props
 }) {
   const sizeStyles = {
+    xsmall:
+      "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)]",
     large:

app/components/MenuBarItem.js

@@ -10,6 +10,7 @@ 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",
   };
 
   const activeOutlineStyles = {

app/layout.js

@@ -1,6 +1,5 @@
 import { Inter, Bricolage_Grotesque } from "next/font/google";
 import "./globals.css";
-import Header from "./components/Header";
 import Footer from "./components/Footer";
 
 const inter = Inter({
@@ -20,7 +19,6 @@ export default function RootLayout({ children }) {
     <html lang="en">
       <body className={`${inter.variable} ${bricolageGrotesque.variable}`}>
         <div className="min-h-screen flex flex-col">
-          <Header />
           <main className="flex-1">{children}</main>
           <Footer />
         </div>

app/page.js

@@ -1,3 +1,10 @@
+import HomeHeader from "./components/HomeHeader";
+
 export default function Page() {
-  return <></>;
+  return (
+    <>
+      <HomeHeader />
+      <main>{/* Your home page content will go here */}</main>
+    </>
+  );
 }

public/assets/Union.svg

@@ -0,0 +1,3 @@
+<svg width="105" height="42" viewBox="0 0 105 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0492 10.0151C12.0492 4.49227 7.57203 0 2.04918 0H0V53H105V42.0635H44.0492C26.3761 42.0635 12.0492 27.6882 12.0492 10.0151Z" fill="#FEFCC9"/>
+</svg>