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.