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">

View File

@@ -50,7 +50,7 @@
<section class="page-hero">
<div class="container">
<h1>Konesalin tekniset tiedot</h1>
<p>Ammattimaisesti suunniteltu ja ylläpidetty laitetila Turussa</p>
<p>Ammattitason laitetila Turussa &mdash; suunniteltu jatkuvaan, katkeamattomaan toimintaan. Redundantit järjestelmät, tehokas jäähdytys ja monikerroksiset turvallisuusratkaisut varmistavat, että laitteesi toimivat luotettavasti ympäri vuorokauden.</p>
</div>
</section>
@@ -79,7 +79,17 @@
</section>
<!-- Sähkö -->
<section class="section section-dark" id="sahko">
<section class="section section-dark section-with-illustration" id="sahko">
<!-- Lightning bolt / power 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="M120 40L60 200h50L80 360l100-200h-60l40-120z" stroke="rgba(240,112,96,0.08)" stroke-width="1.5" fill="rgba(240,112,96,0.03)"/>
<path d="M100 80L55 220h40L70 340l80-160h-50l30-100z" stroke="rgba(240,112,96,0.06)" stroke-width="1" fill="none"/>
<circle cx="90" cy="120" r="3" fill="rgba(240,112,96,0.12)"/>
<circle cx="110" cy="200" r="2" fill="rgba(240,112,96,0.10)"/>
<circle cx="80" cy="280" r="4" fill="rgba(240,112,96,0.08)"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -93,6 +103,7 @@
<p>Kahdennettu sähkönsyöttö varmistaa katkeamattoman toiminnan</p>
</div>
</div>
<p class="spec-intro">Konesalimme sähköinfra on rakennettu täysin kahdennetulla A/B-syötöllä kahdelta erilliseltä muuntajalta. Sähkökatkon sattuessa online double-conversion UPS-järjestelmä pitää laitteet käynnissä välittömästi, ja dieselgeneraattori käynnistyy automaattisesti sekuntien sisällä. Jokaisen kaapin tehonkulutusta seurataan reaaliajassa monitoroiduilla PDU-yksiköillä, ja asiakkaat voivat seurata omaa kulutustaan hallintapaneelista.</p>
<div class="spec-table">
<table>
<tbody>
@@ -132,7 +143,29 @@
</section>
<!-- Jäähdytys -->
<section class="section" id="jaahdytys">
<section class="section section-with-illustration" id="jaahdytys">
<!-- Snowflake / cooling 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">
<g stroke="rgba(100,160,220,0.10)" stroke-width="1">
<line x1="100" y1="60" x2="100" y2="340"/>
<line x1="40" y1="130" x2="160" y2="270"/>
<line x1="40" y1="270" x2="160" y2="130"/>
<line x1="100" y1="60" x2="85" y2="80"/>
<line x1="100" y1="60" x2="115" y2="80"/>
<line x1="100" y1="340" x2="85" y2="320"/>
<line x1="100" y1="340" x2="115" y2="320"/>
<line x1="40" y1="130" x2="60" y2="125"/>
<line x1="40" y1="130" x2="50" y2="145"/>
<line x1="160" y1="270" x2="140" y2="275"/>
<line x1="160" y1="270" x2="150" y2="255"/>
</g>
<circle cx="100" cy="200" r="20" stroke="rgba(100,160,220,0.12)" stroke-width="1" fill="rgba(100,160,220,0.03)"/>
<circle cx="60" cy="100" r="6" fill="rgba(100,160,220,0.06)"/>
<circle cx="140" cy="300" r="8" fill="rgba(100,160,220,0.06)"/>
<circle cx="50" cy="240" r="4" fill="rgba(100,160,220,0.08)"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -146,6 +179,7 @@
<p>Tehokas ja energiaoptimoitu jäähdytysjärjestelmä</p>
</div>
</div>
<p class="spec-intro">Konesali käyttää Cold Aisle Containment -rakennetta, jossa kylmä ilma ohjataan suljetun käytävän kautta suoraan laitteiden etuosaan. Tämä estää kylmän ja lämpimän ilman sekoittumisen ja parantaa jäähdytyksen tehokkuutta merkittävästi. Suomen viileä ilmasto on merkittävä etu &mdash; suurimman osan vuodesta voimme hyödyntää ulkoilmaa jäähdytykseen (free cooling), mikä vähentää energiankulutusta ja laskee asiakkaidemme hiilijalanjälkeä.</p>
<div class="spec-table">
<table>
<tbody>
@@ -181,7 +215,22 @@
</section>
<!-- Tietoliikenne -->
<section class="section section-dark" id="tietoliikenne">
<section class="section section-dark section-with-illustration" id="tietoliikenne">
<!-- Network nodes 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="80" cy="120" r="10" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="140" cy="180" r="8" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="60" cy="250" r="12" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="130" cy="310" r="7" stroke="rgba(240,112,96,0.10)" stroke-width="1" fill="rgba(240,112,96,0.03)"/>
<circle cx="100" cy="80" r="5" stroke="rgba(240,112,96,0.08)" stroke-width="1" fill="none"/>
<line x1="80" y1="120" x2="140" y2="180" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<line x1="140" y1="180" x2="60" y2="250" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<line x1="60" y1="250" x2="130" y2="310" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<line x1="80" y1="120" x2="60" y2="250" stroke="rgba(240,112,96,0.06)" stroke-width="1" stroke-dasharray="4 4"/>
<line x1="140" y1="180" x2="130" y2="310" stroke="rgba(240,112,96,0.06)" stroke-width="1" stroke-dasharray="4 4"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -195,6 +244,7 @@
<p>Moniliittymäinen verkko usealta operaattorilta</p>
</div>
</div>
<p class="spec-intro">Konesalimme on carrier-neutral &mdash; et ole sidottu yhteen operaattoriin. Tarjoamme yhteydet useilta eri operaattoreilta, ja voit valita tai kilpailuttaa parhaan vaihtoehdon tarpeisiisi. Oletusnopeus on 1 Gbit/s, mutta yhteys on päivitettävissä aina 100 Gbit/s asti. BGP-reititys ja oma AS-numero mahdollistavat monimutkaisten verkkoympäristöjen rakentamisen. Cross-connect-yhteyksillä voit yhdistää laitteesi suoraan muihin operaattoreihin tai asiakkaisiin samassa tilassa.</p>
<div class="spec-table">
<table>
<tbody>
@@ -238,7 +288,18 @@
</section>
<!-- Turvallisuus -->
<section class="section" id="turvallisuus">
<section class="section section-with-illustration" id="turvallisuus">
<!-- Shield / lock 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="M100 80L50 110v60c0 55 20 100 50 120 30-20 50-65 50-120v-60L100 80z" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" fill="rgba(240,112,96,0.02)"/>
<path d="M100 120L70 138v35c0 32 12 58 30 70 18-12 30-38 30-70v-35L100 120z" stroke="rgba(240,112,96,0.07)" stroke-width="1" fill="none"/>
<path d="M88 185l8 8 20-20" stroke="rgba(240,112,96,0.12)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<circle cx="60" cy="280" r="12" stroke="rgba(240,112,96,0.06)" stroke-width="1" fill="none"/>
<rect x="54" y="274" width="12" height="10" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
<path d="M57 274v-4a3 3 0 016 0v4" stroke="rgba(240,112,96,0.08)" stroke-width="1"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -252,6 +313,7 @@
<p>Monikerroksiset turvallisuusjärjestelmät suojaavat laitteita</p>
</div>
</div>
<p class="spec-intro">Laitteesi ovat turvassa usean kerroksen suojauksen takana. Konesaliin pääsy edellyttää sähköistä kulunvalvontaa avainkortilla ja henkilökohtaisella PIN-koodilla. Jokainen käynti kirjataan ja aikaleimataan. Kameravalvonta kattaa kaikki sisä- ja ulkotilat ympäri vuorokauden. Palontorjunnassa käytämme automaattista palonilmaisinjärjestelmää yhdistettynä inerttikaasu-sammutusjärjestelmään, joka sammuttaa tulipalon vahingoittamatta elektroniikkaa. Kaapit ovat aina lukittuja ja asiakaskohtaisilla avaimilla varustettuja.</p>
<div class="spec-table">
<table>
<tbody>
@@ -287,7 +349,23 @@
</section>
<!-- Tilat -->
<section class="section section-dark" id="tilat">
<section class="section section-dark section-with-illustration" id="tilat">
<!-- Server cabinet 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="55" y="80" width="90" height="240" rx="4" stroke="rgba(240,112,96,0.10)" stroke-width="1.5" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="95" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="120" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="145" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="170" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.08)" stroke-width="0.8" fill="rgba(240,112,96,0.02)"/>
<rect x="65" y="195" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.06)" stroke-width="0.8" fill="none"/>
<rect x="65" y="220" width="70" height="18" rx="2" stroke="rgba(240,112,96,0.06)" stroke-width="0.8" fill="none"/>
<circle cx="72" cy="104" r="2" fill="rgba(240,112,96,0.15)"/>
<circle cx="72" cy="129" r="2" fill="rgba(240,112,96,0.15)"/>
<circle cx="72" cy="154" r="2" fill="rgba(240,112,96,0.12)"/>
<circle cx="72" cy="179" r="2" fill="rgba(240,112,96,0.10)"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -301,6 +379,7 @@
<p>Ammattitason laitetila suunniteltu vaativaan käyttöön</p>
</div>
</div>
<p class="spec-intro">Konesalitilat on suunniteltu vaativaan palvelinympäristöön. Käytössä ovat standardikokoiset 42U-kaapit (600mm x 1000mm), jotka sopivat käytännössä kaikille palvelimille ja verkkolaitteille. Korotettu lattia mahdollistaa siistin kaapeloinnin ja tehokkaan ilmavirtauksen. Hot Aisle / Cold Aisle -erottelu varmistaa, ettei lämmin poistoilma sekoitu kylmään tuloilmaan. Asiakkailla on 24/7 pääsy omille laitteilleen etukäteisilmoituksella &mdash; tarvittaessa Remote Hands -palvelumme hoitaa fyysisen työn puolestasi.</p>
<div class="spec-table">
<table>
<tbody>
@@ -336,7 +415,26 @@
</section>
<!-- Ympäristö -->
<section class="section section-green" id="ymparisto">
<section class="section section-green section-with-illustration" id="ymparisto">
<!-- Sun / leaf 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="110" cy="130" r="30" stroke="rgba(76,175,80,0.12)" stroke-width="1.5" fill="rgba(76,175,80,0.03)"/>
<g stroke="rgba(76,175,80,0.10)" stroke-width="1" stroke-linecap="round">
<line x1="110" y1="85" x2="110" y2="70"/>
<line x1="110" y1="175" x2="110" y2="190"/>
<line x1="65" y1="130" x2="50" y2="130"/>
<line x1="155" y1="130" x2="170" y2="130"/>
<line x1="78" y1="98" x2="68" y2="88"/>
<line x1="142" y1="162" x2="152" y2="172"/>
<line x1="78" y1="162" x2="68" y2="172"/>
<line x1="142" y1="98" x2="152" y2="88"/>
</g>
<path d="M80 260c0-30 25-50 50-40 5-20 30-25 40-10 15 0 25 12 20 25" stroke="rgba(76,175,80,0.10)" stroke-width="1" fill="none"/>
<path d="M100 300l-15-30c10-5 25-3 30 8 8-8 22-5 25 6" stroke="rgba(76,175,80,0.08)" stroke-width="1" fill="rgba(76,175,80,0.03)"/>
<line x1="100" y1="270" x2="100" y2="340" stroke="rgba(76,175,80,0.08)" stroke-width="1"/>
</svg>
</div>
<div class="container">
<div class="spec-section">
<div class="spec-section-header">
@@ -347,9 +445,10 @@
</div>
<div>
<h2>Ympäristö ja kestävyys</h2>
<p>100% uusiutuvaa energiaa tuuli- ja aurinkovoima</p>
<p>100% uusiutuvaa energiaa &mdash; tuuli- ja aurinkovoima</p>
</div>
</div>
<p class="spec-intro">Vastuullisuus on meille tärkeää. Konesalimme käyttää 100-prosenttisesti uusiutuvilla energialähteillä tuotettua sähköä, joka on varmennettu alkuperätakuilla. Suomen viileä ilmasto on luonnollinen etu &mdash; free cooling mahdollistaa ulkoilmajäähdytyksen suurimman osan vuodesta, mikä laskee energiankulutusta merkittävästi. Konesalin tuottama hukkalämpö ei mene hukkaan, vaan se ohjataan lähialueen kaukolämpöverkkoon. PUE-tavoitteemme on alle 1,3, kun toimialan keskiarvo on 1,5&ndash;1,7.</p>
<div class="spec-table">
<table>
<tbody>

View File

@@ -1210,6 +1210,22 @@ a:hover {
font-size: 1rem;
}
.spec-intro {
color: var(--color-text-body);
line-height: 1.75;
max-width: 800px;
margin-bottom: 30px;
font-size: 0.98rem;
}
.section-dark .spec-intro {
color: rgba(255, 255, 255, 0.75);
}
.section-green .spec-intro {
color: var(--color-text-body);
}
.spec-table {
background: var(--color-white);
border: 1px solid var(--color-border);

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>