From 0272011beb66e933ca890542615bf6229a84acf3 Mon Sep 17 00:00:00 2001 From: adilallo <39313955+adilallo@users.noreply.github.com> Date: Wed, 6 Aug 2025 23:45:09 -0600 Subject: [PATCH] Xlarge home header --- app/components/HeaderTab.js | 9 +++++++-- app/components/HomeHeader.js | 19 +++++++++++++------ app/components/Logo.js | 15 +++++++++++++-- app/components/MenuBarItem.js | 5 +++++ public/assets/Union_xlg.svg | 3 +++ 5 files changed, 41 insertions(+), 10 deletions(-) create mode 100644 public/assets/Union_xlg.svg diff --git a/app/components/HeaderTab.js b/app/components/HeaderTab.js index 7d8c54a..41d4d86 100644 --- a/app/components/HeaderTab.js +++ b/app/components/HeaderTab.js @@ -1,7 +1,7 @@ export default function HeaderTab({ children, className = "", ...props }) { return (
{children} @@ -13,7 +13,12 @@ export default function HeaderTab({ children, className = "", ...props }) { Union + Union
); diff --git a/app/components/HomeHeader.js b/app/components/HomeHeader.js index 9e0d882..99a620e 100644 --- a/app/components/HomeHeader.js +++ b/app/components/HomeHeader.js @@ -40,7 +40,7 @@ export default function HomeHeader() { size: "homeHeaderLg", showText: true, }, - { breakpoint: "hidden xl:block", size: "headerXl", showText: true }, + { breakpoint: "hidden xl:block", size: "homeHeaderXl", showText: true }, ]; const renderNavigationItems = (size) => { @@ -54,11 +54,14 @@ export default function HomeHeader() { size === "default" || size === "home" || size === "homeMd" || - size === "large") + size === "large" || + size === "homeXlarge") ? size === "home" || size === "homeMd" ? "homeMd" : size === "large" ? "large" + : size === "homeXlarge" + ? "homeXlarge" : "xsmallUseCases" : size } @@ -67,7 +70,8 @@ export default function HomeHeader() { size === "default" || size === "home" || size === "homeMd" || - size === "large" + size === "large" || + size === "homeXlarge" ? "home" : "default" } @@ -125,7 +129,7 @@ export default function HomeHeader() { return (
-
+
{logoConfig.map((config, index) => ( @@ -158,8 +162,10 @@ export default function HomeHeader() { {renderNavigationItems("large")}
-
- {renderNavigationItems("xlarge")} +
+ + {renderNavigationItems("homeXlarge")} +
@@ -179,6 +185,7 @@ export default function HomeHeader() { {renderCreateRuleButton("large", "large", "large")}
+ {renderLoginButton("homeXlarge", "mr-[var(--spacing-scale-004)]")} {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
diff --git a/app/components/Logo.js b/app/components/Logo.js index 2f828dc..1355344 100644 --- a/app/components/Logo.js +++ b/app/components/Logo.js @@ -36,6 +36,13 @@ export default function Logo({ size = "default", showText = true }) { lineHeight: "leading-[27.05px]", iconSize: "w-[27.05px] h-[27.05px]", }, + homeHeaderXl: { + containerHeight: "h-[36px]", + gap: "gap-[8.64px]", + textSize: "text-[29.01px]", + lineHeight: "leading-[35.7px]", + iconSize: "w-[35.7px] h-[35.7px]", + }, header: { containerHeight: "h-[20.85px]", gap: "gap-[4.21px]", @@ -89,6 +96,8 @@ export default function Logo({ size = "default", showText = true }) { ? sizes.homeHeaderMd : size === "homeHeaderLg" ? sizes.homeHeaderLg + : size === "homeHeaderXl" + ? sizes.homeHeaderXl : size === "header" ? sizes.header : size === "headerMd" @@ -116,7 +125,8 @@ export default function Logo({ size = "default", showText = true }) { size === "homeHeaderXsmall" || size === "homeHeaderSm" || size === "homeHeaderMd" || - size === "homeHeaderLg" + size === "homeHeaderLg" || + size === "homeHeaderXl" ? "text-[var(--color-content-inverse-primary)]" : "text-[var(--color-content-default-primary)]" } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`} @@ -135,7 +145,8 @@ export default function Logo({ size = "default", showText = true }) { size === "homeHeaderXsmall" || size === "homeHeaderSm" || size === "homeHeaderMd" || - size === "homeHeaderLg" + size === "homeHeaderLg" || + size === "homeHeaderXl" ? "filter brightness-0" : "" }`} diff --git a/app/components/MenuBarItem.js b/app/components/MenuBarItem.js index 77a788c..fc49c88 100644 --- a/app/components/MenuBarItem.js +++ b/app/components/MenuBarItem.js @@ -41,6 +41,8 @@ export default function MenuBarItem({ "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", large: "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", + homeXlarge: + "active:outline-[2px] active:outline-[var(--color-content-default-primary)]", xlarge: "active:outline-2 active:outline-[var(--color-content-default-primary)]", }; @@ -58,6 +60,8 @@ export default function MenuBarItem({ "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]", large: "px-[var(--spacing-scale-012)] py-[var(--spacing-scale-012)] gap-[var(--spacing-scale-004)]", + homeXlarge: + "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] gap-[var(--spacing-scale-004)] h-[44px]", xlarge: "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] gap-[var(--spacing-scale-004)]", }; @@ -79,6 +83,7 @@ export default function MenuBarItem({ homeMd: mediumTextStyle, homeUseCases: mediumTextStyle, large: largeTextStyle, + homeXlarge: xlargeTextStyle, xlarge: xlargeTextStyle, }; diff --git a/public/assets/Union_xlg.svg b/public/assets/Union_xlg.svg new file mode 100644 index 0000000..3d996ec --- /dev/null +++ b/public/assets/Union_xlg.svg @@ -0,0 +1,3 @@ + + +