CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Large home header

Browse Source
This commit is contained in:
adilallo
2025-08-06 22:39:19 -06:00
parent 6d2e045af6
commit 93c04d0bfe
6 changed files with 31 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/Avatar.js
+1
View File
@@ -8,6 +8,7 @@ export default function Avatar({
const sizeStyles = { const sizeStyles = {
small: "w-[16px] h-[16px]", small: "w-[16px] h-[16px]",
medium: "w-[18px] h-[18px]", medium: "w-[18px] h-[18px]",
large: "w-[24px] h-[24px]",
xlarge: "w-[32px] h-[32px]", xlarge: "w-[32px] h-[32px]",
}; };
app/components/AvatarContainer.js
+1
View File
@@ -7,6 +7,7 @@ export default function AvatarContainer({
const sizeStyles = { const sizeStyles = {
small: "flex -space-x-2", small: "flex -space-x-2",
medium: "flex -space-x-[9px]", medium: "flex -space-x-[9px]",
large: "flex -space-x-[10px]",
xlarge: "flex -space-x-[13px]", xlarge: "flex -space-x-[13px]",
}; };
app/components/HeaderTab.js
+2 -2
View File
@@ -1,7 +1,7 @@
export default function HeaderTab({ children, className = "", ...props }) { export default function HeaderTab({ children, className = "", ...props }) {
return ( return (
<div <div
className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] sm:rounded-t-[24px] md:rounded-t-[24px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] md:gap-[var(--spacing-scale-032)] ${className}`} className={`relative bg-[var(--color-surface-default-brand-primary)] rounded-t-[16px] sm:rounded-t-[24px] md:rounded-t-[24px] lg:rounded-t-[24px] pl-[var(--spacing-measures-spacing-012)] h-[40px] sm:h-[52px] md:h-[52px] lg:h-[52px] sm:pr-[var(--spacing-scale-006)] md:pl-[var(--spacing-scale-024)] lg:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:pr-[var(--spacing-scale-048)] md:gap-[var(--spacing-scale-032)] ${className}`}
{...props} {...props}
> >
{children} {children}
@@ -13,7 +13,7 @@ export default function HeaderTab({ children, className = "", ...props }) {
<img <img
src="/assets/Union_sm_md_lg.svg" src="/assets/Union_sm_md_lg.svg"
alt="Union" alt="Union"
className="absolute -bottom-[2.5px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block" className="absolute -bottom-[3px] lg:-bottom-[2.5px] -right-[55px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block"
/> />
</div> </div>
); );
app/components/HomeHeader.js
+12 -15
View File
@@ -37,7 +37,7 @@ export default function HomeHeader() {
}, },
{ {
breakpoint: "hidden lg:block xl:hidden", breakpoint: "hidden lg:block xl:hidden",
size: "headerLg", size: "homeHeaderLg",
showText: true, showText: true,
}, },
{ breakpoint: "hidden xl:block", size: "headerXl", showText: true }, { breakpoint: "hidden xl:block", size: "headerXl", showText: true },
@@ -53,9 +53,12 @@ export default function HomeHeader() {
(size === "xsmall" || (size === "xsmall" ||
size === "default" || size === "default" ||
size === "home" || size === "home" ||
size === "homeMd") size === "homeMd" ||
size === "large")
? size === "home" || size === "homeMd" ? size === "home" || size === "homeMd"
? "homeMd" ? "homeMd"
: size === "large"
? "large"
: "xsmallUseCases" : "xsmallUseCases"
: size : size
} }
@@ -63,7 +66,8 @@ export default function HomeHeader() {
size === "xsmall" || size === "xsmall" ||
size === "default" || size === "default" ||
size === "home" || size === "home" ||
size === "homeMd" size === "homeMd" ||
size === "large"
? "home" ? "home"
: "default" : "default"
} }
@@ -121,8 +125,8 @@ export default function HomeHeader() {
return ( return (
<header className="w-full bg-transparent overflow-hidden"> <header className="w-full bg-transparent overflow-hidden">
<div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"> <div className="relative flex items-center justify-between mx-auto max-w-[1920px] h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] px-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)]">
<HeaderTab className="flex items-center self-end"> <HeaderTab className="flex items-center justify-between lg:gap-[var(--spacing-scale-120)] self-end">
<div> <div>
{logoConfig.map((config, index) => ( {logoConfig.map((config, index) => (
<div key={index} className={config.breakpoint}> <div key={index} className={config.breakpoint}>
@@ -150,21 +154,13 @@ export default function HomeHeader() {
<MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar> <MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
</div> </div>
<div className="hidden lg:block xl:hidden absolute left-1/2 transform -translate-x-1/2 -ml-[var(--spacing-scale-024)]"> <div className="hidden lg:block xl:hidden">
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar> <MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
</div> </div>
<div className="hidden xl:block absolute left-1/2 transform -translate-x-1/2 ml-[var(--spacing-scale-032)]"> <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> <MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
</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> </div>
</HeaderTab> </HeaderTab>
@@ -179,7 +175,8 @@ export default function HomeHeader() {
</div> </div>
</div> </div>
<div className="hidden lg:flex xl:hidden items-center"> <div className="hidden lg:flex xl:hidden items-center">
{renderCreateRuleButton("large", "xlarge", "xlarge")} {renderLoginButton("large", "mr-[var(--spacing-scale-004)]")}
{renderCreateRuleButton("large", "large", "large")}
</div> </div>
<div className="hidden xl:flex items-center"> <div className="hidden xl:flex items-center">
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")} {renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
app/components/Logo.js
+13 -2
View File
@@ -29,6 +29,13 @@ export default function Logo({ size = "default", showText = true }) {
lineHeight: "leading-[22.02px]", lineHeight: "leading-[22.02px]",
iconSize: "w-[22.02px] h-[22.02px]", iconSize: "w-[22.02px] h-[22.02px]",
}, },
homeHeaderLg: {
containerHeight: "h-[28px]",
gap: "gap-[6.55px]",
textSize: "text-[21.97px]",
lineHeight: "leading-[27.05px]",
iconSize: "w-[27.05px] h-[27.05px]",
},
header: { header: {
containerHeight: "h-[20.85px]", containerHeight: "h-[20.85px]",
gap: "gap-[4.21px]", gap: "gap-[4.21px]",
@@ -80,6 +87,8 @@ export default function Logo({ size = "default", showText = true }) {
? sizes.homeHeaderSm ? sizes.homeHeaderSm
: size === "homeHeaderMd" : size === "homeHeaderMd"
? sizes.homeHeaderMd ? sizes.homeHeaderMd
: size === "homeHeaderLg"
? sizes.homeHeaderLg
: size === "header" : size === "header"
? sizes.header ? sizes.header
: size === "headerMd" : size === "headerMd"
@@ -106,7 +115,8 @@ export default function Logo({ size = "default", showText = true }) {
className={`font-['Bricolage_Grotesque'] ${ className={`font-['Bricolage_Grotesque'] ${
size === "homeHeaderXsmall" || size === "homeHeaderXsmall" ||
size === "homeHeaderSm" || size === "homeHeaderSm" ||
size === "homeHeaderMd" size === "homeHeaderMd" ||
size === "homeHeaderLg"
? "text-[var(--color-content-inverse-primary)]" ? "text-[var(--color-content-inverse-primary)]"
: "text-[var(--color-content-default-primary)]" : "text-[var(--color-content-default-primary)]"
} ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`} } ${config.textSize} ${config.lineHeight} font-normal tracking-[0px]`}
@@ -124,7 +134,8 @@ export default function Logo({ size = "default", showText = true }) {
className={`flex-shrink-0 ${config.iconSize} ${ className={`flex-shrink-0 ${config.iconSize} ${
size === "homeHeaderXsmall" || size === "homeHeaderXsmall" ||
size === "homeHeaderSm" || size === "homeHeaderSm" ||
size === "homeHeaderMd" size === "homeHeaderMd" ||
size === "homeHeaderLg"
? "filter brightness-0" ? "filter brightness-0"
: "" : ""
}`} }`}
app/components/MenuBarItem.js
+2
View File
@@ -37,6 +37,8 @@ export default function MenuBarItem({
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
homeUseCases: homeUseCases:
"active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.5px] active:outline-[var(--color-content-default-primary)]",
largeUseCases:
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
large: large:
"active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]", "active:outline-[1.75px] active:outline-[var(--color-content-default-primary)]",
xlarge: xlarge: