mohs/sass-mohfarawati
1
0
Fork 0
Code Issues Pull Requests Actions 8 Packages Projects Releases Wiki Activity

Polish hero overlays and fix fixed header
CI / quality (push) Waiting to run
Details

Browse Source
This commit is contained in:
MOH
2026-03-08 00:34:57 +01:00
parent 0c2b67e378
commit 9edb162148
6 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layout/hero-atmosphere.tsx
+6 -6
View File
@@ -8,7 +8,7 @@ type HeroAtmosphereProps = {
export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
return (
<div className="pointer-events-none absolute inset-0 overflow-hidden">
<div className="pointer-events-none absolute inset-0 z-0 overflow-hidden">
<motion.div
animate={{
x: [0, 90, -48, 0],
@@ -20,7 +20,7 @@ export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
repeat: Number.POSITIVE_INFINITY,
ease: "easeInOut",
}}
className="absolute left-[-10%] top-[4%] h-[24rem] w-[24rem] rounded-full bg-brand-primary/22 blur-3xl sm:h-[34rem] sm:w-[34rem] lg:h-[42rem] lg:w-[42rem]"
className="absolute left-[-10%] top-[4%] h-[24rem] w-[24rem] rounded-full bg-brand-primary/18 blur-3xl sm:h-[34rem] sm:w-[34rem] lg:h-[42rem] lg:w-[42rem]"
/>
<motion.div
@@ -34,7 +34,7 @@ export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
repeat: Number.POSITIVE_INFINITY,
ease: "easeInOut",
}}
className="absolute right-[-14%] top-[2%] h-[22rem] w-[22rem] rounded-full bg-brand-secondary/18 blur-3xl sm:h-[30rem] sm:w-[30rem] lg:h-[38rem] lg:w-[38rem]"
className="absolute right-[-14%] top-[2%] h-[22rem] w-[22rem] rounded-full bg-brand-secondary/14 blur-3xl sm:h-[30rem] sm:w-[30rem] lg:h-[38rem] lg:w-[38rem]"
/>
<motion.div
@@ -48,10 +48,10 @@ export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
repeat: Number.POSITIVE_INFINITY,
ease: "easeInOut",
}}
className="absolute bottom-[-18%] left-[18%] h-[18rem] w-[18rem] rounded-full bg-brand-primary/14 blur-3xl sm:h-[24rem] sm:w-[24rem] lg:h-[30rem] lg:w-[30rem]"
className="absolute bottom-[-18%] left-[18%] h-[18rem] w-[18rem] rounded-full bg-brand-primary/10 blur-3xl sm:h-[24rem] sm:w-[24rem] lg:h-[30rem] lg:w-[30rem]"
/>
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.58),rgba(255,255,255,0.32)_32%,rgba(255,255,255,0.08)_68%,rgba(255,255,255,0.02)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.16),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.18),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(174,196,255,0.18),transparent_38%)] dark:bg-[linear-gradient(180deg,rgba(10,14,22,0.3),rgba(10,14,22,0.42)_34%,rgba(10,14,22,0.7)_100%),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.2),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.12),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(91,117,214,0.12),transparent_38%)]" />
<div className="absolute inset-0 bg-[linear-gradient(180deg,rgba(255,255,255,0.38),rgba(255,255,255,0.18)_30%,rgba(255,255,255,0.04)_68%,rgba(255,255,255,0)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.1),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.12),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(174,196,255,0.1),transparent_38%)] dark:bg-[linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01)_28%,rgba(255,255,255,0)_68%,rgba(255,255,255,0)),radial-gradient(circle_at_18%_24%,rgba(221,65,36,0.12),transparent_30%),radial-gradient(circle_at_78%_20%,rgba(235,143,117,0.08),transparent_34%),radial-gradient(circle_at_50%_100%,rgba(91,117,214,0.08),transparent_38%)]" />
<motion.div
animate={{
@@ -63,7 +63,7 @@ export function HeroAtmosphere({ compact = false }: HeroAtmosphereProps) {
repeat: Number.POSITIVE_INFINITY,
ease: "linear",
}}
className="hero-noise absolute inset-[-8%] opacity-55 mix-blend-soft-light dark:opacity-22"
className="hero-noise absolute inset-[-8%] opacity-32 mix-blend-soft-light dark:opacity-12"
/>
</div>
);