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

@@ -305,7 +305,21 @@
</section>
<!-- Hinnat -->
<section class="section section-alt" id="hinnat">
<section class="section section-alt section-with-illustration" id="hinnat">
<!-- Price tag 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">
<rect x="50" y="100" width="100" height="70" rx="8" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" fill="rgba(240,112,96,0.02)"/>
<circle cx="75" cy="120" r="6" stroke="rgba(240,112,96,0.12)" stroke-width="1" fill="none"/>
<line x1="90" y1="120" x2="135" y2="120" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<line x1="65" y1="140" x2="135" y2="140" stroke="rgba(240,112,96,0.06)" stroke-width="0.8"/>
<line x1="65" y1="152" x2="120" y2="152" stroke="rgba(240,112,96,0.06)" stroke-width="0.8"/>
<rect x="60" y="210" width="80" height="55" rx="6" stroke="rgba(240,112,96,0.08)" stroke-width="1" fill="rgba(240,112,96,0.02)"/>
<text x="100" y="245" text-anchor="middle" font-size="18" font-weight="700" fill="rgba(240,112,96,0.10)">&euro;</text>
<circle cx="130" cy="310" r="4" fill="rgba(240,112,96,0.06)"/>
<circle cx="70" cy="300" r="6" fill="rgba(240,112,96,0.05)"/>
</svg>
</div>
<div class="container">
<h2 class="section-title">Hinnat</h2>
<p class="section-subtitle">Selkeä kuukausihinnoittelu ilman piilokustannuksia. Kaikki hinnat alv 0%.</p>
@@ -544,7 +558,19 @@
</section>
<!-- Miksi me -->
<section class="section section-dark" id="miksi">
<section class="section section-dark section-with-illustration" id="miksi">
<!-- Checkmark / trust 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">
<circle cx="100" cy="150" r="40" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" fill="rgba(240,112,96,0.02)"/>
<path d="M80 150l12 12 28-28" stroke="rgba(240,112,96,0.15)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="100" cy="150" r="55" stroke="rgba(240,112,96,0.05)" stroke-width="0.8" fill="none" stroke-dasharray="4 4"/>
<circle cx="60" cy="260" r="25" stroke="rgba(240,112,96,0.07)" stroke-width="1" fill="rgba(240,112,96,0.02)"/>
<path d="M50 260l6 6 14-14" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="140" cy="300" r="20" stroke="rgba(240,112,96,0.06)" stroke-width="1" fill="rgba(240,112,96,0.01)"/>
<path d="M132 300l5 5 11-11" stroke="rgba(240,112,96,0.08)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- Network topology decoration -->
<div class="section-decoration" aria-hidden="true">
<svg viewBox="0 0 800 400" fill="none">