fix: make familiaros marketing shell theme transparent in light and dark
Some checks are pending
Deploy FamiliarOS Website / deploy (push) Waiting to run
Some checks are pending
Deploy FamiliarOS Website / deploy (push) Waiting to run
This commit is contained in:
OpenPets Dev
parent
17179cc4f2
commit
db1e506128
1 changed files with 46 additions and 18 deletions
|
|
@ -60,13 +60,44 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
|
|||
const isDark = colorMode === 'dark'
|
||||
const isHomePage = location.pathname === '/'
|
||||
|
||||
const shellClassName = `${isHomePage ? 'bg-transparent' : 'bg-[hsl(var(--background))]'} text-[hsl(var(--foreground))]`
|
||||
const shellClassName = `bg-transparent text-[hsl(var(--foreground))]`
|
||||
const shellBackdropClassName = isHomePage
|
||||
? isDark
|
||||
? 'bg-black/90'
|
||||
: 'bg-white/80'
|
||||
: isDark
|
||||
? 'bg-black/40'
|
||||
: 'bg-white/58'
|
||||
const shaderOverlayClassName = isHomePage
|
||||
? 'opacity-[0.94]'
|
||||
: isDark
|
||||
? 'opacity-55'
|
||||
: 'opacity-35'
|
||||
const shellShaderStyle = isHomePage && isDark
|
||||
? { filter: 'saturate(1.28) contrast(1.08) brightness(1.06)' }
|
||||
: undefined
|
||||
const homeGlowGradients = isDark
|
||||
? [
|
||||
'radial-gradient(circle_at_50%_8%, hsl(var(--brand-line)/0.14), transparent_22%), radial-gradient(circle_at_82%_18%, hsl(var(--brand-line)/0.16), transparent_24%)',
|
||||
'linear-gradient(180deg,rgba(9,10,13,0.04)_0%,rgba(9,10,13,0.3)_42%,rgba(9,10,13,0.72)_100%)',
|
||||
]
|
||||
: [
|
||||
'radial-gradient(circle_at_50%_8%, rgba(166,146,110,0.16), transparent_22%), radial-gradient(circle_at_82%_18%, rgba(120,131,144,0.16), transparent_24%)',
|
||||
'linear-gradient(180deg,rgba(247,245,240,0.2)_0%,rgba(247,245,240,0.44)_42%,rgba(247,245,240,0.84)_100%)',
|
||||
]
|
||||
const secondaryGlowClassName = isDark
|
||||
? 'bg-[radial-gradient(circle, hsl(var(--brand-line)/0.20), transparent_62%)]'
|
||||
: 'bg-[radial-gradient(circle, rgba(166,146,110,0.24), transparent_62%)]'
|
||||
const secondaryGlowAltClassName = isDark
|
||||
? 'bg-[radial-gradient(circle, hsl(var(--primary)/0.16), transparent_62%)]'
|
||||
: 'bg-[radial-gradient(circle, rgba(120,131,144,0.18), transparent_62%)]'
|
||||
|
||||
const mutedClassName = 'text-[hsl(var(--muted-foreground))]'
|
||||
const borderClassName = isDark ? 'border-white/15' : 'border-[hsl(var(--border))]'
|
||||
const navHoverClassName = isDark ? 'hover:bg-white/10' : 'hover:bg-black/8'
|
||||
const glassClassName = isDark
|
||||
? `bg-white/5 ${borderClassName} backdrop-blur-2xl`
|
||||
: `bg-white/70 ${borderClassName} backdrop-blur-2xl`
|
||||
: `bg-black/5 ${borderClassName} backdrop-blur-2xl`
|
||||
|
||||
const logoClassName = 'drop-shadow-[0_0_14px_rgba(232,232,232,0.36)]'
|
||||
const headerFrameClassName = 'h-[10rem] md:h-[10.5rem] lg:h-[11rem]'
|
||||
|
|
@ -90,10 +121,10 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
|
|||
|
||||
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'}`}>
|
||||
<div className={`fixed inset-0 z-0 pointer-events-none ${shellBackdropClassName}`}>
|
||||
<div
|
||||
className={`absolute inset-0 ${isHomePage ? 'opacity-[0.94]' : 'opacity-55'}`}
|
||||
style={isHomePage ? { filter: 'saturate(1.28) contrast(1.08) brightness(1.06)' } : undefined}
|
||||
className={`absolute inset-0 ${shaderOverlayClassName}`}
|
||||
style={shellShaderStyle}
|
||||
>
|
||||
<ShaderAnimation />
|
||||
</div>
|
||||
|
|
@ -102,26 +133,23 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
|
|||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
background:
|
||||
'radial-gradient(circle_at_50%_8%, hsl(var(--brand-line)/0.14), transparent_22%), radial-gradient(circle_at_82%_18%, hsl(var(--brand-line)/0.16), transparent_24%)',
|
||||
background: homeGlowGradients[0],
|
||||
}}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(9,10,13,0.04)_0%,rgba(9,10,13,0.3)_42%,rgba(9,10,13,0.72)_100%)]" />
|
||||
<div className="absolute inset-0" style={{ background: homeGlowGradients[1] }} />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="pointer-events-none absolute inset-0 z-0">
|
||||
<div
|
||||
className="absolute -top-40 -right-32 h-[28rem] w-[28rem] rounded-full"
|
||||
style={{ background: 'radial-gradient(circle, hsl(var(--brand-line)/0.20), transparent_62%)' }}
|
||||
className={`absolute -top-40 -right-32 h-[28rem] w-[28rem] rounded-full ${secondaryGlowClassName}`}
|
||||
/>
|
||||
<div
|
||||
className="absolute top-[35%] -left-44 h-[32rem] w-[32rem] rounded-full"
|
||||
style={{ background: 'radial-gradient(circle, hsl(var(--primary)/0.16), transparent_62%)' }}
|
||||
className={`absolute top-[35%] -left-44 h-[32rem] w-[32rem] rounded-full ${secondaryGlowAltClassName}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<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))]'}`}>
|
||||
<header className={`sticky top-0 z-50 border-b backdrop-blur-2xl ${isDark ? 'border-white/10 bg-black/20' : 'border-[hsl(var(--border))] bg-white/45 backdrop-saturate-150'}`}>
|
||||
<div className={headerInnerClassName}>
|
||||
<div className={logoClusterClassName}>
|
||||
<Link to="/" className={emblemLinkClassName} aria-label={`${brandConfig.brandName} home`}>
|
||||
|
|
@ -180,7 +208,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
|
|||
className={`block rounded-xl px-3 py-2 text-sm transition-colors ${
|
||||
activePath === child.to
|
||||
? 'bg-[hsl(var(--brand-line))] text-[hsl(var(--foreground))]'
|
||||
: `${mutedClassName} hover:bg-white/10 hover:text-current`
|
||||
: `${mutedClassName} ${navHoverClassName} hover:text-current`
|
||||
}`}
|
||||
>
|
||||
{child.label}
|
||||
|
|
@ -199,7 +227,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
|
|||
className={`public-nav-link ${
|
||||
isActive
|
||||
? 'public-nav-link-active'
|
||||
: `${mutedClassName} hover:bg-white/10 hover:text-current`
|
||||
: `${mutedClassName} ${navHoverClassName} hover:text-current`
|
||||
}`}
|
||||
>
|
||||
{entry.label}
|
||||
|
|
@ -269,7 +297,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
|
|||
</header>
|
||||
|
||||
{mobileOpen && (
|
||||
<div className={`sticky top-0 z-40 border-b ${borderClassName} bg-[hsl(var(--background))] lg:hidden`}>
|
||||
<div className={`sticky top-0 z-40 border-b ${borderClassName} ${isDark ? 'bg-black/60' : 'bg-white/85'} lg:hidden`}>
|
||||
<nav className="mx-auto max-w-7xl px-5 pb-4 pt-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
{navigationItems.flatMap((entry) => {
|
||||
|
|
@ -284,7 +312,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
|
|||
className={`rounded-xl px-4 py-2.5 text-sm transition-colors pl-6 ${
|
||||
activePath === child.to
|
||||
? 'bg-[hsl(var(--brand-line))] text-[hsl(var(--foreground))]'
|
||||
: `${mutedClassName} hover:bg-white/10`
|
||||
: `${mutedClassName} ${navHoverClassName}`
|
||||
}`}
|
||||
>
|
||||
{child.label}
|
||||
|
|
@ -301,7 +329,7 @@ export function MarketingShell({ children, showFooter = true }: MarketingShellPr
|
|||
className={`rounded-xl px-4 py-2.5 text-sm transition-colors ${
|
||||
isActive
|
||||
? 'bg-[hsl(var(--brand-line))] text-[hsl(var(--foreground))]'
|
||||
: `${mutedClassName} hover:bg-white/10`
|
||||
: `${mutedClassName} ${navHoverClassName}`
|
||||
}`}
|
||||
>
|
||||
{entry.label}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue