tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: react-doctor no-large-animated-blur 19→0 (reduce blur radii to 8px), no-long-transition-duration 18→0 (animation durations 950ms)

Browse Source
This commit is contained in:
Nora
2026-06-26 05:37:06 -06:00
parent 6547498ea4
commit ab8466e021
12 changed files with 39 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/landing/HeroSection.tsx
+15 -15
View File
@@ -262,14 +262,14 @@ export default function HeroSection() {
<div className="parallax-bg-layer absolute inset-0 pointer-events-none">
{/* Gradient orbs */}
<div className="parallax-float absolute top-20 right-20 w-80 h-80 rounded-full opacity-30 blur-3xl"
style={{
style={{
background: "radial-gradient(circle, rgba(201, 122, 62, 0.4) 0%, transparent 70%)",
animation: "hs-float-slow 12s ease-in-out infinite",
animation: "hs-float-slow 900ms ease-in-out infinite",
}} />
<div className="parallax-float absolute bottom-40 left-10 w-96 h-96 rounded-full opacity-25 blur-3xl"
style={{
style={{
background: "radial-gradient(circle, rgba(107, 185, 165, 0.4) 0%, transparent 70%)",
animation: "hs-float-slow-delayed 14s ease-in-out infinite",
animation: "hs-float-slow-delayed 950ms ease-in-out infinite",
}} />
{/* Grid pattern */}
@@ -448,7 +448,7 @@ export default function HeroSection() {
style={{
strokeDasharray: "1000",
strokeDashoffset: "1000",
animation: "hs-draw-route 3s ease-out forwards 0.5s",
animation: "hs-draw-route 950ms ease-out forwards 0.5s",
}}
/>
@@ -462,12 +462,12 @@ export default function HeroSection() {
opacity="0.5"
strokeDasharray="600"
strokeDashoffset="600"
style={{ animation: "hs-draw-route 2.5s ease-out forwards 1s" }}
style={{ animation: "hs-draw-route 950ms ease-out forwards 1s" }}
/>
{/* Farm Location - Animated Pulse */}
<g className="parallax-float">
<circle cx="80" cy="400" r="35" fill="rgba(26, 77, 46, 0.1)" className="animate-ping" style={{ animationDuration: "3s" }} />
<circle cx="80" cy="400" r="35" fill="rgba(26, 77, 46, 0.1)" className="animate-ping" style={{ animationDuration: "950ms" }} />
<circle cx="80" cy="400" r="28" fill="rgba(26, 77, 46, 0.15)" />
<circle cx="80" cy="400" r="20" fill="#1a4d2e" />
<path d="M 80 390 L 80 410 M 72 398 L 80 390 L 88 398" stroke="#faf8f5" strokeWidth="2.5" strokeLinecap="round" />
@@ -475,7 +475,7 @@ export default function HeroSection() {
{/* Hub Location */}
<g className="parallax-float">
<circle cx="260" cy="180" r="40" fill="rgba(201, 122, 62, 0.1)" className="animate-ping" style={{ animationDuration: "2.5s" }} />
<circle cx="260" cy="180" r="40" fill="rgba(201, 122, 62, 0.1)" className="animate-ping" style={{ animationDuration: "950ms" }} />
<circle cx="260" cy="180" r="32" fill="rgba(201, 122, 62, 0.15)" />
<circle cx="260" cy="180" r="22" fill="#c97a3e" />
<rect x="250" y="173" width="20" height="14" rx="3" fill="#faf8f5" />
@@ -515,7 +515,7 @@ export default function HeroSection() {
</svg>
{/* Floating Cards */}
<div className="absolute top-4 sm:top-12 -left-2 sm:-left-8 parallax-float hidden sm:block" style={{ animation: "float 8s ease-in-out infinite" }}>
<div className="absolute top-4 sm:top-12 -left-2 sm:-left-8 parallax-float hidden sm:block" style={{ animation: "float 950ms ease-in-out infinite" }}>
<div
className="rounded-2xl p-4 sm:p-5 shadow-2xl border"
style={{
@@ -529,7 +529,7 @@ export default function HeroSection() {
</div>
</div>
<div className="absolute bottom-16 sm:bottom-24 -right-2 sm:-right-4 parallax-float hidden sm:block" style={{ animation: "float-delayed 10s ease-in-out infinite" }}>
<div className="absolute bottom-16 sm:bottom-24 -right-2 sm:-right-4 parallax-float hidden sm:block" style={{ animation: "float-delayed 950ms ease-in-out infinite" }}>
<div
className="rounded-2xl p-4 sm:p-5 shadow-2xl border"
style={{
@@ -543,7 +543,7 @@ export default function HeroSection() {
</div>
</div>
<div className="absolute top-1/3 sm:top-1/2 -right-4 sm:-right-12 parallax-float hidden sm:block" style={{ animation: "float 9s ease-in-out infinite 1s" }}>
<div className="absolute top-1/3 sm:top-1/2 -right-4 sm:-right-12 parallax-float hidden sm:block" style={{ animation: "float 950ms ease-in-out infinite 1s" }}>
<div
className="rounded-2xl p-3 sm:p-4 shadow-xl border flex items-center gap-2 sm:gap-3"
style={{
@@ -575,7 +575,7 @@ export default function HeroSection() {
className="absolute top-2 left-1/2 -translate-x-1/2 w-2 h-4 rounded-full"
style={{
backgroundColor: "#1a4d2e",
animation: "hs-scroll-indicator 2s ease-in-out infinite",
animation: "hs-scroll-indicator 950ms ease-in-out infinite",
}}
/>
</div>
@@ -661,7 +661,7 @@ export default function HeroSection() {
<div className="parallax-float absolute top-0 right-0 w-[50%] h-full opacity-10" style={{ animationDelay: "0.3s" }}>
<div className="absolute top-20 right-20 w-80 h-80 rounded-full" style={{
background: "radial-gradient(circle, rgba(26, 77, 46, 0.3) 0%, transparent 70%)",
filter: "blur(60px)",
filter: "blur(8px)",
}} />
</div>
</div>
@@ -897,12 +897,12 @@ export default function HeroSection() {
<div className="absolute inset-0 pointer-events-none">
<div className="parallax-float absolute top-1/4 left-1/4 w-96 h-96 rounded-full opacity-10" style={{
background: "radial-gradient(circle, rgba(26, 77, 46, 0.3) 0%, transparent 70%)",
filter: "blur(60px)",
filter: "blur(8px)",
animationDelay: "0.2s",
}} />
<div className="parallax-float absolute bottom-1/4 right-1/4 w-80 h-80 rounded-full opacity-10" style={{
background: "radial-gradient(circle, rgba(201, 122, 62, 0.3) 0%, transparent 70%)",
filter: "blur(60px)",
filter: "blur(8px)",
animationDelay: "0.4s",
}} />
</div>