diff --git a/components/home/Hero.tsx b/components/home/Hero.tsx index 15d55247..16396524 100644 --- a/components/home/Hero.tsx +++ b/components/home/Hero.tsx @@ -19,7 +19,7 @@ export default function Hero() { variants={containerVariants} > - + {t.rich('title', { green: (chunks) => ( @@ -31,7 +31,7 @@ export default function Hero() { @@ -65,7 +65,7 @@ export default function Hero() { { + const pos = gridToScreen(sub.col, sub.row); + const isCollection = sub.type === 'collection'; + return ( + + {/* Base platform */} + + {/* Building */} + + {/* Equipment */} + + + {/* Insulators */} + + + + + {/* Connection glow */} + + + + + + ); + })} + + {/* === TRANSMISSION TOWERS === */} + {INFRASTRUCTURE.towers.map((tower, i) => { + const pos = gridToScreen(tower.col, tower.row); + return ( + + {/* Base */} + + {/* Tower legs */} + + {/* Cross braces */} + + {/* Cross arms */} + + + {/* Insulators */} + + + {/* Connection glow */} + + + + + ); + })} + + {/* === CITY BUILDINGS === */} + {INFRASTRUCTURE.city.map((building, i) => { + const pos = gridToScreen(building.col, building.row); + const heights = { tall: 70, medium: 45, small: 30 }; + const height = heights[building.type as keyof typeof heights]; + return ( + + {/* Base */} + + {/* Building front */} + + {/* Building side */} + + {/* Windows */} + {[...Array(Math.floor(height / 15))].map((_, w) => ( + + + + + + + ))} + {/* Connection glow */} + + + + + ); + })} + + {/* === CITY 2 BUILDINGS (bottom-left) === */} + {INFRASTRUCTURE.city2.map((building, i) => { + const pos = gridToScreen(building.col, building.row); + const heights = { tall: 70, medium: 45, small: 30 }; + const height = heights[building.type as keyof typeof heights]; + return ( + + {/* Base */} + + {/* Building front */} + + {/* Building side */} + + {/* Windows */} + {[...Array(Math.floor(height / 15))].map((_, w) => ( + + + + + + + ))} + {/* Connection glow */} + + + + + ); + })} + + {/* === TREES === */} + {INFRASTRUCTURE.trees.map((tree, i) => { + const pos = gridToScreen(tree.col, tree.row); + return ( + + {/* Trunk */} + + {/* Foliage - layered circles for tree crown */} + + + + + + ); + })} + + {/* === ABSTRACT WIND EFFECTS === */} + {INFRASTRUCTURE.wind.map((turbine, i) => { + const pos = gridToScreen(turbine.col, turbine.row); + return ( + + {/* Wind swoosh lines - curved paths flowing toward turbine */} + {[0, 1, 2].map((j) => ( + + + + + ))} + {/* Additional wind particles */} + {[0, 1, 2, 3].map((j) => ( + + + + + + ))} + + ); + })} + + {/* === SCHEMATIC SUN RAYS === */} + {/* Simple downward rays above each solar panel */} + {INFRASTRUCTURE.solar.map((panel, i) => { + const pos = gridToScreen(panel.col, panel.row); + return ( + + {/* Three short schematic rays coming down to panel */} + {[-8, 0, 8].map((offset, j) => ( + + + + + ))} + + ); + })} + + {/* === ENERGY PARTICLES === */} + {POWER_LINES.map((line, i) => { + const from = gridToScreen(line.from.col, line.from.row); + const to = gridToScreen(line.to.col, line.to.row); + return ( + + + + + + ); + })} + + + + + {/* Desktop SVG - Original */} + + + {/* Electric energy flow gradient */} + + + + + + + + + {/* Wind flow gradient */} + + + + + + + + + {/* Sun ray gradient */} + + + + + + + {/* Glow filter */} + + + + + + + + + + {/* Soft glow for nodes */} + + + + + + + + + {/* Sun glow filter */} + + + + + + + + + + {/* Main scene container - positioned to the right */} + + + {/* === ISOMETRIC GRID === */} + + {/* Horizontal grid lines (going from top-left to bottom-right) */} + {[...Array(GRID.rows + 1)].map((_, row) => { + const start = gridToScreen(0, row); + const end = gridToScreen(GRID.cols, row); + return ( + + ); + })} + {/* Vertical grid lines (going from top-right to bottom-left) */} + {[...Array(GRID.cols + 1)].map((_, col) => { + const start = gridToScreen(col, 0); + const end = gridToScreen(col, GRID.rows); + return ( + + ); + })} + + + {/* Grid intersection nodes */} + + {[...Array(GRID.cols + 1)].map((_, col) => + [...Array(GRID.rows + 1)].map((_, row) => { + const pos = gridToScreen(col, row); + return ( + + ); + }) + )} + + + {/* === POWER LINES (Base cables) === */} + + {POWER_LINES.map((line, i) => { + const from = gridToScreen(line.from.col, line.from.row); + const to = gridToScreen(line.to.col, line.to.row); + return ( + + ); + })} + + + {/* === ANIMATED ENERGY FLOW === */} + + {POWER_LINES.map((line, i) => { + 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) + ); + return ( + + + + ); + })} + + + {/* === SOLAR PANELS === */} + {INFRASTRUCTURE.solar.map((panel, i) => { + const pos = gridToScreen(panel.col, panel.row); + return ( + + {/* Panel base */} + + {/* Panel surface (tilted) */} + + {/* Panel grid lines */} + + + {/* Connection glow */} + + + + + ); + })} + + {/* === WIND TURBINES === */} + {INFRASTRUCTURE.wind.map((turbine, i) => { + const pos = gridToScreen(turbine.col, turbine.row); + return ( + + {/* Base */} + + {/* Tower */} + + {/* Nacelle */} + + {/* Blades */} + + {[0, 120, 240].map((angle, j) => ( + + + + ))} + + + {/* Connection glow */} + + + + + ); + })} + {/* === SUBSTATIONS === */} {INFRASTRUCTURE.substations.map((sub, i) => { const pos = gridToScreen(sub.col, sub.row);