Restructure page: pricing after hero, FAQ section, text updates

- Move Hinnat section right after Palvelut for better visibility
- Add FAQ section with 6 colocation questions and toggle animation
- Update nav order: Palvelut, Hinnat, Konesali, Yhteystiedot
- Rewrite "Paikallinen palvelu" text (remove staff meeting mention)
- Rewrite "Nopeat yhteydet" to emphasize direct fast connection
- Change Yhteystiedot to light background for better alternation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-09 15:07:55 +02:00
parent 0333611037
commit 67fa9ba099
3 changed files with 285 additions and 147 deletions

View File

@@ -25,8 +25,8 @@
</a>
<nav class="nav" id="nav">
<a href="#palvelut">Palvelut</a>
<a href="konesali.html">Konesali</a>
<a href="#hinnat">Hinnat</a>
<a href="konesali.html">Konesali</a>
<a href="#yhteystiedot">Yhteystiedot</a>
</nav>
<button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
@@ -142,154 +142,11 @@
</div>
</section>
<!-- Vihreä energia -->
<section class="section section-green" id="energia">
<div class="container">
<div class="green-energy">
<div class="green-energy-content">
<div class="green-badge">100% uusiutuva energia</div>
<h2>Vihreä konesali</h2>
<p>Konesali Turku käyttää ainoastaan tuuli- ja aurinkovoimalla tuotettua sähköä. Kaikki konesalimme kuluttama energia on sertifioitua uusiutuvaa energiaa alkuperätakuilla varmennettuina.</p>
<p>Suomen viileä ilmasto mahdollistaa free cooling -jäähdytyksen hyödyntämisen suurimman osan vuodesta, mikä vähentää energiankulutusta merkittävästi perinteisiin konesaleihin verrattuna. Hukkalämpö ohjataan lähialueen kaukolämpöverkkoon.</p>
<div class="green-stats">
<div class="green-stat">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
<span>Aurinkovoima</span>
</div>
<div class="green-stat">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 15h2m4 0h2m4 0h2m4 0h1M5.5 9.5L7 11m3.5-4.5L12 8m3.5-1.5L14 8m5 1.5L17.5 11"/><circle cx="12" cy="16" r="1"/><path d="M8 16a4 4 0 018 0"/><path d="M5 16a7 7 0 0114 0"/></svg>
<span>Tuulivoima</span>
</div>
<div class="green-stat">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
<span>Hukkalämmön talteenotto</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Miksi me -->
<section class="section section-dark" id="miksi">
<div class="container">
<h2 class="section-title">Miksi Konesali Turku?</h2>
<p class="section-subtitle">Pienen konesalin edut isoihin ketjuihin verrattuna</p>
<div class="features-grid">
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<h3>Paikallinen palvelu</h3>
<p>Laitteesi ovat lähellä. Voit käydä konesalilla milloin vain ja tapaat aina tutun henkilökunnan.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3>Redundantti infrastruktuuri</h3>
<p>Kahdennettu sähkönsyöttö, UPS-järjestelmä ja varavoimageneraattori. N+1 redundanssi kaikissa kriittisissä järjestelmissä.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3>Nopeat yhteydet</h3>
<p>Oletuksena 1 Gbit/s yhteys, saatavilla jopa 100 Gbit/s. Moniliittymäinen tietoliikenne usealta operaattorilta.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
</div>
<h3>24/7 tuki</h3>
<p>Remote hands -palvelu ja tekninen tuki ympäri vuorokauden. Ongelmatilanteissa reagoimme nopeasti.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h3>Turvallisuus</h3>
<p>Kulunvalvonta, kameravalvonta, lukitut kaapit ja automaattinen palonsammutusjärjestelmä.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3>Selkeä hinnoittelu</h3>
<p>Ei piilokustannuksia. Kuukausihintaan sisältyy laitepaikka, yhteys ja peruspalvelut.</p>
</div>
</div>
</div>
</section>
<!-- Tekniset tiedot lyhyesti -->
<section class="section" id="tekniikka">
<div class="container">
<h2 class="section-title">Tekniset tiedot</h2>
<p class="section-subtitle">Ammattitason infrastruktuuri vaativaan käyttöön. <a href="konesali.html">Katso kaikki tekniset tiedot &rarr;</a></p>
<div class="tech-grid">
<div class="tech-card">
<h4>Sähköjärjestelmät</h4>
<ul>
<li>Kahdennettu A/B-sähkönsyöttö</li>
<li>Online double-conversion UPS (N+1)</li>
<li>Dieselvaravoimageneraattori</li>
<li>Monitoroidut PDU:t</li>
<li>28 kW per kaappi</li>
</ul>
</div>
<div class="tech-card">
<h4>Tietoliikenne</h4>
<ul>
<li>Oletus 1 Gbit/s, saatavilla 100 Gbit/s</li>
<li>Moniliittymäinen (usea operaattori)</li>
<li>Rajoittamaton liikenne</li>
<li>IPv4 + IPv6 tuki</li>
<li>BGP-reititys, oma AS saatavilla</li>
</ul>
</div>
<div class="tech-card">
<h4>Jäähdytys</h4>
<ul>
<li>Precision air cooling</li>
<li>Cold Aisle Containment</li>
<li>Free cooling (Suomen ilmasto)</li>
<li>N+1 redundanssi</li>
<li>2024 &deg;C (ASHRAE A1)</li>
</ul>
</div>
<div class="tech-card">
<h4>Turvallisuus</h4>
<ul>
<li>Sähköinen kulunvalvonta (kortti + PIN)</li>
<li>24/7 kameravalvonta (tallentava)</li>
<li>Inerttikaasu-sammutusjärjestelmä</li>
<li>Lukittavat 42U-kaapit</li>
<li>Kaikki käynnit kirjataan</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Hinnat -->
<section class="section section-dark" id="hinnat">
<div class="container">
<h2 class="section-title">Hinnat</h2>
<p class="section-subtitle">Kaikki hinnat alv 0%. Sähkö laskutetaan erikseen kulutuksen mukaan.</p>
<p class="section-subtitle">Selkeä kuukausihinnoittelu ilman piilokustannuksia. Kaikki hinnat alv 0%.</p>
<div class="pricing-grid pricing-grid-4">
<div class="pricing-card">
<div class="pricing-header">
@@ -456,8 +313,215 @@
</div>
</section>
<!-- Vihreä energia -->
<section class="section section-green" id="energia">
<div class="container">
<div class="green-energy">
<div class="green-energy-content">
<div class="green-badge">100% uusiutuva energia</div>
<h2>Vihreä konesali</h2>
<p>Konesali Turku käyttää ainoastaan tuuli- ja aurinkovoimalla tuotettua sähköä. Kaikki konesalimme kuluttama energia on sertifioitua uusiutuvaa energiaa alkuperätakuilla varmennettuina.</p>
<p>Suomen viileä ilmasto mahdollistaa free cooling -jäähdytyksen hyödyntämisen suurimman osan vuodesta, mikä vähentää energiankulutusta merkittävästi perinteisiin konesaleihin verrattuna. Hukkalämpö ohjataan lähialueen kaukolämpöverkkoon.</p>
<div class="green-stats">
<div class="green-stat">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg>
<span>Aurinkovoima</span>
</div>
<div class="green-stat">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 15h2m4 0h2m4 0h2m4 0h1M5.5 9.5L7 11m3.5-4.5L12 8m3.5-1.5L14 8m5 1.5L17.5 11"/><circle cx="12" cy="16" r="1"/><path d="M8 16a4 4 0 018 0"/><path d="M5 16a7 7 0 0114 0"/></svg>
<span>Tuulivoima</span>
</div>
<div class="green-stat">
<svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
<span>Hukkalämmön talteenotto</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Miksi me -->
<section class="section section-dark" id="miksi">
<div class="container">
<h2 class="section-title">Miksi Konesali Turku?</h2>
<p class="section-subtitle">Pienen konesalin edut isoihin ketjuihin verrattuna</p>
<div class="features-grid">
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
<path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
</div>
<h3>Paikallinen palvelu</h3>
<p>Laitteesi ovat lähellä Turussa. Pääset konesalille milloin vain ja voit halutessasi hoitaa laitehuollot itse paikan päällä.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
</svg>
</div>
<h3>Redundantti infrastruktuuri</h3>
<p>Kahdennettu sähkönsyöttö, UPS-järjestelmä ja varavoimageneraattori. N+1 redundanssi kaikissa kriittisissä järjestelmissä.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<h3>Nopea yhteys suoraan meiltä</h3>
<p>Saat meiltä suoraan nopean ja toimivan verkkoyhteyden — oletuksena 1 Gbit/s, tarvittaessa skaalattavissa jopa 100 Gbit/s asti. Rajoittamaton liikenne kaikissa paketeissa.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/>
</svg>
</div>
<h3>24/7 tuki</h3>
<p>Remote hands -palvelu ja tekninen tuki ympäri vuorokauden. Ongelmatilanteissa reagoimme nopeasti.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
</svg>
</div>
<h3>Turvallisuus</h3>
<p>Kulunvalvonta, kameravalvonta, lukitut kaapit ja automaattinen palonsammutusjärjestelmä.</p>
</div>
<div class="feature">
<div class="feature-icon">
<svg viewBox="0 0 24 24" width="40" height="40" fill="none" stroke="currentColor" stroke-width="1.5">
<path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
</svg>
</div>
<h3>Selkeä hinnoittelu</h3>
<p>Ei piilokustannuksia. Kuukausihintaan sisältyy laitepaikka, yhteys ja peruspalvelut.</p>
</div>
</div>
</div>
</section>
<!-- Tekniset tiedot lyhyesti -->
<section class="section" id="tekniikka">
<div class="container">
<h2 class="section-title">Tekniset tiedot</h2>
<p class="section-subtitle">Ammattitason infrastruktuuri vaativaan käyttöön. <a href="konesali.html">Katso kaikki tekniset tiedot &rarr;</a></p>
<div class="tech-grid">
<div class="tech-card">
<h4>Sähköjärjestelmät</h4>
<ul>
<li>Kahdennettu A/B-sähkönsyöttö</li>
<li>Online double-conversion UPS (N+1)</li>
<li>Dieselvaravoimageneraattori</li>
<li>Monitoroidut PDU:t</li>
<li>28 kW per kaappi</li>
</ul>
</div>
<div class="tech-card">
<h4>Tietoliikenne</h4>
<ul>
<li>Oletus 1 Gbit/s, saatavilla 100 Gbit/s</li>
<li>Moniliittymäinen (usea operaattori)</li>
<li>Rajoittamaton liikenne</li>
<li>IPv4 + IPv6 tuki</li>
<li>BGP-reititys, oma AS saatavilla</li>
</ul>
</div>
<div class="tech-card">
<h4>Jäähdytys</h4>
<ul>
<li>Precision air cooling</li>
<li>Cold Aisle Containment</li>
<li>Free cooling (Suomen ilmasto)</li>
<li>N+1 redundanssi</li>
<li>2024 &deg;C (ASHRAE A1)</li>
</ul>
</div>
<div class="tech-card">
<h4>Turvallisuus</h4>
<ul>
<li>Sähköinen kulunvalvonta (kortti + PIN)</li>
<li>24/7 kameravalvonta (tallentava)</li>
<li>Inerttikaasu-sammutusjärjestelmä</li>
<li>Lukittavat 42U-kaapit</li>
<li>Kaikki käynnit kirjataan</li>
</ul>
</div>
</div>
</div>
</section>
<!-- Usein kysytyt kysymykset -->
<section class="section section-dark" id="ukk">
<div class="container">
<h2 class="section-title">Usein kysytyt kysymykset</h2>
<p class="section-subtitle">Vastauksia yleisimpiin colocation-palveluita koskeviin kysymyksiin</p>
<div class="faq-list">
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span>Mitä colocation tarkoittaa?</span>
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="faq-answer">
<p>Colocation (kolokointipalvelu) tarkoittaa, että sijoitat oman palvelimesi tai muun laitteesi meidän konesaliimme. Me tarjoamme sähkön, jäähdytyksen, verkkoyhteyden ja fyysisen turvallisuuden — sinä hallitset itse laitettasi ja sen ohjelmistoja. Tämä on kustannustehokas tapa saada konesalitason infrastruktuuri ilman omaa laitetilaa.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span>Voiko konesalille tulla milloin vain?</span>
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="faq-answer">
<p>Kyllä. Konesali on käytettävissäsi 24/7 ympäri vuoden. Toimistoaikana (mape 817) voit tulla suoraan, muina aikoina ilmoita tulostasi etukäteen. Pääsy tiloihin tapahtuu kulunvalvontajärjestelmän kautta henkilökohtaisella kulkukortilla ja PIN-koodilla.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span>Miten tuon laitteeni konesaliin?</span>
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="faq-answer">
<p>Voit tuoda laitteesi itse tai lähettää ne meille. Autamme tarvittaessa laitteiden asennuksessa kaappiin (racking), kaapeloinnissa ja verkkoyhteyden konfiguroinnissa. Sovitaan yhdessä toimitus- ja asennusaikataulu.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span>Mitä palvelutasosopimus (SLA) sisältää?</span>
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="faq-answer">
<p>SLA:mme takaa 99,9% käytettävyyden sähkön ja verkkoyhteyden osalta. Jos käytettävyys jää alle sovitun tason, hyvitämme vastaavan osuuden kuukausimaksusta. SLA kattaa myös vasteajat vikatilanteisiin ja suunnitellut huoltokatkot ilmoitetaan aina etukäteen.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span>Miten laskutus toimii?</span>
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="faq-answer">
<p>Laskutus tapahtuu kuukausittain. Laitepaikka ja peruspalvelut laskutetaan kiinteällä kuukausihinnalla. Sähkönkulutus mitataan ja laskutetaan erikseen toteutuneen kulutuksen mukaan. Sopimuksen minimikesto on 1 kuukausi, joten et sitoudu pitkiin sopimuskausiin.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-question" aria-expanded="false">
<span>Voinko laajentaa palvelua myöhemmin?</span>
<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"><path d="M19 9l-7 7-7-7"/></svg>
</button>
<div class="faq-answer">
<p>Kyllä, palvelu skaalautuu tarpeidesi mukaan. Voit aloittaa yhdellä 1U-laitepaikalla ja laajentaa myöhemmin useampaan laitepaikkaan tai kokokaappiin. Myös yhteysnopeus on päivitettävissä 1 Gbit/s:sta aina 100 Gbit/s asti.</p>
</div>
</div>
</div>
</div>
</section>
<!-- Yhteystiedot -->
<section class="section section-dark" id="yhteystiedot">
<section class="section" id="yhteystiedot">
<div class="container">
<h2 class="section-title">Ota yhteyttä</h2>
<p class="section-subtitle">Kerro tarpeistasi, niin teemme sinulle tarjouksen</p>