mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-08-08 23:09:14 +00:00
helpdesk page
This commit is contained in:
Henri
@@ -2,244 +2,192 @@
|
||||
import {
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
Container,
|
||||
} from "$components";
|
||||
import { onMount } from "svelte";
|
||||
import { text } from "$lib/i18n";
|
||||
import yaml from 'js-yaml';
|
||||
|
||||
import Laptop from "lucide-svelte/icons/laptop";
|
||||
import Smartphone from "lucide-svelte/icons/smartphone";
|
||||
import HardDrive from "lucide-svelte/icons/hard-drive";
|
||||
import Wifi from "lucide-svelte/icons/wifi";
|
||||
import Settings from "lucide-svelte/icons/settings";
|
||||
import Wrench from "lucide-svelte/icons/wrench";
|
||||
import Clock from "lucide-svelte/icons/clock";
|
||||
import { MapLibre, Marker } from "svelte-maplibre";
|
||||
import MapPin from "lucide-svelte/icons/map-pin";
|
||||
import Mail from "lucide-svelte/icons/mail";
|
||||
import Phone from "lucide-svelte/icons/phone";
|
||||
import CheckCircle from "lucide-svelte/icons/check-circle";
|
||||
import BusFront from "lucide-svelte/icons/bus-front";
|
||||
import { navigate } from "$lib/router/router.js";
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Laptop,
|
||||
title: "Arvuti diagnostika",
|
||||
description: "Tuvastame riistvara- ja tarkvaraprobleemid ning pakume lahendusi",
|
||||
price: "Alates 10€"
|
||||
},
|
||||
{
|
||||
icon: Settings,
|
||||
title: "Operatsioonisüsteemi paigaldus",
|
||||
description: "Windows, Linux või macOS paigaldamine ja seadistamine",
|
||||
price: "20€"
|
||||
},
|
||||
{
|
||||
icon: HardDrive,
|
||||
title: "Riistvara vahetus",
|
||||
description: "RAM, SSD, HDD või muu komponendi vahetus ja paigaldus",
|
||||
price: "Vastavalt tööle"
|
||||
},
|
||||
{
|
||||
icon: Wrench,
|
||||
title: "Arvuti puhastus",
|
||||
description: "Füüsiline puhastus tolmust ja termopasta vahetus",
|
||||
price: "15€"
|
||||
},
|
||||
{
|
||||
icon: Wifi,
|
||||
title: "Võrgu seadistamine",
|
||||
description: "Koduvõrgu või WiFi seadistamine ja probleemide lahendamine",
|
||||
price: "15€"
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "Nutiseadmete abi",
|
||||
description: "Nutitelefonide ja tahvelarvutite seadistamine ja nõustamine",
|
||||
price: "10€"
|
||||
}
|
||||
];
|
||||
// Images
|
||||
const helpdeskbg = "/assets/helpdesk/helpdesk_bg.jpg";
|
||||
const helpdesk = "/assets/helpdesk/helpdesk-on-black.png";
|
||||
|
||||
const whyChooseUs = [
|
||||
"Tudengisõbralikud hinnad",
|
||||
"Kiire teenindus",
|
||||
"Kogenud meeskond",
|
||||
"Paindlikud lahtiolekuajad",
|
||||
"Garantii töödele",
|
||||
"Sõbralik teenindus"
|
||||
];
|
||||
// Coordinates for Akadeemia tee 5, 12616 Tallinn [longitude, latitude]
|
||||
const center = [24.66887400515207, 59.396427975093935];
|
||||
// Coordinates for Keemia bus stop [longitude, latitude]
|
||||
const keemiaBusStop = [24.668325396145953, 59.397074517662276];
|
||||
// Coordinates for Tehnikaülikool bus stop [longitude, latitude]
|
||||
const tehnikaBusStop = [24.67328945396854, 59.39508874042947];
|
||||
|
||||
// Google Maps directions URL
|
||||
const getDirectionsUrl = (lng, lat) => {
|
||||
return `https://www.google.com/maps/dir/?api=1&destination=${lat},${lng}`;
|
||||
};
|
||||
|
||||
// Navigate to directions using router
|
||||
const openDirections = (lng, lat) => {
|
||||
navigate(getDirectionsUrl(lng, lat), { external: true });
|
||||
};
|
||||
|
||||
// Load pricing data
|
||||
let pricingData = { services: [] };
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/_data/helpdesk/hinnakiri.yml');
|
||||
const yamlText = await response.text();
|
||||
pricingData = yaml.load(yamlText);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl">
|
||||
<h1 class="text-5xl font-bold mb-6">Helpdesk</h1>
|
||||
<p class="text-2xl leading-relaxed">
|
||||
Tudengisõbralik arvutiabiteenus. Aitame lahendada kõik sinu IT-mured!
|
||||
</p>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Meie teenused</h2>
|
||||
<p class="text-xl text-gray-600">Pakume laia valikut IT-teenuseid soodsa hinnaga</p>
|
||||
<div class="w-full bg-black">
|
||||
<div class="flex absolute justify-center items-center flex-row w-full h-[60vh] px-4">
|
||||
<img src={helpdesk} alt={$text["hero"]?.title || "Helpdesk logo"} class="z-10" />
|
||||
</div>
|
||||
|
||||
<Grid columns={3} gap="var(--space-5)">
|
||||
{#each services as service}
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<svelte:component this={service.icon} size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">{service.title}</h3>
|
||||
<p class="text-gray-600 mb-4">{service.description}</p>
|
||||
<p class="text-lg font-bold" style="color: var(--orange)">{service.price}</p>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
<img
|
||||
class="h-[60vh] object-cover object-left w-full opacity-50 blur-[1.5px]"
|
||||
src={helpdeskbg}
|
||||
alt="Helpdesk"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<Section background="neutral">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Miks valida meid?</h2>
|
||||
</div>
|
||||
|
||||
<Center>
|
||||
<Card variant="glass" class="max-w-4xl">
|
||||
<Grid columns={2} gap="var(--space-4)">
|
||||
{#each whyChooseUs as reason}
|
||||
<div class="flex items-center gap-3">
|
||||
<CheckCircle size={24} style="color: var(--orange)" />
|
||||
<span class="text-lg">{reason}</span>
|
||||
</div>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Card>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- Pricing Info -->
|
||||
<Section>
|
||||
<Grid gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<h2 class="text-4xl font-bold mb-6">Hinnakirjast</h2>
|
||||
<div class="space-y-4 text-lg">
|
||||
<p>
|
||||
Meie hinnad on tudengisõbralikud ja läbipaistvad. Enne töö alustamist teeme alati hinnapakkumise,
|
||||
et sa teaksid täpselt, mida oodata.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Diagnostika:</strong> Esimene diagnostika on tasuta! Maksad ainult siis, kui otsustad lasta meil
|
||||
probleem lahendada.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Töötunnid:</strong> Tavaline tunnitasu on 15€. Keerulisemad tööd võivad olla kallimad,
|
||||
kuid lepime alati kokku enne töö alustamist.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Varuosad:</strong> Varuosade hind lisandub töötasule. Aitame leida parimad hinnad ja kvaliteedi.
|
||||
<!-- Main Content -->
|
||||
<Container>
|
||||
<Section>
|
||||
<Grid columns="2" gap="var(--space-5)">
|
||||
<!-- What is HELPDESK? -->
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-4xl font-light pb-4">{$text["whatIs"]?.title || ""}</h2>
|
||||
<p class="text-lg">
|
||||
{$text["whatIs"]?.description || ""}
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<h2 class="text-4xl font-bold mb-6">Kuidas toimub teenindus?</h2>
|
||||
<div class="space-y-6">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">1.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Võta ühendust</strong><br/>
|
||||
Kirjuta meile või tule otse meie kontorisse. Kirjelda oma probleemi.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">2.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Diagnostika</strong><br/>
|
||||
Vaatame probleemi üle ja selgitame välja põhjuse. Teeme hinnapakkumise.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">3.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Remont</strong><br/>
|
||||
Kui oled nõus, alustame tööd. Hoiame sind kursis protsessiga.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">4.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Üleandmine</strong><br/>
|
||||
Anname arvuti üle, selgitame tehtud tööd ja anname nõu tulevikuks.
|
||||
</div>
|
||||
</div>
|
||||
<!-- What services do we offer? -->
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-4xl font-light pb-4">{$text["services"]?.title || ""}</h2>
|
||||
<ul class="text-lg list-disc pl-5">
|
||||
{#each $text["services"]?.list || [] as service}
|
||||
<li>{service}</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl text-white">
|
||||
<h2 class="text-4xl font-bold mb-8">Võta ühendust</h2>
|
||||
|
||||
<Grid columns={2} gap="var(--space-6)">
|
||||
<Card variant="glass">
|
||||
<div class="mb-4">
|
||||
<MapPin size={32} class="mx-auto" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Asukoht</h3>
|
||||
<p>Akadeemia tee 5</p>
|
||||
<p>12616 Tallinn</p>
|
||||
<p class="mt-2">ICT-teaduskond, Raja 15 ruum 111</p>
|
||||
</Card>
|
||||
<!-- Pricing Table -->
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-4xl font-light pb-4">{$text["pricing"]?.title || ""}</h2>
|
||||
<div class="overflow-hidden rounded-lg border border-gray-200 shadow-sm">
|
||||
<table class="w-full text-lg">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
|
||||
{$text["pricing"]?.tableHeaders?.service || ""}
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
|
||||
{$text["pricing"]?.tableHeaders?.quantity || ""}
|
||||
</th>
|
||||
<th class="px-6 py-4 text-left font-semibold text-gray-900 border-b border-gray-200">
|
||||
{$text["pricing"]?.tableHeaders?.price || ""}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
{#each pricingData.services as service}
|
||||
<tr class="hover:bg-gray-50 transition-colors duration-200">
|
||||
<td class="px-6 py-4 text-gray-900">{service.name}</td>
|
||||
<td class="px-6 py-4 text-gray-600">{service.quantity}</td>
|
||||
<td class="px-6 py-4 font-medium" class:text-green-600={service.price === "Tasuta"} class:text-gray-900={service.price !== "Tasuta"}>
|
||||
{service.price}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<p class="pt-4 text-lg font-bold">
|
||||
{@html $text["pricing"]?.note || ""}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="mb-4">
|
||||
<Clock size={32} class="mx-auto" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Lahtiolekuajad</h3>
|
||||
<p>Esmaspäev - Reede</p>
|
||||
<p>10:00 - 16:00</p>
|
||||
<p class="mt-2 text-sm">Võta ette ühendust, et vältida ootamist</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="mb-4">
|
||||
<Mail size={32} class="mx-auto" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">E-post</h3>
|
||||
<a href="mailto:erki@lapikud.ee" class="hover:underline">
|
||||
erki@lapikud.ee
|
||||
</a>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="mb-4">
|
||||
<Phone size={32} class="mx-auto" />
|
||||
</div>
|
||||
<h3 class="text-xl font-bold mb-2">Telefon</h3>
|
||||
<a href="tel:+37259079190" class="hover:underline">
|
||||
+372 5907 9190
|
||||
</a>
|
||||
</Card>
|
||||
</Grid>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.feature-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: rgba(255, 127, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
</style>
|
||||
<!-- Opening Hours & Location -->
|
||||
<div class="flex flex-col">
|
||||
<h2 class="text-4xl font-light pb-4">
|
||||
{@html $text["hours"]?.title || ""}
|
||||
<br />
|
||||
{@html $text["hours"]?.schedule || ""}
|
||||
</h2>
|
||||
<p class="text-lg font-light opacity-70 pb-16">
|
||||
{$text["hours"]?.note || ""}
|
||||
</p>
|
||||
|
||||
<h2 class="text-4xl font-light pb-4">{$text["location"]?.title || ""}</h2>
|
||||
<div class="w-full h-96 rounded-lg overflow-hidden">
|
||||
<MapLibre
|
||||
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
|
||||
class="relative w-full h-full"
|
||||
{center}
|
||||
zoom={15}
|
||||
interactive={false}
|
||||
attributionControl={false}
|
||||
>
|
||||
<!-- Main location -->
|
||||
<Marker lngLat={center}>
|
||||
<div
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={() => openDirections(center[0], center[1])}
|
||||
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(center[0], center[1])}
|
||||
class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
|
||||
title="Get directions to Akadeemia tee 5"
|
||||
>
|
||||
<span class="text-xs font-semibold text-white bg-[#E69635] px-2 py-0.5 rounded shadow-md mb-1 whitespace-nowrap">Akadeemia tee 5</span>
|
||||
<MapPin class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
|
||||
</div>
|
||||
</Marker>
|
||||
|
||||
<!-- Keemia bus stop -->
|
||||
<Marker lngLat={keemiaBusStop}>
|
||||
<div
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={() => openDirections(keemiaBusStop[0], keemiaBusStop[1])}
|
||||
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(keemiaBusStop[0], keemiaBusStop[1])}
|
||||
class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
|
||||
title="Get directions to Keemia bus stop"
|
||||
>
|
||||
<span class="text-xs font-semibold text-gray-900 bg-white px-2 py-0.5 rounded shadow-md mb-1">Keemia</span>
|
||||
<BusFront class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
|
||||
</div>
|
||||
</Marker>
|
||||
|
||||
<!-- Tehnikaülikool bus stop -->
|
||||
<Marker lngLat={tehnikaBusStop}>
|
||||
<div
|
||||
role="button"
|
||||
tabindex="0"
|
||||
onclick={() => openDirections(tehnikaBusStop[0], tehnikaBusStop[1])}
|
||||
onkeydown={(e) => (e.key === 'Enter' || e.key === ' ') && openDirections(tehnikaBusStop[0], tehnikaBusStop[1])}
|
||||
class="flex flex-col items-center hover:scale-110 transition-transform cursor-pointer"
|
||||
title="Get directions to Tehnikaülikool bus stop"
|
||||
>
|
||||
<span class="text-xs font-semibold text-gray-900 bg-white px-2 py-0.5 rounded shadow-md mb-1">Tehnikaülikool</span>
|
||||
<BusFront class="w-7 h-7 text-[#E69635] drop-shadow-lg" />
|
||||
</div>
|
||||
</Marker>
|
||||
</MapLibre>
|
||||
</div>
|
||||
<p class="pb-4 text-lg">
|
||||
{@html $text["location"]?.busInfo || ""}
|
||||
</p>
|
||||
<p class="text-lg font-bold">
|
||||
{$text["location"]?.address || ""}
|
||||
</p>
|
||||
</div>
|
||||
</Grid>
|
||||
</Section>
|
||||
</Container>
|
||||
|
||||
Reference in New Issue
Block a user