Files
konesaliturku.fi/index.html
Jukka Lampikoski ff2c54db57 Erota Vihreä konesali -osio visuaalisesti Hinnat-osiosta
Lisätty vihreä gradienttitausta, elliptinen jakaja ja
luontoteemainen SVG-kuvitus (tuulivoimalat, aurinko, lehdet, mäet).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 20:38:46 +02:00

933 lines
66 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Konesali Turku — Colocation &amp; konesalipalvelut Turussa</title>
<meta name="description" content="Luotettavat konesalipalvelut Turussa. Colocation-laitepaikkoja 1U:sta kokokaappiin. Redundantti infrastruktuuri, henkilökohtainen palvelu.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Header -->
<header class="header" id="header">
<div class="container header-inner">
<a href="/" class="logo">
<svg class="logo-icon" viewBox="0 0 38 38" fill="none">
<rect class="logo-icon-bg" width="38" height="38" rx="10"/>
<rect x="10" y="8" width="18" height="22" rx="2.5" fill="none" stroke="white" stroke-width="1.2" opacity="0.9"/>
<rect x="13" y="11.5" width="12" height="3.5" rx="1" class="logo-icon-rack" opacity="0.85"/>
<rect x="13" y="17" width="12" height="3.5" rx="1" class="logo-icon-rack" opacity="0.85"/>
<rect x="13" y="22.5" width="12" height="3.5" rx="1" class="logo-icon-rack" opacity="0.85"/>
<circle cx="15.5" cy="13.25" r="1" class="logo-icon-led"/>
<circle cx="15.5" cy="18.75" r="1" class="logo-icon-led"/>
<circle cx="15.5" cy="24.25" r="1" class="logo-icon-led"/>
<path d="M15 33a4 4 0 014-4" stroke="white" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
<path d="M12.5 35a7 7 0 017-7" stroke="white" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
</svg>
<span class="logo-text">
<span class="logo-text-top">Konesali</span>
<span class="logo-text-bottom">TURKU</span>
</span>
</a>
<nav class="nav" id="nav">
<a href="#palvelut">Palvelut</a>
<a href="#hinnat">Hinnat</a>
<a href="konesali.html">Konesali</a>
<a href="yhteydet.html">Yhteydet</a>
<a href="tarjouspyynto.html" class="nav-cta">Jätä tarjouspyyntö</a>
</nav>
<button class="nav-toggle" id="nav-toggle" aria-label="Avaa valikko">
<span></span>
<span></span>
<span></span>
</button>
</div>
</header>
<!-- Hero -->
<section class="hero">
<!-- Isometric server room illustration -->
<div class="hero-illustration" aria-hidden="true">
<svg viewBox="0 0 600 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<!-- Floor grid -->
<g opacity="0.15" stroke="#fff" stroke-width="0.5">
<line x1="80" y1="380" x2="520" y2="380"/>
<line x1="100" y1="400" x2="540" y2="400"/>
<line x1="120" y1="420" x2="560" y2="420"/>
<line x1="140" y1="440" x2="540" y2="440"/>
<line x1="200" y1="340" x2="200" y2="460"/>
<line x1="300" y1="340" x2="300" y2="460"/>
<line x1="400" y1="340" x2="400" y2="460"/>
<line x1="500" y1="340" x2="500" y2="460"/>
</g>
<!-- Server Rack 1 (left) -->
<g transform="translate(100, 140)">
<!-- Rack body - isometric -->
<path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
<path d="M0 60 L0 220 L80 260 L80 100 Z" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
<path d="M80 100 L130 70 L130 230 L80 260 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
<!-- Server units - front face -->
<rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="155" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<!-- LED indicators -->
<circle cx="15" cy="128" r="3" fill="#e85d4a" opacity="0.9" class="led-blink"/>
<circle cx="15" cy="153" r="3" fill="#e85d4a" opacity="0.7"/>
<circle cx="15" cy="178" r="3" fill="#4ade80" opacity="0.7"/>
<circle cx="15" cy="203" r="3" fill="#e85d4a" opacity="0.8" class="led-blink-slow"/>
</g>
<!-- Server Rack 2 (center, taller) -->
<g transform="translate(250, 100)">
<path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.22)" stroke-width="1"/>
<path d="M0 60 L0 250 L80 290 L80 100 Z" fill="rgba(255,255,255,0.1)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
<path d="M80 100 L130 70 L130 260 L80 290 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
<!-- Server units -->
<rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.09)" stroke="rgba(255,255,255,0.2)" transform="skewY(26.5)"/>
<rect x="5" y="155" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="180" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<!-- LEDs -->
<circle cx="15" cy="128" r="3" fill="#4ade80" opacity="0.8"/>
<circle cx="15" cy="153" r="3" fill="#e85d4a" opacity="0.9" class="led-blink"/>
<circle cx="15" cy="178" r="3" fill="#4ade80" opacity="0.7"/>
<circle cx="15" cy="203" r="3" fill="#e85d4a" opacity="0.7" class="led-blink-slow"/>
<circle cx="15" cy="228" r="3" fill="#4ade80" opacity="0.7"/>
</g>
<!-- Server Rack 3 (right) -->
<g transform="translate(400, 140)">
<path d="M0 60 L50 30 L130 70 L80 100 Z" fill="rgba(255,255,255,0.06)" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
<path d="M0 60 L0 210 L80 250 L80 100 Z" fill="rgba(255,255,255,0.08)" stroke="rgba(255,255,255,0.18)" stroke-width="1"/>
<path d="M80 100 L130 70 L130 220 L80 250 Z" fill="rgba(255,255,255,0.04)" stroke="rgba(255,255,255,0.15)" stroke-width="1"/>
<rect x="5" y="80" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="105" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<rect x="5" y="130" width="72" height="18" rx="1" fill="rgba(255,255,255,0.07)" stroke="rgba(255,255,255,0.15)" transform="skewY(26.5)"/>
<circle cx="15" cy="128" r="3" fill="#e85d4a" opacity="0.8" class="led-blink-slow"/>
<circle cx="15" cy="153" r="3" fill="#4ade80" opacity="0.7"/>
<circle cx="15" cy="178" r="3" fill="#e85d4a" opacity="0.7" class="led-blink"/>
</g>
<!-- Network cables connecting racks -->
<g stroke="#e85d4a" stroke-width="1.5" opacity="0.35">
<path d="M180 280 Q240 255 330 235" fill="none"/>
<path d="M330 235 Q420 255 480 275" fill="none"/>
<path d="M180 310 Q340 270 480 310" fill="none" stroke-dasharray="4 4" opacity="0.2"/>
</g>
<!-- Data flow particles -->
<circle cx="230" cy="262" r="3" fill="#e85d4a" opacity="0.8" class="data-flow"/>
<circle cx="400" cy="248" r="3" fill="#e85d4a" opacity="0.6" class="data-flow-reverse"/>
<circle cx="330" cy="285" r="2.5" fill="#e85d4a" opacity="0.5" class="data-flow"/>
<!-- Subtle glow behind center rack -->
<ellipse cx="315" cy="250" rx="100" ry="60" fill="#e85d4a" opacity="0.03"/>
</svg>
</div>
<div class="container">
<div class="hero-grid">
<div class="hero-content">
<h1>Luotettavat konesalipalvelut <span class="highlight">Turussa</span></h1>
<p class="hero-subtitle">Colocation-laitepaikkoja ammattimaisessa laitetilassa. Redundantti sähkönsyöttö, nopeat tietoliikenneyhteydet ja henkilökohtainen palvelu.</p>
<div class="hero-actions">
<a href="tarjouspyynto.html" class="btn btn-primary">Pyydä tarjous</a>
<a href="#hinnat" class="btn btn-secondary">Katso hinnat</a>
</div>
<div class="hero-stats">
<div class="stat">
<span class="stat-value">99,9%</span>
<span class="stat-label">Käytettävyys SLA</span>
</div>
<div class="stat">
<span class="stat-value">24/7</span>
<span class="stat-label">Valvonta</span>
</div>
<div class="stat">
<span class="stat-value">100 Gbit/s</span>
<span class="stat-label">Saatavilla jopa</span>
</div>
</div>
</div>
<div class="hero-pricing">
<div class="hero-pricing-label">Hinnat alkaen</div>
<div class="hero-price-cards">
<a href="#hinnat" class="hero-price-card">
<span class="hero-price-name">1U</span>
<span class="hero-price-value">&euro;49<small>/kk</small></span>
</a>
<a href="#hinnat" class="hero-price-card hero-price-card-featured">
<span class="hero-price-badge">Suosituin</span>
<span class="hero-price-name">2U</span>
<span class="hero-price-value">&euro;79<small>/kk</small></span>
</a>
<a href="#hinnat" class="hero-price-card">
<span class="hero-price-name">4U</span>
<span class="hero-price-value">&euro;139<small>/kk</small></span>
</a>
</div>
<p class="hero-pricing-note">1 Gbit/s yhteys &amp; rajoittamaton liikenne sisältyy</p>
<a href="tarjouspyynto.html" class="btn btn-primary hero-pricing-cta">Tilaa tästä</a>
</div>
</div>
</div>
</section>
<!-- Palvelut -->
<section class="section section-with-illustration" id="palvelut">
<!-- Server rack front-view illustration -->
<div class="illustration-left" aria-hidden="true">
<svg viewBox="0 0 200 500" fill="none">
<!-- Full 42U rack front view -->
<rect x="30" y="20" width="140" height="460" rx="6" stroke="#e85d4a" stroke-width="1" opacity="0.08" fill="none"/>
<!-- Rack rails -->
<line x1="45" y1="20" x2="45" y2="480" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<line x1="155" y1="20" x2="155" y2="480" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<!-- Server units (various sizes) -->
<rect x="50" y="35" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="57" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="79" width="100" height="34" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.12" fill="#e85d4a" fill-opacity="0.03"/>
<rect x="50" y="119" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<rect x="50" y="141" width="100" height="34" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="181" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<rect x="50" y="203" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="225" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<rect x="50" y="247" width="100" height="34" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.12" fill="#e85d4a" fill-opacity="0.03"/>
<rect x="50" y="287" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<rect x="50" y="309" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<rect x="50" y="331" width="100" height="16" rx="2" stroke="#e85d4a" stroke-width="0.6" opacity="0.08" fill="#e85d4a" fill-opacity="0.01"/>
<!-- LED indicators -->
<circle cx="58" cy="43" r="2" fill="#e85d4a" opacity="0.2"/>
<circle cx="58" cy="65" r="2" fill="#4ade80" opacity="0.15"/>
<circle cx="58" cy="96" r="2.5" fill="#e85d4a" opacity="0.25"/>
<circle cx="58" cy="127" r="2" fill="#4ade80" opacity="0.12"/>
<circle cx="58" cy="158" r="2.5" fill="#e85d4a" opacity="0.2"/>
<circle cx="58" cy="189" r="2" fill="#4ade80" opacity="0.15"/>
<circle cx="58" cy="211" r="2" fill="#e85d4a" opacity="0.18"/>
<circle cx="58" cy="264" r="2.5" fill="#4ade80" opacity="0.2"/>
<circle cx="58" cy="295" r="2" fill="#e85d4a" opacity="0.15"/>
<circle cx="58" cy="317" r="2" fill="#4ade80" opacity="0.18"/>
<!-- Activity bars -->
<line x1="68" y1="43" x2="88" y2="43" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<line x1="68" y1="96" x2="95" y2="96" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="68" y1="158" x2="82" y2="158" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<line x1="68" y1="264" x2="92" y2="264" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<!-- Ventilation holes pattern -->
<g opacity="0.04">
<circle cx="130" cy="43" r="1" fill="#e85d4a"/>
<circle cx="136" cy="43" r="1" fill="#e85d4a"/>
<circle cx="142" cy="43" r="1" fill="#e85d4a"/>
<circle cx="130" cy="96" r="1" fill="#e85d4a"/>
<circle cx="136" cy="96" r="1" fill="#e85d4a"/>
<circle cx="142" cy="96" r="1" fill="#e85d4a"/>
<circle cx="130" cy="158" r="1" fill="#e85d4a"/>
<circle cx="136" cy="158" r="1" fill="#e85d4a"/>
<circle cx="142" cy="158" r="1" fill="#e85d4a"/>
</g>
</svg>
</div>
<div class="container">
<h2 class="section-title">Palvelut</h2>
<p class="section-subtitle">Colocation-laitepaikkoja yksittäisestä palvelimesta kokokaappiin</p>
<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 48 48" width="48" height="48" fill="none">
<rect x="10" y="16" width="28" height="6" rx="2" stroke="currentColor" stroke-width="2"/>
<circle cx="16" cy="19" r="1.5" fill="currentColor"/>
<line x1="22" y1="19" x2="34" y2="19" stroke="currentColor" stroke-width="1.5"/>
</svg>
</div>
<h3>1U Laitepaikka</h3>
<p>Yksittäinen palvelinpaikka jaetussa 42U kaapissa. Sopii 1U-palvelimille, kytkimille ja reititimille.</p>
<ul class="service-features">
<li>1 rack unit (44,45 mm)</li>
<li>Jaettu 1 Gbit/s yhteys</li>
<li>1x C13 sähkösyöttö (230V)</li>
<li>Rajoittamaton liikenne</li>
<li>Max 250W tehonkulutus</li>
</ul>
</div>
<div class="service-card featured">
<div class="service-badge">Suosituin</div>
<div class="service-icon">
<svg viewBox="0 0 48 48" width="48" height="48" fill="none">
<rect x="10" y="12" width="28" height="6" rx="2" stroke="currentColor" stroke-width="2"/>
<rect x="10" y="22" width="28" height="6" rx="2" stroke="currentColor" stroke-width="2"/>
<circle cx="16" cy="15" r="1.5" fill="currentColor"/>
<circle cx="16" cy="25" r="1.5" fill="currentColor"/>
<line x1="22" y1="15" x2="34" y2="15" stroke="currentColor" stroke-width="1.5"/>
<line x1="22" y1="25" x2="34" y2="25" stroke="currentColor" stroke-width="1.5"/>
</svg>
</div>
<h3>2U Laitepaikka</h3>
<p>Kaksi rack unitia jaetussa kaapissa. Ihanteellinen 2U-palvelimille ja suuremmille laitteille.</p>
<ul class="service-features">
<li>2 rack unitia (88,90 mm)</li>
<li>Jaettu 1 Gbit/s yhteys</li>
<li>2x C13 sähkösyöttö (230V)</li>
<li>Rajoittamaton liikenne</li>
<li>Max 500W tehonkulutus</li>
</ul>
</div>
<div class="service-card">
<div class="service-icon">
<svg viewBox="0 0 48 48" width="48" height="48" fill="none">
<rect x="10" y="8" width="28" height="6" rx="2" stroke="currentColor" stroke-width="2"/>
<rect x="10" y="18" width="28" height="6" rx="2" stroke="currentColor" stroke-width="2"/>
<rect x="10" y="28" width="28" height="6" rx="2" stroke="currentColor" stroke-width="2"/>
<circle cx="16" cy="11" r="1.5" fill="currentColor"/>
<circle cx="16" cy="21" r="1.5" fill="currentColor"/>
<circle cx="16" cy="31" r="1.5" fill="currentColor"/>
<line x1="22" y1="11" x2="34" y2="11" stroke="currentColor" stroke-width="1.5"/>
<line x1="22" y1="21" x2="34" y2="21" stroke="currentColor" stroke-width="1.5"/>
<line x1="22" y1="31" x2="34" y2="31" stroke="currentColor" stroke-width="1.5"/>
</svg>
</div>
<h3>4U Laitepaikka</h3>
<p>Neljä rack unitia jaetussa kaapissa. Sopii suurille palvelimille ja tallennusjärjestelmille.</p>
<ul class="service-features">
<li>4 rack unitia (177,80 mm)</li>
<li>Oma 1 Gbit/s yhteys</li>
<li>2x C13 sähkösyöttö (230V)</li>
<li>Rajoittamaton liikenne</li>
<li>Max 1000W tehonkulutus</li>
</ul>
</div>
</div>
<div class="services-cta">
<p>Tarvitsetko useampia laitepaikkoja tai kokokaapin? <a href="tarjouspyynto.html">Pyydä räätälöity tarjous &rarr;</a></p>
</div>
</div>
</section>
<!-- 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>
<div class="pricing-grid pricing-grid-4">
<div class="pricing-card">
<div class="pricing-header">
<h3>1U Laitepaikka</h3>
<div class="price">
<span class="price-amount">&euro;49</span>
<span class="price-period">/kk</span>
</div>
</div>
<ul class="pricing-features">
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
1 rack unit (1U)
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
1 Gbit/s yhteys
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
1x C13 sähkösyöttö
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Rajoittamaton liikenne
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
1x IPv4 + IPv6
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Max 250W
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
99,9% SLA
</li>
</ul>
<a href="tarjouspyynto.html" class="btn btn-outline">Pyydä tarjous</a>
</div>
<div class="pricing-card pricing-featured">
<div class="pricing-badge">Suosituin</div>
<div class="pricing-header">
<h3>2U Laitepaikka</h3>
<div class="price">
<span class="price-amount">&euro;79</span>
<span class="price-period">/kk</span>
</div>
</div>
<ul class="pricing-features">
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
2 rack unitia (2U)
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
1 Gbit/s yhteys
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
2x C13 sähkösyöttö
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Rajoittamaton liikenne
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
1x IPv4 + IPv6
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Max 500W
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
99,9% SLA
</li>
</ul>
<a href="tarjouspyynto.html" class="btn btn-primary">Pyydä tarjous</a>
</div>
<div class="pricing-card">
<div class="pricing-header">
<h3>4U Laitepaikka</h3>
<div class="price">
<span class="price-amount">&euro;139</span>
<span class="price-period">/kk</span>
</div>
</div>
<ul class="pricing-features">
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
4 rack unitia (4U)
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
1 Gbit/s yhteys
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
2x C13 sähkösyöttö
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Rajoittamaton liikenne
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
2x IPv4 + IPv6
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Max 1000W
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
99,9% SLA
</li>
</ul>
<a href="tarjouspyynto.html" class="btn btn-outline">Pyydä tarjous</a>
</div>
<div class="pricing-card pricing-custom">
<div class="pricing-header">
<h3>Kokokaappi / Räätälöity</h3>
<div class="price">
<span class="price-amount-custom">Pyydä tarjous</span>
</div>
</div>
<ul class="pricing-features">
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
42U kokokaappi tai useampi
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
1100 Gbit/s yhteys
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
A/B-sähkösyöttö (16A/32A)
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Rajoittamaton liikenne
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
IPv4 + IPv6 -verkot
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
Remote hands sisältyy
</li>
<li>
<svg viewBox="0 0 20 20" width="16" height="16" fill="currentColor"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
99,9% SLA
</li>
</ul>
<a href="tarjouspyynto.html" class="btn btn-primary">Jätä tarjouspyyntö</a>
</div>
</div>
<p class="pricing-note">Sähkönkulutus laskutetaan erikseen toteutuneen kulutuksen mukaan hintaan 0,25 &euro;/kWh (alv 0%). Kaikki hinnat ovat kuukausihintoja, alv 0%. Sopimuksen minimikesto 1 kuukausi. Yhteysnopeus oletuksena 1 Gbit/s, päivitettävissä jopa 100 Gbit/s asti.</p>
</div>
</section>
<!-- Vihreä energia -->
<section class="section section-green section-with-illustration" id="energia">
<!-- Nature decoration (leaves, turbine, sun) -->
<div class="green-decoration" aria-hidden="true">
<svg viewBox="0 0 1200 500" fill="none" preserveAspectRatio="xMidYMid slice">
<!-- Scattered leaves -->
<g opacity="0.12">
<path d="M120 80 Q140 50 160 80 Q140 65 120 80Z" fill="#059669" transform="rotate(-20 140 65)"/>
<path d="M1050 120 Q1070 90 1090 120 Q1070 105 1050 120Z" fill="#059669" transform="rotate(15 1070 105)"/>
<path d="M80 350 Q100 320 120 350 Q100 335 80 350Z" fill="#059669" transform="rotate(-35 100 335)"/>
<path d="M1100 380 Q1120 350 1140 380 Q1120 365 1100 380Z" fill="#059669" transform="rotate(25 1120 365)"/>
<path d="M300 60 Q315 35 330 60 Q315 47 300 60Z" fill="#059669" transform="rotate(10 315 47)"/>
<path d="M900 400 Q915 375 930 400 Q915 387 900 400Z" fill="#059669" transform="rotate(-15 915 387)"/>
</g>
<!-- Small wind turbine left -->
<g transform="translate(60, 120)" opacity="0.1">
<line x1="30" y1="40" x2="30" y2="200" stroke="#059669" stroke-width="2"/>
<circle cx="30" cy="40" r="4" fill="#059669"/>
<line x1="30" y1="40" x2="30" y2="0" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
<line x1="30" y1="40" x2="64" y2="58" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
<line x1="30" y1="40" x2="-4" y2="58" stroke="#059669" stroke-width="1.5" stroke-linecap="round"/>
</g>
<!-- Large wind turbine right -->
<g transform="translate(1020, 50)" opacity="0.08">
<line x1="50" y1="60" x2="50" y2="350" stroke="#059669" stroke-width="2.5"/>
<circle cx="50" cy="60" r="6" fill="#059669"/>
<line x1="50" y1="60" x2="50" y2="-10" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
<line x1="50" y1="60" x2="110" y2="92" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
<line x1="50" y1="60" x2="-10" y2="92" stroke="#059669" stroke-width="2" stroke-linecap="round"/>
</g>
<!-- Sun top right -->
<circle cx="950" cy="70" r="30" stroke="#059669" stroke-width="1.5" opacity="0.06" fill="#059669" fill-opacity="0.02"/>
<circle cx="950" cy="70" r="14" fill="#059669" opacity="0.05"/>
<g stroke="#059669" stroke-width="1" opacity="0.05">
<line x1="950" y1="30" x2="950" y2="18"/>
<line x1="950" y1="110" x2="950" y2="122"/>
<line x1="910" y1="70" x2="898" y2="70"/>
<line x1="990" y1="70" x2="1002" y2="70"/>
<line x1="922" y1="42" x2="914" y2="34"/>
<line x1="978" y1="98" x2="986" y2="106"/>
<line x1="922" y1="98" x2="914" y2="106"/>
<line x1="978" y1="42" x2="986" y2="34"/>
</g>
<!-- Rolling hills at bottom -->
<path d="M0 420 Q150 380 300 400 Q500 430 700 390 Q900 360 1050 400 Q1150 420 1200 410 L1200 500 L0 500Z" fill="#059669" opacity="0.04"/>
<path d="M0 450 Q200 420 400 440 Q600 460 800 430 Q1000 400 1200 440 L1200 500 L0 500Z" fill="#059669" opacity="0.03"/>
<!-- Small tree silhouettes on hills -->
<g opacity="0.06" fill="#059669">
<path d="M200 400 L206 380 L212 400Z"/>
<rect x="204" y="400" width="4" height="10"/>
<path d="M800 395 L808 370 L816 395Z"/>
<rect x="806" y="395" width="4" height="12"/>
<path d="M500 425 L505 410 L510 425Z"/>
<rect x="503.5" y="425" width="3" height="8"/>
</g>
<!-- Recycling arrows circle -->
<g transform="translate(180, 250)" opacity="0.07" stroke="#059669" stroke-width="1.5" fill="none">
<path d="M15 0 A15 15 0 0 1 0 15" stroke-linecap="round"/>
<path d="M0 15 A15 15 0 0 1 -15 0" stroke-linecap="round"/>
<path d="M-15 0 A15 15 0 0 1 0 -15" stroke-linecap="round"/>
<polygon points="15,0 10,-5 10,5" fill="#059669"/>
<polygon points="0,15 -5,10 5,10" fill="#059669"/>
<polygon points="-15,0 -10,5 -10,-5" fill="#059669"/>
</g>
</svg>
</div>
<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 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">
<!-- Network nodes -->
<circle cx="100" cy="80" r="4" fill="#e85d4a" opacity="0.3"/>
<circle cx="250" cy="50" r="3" fill="#e85d4a" opacity="0.2"/>
<circle cx="400" cy="90" r="5" fill="#e85d4a" opacity="0.15"/>
<circle cx="550" cy="40" r="3" fill="#e85d4a" opacity="0.25"/>
<circle cx="700" cy="70" r="4" fill="#e85d4a" opacity="0.2"/>
<circle cx="150" cy="320" r="3" fill="#e85d4a" opacity="0.2"/>
<circle cx="350" cy="350" r="4" fill="#e85d4a" opacity="0.15"/>
<circle cx="600" cy="330" r="3" fill="#e85d4a" opacity="0.25"/>
<circle cx="750" cy="360" r="3" fill="#e85d4a" opacity="0.15"/>
<!-- Connection lines -->
<line x1="100" y1="80" x2="250" y2="50" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
<line x1="250" y1="50" x2="400" y2="90" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="400" y1="90" x2="550" y2="40" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
<line x1="550" y1="40" x2="700" y2="70" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="150" y1="320" x2="350" y2="350" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="350" y1="350" x2="600" y2="330" stroke="#e85d4a" stroke-width="0.5" opacity="0.12"/>
<line x1="600" y1="330" x2="750" y2="360" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<!-- Cross connections -->
<line x1="100" y1="80" x2="150" y2="320" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
<line x1="400" y1="90" x2="350" y2="350" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
<line x1="700" y1="70" x2="750" y2="360" stroke="#e85d4a" stroke-width="0.3" opacity="0.06" stroke-dasharray="4 8"/>
</svg>
</div>
<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 section-with-illustration" id="tekniikka">
<!-- Server room blueprint illustration -->
<div class="blueprint-decoration" aria-hidden="true">
<svg viewBox="0 0 300 500" fill="none">
<!-- Blueprint grid -->
<g stroke="#e85d4a" stroke-width="0.3" opacity="0.06">
<line x1="0" y1="50" x2="300" y2="50"/>
<line x1="0" y1="100" x2="300" y2="100"/>
<line x1="0" y1="150" x2="300" y2="150"/>
<line x1="0" y1="200" x2="300" y2="200"/>
<line x1="0" y1="250" x2="300" y2="250"/>
<line x1="0" y1="300" x2="300" y2="300"/>
<line x1="0" y1="350" x2="300" y2="350"/>
<line x1="0" y1="400" x2="300" y2="400"/>
<line x1="0" y1="450" x2="300" y2="450"/>
<line x1="50" y1="0" x2="50" y2="500"/>
<line x1="100" y1="0" x2="100" y2="500"/>
<line x1="150" y1="0" x2="150" y2="500"/>
<line x1="200" y1="0" x2="200" y2="500"/>
<line x1="250" y1="0" x2="250" y2="500"/>
</g>
<!-- Rack outline 1 -->
<rect x="40" y="60" width="80" height="180" rx="4" stroke="#e85d4a" stroke-width="1" opacity="0.12"/>
<rect x="50" y="75" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="95" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="115" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="135" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="155" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="175" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="195" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<rect x="50" y="215" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.08"/>
<!-- LED dots -->
<circle cx="57" cy="81" r="2" fill="#e85d4a" opacity="0.15"/>
<circle cx="57" cy="101" r="2" fill="#e85d4a" opacity="0.12"/>
<circle cx="57" cy="121" r="2" fill="#e85d4a" opacity="0.18"/>
<circle cx="57" cy="141" r="2" fill="#e85d4a" opacity="0.12"/>
<circle cx="57" cy="161" r="2" fill="#e85d4a" opacity="0.15"/>
<circle cx="57" cy="181" r="2" fill="#e85d4a" opacity="0.12"/>
<circle cx="57" cy="201" r="2" fill="#e85d4a" opacity="0.18"/>
<circle cx="57" cy="221" r="2" fill="#e85d4a" opacity="0.12"/>
<!-- Rack outline 2 -->
<rect x="160" y="100" width="80" height="160" rx="4" stroke="#e85d4a" stroke-width="1" opacity="0.1"/>
<rect x="170" y="115" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="135" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="155" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="175" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="195" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<rect x="170" y="215" width="60" height="12" rx="2" stroke="#e85d4a" stroke-width="0.5" opacity="0.06"/>
<!-- Cables between racks -->
<path d="M120 140 Q140 140 140 160 Q140 180 160 180" stroke="#e85d4a" stroke-width="0.6" opacity="0.1"/>
<path d="M120 160 Q145 160 145 175 Q145 195 160 195" stroke="#e85d4a" stroke-width="0.6" opacity="0.08"/>
<!-- Cooling pipes -->
<line x1="30" y1="280" x2="250" y2="280" stroke="#e85d4a" stroke-width="1.5" opacity="0.06" stroke-linecap="round"/>
<line x1="30" y1="290" x2="250" y2="290" stroke="#e85d4a" stroke-width="1" opacity="0.04" stroke-linecap="round"/>
<!-- Dimension markers -->
<line x1="40" y1="50" x2="120" y2="50" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="40" y1="47" x2="40" y2="53" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
<line x1="120" y1="47" x2="120" y2="53" stroke="#e85d4a" stroke-width="0.5" opacity="0.1"/>
</svg>
</div>
<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-alt section-with-illustration" id="ukk">
<!-- Question bubbles illustration -->
<div class="illustration-left" aria-hidden="true">
<svg viewBox="0 0 200 400" fill="none">
<!-- Chat bubble 1 -->
<rect x="30" y="40" width="120" height="60" rx="12" stroke="#e85d4a" stroke-width="0.8" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<path d="M60 100 L50 115 L75 100" stroke="#e85d4a" stroke-width="0.8" opacity="0.1" fill="#e85d4a" fill-opacity="0.02"/>
<!-- Question mark inside -->
<text x="90" y="80" font-size="28" fill="#e85d4a" opacity="0.08" text-anchor="middle" font-family="serif" font-weight="700">?</text>
<!-- Chat bubble 2 -->
<rect x="50" y="140" width="130" height="50" rx="10" stroke="#e85d4a" stroke-width="0.8" opacity="0.08" fill="#e85d4a" fill-opacity="0.015"/>
<path d="M150 190 L165 202 L145 190" stroke="#e85d4a" stroke-width="0.8" opacity="0.08" fill="#e85d4a" fill-opacity="0.015"/>
<!-- Lines representing text -->
<line x1="65" y1="157" x2="155" y2="157" stroke="#e85d4a" stroke-width="1" opacity="0.05"/>
<line x1="65" y1="168" x2="140" y2="168" stroke="#e85d4a" stroke-width="1" opacity="0.04"/>
<line x1="65" y1="179" x2="125" y2="179" stroke="#e85d4a" stroke-width="1" opacity="0.03"/>
<!-- Chat bubble 3 -->
<rect x="20" y="230" width="110" height="55" rx="10" stroke="#e85d4a" stroke-width="0.8" opacity="0.07" fill="#e85d4a" fill-opacity="0.01"/>
<path d="M50 285 L40 298 L65 285" stroke="#e85d4a" stroke-width="0.8" opacity="0.07" fill="#e85d4a" fill-opacity="0.01"/>
<text x="75" y="265" font-size="22" fill="#e85d4a" opacity="0.06" text-anchor="middle" font-family="serif" font-weight="700">?</text>
<!-- Decorative dots -->
<circle cx="170" cy="260" r="3" fill="#e85d4a" opacity="0.06"/>
<circle cx="160" cy="280" r="2" fill="#e85d4a" opacity="0.04"/>
<circle cx="175" cy="295" r="2.5" fill="#e85d4a" opacity="0.05"/>
</svg>
</div>
<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>
<!-- Footer -->
<footer class="footer">
<div class="container footer-inner">
<div class="footer-brand">
<a href="/" class="logo">
<svg class="logo-icon" viewBox="0 0 38 38" fill="none">
<rect class="logo-icon-bg" width="38" height="38" rx="10"/>
<rect x="10" y="8" width="18" height="22" rx="2.5" fill="none" stroke="white" stroke-width="1.2" opacity="0.9"/>
<rect x="13" y="11.5" width="12" height="3.5" rx="1" class="logo-icon-rack" opacity="0.85"/>
<rect x="13" y="17" width="12" height="3.5" rx="1" class="logo-icon-rack" opacity="0.85"/>
<rect x="13" y="22.5" width="12" height="3.5" rx="1" class="logo-icon-rack" opacity="0.85"/>
<circle cx="15.5" cy="13.25" r="1" class="logo-icon-led"/>
<circle cx="15.5" cy="18.75" r="1" class="logo-icon-led"/>
<circle cx="15.5" cy="24.25" r="1" class="logo-icon-led"/>
<path d="M15 33a4 4 0 014-4" stroke="white" stroke-width="1.2" stroke-linecap="round" opacity="0.5"/>
<path d="M12.5 35a7 7 0 017-7" stroke="white" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
</svg>
<span class="logo-text">
<span class="logo-text-top">Konesali</span>
<span class="logo-text-bottom">TURKU</span>
</span>
</a>
<p>Luotettavat konesalipalvelut Turussa.</p>
</div>
<div class="footer-links">
<h4>Sivusto</h4>
<a href="#palvelut">Palvelut</a>
<a href="konesali.html">Konesali</a>
<a href="yhteydet.html">Yhteydet</a>
<a href="#hinnat">Hinnat</a>
<a href="tarjouspyynto.html">Tarjouspyyntö</a>
</div>
<div class="footer-links">
<h4>Yhteystiedot</h4>
<a href="mailto:support@konesaliturku.fi">support@konesaliturku.fi</a>
<span>Web1 Oy</span>
<span>Latokarinkatu 3</span>
<span>20200 Turku</span>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<p>&copy; 2026 Konesali Turku. Kaikki oikeudet pidätetään.</p>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>