Implemented smallest header breakpoint

app/components/Avatar.js

@@ -0,0 +1,17 @@
+export default function Avatar({
+  src,
+  alt,
+  size = "small",
+  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
+    // Add more sizes as needed: medium, large, xlarge
+  };
+
+  const baseStyles = `rounded-[var(--radius-measures-radius-full)] object-cover ${sizeStyles[size]} ${className}`;
+
+  return <img src={src} alt={alt} className={baseStyles} {...props} />;
+}

app/components/AvatarContainer.js

@@ -0,0 +1,20 @@
+export default function AvatarContainer({
+  children,
+  size = "small",
+  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
+    // Add more sizes as needed: medium, large, xlarge
+  };
+
+  const baseStyles = `items-center ${sizeStyles[size]} ${className}`;
+
+  return (
+    <div className={baseStyles} {...props}>
+      {children}
+    </div>
+  );
+}

app/components/Button.js

@@ -0,0 +1,86 @@
+export default function Button({
+  children,
+  variant = "default",
+  size = "xsmall",
+  className = "",
+  disabled = false,
+  type = "button",
+  onClick,
+  href,
+  target,
+  rel,
+  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
+  };
+
+  // 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%]",
+  };
+
+  // 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",
+  };
+
+  const baseStyles = `inline-flex items-center justify-start ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 cursor-pointer`;
+
+  // Determine which variant to use
+  let finalVariant = variant;
+  if (disabled) {
+    finalVariant = "default"; // The disabled state is handled by disabled: utilities
+  }
+
+  const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
+
+  // Accessibility attributes
+  const accessibilityProps = {
+    ...(ariaLabel && { "aria-label": ariaLabel }),
+    ...(disabled && { "aria-disabled": true }),
+    ...(onClick && { role: "button", tabIndex: 0 }),
+  };
+
+  // If href is provided, render as anchor tag
+  if (href && !disabled) {
+    return (
+      <a
+        href={href}
+        target={target}
+        rel={rel}
+        className={combinedStyles}
+        {...accessibilityProps}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+
+  // Render as button
+  return (
+    <button
+      type={type}
+      className={combinedStyles}
+      disabled={disabled}
+      onClick={onClick}
+      {...accessibilityProps}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

app/components/Header.js

@@ -0,0 +1,63 @@
+import Logo from "./Logo";
+import NavigationItem from "./NavigationItem";
+import Button from "./Button";
+import AvatarContainer from "./AvatarContainer";
+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)]
+          sm:px-[var(--spacing-measures-spacing-032)]
+          sm:py-[var(--spacing-measures-spacing-012)]
+          lg:px-[var(--spacing-measures-spacing-120,120px)]
+          lg:py-[var(--spacing-measures-spacing-016,16px)]"
+      >
+        {/* Logo */}
+        <div>
+          <div className="block sm:hidden">
+            <Logo size="header" showText={false} />
+          </div>
+          <div className="hidden sm:block lg:hidden">
+            <Logo size="header" showText={false} />
+          </div>
+          <div className="hidden lg:block">
+            <Logo size="headerLg" showText={false} />
+          </div>
+        </div>
+
+        {/* Navigation */}
+        <div className="flex items-center">
+          <nav className="flex items-center space-x-[var(--spacing-scale-002)]">
+            <NavigationItem href="#" size="xsmall">
+              Use cases
+            </NavigationItem>
+            <NavigationItem href="#" size="xsmall">
+              Learn
+            </NavigationItem>
+            <NavigationItem href="#" size="xsmall">
+              About
+            </NavigationItem>
+            <NavigationItem href="#" size="xsmall">
+              Log in
+            </NavigationItem>
+          </nav>
+
+          <Button size="xsmall" className="ml-[var(--spacing-scale-006)]">
+            {/* Avatar Container */}
+            <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>
+    </header>
+  );
+}

app/components/Logo.js

