scriptoriumadmin/openpetswithchatandmcp
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

chore(website): place wordmark between emblem and nav in marketing header
Some checks are pending
Deploy FamiliarOS Website / deploy (push) Waiting to run
Details

Browse source
This commit is contained in:
OpenPets Dev 2026-06-20 05:39:06 +00:00
parent c0455c9746
commit c707b90923
1 changed files with 33 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
website/src/components/marketing/MarketingShell.tsx
View file

@ -70,11 +70,12 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
const logoClassName = 'drop-shadow-[0_0_14px_rgba(232,232,232,0.36)]'
const headerFrameClassName = 'h-[10rem] md:h-[10.5rem] lg:h-[11rem]'
const headerInnerClassName = `relative mx-auto grid w-full max-w-7xl grid-cols-[auto_1fr_auto] items-center gap-2.5 px-4 md:gap-3 md:px-5 lg:gap-4 lg:px-6 xl:gap-5 ${headerFrameClassName}`
const headerInnerClassName = `relative mx-auto flex w-full max-w-7xl items-center gap-2.5 px-4 md:gap-3 md:px-5 lg:gap-4 lg:px-6 xl:gap-5 ${headerFrameClassName}`
const emblemImageClassName = `block h-[3.8rem] w-[3.8rem] shrink-0 bg-transparent object-contain object-center sm:h-[4.2rem] sm:w-[4.2rem] md:h-[4.5rem] md:w-[4.5rem] lg:h-[4.9rem] lg:w-[4.9rem] ${logoClassName}`
const wordmarkImageClassName = `block h-[3.35rem] w-auto max-w-[14rem] shrink-0 bg-transparent object-contain sm:h-[3.8rem] md:h-[4.2rem] md:max-w-[14.5rem] lg:h-[4.65rem] lg:max-w-[15.8rem] ${logoClassName}`
const logoClusterClassName = 'flex items-center gap-2.5'
const emblemLinkClassName = 'relative z-10 flex min-w-0 items-center gap-0'
const wordmarkLinkClassName = 'absolute left-1/2 top-1/2 z-10 hidden -translate-x-1/2 -translate-y-1/2 items-center justify-center md:flex'
const wordmarkLinkClassName = 'relative hidden md:inline-flex items-center justify-center'
const activePath = useMemo(() => {
if (location.pathname === '/about') return '/about'
@ -122,30 +123,32 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
<header className={`sticky top-0 z-50 border-b backdrop-blur-2xl ${isDark ? 'border-white/10 bg-black/20' : 'border-[hsl(var(--border))] bg-[hsl(var(--background))]'}`}>
<div className={headerInnerClassName}>
<Link to="/" className={emblemLinkClassName} aria-label={`${brandConfig.brandName} home`}>
<img
src="/branding/familiaros_icon.png"
alt={`${brandConfig.brandName} emblem`}
className={emblemImageClassName}
loading="eager"
draggable={false}
/>
</Link>
<Link
to="/"
className={wordmarkLinkClassName}
aria-label={`${brandConfig.brandName} brand wordmark`}
>
<img
src="/branding/familiaros_logo.png"
alt={`${brandConfig.brandName} wordmark`}
className={wordmarkImageClassName}
loading="eager"
draggable={false}
/>
</Link>
<div className={logoClusterClassName}>
<Link to="/" className={emblemLinkClassName} aria-label={`${brandConfig.brandName} home`}>
<img
src="/branding/familiaros_icon.png"
alt={`${brandConfig.brandName} emblem`}
className={emblemImageClassName}
loading="eager"
draggable={false}
/>
</Link>
<Link
to="/"
className={wordmarkLinkClassName}
aria-label={`${brandConfig.brandName} brand wordmark`}
>
<img
src="/branding/familiaros_logo.png"
alt={`${brandConfig.brandName} wordmark`}
className={wordmarkImageClassName}
loading="eager"
draggable={false}
/>
</Link>
</div>
<nav className="hidden items-center justify-center lg:flex">
<nav className="hidden items-center justify-center flex-1 lg:flex">
<div className={`flex items-center gap-2 rounded-full border px-3 py-2 ${glassClassName}`}>
{navigationItems.map((entry) => {
if (entry.kind === 'dropdown') {
@ -158,11 +161,11 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
onBlur={(e) => {
if (!resourcesRef.current?.contains(e.relatedTarget as Node)) setResourcesOpen(false)
}}
className={`public-nav-link flex items-center gap-1 ${
isChildActive
? 'public-nav-link-active'
className={`public-nav-link flex items-center gap-1 ${
isChildActive
? 'public-nav-link-active'
: `${mutedClassName} hover:bg-[hsl(var(--card))] hover:text-current`
}`}
}`}
>
{entry.label}
<ChevronDown size={12} className={`transition-transform ${resourcesOpen ? 'rotate-180' : ''}`} />
@ -206,7 +209,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
</div>
</nav>
<div className="relative z-10 flex items-center gap-2 justify-self-end">
<div className="relative z-10 ml-auto flex items-center gap-2">
{isAuthenticated ? (
<>
<Link