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:
356
index.html
356
index.html
@@ -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 →</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>2–8 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>20–24 °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 →</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>2–8 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>20–24 °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 (ma–pe 8–17) 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>
|
||||
|
||||
11
script.js
11
script.js
@@ -43,11 +43,20 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}, observerOptions);
|
||||
|
||||
// Add fade-in to sections
|
||||
document.querySelectorAll('.service-card, .feature, .pricing-card, .contact-form, .contact-info').forEach(el => {
|
||||
document.querySelectorAll('.service-card, .feature, .pricing-card, .faq-item, .contact-form, .contact-info').forEach(el => {
|
||||
el.classList.add('fade-in');
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// === FAQ toggle ===
|
||||
document.querySelectorAll('.faq-question').forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
const expanded = btn.getAttribute('aria-expanded') === 'true';
|
||||
btn.setAttribute('aria-expanded', !expanded);
|
||||
btn.nextElementSibling.classList.toggle('open');
|
||||
});
|
||||
});
|
||||
|
||||
// === Contact form ===
|
||||
const form = document.getElementById('contact-form');
|
||||
const formStatus = document.getElementById('form-status');
|
||||
|
||||
65
style.css
65
style.css
@@ -996,6 +996,71 @@ a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
/* === FAQ === */
|
||||
.faq-list {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
background: var(--color-bg-card);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
transition: border-color var(--transition);
|
||||
}
|
||||
|
||||
.faq-item:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.faq-question {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-heading);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-family);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.faq-question svg {
|
||||
flex-shrink: 0;
|
||||
color: var(--color-text-muted);
|
||||
transition: transform var(--transition);
|
||||
}
|
||||
|
||||
.faq-question[aria-expanded="true"] svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease, padding 0.35s ease;
|
||||
}
|
||||
|
||||
.faq-answer.open {
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.faq-answer p {
|
||||
padding: 0 24px 20px;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* === Animations === */
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
|
||||
Reference in New Issue
Block a user