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

feat: use emblem icon with wordmark image 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 04:13:41 +00:00
parent 7eacd4dc9c
commit 797c793c36
1 changed files with 12 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -71,8 +71,8 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
const logoClassName = isDark ? 'drop-shadow-[0_0_24px_rgba(29,55,87,0.25)]' : 'drop-shadow-[0_0_14px_rgba(209,200,191,0.18)]'
const headerFrameClassName = 'h-[9.5rem] md:h-[10rem] lg:h-[10.75rem]'
const headerInnerClassName = `mx-auto flex w-full max-w-7xl items-center justify-between gap-2.5 px-4 md:gap-3 md:px-5 lg:gap-4 lg:px-6 xl:gap-5 ${headerFrameClassName}`
const logoImageClassName = `block h-[4.2rem] w-auto max-w-[10.9rem] shrink-0 object-contain md:h-[4.75rem] md:max-w-[12.2rem] lg:h-[5.25rem] lg:max-w-[13.8rem] ${logoClassName}`
const logoTextClassName = 'hidden min-w-0 flex-col lg:flex'
const emblemImageClassName = `block h-[2.95rem] w-[2.95rem] shrink-0 bg-transparent object-contain sm:h-[3.25rem] sm:w-[3.25rem] md:h-[3.7rem] md:w-[3.7rem] lg:h-[4.05rem] lg:w-[4.05rem] ${logoClassName}`
const wordmarkImageClassName = `block h-[2.85rem] w-auto max-w-[12.2rem] shrink-0 bg-transparent object-contain sm:h-[3.15rem] md:h-[3.55rem] md:max-w-[13rem] lg:h-[3.9rem] lg:max-w-[14.8rem] ${logoClassName}`
const homeLogoLinkClassName = 'flex min-w-0 items-center gap-3 lg:gap-3.5'
const activePath = useMemo(() => {
@ -86,29 +86,6 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
return '/'
}, [location.pathname])
const brandWordmark = (
<div className={logoTextClassName}>
<div className="inline-flex w-fit max-w-full flex-col items-start">
<span
className="truncate text-[1.56rem] font-semibold leading-none tracking-tight xl:text-[1.74rem] 2xl:text-[1.9rem]"
style={{ fontFamily: 'var(--font-display)' }}
>
{brandConfig.brandName}
</span>
<span
className="mt-2 h-[2px] min-w-[6.5rem] w-[66%] max-w-[8.1rem] rounded-full"
style={{
background: 'linear-gradient(90deg, hsl(var(--brand-line) / 0.42), hsl(var(--accent)), hsl(var(--brand-line) / 0.42))',
boxShadow: '0 0 12px hsl(var(--brand-line) / 0.45)',
}}
/>
</div>
<span className={`mt-1.5 text-[8.5px] uppercase leading-[1.28] tracking-[0.16em] xl:text-[9.5px] xl:tracking-[0.19em] ${mutedClassName}`}>
Local-first AI companion platform
</span>
</div>
)
return (
<div className={`relative isolate min-h-screen overflow-hidden ${shellClassName}`} data-color-mode={isDark ? 'dark' : 'light'}>
<div className={`fixed inset-0 z-0 pointer-events-none ${isHomePage ? 'bg-black/90' : 'bg-black/40'}`}>
@ -146,13 +123,19 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
<div className={headerInnerClassName}>
<Link to="/" className={homeLogoLinkClassName} aria-label={`${brandConfig.brandName} home`}>
<img
src="/branding/familiaros_logo.png"
alt={`${brandConfig.brandName} logo`}
className={logoImageClassName}
src="/branding/familiaros_icon.png"
alt={`${brandConfig.brandName} emblem`}
className={emblemImageClassName}
loading="eager"
draggable={false}
/>
<img
src="/branding/familiaros_logo.png"
alt={`${brandConfig.brandName} wordmark`}
className={wordmarkImageClassName}
loading="eager"
draggable={false}
/>
{brandWordmark}
</Link>
<nav className="hidden items-center flex-1 justify-center lg:flex">