WeatherTool/web/src/pages/home/Home.tsx

import { A } from '@solidjs/router'
import './home.css'

const tools = [
  ['/station','Monitor','Stations','Inspect recent measurements on a map and open detailed station charts.','◉'],
  ['/cities','Analyse & export','City analysis','Compare cities, aggregate values, and prepare temperature maps.','▦'],
  ['/faktiska','Daily production','Faktiskā','Build the actual-weather map with temperatures, weather symbols, title, and source.','▣'],
  ['/latvia','Summarise','Latvia overview','Review country-wide minimum, maximum, average, and total values.','⌁'],
  ['/database','Browse','Data archive','Find available dates and inspect individual hourly records.','▤'],
  ['/harmonie','Forecast model','HARMONIE','Render forecast fields from locally stored HARMONIE GRIB files.','◫'],
  ['/lvgmc-forecast','Forecast products','LVĢMC forecast','Open prepared LVĢMC city forecasts and broadcast tables.','☁'],
]
export function Home() { return <section class="homePage"><div class="homeHero"><div><p class="eyebrow">Weather data and production tools</p><h1>Choose a workspace</h1><p class="heroCopy">Explore station history, compare cities, inspect forecasts, or prepare weather graphics from one place.</p></div><div class="environmentBadge"><span class="statusDot"/>Development dataset<small>Synthetic station observations are active</small></div></div><div class="toolGrid">{tools.map(([path,eyebrow,title,description,icon]) => <A class="toolCard" href={path}><span class="toolIcon">{icon}</span><span class="eyebrow">{eyebrow}</span><h2>{title}</h2><p>{description}</p><span class="cardAction">Open workspace →</span></A>)}</div></section> }