diff --git a/components/home/HeroIllustration.tsx b/components/home/HeroIllustration.tsx index 38b5c07b..1b065bcb 100644 --- a/components/home/HeroIllustration.tsx +++ b/components/home/HeroIllustration.tsx @@ -125,9 +125,9 @@ export default function HeroIllustration() { }, []); const viewBox = isMobile ? '400 0 1000 1100' : '-400 -200 1800 1100'; - const scale = isMobile ? 1.44 : 1; - const opacity = isMobile ? 0.6 : 0.85; - const strokeMultiplier = isMobile ? 2.5 : 1; + // Increase scale slightly and opacity significantly on mobile to fix the "thin" appearance + const scale = isMobile ? 1.6 : 1; + const opacity = isMobile ? 0.9 : 0.85; return (
@@ -155,15 +155,15 @@ export default function HeroIllustration() { - - + + - - + + @@ -185,7 +185,7 @@ export default function HeroIllustration() { x2={end.x} y2={end.y} stroke="white" - strokeWidth={1 * strokeMultiplier} + strokeWidth="1" /> ); })} @@ -200,14 +200,14 @@ export default function HeroIllustration() { x2={end.x} y2={end.y} stroke="white" - strokeWidth={1 * strokeMultiplier} + strokeWidth="1" /> ); })} {/* POWER LINES */} - + {POWER_LINES.map((line, i) => { const from = gridToScreen(line.from.col, line.from.row); const to = gridToScreen(line.to.col, line.to.row); @@ -216,10 +216,10 @@ export default function HeroIllustration() { {/* ANIMATED ENERGY FLOW */} - + {POWER_LINES.map((line, i) => { - // Only animate a small subset of lines to reduce main-thread work significantly - if (i % 5 !== 0) return null; + // Only animate a subset of lines to reduce main-thread work + if (i % 2 !== 0) return null; const from = gridToScreen(line.from.col, line.from.row); const to = gridToScreen(line.to.col, line.to.row); const length = Math.sqrt(Math.pow(to.x - from.x, 2) + Math.pow(to.y - from.y, 2)); @@ -231,14 +231,18 @@ export default function HeroIllustration() { x2={to.x} y2={to.y} stroke="url(#energy-pulse)" - strokeWidth={3 * strokeMultiplier} + strokeWidth="3" strokeLinecap="round" - style={{ - strokeDasharray: `${length * 0.2} ${length * 0.8}`, - strokeDashoffset: length, - animation: `flow ${1.5 + (i % 3) * 0.5}s linear infinite`, - }} - /> + strokeDasharray={`${length * 0.2} ${length * 0.8}`} + > + + ); })} @@ -253,7 +257,7 @@ export default function HeroIllustration() { fill="white" fillOpacity="0.05" stroke="white" - strokeWidth={1 * strokeMultiplier} + strokeWidth="1" strokeOpacity="0.2" /> - + + + ); })} @@ -286,30 +291,32 @@ export default function HeroIllustration() { x2="0" y2="-60" stroke="white" - strokeWidth={2 * strokeMultiplier} + strokeWidth="2" strokeOpacity="0.3" /> - - {[0, 120, 240].map((angle, j) => ( - ( + + - ))} - + + ))} ); @@ -326,7 +333,7 @@ export default function HeroIllustration() { fill="white" fillOpacity="0.05" stroke="white" - strokeWidth={1 * strokeMultiplier} + strokeWidth="1" strokeOpacity="0.2" /> @@ -353,7 +360,7 @@ export default function HeroIllustration() { @@ -381,7 +388,7 @@ export default function HeroIllustration() { fill="white" fillOpacity="0.08" stroke="white" - strokeWidth={1 * strokeMultiplier} + strokeWidth="1" strokeOpacity="0.2" /> diff --git a/next-env.d.ts b/next-env.d.ts index 9edff1c7..c4b7818f 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/types/routes.d.ts"; +import "./.next/dev/types/routes.d.ts"; // NOTE: This file should not be edited // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.