Expand konesali page content and add illustrations across all pages

- Konesali: add descriptive paragraphs to all 6 sections (sähkö, jäähdytys,
  tietoliikenne, turvallisuus, tilat, ympäristö) with detailed explanations
- Konesali: add decorative SVG illustrations to all sections
- Yhteydet: add illustrations to yhteyspaketit and operaattorit sections
- Index: add illustrations to hinnat and miksi sections
- CSS: add .spec-intro style for descriptive text blocks

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-09 19:42:21 +02:00
parent 6671d66ec7
commit cb02d521e5
4 changed files with 180 additions and 12 deletions

View File

@@ -55,7 +55,21 @@
</section>
<!-- Yhteyspaketit -->
<section class="section" id="yhteyspaketit">
<section class="section section-with-illustration" id="yhteyspaketit">
<!-- Fiber optic / speed illustration -->
<div class="illustration-right" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;" preserveAspectRatio="xMidYMid slice">
<path d="M40 80c40 20 80 60 120 80" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" fill="none"/>
<path d="M30 120c50 15 90 50 130 70" stroke="rgba(240,112,96,0.07)" stroke-width="1" fill="none"/>
<path d="M35 160c45 25 85 55 125 65" stroke="rgba(240,112,96,0.05)" stroke-width="1" fill="none"/>
<circle cx="160" cy="160" r="15" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="40" cy="80" r="6" fill="rgba(240,112,96,0.08)"/>
<circle cx="100" cy="220" r="20" stroke="rgba(240,112,96,0.08)" stroke-width="1" fill="none"/>
<path d="M90 220h20M100 210v20" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" stroke-linecap="round"/>
<path d="M50 280c30 10 60 30 100 40" stroke="rgba(240,112,96,0.06)" stroke-width="1" fill="none" stroke-dasharray="4 4"/>
<path d="M60 310c25 15 55 25 90 30" stroke="rgba(240,112,96,0.05)" stroke-width="1" fill="none" stroke-dasharray="4 4"/>
</svg>
</div>
<div class="container">
<h2 class="section-title">Yhteyspaketit</h2>
<p class="section-subtitle">Rajoittamaton liikenne ja IPv4 + IPv6 kaikissa paketeissa. Hinnat alv 0%.</p>
@@ -365,7 +379,20 @@
</section>
<!-- Operaattorit & peering -->
<section class="section" id="operaattorit">
<section class="section section-with-illustration" id="operaattorit">
<!-- Globe / network illustration -->
<div class="illustration-left" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%;" preserveAspectRatio="xMidYMid slice">
<circle cx="100" cy="180" r="60" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.02)"/>
<ellipse cx="100" cy="180" rx="30" ry="60" stroke="rgba(240,112,96,0.07)" stroke-width="0.8" fill="none"/>
<line x1="40" y1="160" x2="160" y2="160" stroke="rgba(240,112,96,0.06)" stroke-width="0.8"/>
<line x1="40" y1="200" x2="160" y2="200" stroke="rgba(240,112,96,0.06)" stroke-width="0.8"/>
<circle cx="60" cy="100" r="8" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="none"/>
<circle cx="150" cy="280" r="10" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="none"/>
<line x1="65" y1="106" x2="85" y2="135" stroke="rgba(240,112,96,0.06)" stroke-width="0.8"/>
<line x1="145" y1="272" x2="125" y2="235" stroke="rgba(240,112,96,0.06)" stroke-width="0.8"/>
</svg>
</div>
<div class="container">
<h2 class="section-title">Operaattorit &amp; peering</h2>
<p class="section-subtitle">Carrier-neutral konesali &mdash; valitse itsellesi paras operaattori</p>