@@ -1,4 +1,4 @@
-export default function Logo({ size = "default" }) {
+export default function Logo({ size = "default", showText = true }) {
   // Size configurations
   const sizes = {
     default: {
@@ -8,6 +8,20 @@ export default function Logo({ size = "default" }) {
       lineHeight: "leading-[27.05px]",
       iconSize: "w-[27.05px] h-[27.05px]",
     },
+    header: {
+      containerHeight: "h-[14.24px]",
+      gap: "gap-[2.11px]",
+      textSize: "text-[18px]",
+      lineHeight: "leading-[22px]",
+      iconSize: "w-[22px] h-[22px]",
+    },
+    headerLg: {
+      containerHeight: "h-[36px]",
+      gap: "gap-[7px]",
+      textSize: "text-[20px]",
+      lineHeight: "leading-[24px]",
+      iconSize: "w-[24px] h-[24px]",
+    },
     footer: {
       containerHeight: "h-[calc(40px*1.37)]",
       gap: "gap-[calc(8px*1.37)]",
@@ -25,7 +39,11 @@ export default function Logo({ size = "default" }) {
   };
 
   const config =
-    size === "footer"
+    size === "header"
+      ? sizes.header
+      : size === "headerLg"
+      ? sizes.headerLg
+      : size === "footer"
       ? sizes.footer
       : size === "footerLg"
       ? sizes.footerLg
@@ -33,14 +51,18 @@ export default function Logo({ size = "default" }) {
 
   return (
     <div
-      className={`flex items-center ${config.containerHeight} ${config.gap}`}
+      className={`flex items-center ${config.containerHeight} ${
+        showText ? config.gap : ""
+      }`}
     >
-      {/* Logo Text */}
+      {/* 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]`}
         >
           CommunityRule
         </div>
+      )}
 
       {/* Vector Icon */}
       <img

app/components/NavigationItem.js

@@ -0,0 +1,55 @@
+export default function NavigationItem({
+  href = "#",
+  children,
+  variant = "default",
+  size = "default",
+  className = "",
+  disabled = false,
+  ...props
+}) {
+  // Variant styles
+  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",
+  };
+
+  // Size styles
+  const sizeStyles = {
+    default:
+      "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)]",
+  };
+
+  // Text styles based on size
+  const textStyles = {
+    default:
+      "font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
+    xsmall:
+      "font-['Inter'] text-[10px] leading-[12px] 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`;
+
+  // Determine which variant to use
+  let finalVariant = variant;
+  if (disabled) {
+    finalVariant = "default"; // The disabled state is handled by disabled: utilities
+  }
+
+  const combinedStyles = `${baseStyles} ${variantStyles[finalVariant]} ${className}`;
+
+  if (disabled) {
+    return (
+      <span className={combinedStyles} {...props}>
+        {children}
+      </span>
+    );
+  }
+
+  return (
+    <a href={href} className={combinedStyles} {...props}>
+      {children}
+    </a>
+  );
+}

app/globals.css

@@ -1 +1,4 @@
-@import "tailwindcss";
+@import "./tailwind.css";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

app/layout.js

@@ -1,11 +1,11 @@
 import { Inter, Bricolage_Grotesque } from "next/font/google";
 import "./globals.css";
-import "./tailwind.css";
+import Header from "./components/Header";
 import Footer from "./components/Footer";
 
 const inter = Inter({
   subsets: ["latin"],
-  weight: ["400"],
+  weight: ["400", "500"],
   variable: "--font-inter",
 });
 
@@ -20,6 +20,7 @@ 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>

package-lock.json

@@ -18,6 +18,7 @@
         "@tailwindcss/postcss": "^4.1.11",
         "eslint": "^9",
         "eslint-config-next": "15.2.4",
+        "postcss": "^8.5.6",
         "tailwindcss": "^4.0.0"
       }
     },

package.json

@@ -19,6 +19,7 @@
     "@tailwindcss/postcss": "^4.1.11",
     "eslint": "^9",
     "eslint-config-next": "15.2.4",
+    "postcss": "^8.5.6",
     "tailwindcss": "^4.0.0"
   }
 }

postcss.config.mjs

@@ -1,5 +1,6 @@
-const config = {
-  plugins: ["@tailwindcss/postcss"],
+/** @type {import('postcss-load-config').Config} */
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
 };
-
-export default config;