perf: optimize Lighthouse scores to 100
Performance: - Lazy-load ShaderGradientBackground via dynamic import (reduces initial JS ~250KB) - Disable ShaderGradient animations (animate=off) to reduce CPU/GPU load - Remove opacity:0 animations from Hero LCP elements for instant paint - Add browserslist targeting modern browsers (eliminates ~13KB polyfills) Accessibility: - Fix color contrast: text-stone-400 → text-stone-600 dark:text-stone-400 on light backgrounds - Fix text-liquid-mint → text-emerald-700/600 for readable text/accent dots - Fix quote text contrast on dark status box (text-stone-700 → text-stone-300) - Fix Online badge contrast (emerald-600 → emerald-700) Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
@@ -58,16 +58,16 @@ const Hero = () => {
|
||||
|
||||
<h1 className="text-[2.75rem] sm:text-6xl md:text-8xl lg:text-[9.5rem] font-black tracking-tighter leading-[0.85] text-stone-900 dark:text-stone-50 uppercase">
|
||||
<motion.span
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
initial={{ x: -50 }}
|
||||
animate={{ x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.1 }}
|
||||
className="block"
|
||||
>
|
||||
{getLabel("hero.line1", "Building")}
|
||||
</motion.span>
|
||||
<motion.span
|
||||
initial={{ opacity: 0, x: -50 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
initial={{ x: -50 }}
|
||||
animate={{ x: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.2 }}
|
||||
className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-liquid-sky to-liquid-purple pb-2 sm:pb-4"
|
||||
>
|
||||
@@ -75,14 +75,9 @@ const Hero = () => {
|
||||
</motion.span>
|
||||
</h1>
|
||||
|
||||
<motion.p
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 1, delay: 0.4 }}
|
||||
className="text-base sm:text-lg md:text-xl lg:text-2xl text-stone-600 dark:text-stone-400 max-w-xl mx-auto lg:mx-0 font-light leading-relaxed tracking-tight"
|
||||
>
|
||||
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-stone-600 dark:text-stone-400 max-w-xl mx-auto lg:mx-0 font-light leading-relaxed tracking-tight">
|
||||
{t("description")}
|
||||
</motion.p>
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
|
||||
Reference in New Issue
Block a user