mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-08-09 00:39:13 +00:00
lang changes, new pages, data changes
This commit is contained in:
Henri
274
src/routes/AboutUs.svelte
Normal file
274
src/routes/AboutUs.svelte
Normal file
@@ -0,0 +1,274 @@
|
||||
<script>
|
||||
import {
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
} from "$components";
|
||||
import { onMount } from "svelte";
|
||||
import yaml from 'js-yaml';
|
||||
import { currentLang, getLangText } from "$lib";
|
||||
|
||||
import Users from "lucide-svelte/icons/users";
|
||||
import History from "lucide-svelte/icons/history";
|
||||
import Target from "lucide-svelte/icons/target";
|
||||
import Heart from "lucide-svelte/icons/heart";
|
||||
import Award from "lucide-svelte/icons/award";
|
||||
import Sparkles from "lucide-svelte/icons/sparkles";
|
||||
import Mail from "lucide-svelte/icons/mail";
|
||||
import Phone from "lucide-svelte/icons/phone";
|
||||
|
||||
let management = [];
|
||||
let pastManagement = [];
|
||||
|
||||
onMount(async () => {
|
||||
const [mgmtResponse, pastResponse] = await Promise.all([
|
||||
fetch('/_data/management.yml'),
|
||||
fetch('/_data/past_management.yml')
|
||||
]);
|
||||
|
||||
const [mgmtText, pastText] = await Promise.all([
|
||||
mgmtResponse.text(),
|
||||
pastResponse.text()
|
||||
]);
|
||||
|
||||
management = yaml.load(mgmtText);
|
||||
pastManagement = yaml.load(pastText);
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl">
|
||||
<h1 class="text-5xl font-bold mb-6">Kes me oleme?</h1>
|
||||
<p class="text-2xl leading-relaxed">
|
||||
MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi,
|
||||
mis ühendab endisi ja praegusi IT huvilisi tudengeid
|
||||
</p>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- History Section -->
|
||||
<Section>
|
||||
<Grid gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="feature-icon" style="color: var(--orange)">
|
||||
<History size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h2 class="text-4xl font-bold">Meie lugu</h2>
|
||||
</div>
|
||||
<div class="space-y-4 text-lg">
|
||||
<p>
|
||||
Organisatsioon loodi <strong>2002. aastal</strong> informaatika tudengite poolt,
|
||||
kelle erialatunnuseks oli "LAP". Targad mehed otsustasid, et järelikult on nad "Lapikud".
|
||||
</p>
|
||||
<p>
|
||||
Üle 20 aasta oleme kasvanud väikesest tudengite grupist suureks kogukonnaks,
|
||||
mis on aidanud sadadel tudengitel saada väärtuslikku kogemust IT-valdkonnas.
|
||||
</p>
|
||||
<p>
|
||||
Täna oleme uhked oma traditsiooni üle ja jätkame sellega,
|
||||
et pakkuda tudengitele võimalusi areneda ja kasvada.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="feature-icon" style="color: var(--orange)">
|
||||
<Target size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h2 class="text-4xl font-bold">Meie eesmärk</h2>
|
||||
</div>
|
||||
<div class="space-y-4 text-lg">
|
||||
<p>
|
||||
Meie põhieesmärgiks on Tallinna Tehnikaülikooli IT tudengitele
|
||||
<strong>erialase lisandväärtuse loomine</strong>.
|
||||
</p>
|
||||
<p>
|
||||
Kaasame tudengeid huvitavatesse IT projektidesse ning anname tudengitele võimaluse
|
||||
midagi reaalset oma käega ära teha. Aktiivsetel tudengitel on võimalus saada meie juures esimene töökogemus.
|
||||
</p>
|
||||
<p>
|
||||
Meie projektidest kooruvad välja huvitavad ja tarvilikud lõputööd ning
|
||||
meie liikmeskonnast on tulnud ka lõputöö juhendajaid.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Values Section -->
|
||||
<Section background="neutral">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Meie väärtused</h2>
|
||||
<p class="text-xl text-gray-600">Mis meile oluline on</p>
|
||||
</div>
|
||||
|
||||
<Grid columns={3} gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Users size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Kogukond</h3>
|
||||
<p class="text-gray-600">
|
||||
Oleme tugev kogukond, kus iga liige on oluline. Toetame ja aitame üksteist.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Award size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Kvaliteet</h3>
|
||||
<p class="text-gray-600">
|
||||
Teeme tööd südamega ja püüdleme alati parima tulemuse poole.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Sparkles size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Innovatsioon</h3>
|
||||
<p class="text-gray-600">
|
||||
Kasutame uusimaid tehnoloogiaid ja otsime alati paremaid lahendusi.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Heart size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Kirg</h3>
|
||||
<p class="text-gray-600">
|
||||
Teeme seda, mida armastame. Meie kirglikud liikmed on meie tugevus.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Users size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Kaasamine</h3>
|
||||
<p class="text-gray-600">
|
||||
Kaasame kõiki teaduskondi - IT, majandus, inseneeria ja muud.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Target size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Praktiline</h3>
|
||||
<p class="text-gray-600">
|
||||
Teeme reaalset tööd, mis annab tudengitele praktilist kogemust.
|
||||
</p>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Current Management -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Meie juhatus</h2>
|
||||
<p class="text-xl text-gray-600">Inimesed, kes viivad organisatsiooni edasi</p>
|
||||
</div>
|
||||
|
||||
<Grid columns={2} gap="var(--space-6)">
|
||||
{#each management as person}
|
||||
<Card variant="glass">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
{#if person.photo}
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src={`/assets/management-images/${person.photo}`}
|
||||
alt={person.name}
|
||||
class="w-full md:w-48 h-48 object-cover rounded-lg"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="flex-1">
|
||||
<h3 class="text-2xl font-bold mb-2">{person.name}</h3>
|
||||
<p class="text-lg font-semibold mb-2" style="color: var(--orange)">
|
||||
{getLangText(person, 'role', $currentLang)}
|
||||
</p>
|
||||
{#if person.subrole}
|
||||
<p class="text-gray-600 mb-4">{getLangText(person, 'subrole', $currentLang)}</p>
|
||||
{/if}
|
||||
|
||||
<div class="space-y-2">
|
||||
{#if person.email}
|
||||
<div class="flex items-center gap-2">
|
||||
<Mail size={18} style="color: var(--orange)" />
|
||||
<a href={`mailto:${person.email}`} class="hover:underline">
|
||||
{person.email}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
{#if person.phone}
|
||||
<div class="flex items-center gap-2">
|
||||
<Phone size={18} style="color: var(--orange)" />
|
||||
<a href={`tel:${person.phone}`} class="hover:underline">
|
||||
{person.phone}
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Past Management -->
|
||||
{#if pastManagement && pastManagement.length > 0}
|
||||
<Section background="neutral">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Endised juhatused</h2>
|
||||
<p class="text-xl text-gray-600">Täname kõiki, kes on organisatsiooni juhtinud</p>
|
||||
</div>
|
||||
|
||||
<div class="space-y-12">
|
||||
{#each pastManagement as yearGroup}
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold mb-6 text-center">{yearGroup.year}</h3>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
||||
{#each yearGroup.members as member}
|
||||
<Card variant="glass" class="text-center">
|
||||
{#if member.image}
|
||||
<img
|
||||
src={`/assets/past-management-images/optimised/${member.image}`}
|
||||
alt={member.name}
|
||||
class="w-full h-32 object-cover rounded-lg mb-3"
|
||||
on:error={(e) => {
|
||||
e.target.src = '/assets/past-management-images/original/' + member.image;
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
<p class="font-semibold">{member.name}</p>
|
||||
</Card>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Section>
|
||||
{/if}
|
||||
|
||||
<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%;
|
||||
}
|
||||
</style>
|
||||
313
src/routes/Contact.svelte
Normal file
313
src/routes/Contact.svelte
Normal file
@@ -0,0 +1,313 @@
|
||||
<script>
|
||||
import {
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
} from "$components";
|
||||
|
||||
import MapPin from "lucide-svelte/icons/map-pin";
|
||||
import Mail from "lucide-svelte/icons/mail";
|
||||
import Phone from "lucide-svelte/icons/phone";
|
||||
import MessageCircle from "lucide-svelte/icons/message-circle";
|
||||
import Facebook from "lucide-svelte/icons/facebook";
|
||||
import Instagram from "lucide-svelte/icons/instagram";
|
||||
import Github from "lucide-svelte/icons/github";
|
||||
import Building from "lucide-svelte/icons/building";
|
||||
import Clock from "lucide-svelte/icons/clock";
|
||||
|
||||
const contactMethods = [
|
||||
{
|
||||
icon: MapPin,
|
||||
title: "Aadress",
|
||||
content: "Akadeemia tee 5, 12616 Tallinn",
|
||||
subtitle: "ICT-teaduskond, Raja 15 ruum 111",
|
||||
link: "https://goo.gl/maps/..."
|
||||
},
|
||||
{
|
||||
icon: Mail,
|
||||
title: "E-post",
|
||||
content: "lapikud@lapikud.ee",
|
||||
link: "mailto:lapikud@lapikud.ee"
|
||||
},
|
||||
{
|
||||
icon: Phone,
|
||||
title: "Telefon",
|
||||
content: "+372 58 160 799",
|
||||
link: "tel:+37258160799"
|
||||
},
|
||||
{
|
||||
icon: MessageCircle,
|
||||
title: "Messenger",
|
||||
content: "m.me/Lapikud",
|
||||
link: "https://m.me/Lapikud"
|
||||
}
|
||||
];
|
||||
|
||||
const socialMedia = [
|
||||
{
|
||||
icon: Facebook,
|
||||
name: "Facebook",
|
||||
link: "https://www.facebook.com/Lapikud/"
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
name: "Instagram",
|
||||
link: "https://www.instagram.com/lapikud/"
|
||||
},
|
||||
{
|
||||
icon: Github,
|
||||
name: "GitHub",
|
||||
link: "https://github.com/Lapikud/"
|
||||
}
|
||||
];
|
||||
|
||||
const organizationInfo = [
|
||||
{
|
||||
icon: Building,
|
||||
title: "Registrikood",
|
||||
content: "80167145"
|
||||
},
|
||||
{
|
||||
icon: Building,
|
||||
title: "Pangakonto",
|
||||
content: "EE812200221019551756",
|
||||
subtitle: "Swedbank"
|
||||
}
|
||||
];
|
||||
|
||||
let formData = {
|
||||
name: '',
|
||||
email: '',
|
||||
subject: '',
|
||||
message: ''
|
||||
};
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
// Create mailto link with form data
|
||||
const mailtoLink = `mailto:lapikud@lapikud.ee?subject=${encodeURIComponent(formData.subject)}&body=${encodeURIComponent(`Nimi: ${formData.name}\nE-post: ${formData.email}\n\nSõnum:\n${formData.message}`)}`;
|
||||
window.location.href = mailtoLink;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl">
|
||||
<h1 class="text-5xl font-bold mb-6">Võta ühendust</h1>
|
||||
<p class="text-2xl leading-relaxed">
|
||||
Kas sul on küsimusi? Tahad liituda? Või soovid alustada koostööd? Võta julgelt ühendust!
|
||||
</p>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- Contact Methods -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Kuidas meiega ühendust võtta?</h2>
|
||||
<p class="text-xl text-gray-600">Vali endale sobiv viis</p>
|
||||
</div>
|
||||
|
||||
<Grid columns={2} gap="var(--space-5)">
|
||||
{#each contactMethods as method}
|
||||
<Card variant="glass">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="feature-icon shrink-0" style="color: var(--orange)">
|
||||
<svelte:component this={method.icon} size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<h3 class="text-xl font-bold mb-2">{method.title}</h3>
|
||||
{#if method.link}
|
||||
<a
|
||||
href={method.link}
|
||||
class="text-lg hover:underline"
|
||||
style="color: var(--orange)"
|
||||
target={method.link.startsWith('http') ? '_blank' : '_self'}
|
||||
rel={method.link.startsWith('http') ? 'noopener noreferrer' : ''}
|
||||
>
|
||||
{method.content}
|
||||
</a>
|
||||
{:else}
|
||||
<p class="text-lg">{method.content}</p>
|
||||
{/if}
|
||||
{#if method.subtitle}
|
||||
<p class="text-gray-600 text-sm mt-1">{method.subtitle}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Contact Form -->
|
||||
<Section background="neutral">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<div class="text-center mb-8">
|
||||
<h2 class="text-4xl font-bold mb-4">Saada meile sõnum</h2>
|
||||
<p class="text-xl text-gray-600">Täida vorm ja me võtame sinuga ühendust</p>
|
||||
</div>
|
||||
|
||||
<Card variant="glass">
|
||||
<form on:submit={handleSubmit} class="space-y-6">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-semibold mb-2">Nimi *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
bind:value={formData.name}
|
||||
required
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 outline-none transition"
|
||||
placeholder="Sinu nimi"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="email" class="block text-sm font-semibold mb-2">E-post *</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
bind:value={formData.email}
|
||||
required
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 outline-none transition"
|
||||
placeholder="sinu@email.ee"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="subject" class="block text-sm font-semibold mb-2">Teema *</label>
|
||||
<input
|
||||
type="text"
|
||||
id="subject"
|
||||
bind:value={formData.subject}
|
||||
required
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 outline-none transition"
|
||||
placeholder="Sõnumi teema"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="message" class="block text-sm font-semibold mb-2">Sõnum *</label>
|
||||
<textarea
|
||||
id="message"
|
||||
bind:value={formData.message}
|
||||
required
|
||||
rows="6"
|
||||
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 outline-none transition resize-none"
|
||||
placeholder="Kirjuta oma sõnum siia..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-3 px-6 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
Saada sõnum
|
||||
</button>
|
||||
</form>
|
||||
</Card>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<!-- Office Hours & Location -->
|
||||
<Section>
|
||||
<Grid gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="feature-icon" style="color: var(--orange)">
|
||||
<Clock size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold mb-4">Lahtiolekuajad</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 text-lg">
|
||||
<div class="flex justify-between">
|
||||
<span class="font-semibold">Esmaspäev - Reede:</span>
|
||||
<span>10:00 - 16:00</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="font-semibold">Laupäev - Pühapäev:</span>
|
||||
<span>Suletud</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 mt-4">
|
||||
* Soovitame enne külastamist võtta ühendust, et vältida ootamist
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="feature-icon" style="color: var(--orange)">
|
||||
<MapPin size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-3xl font-bold mb-4">Kuidas meid leida?</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="space-y-3 text-lg">
|
||||
<p><strong>Aadress:</strong> Akadeemia tee 5, 12616 Tallinn</p>
|
||||
<p><strong>Hoone:</strong> ICT-teaduskond (Raja 15)</p>
|
||||
<p><strong>Ruum:</strong> 111</p>
|
||||
<p class="text-sm text-gray-600 mt-4">
|
||||
Asume Tallinna Tehnikaülikooli ICT-teaduskonna hoones.
|
||||
Kui tuled ühistranspordiga, on lähimad peatused "Mustakivi" ja "Tehnikaülikool".
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Social Media & Legal Info -->
|
||||
<Section background="neutral">
|
||||
<Grid gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<h2 class="text-3xl font-bold mb-6 text-center">Jälgi meid sotsiaalmeedias</h2>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
{#each socialMedia as social}
|
||||
<a
|
||||
href={social.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-3 px-6 py-3 bg-orange-100 hover:bg-orange-200 rounded-lg transition-colors"
|
||||
>
|
||||
<svelte:component this={social.icon} size={24} style="color: var(--orange)" />
|
||||
<span class="font-semibold">{social.name}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<h2 class="text-3xl font-bold mb-6 text-center">MTÜ Lapikud</h2>
|
||||
<div class="space-y-3">
|
||||
{#each organizationInfo as info}
|
||||
<div class="flex items-start gap-4">
|
||||
<svelte:component this={info.icon} size={24} style="color: var(--orange)" />
|
||||
<div>
|
||||
<p class="font-semibold">{info.title}</p>
|
||||
<p class="text-gray-700">{info.content}</p>
|
||||
{#if info.subtitle}
|
||||
<p class="text-sm text-gray-600">{info.subtitle}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.feature-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: rgba(255, 127, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
245
src/routes/Helpdesk.svelte
Normal file
245
src/routes/Helpdesk.svelte
Normal file
@@ -0,0 +1,245 @@
|
||||
<script>
|
||||
import {
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
} from "$components";
|
||||
|
||||
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 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";
|
||||
|
||||
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€"
|
||||
}
|
||||
];
|
||||
|
||||
const whyChooseUs = [
|
||||
"Tudengisõbralikud hinnad",
|
||||
"Kiire teenindus",
|
||||
"Kogenud meeskond",
|
||||
"Paindlikud lahtiolekuajad",
|
||||
"Garantii töödele",
|
||||
"Sõbralik teenindus"
|
||||
];
|
||||
</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>
|
||||
|
||||
<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>
|
||||
|
||||
<!-- 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.
|
||||
</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>
|
||||
</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>
|
||||
|
||||
<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>
|
||||
@@ -7,6 +7,7 @@
|
||||
Container,
|
||||
} from "$components";
|
||||
import { onMount } from "svelte";
|
||||
import yaml from 'js-yaml';
|
||||
|
||||
// Import Lucide icons
|
||||
import Wrench from "lucide-svelte/icons/wrench";
|
||||
@@ -18,8 +19,9 @@
|
||||
let partners = [];
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/assets/partners/partners.json');
|
||||
partners = await response.json();
|
||||
const response = await fetch('/_data/partners.yml');
|
||||
const yamlText = await response.text();
|
||||
partners = yaml.load(yamlText);
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -38,7 +40,7 @@
|
||||
|
||||
<Section>
|
||||
<Grid gap="var(--space-5)">
|
||||
<Card variant="animated-neutral" href="/liitu-meiega">
|
||||
<Card variant="animated-neutral" href="/tudengile">
|
||||
<div class="feature-icon" style="color: var(--orange)">
|
||||
<Users size={32} strokeWidth={1.5} />
|
||||
</div>
|
||||
@@ -106,7 +108,7 @@
|
||||
{#if partner.url}
|
||||
<a href={partner.url} target="_blank" rel="noopener noreferrer" class="partner-item" title={partner.name}>
|
||||
{#if partner.image}
|
||||
<img src="/assets/partners/{partner.image}" alt={partner.name} />
|
||||
<img src={`/assets/partners_logos/${partner.image}`} alt={partner.name} />
|
||||
{:else}
|
||||
<span class="partner-name">{partner.name}</span>
|
||||
{/if}
|
||||
@@ -114,7 +116,7 @@
|
||||
{:else}
|
||||
<div class="partner-item">
|
||||
{#if partner.image}
|
||||
<img src="/assets/partners/{partner.image}" alt={partner.name} />
|
||||
<img src={`/assets/partners_logos/${partner.image}`} alt={partner.name} />
|
||||
{:else}
|
||||
<span class="partner-name">{partner.name}</span>
|
||||
{/if}
|
||||
|
||||
176
src/routes/Mentors.svelte
Normal file
176
src/routes/Mentors.svelte
Normal file
@@ -0,0 +1,176 @@
|
||||
<script>
|
||||
import {
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
} from "$components";
|
||||
import { onMount } from "svelte";
|
||||
import yaml from 'js-yaml';
|
||||
import { currentLang, getLangText } from "$lib";
|
||||
|
||||
import Mail from "lucide-svelte/icons/mail";
|
||||
import Phone from "lucide-svelte/icons/phone";
|
||||
import MessageCircle from "lucide-svelte/icons/message-circle";
|
||||
import User from "lucide-svelte/icons/user";
|
||||
|
||||
let mentors = [];
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/_data/mentors.yml');
|
||||
const yamlText = await response.text();
|
||||
mentors = yaml.load(yamlText);
|
||||
});
|
||||
|
||||
function getContactIcon(contactType) {
|
||||
const type = contactType.toLowerCase();
|
||||
if (type.includes('email') || type.includes('e-post')) return Mail;
|
||||
if (type.includes('phone') || type.includes('telefon')) return Phone;
|
||||
if (type.includes('messenger') || type.includes('discord') || type.includes('facebook')) return MessageCircle;
|
||||
return User;
|
||||
}
|
||||
|
||||
function getContactLink(method) {
|
||||
const type = method.name.toLowerCase();
|
||||
const value = method.value;
|
||||
|
||||
if (type.includes('email')) return `mailto:${value}`;
|
||||
if (type.includes('phone') || type.includes('telefon')) return `tel:${value}`;
|
||||
if (type.includes('messenger') || type.includes('facebook')) {
|
||||
return value.startsWith('http') ? value : `https://m.me/${value}`;
|
||||
}
|
||||
if (type.includes('discord')) return '#';
|
||||
|
||||
return value.startsWith('http') ? value : '#';
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl">
|
||||
<h1 class="text-5xl font-bold mb-6">Meie Mentorid</h1>
|
||||
<p class="text-2xl leading-relaxed">
|
||||
Kogenud tudengid, kes aitavad sind areneda ja jagavad oma teadmisi
|
||||
</p>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- Mentors Grid -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Tutvuge meie mentorite meeskonnaga</h2>
|
||||
<p class="text-xl text-gray-600">Igaüks neist on spetsialist omas valdkonnas ja valmis sind aitama</p>
|
||||
</div>
|
||||
|
||||
<Grid columns={2} gap="var(--space-6)">
|
||||
{#each mentors as mentor}
|
||||
<Card variant="glass" class="overflow-hidden">
|
||||
<div class="flex flex-col md:flex-row gap-6">
|
||||
<!-- Mentor Photo -->
|
||||
{#if mentor.photo}
|
||||
<div class="shrink-0">
|
||||
<img
|
||||
src={`/assets/mentors-images/optimised/${mentor.photo}`}
|
||||
alt={mentor.name}
|
||||
class="w-full md:w-48 h-48 object-cover rounded-lg"
|
||||
on:error={(e) => {
|
||||
e.target.src = '/assets/mentors-images/original/' + mentor.photo;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<!-- Mentor Info -->
|
||||
<div class="flex-1">
|
||||
<h3 class="text-2xl font-bold mb-2">{mentor.name}</h3>
|
||||
|
||||
{#if mentor.age}
|
||||
<p class="text-gray-600 mb-2">Vanus: {mentor.age}</p>
|
||||
{/if}
|
||||
|
||||
{#if mentor.speciality}
|
||||
<p class="text-lg font-semibold mb-2" style="color: var(--orange)">
|
||||
{getLangText(mentor, 'speciality', $currentLang)}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if mentor.teams && mentor.teams.length > 0}
|
||||
<div class="mb-3">
|
||||
<span class="font-semibold">Meeskonnad: </span>
|
||||
<span class="text-gray-700">{mentor.teams.join(', ')}</span>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if mentor.term}
|
||||
<p class="text-gray-600 mb-3">Ametiperiood: {mentor.term} {mentor.term === 1 ? 'aasta' : 'aastat'}</p>
|
||||
{/if}
|
||||
|
||||
{#if mentor.description}
|
||||
<p class="text-sm font-semibold mb-2" style="color: var(--orange)">
|
||||
Otsin: {getLangText(mentor, 'description', $currentLang)}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
{#if mentor.activities}
|
||||
<p class="text-gray-700 text-sm mb-4 line-clamp-3">
|
||||
{getLangText(mentor, 'activities', $currentLang)}
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<!-- Contact Methods -->
|
||||
{#if mentor.contactMethods && mentor.contactMethods.length > 0}
|
||||
<div class="flex flex-wrap gap-2 mt-4">
|
||||
{#each mentor.contactMethods as method}
|
||||
{@const IconComponent = getContactIcon(method.name)}
|
||||
<a
|
||||
href={getContactLink(method)}
|
||||
class="inline-flex items-center gap-2 px-3 py-2 bg-orange-100 hover:bg-orange-200 rounded-lg transition-colors text-sm"
|
||||
title={method.name}
|
||||
target={method.value.startsWith('http') ? '_blank' : '_self'}
|
||||
rel={method.value.startsWith('http') ? 'noopener noreferrer' : ''}
|
||||
>
|
||||
<svelte:component this={IconComponent} size={16} />
|
||||
<span class="capitalize">{method.name}</span>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Become a Mentor Section -->
|
||||
<Section background="neutral">
|
||||
<Center>
|
||||
<Card variant="glass" class="max-w-3xl">
|
||||
<h2 class="text-4xl font-bold mb-6 text-center">Taha saada mentoriks?</h2>
|
||||
<p class="text-lg text-center mb-6">
|
||||
Kui oled kogenud tudeng ja soovid jagada oma teadmisi ning aidata uusi liikmeid,
|
||||
siis võta meiega ühendust!
|
||||
</p>
|
||||
<div class="text-center">
|
||||
<a
|
||||
href="mailto:lapikud@lapikud.ee"
|
||||
class="inline-block px-8 py-3 bg-orange-500 hover:bg-orange-600 text-white font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
Võta ühendust
|
||||
</a>
|
||||
</div>
|
||||
</Card>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<style>
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
272
src/routes/OurWork.svelte
Normal file
272
src/routes/OurWork.svelte
Normal file
@@ -0,0 +1,272 @@
|
||||
<script>
|
||||
import {
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
} from "$components";
|
||||
import { onMount } from "svelte";
|
||||
import yaml from 'js-yaml';
|
||||
import { currentLang, getLangText } from "$lib";
|
||||
|
||||
import Rocket from "lucide-svelte/icons/rocket";
|
||||
import Users from "lucide-svelte/icons/users";
|
||||
import Target from "lucide-svelte/icons/target";
|
||||
import Briefcase from "lucide-svelte/icons/briefcase";
|
||||
import Code from "lucide-svelte/icons/code";
|
||||
import Smartphone from "lucide-svelte/icons/smartphone";
|
||||
import Globe from "lucide-svelte/icons/globe";
|
||||
import ArrowRight from "lucide-svelte/icons/arrow-right";
|
||||
import ExternalLink from "lucide-svelte/icons/external-link";
|
||||
|
||||
let projects = [];
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/_data/ourwork.yml');
|
||||
const yamlText = await response.text();
|
||||
projects = yaml.load(yamlText).filter(p => p.title);
|
||||
});
|
||||
|
||||
const services = [
|
||||
{
|
||||
icon: Globe,
|
||||
title: "Veebilahendused",
|
||||
description: "Kaasaegsed ja responsiivsed veebilehed, mis toimivad igal seadmel"
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "Mobiilirakendused",
|
||||
description: "iOS ja Android rakendused kasutajasõbralike liidestega"
|
||||
},
|
||||
{
|
||||
icon: Code,
|
||||
title: "Tarkvara arendus",
|
||||
description: "Kohandatud tarkvaralahendused teie ärivajadusteks"
|
||||
},
|
||||
{
|
||||
icon: Briefcase,
|
||||
title: "Konsultatsioon",
|
||||
description: "IT-nõustamine ja projekti planeerimine"
|
||||
}
|
||||
];
|
||||
|
||||
const whyUs = [
|
||||
{
|
||||
icon: Users,
|
||||
title: "Motiveeritud meeskond",
|
||||
description: "Meie tudengid on andekad, õhevil ja tahavad tõestada oma oskuseid"
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Kvaliteetne tulemus",
|
||||
description: "Võtame iga projekti tõsiselt ja pingutame parima tulemuse nimel"
|
||||
},
|
||||
{
|
||||
icon: Rocket,
|
||||
title: "Kaasaegsed tehnoloogiad",
|
||||
description: "Kasutame uusimaid tööriistu ja tehnoloogiaid"
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl">
|
||||
<h1 class="text-5xl font-bold mb-6">Ettevõttele</h1>
|
||||
<p class="text-2xl leading-relaxed">
|
||||
Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.
|
||||
</p>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Mida me pakume?</h2>
|
||||
<p class="text-xl text-gray-600">Laia valik IT-teenuseid teie ärivajaduste täitmiseks</p>
|
||||
</div>
|
||||
|
||||
<Grid columns={2} 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">{service.description}</p>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<Section background="neutral">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Miks meiega koostööd teha?</h2>
|
||||
</div>
|
||||
|
||||
<Grid columns={3} gap="var(--space-5)">
|
||||
{#each whyUs as item}
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<svelte:component this={item.icon} size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">{item.title}</h3>
|
||||
<p class="text-gray-600">{item.description}</p>
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<Section>
|
||||
<Grid gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<h2 class="text-4xl font-bold mb-6">Kuidas töötame?</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">Esimene kohtumine</strong><br/>
|
||||
Arutame teie ideed, vajadusi ja eesmärke. Mõistame, mida soovite saavutada.
|
||||
</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">Planeerimine</strong><br/>
|
||||
Koostame projekti plaani, hinnapakkumise ja ajakava. Lepime kokku detailides.
|
||||
</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">Arendus</strong><br/>
|
||||
Meie meeskond töötab teie projekti kallal. Hoiame teid regulaarselt kursis.
|
||||
</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 valmis toote üle koos dokumentatsiooni ja juhendamisega.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">5.</div>
|
||||
<div>
|
||||
<strong class="text-lg">Tugi</strong><br/>
|
||||
Pakume vajadusel jätkuvat tuge ja hooldust.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<h2 class="text-4xl font-bold mb-6">Millal meie sobime?</h2>
|
||||
<div class="space-y-4 text-lg">
|
||||
<p>
|
||||
<strong>Startup ja väikeettevõtted:</strong> Meie teenused on hinnaefektiivsed ja paindlikud,
|
||||
sobides hästi piiratud eelarvega projektidele.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Prototüüpide arendus:</strong> Vajate kiiresti töökorras prototüüpi?
|
||||
Meie agile meeskond suudab kiiresti teie idee ellu viia.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Lõputööd ja projektid:</strong> Teie projekt võib saada meie tudengite
|
||||
lõputöö teemaks, mis tagab motiveeritud ja pühendunud meeskonna.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Pikaajalised projektid:</strong> Pakume ka pikemaajalisi koostöövõimalusi
|
||||
keerulisemate süsteemide arendamiseks.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Meie tehtud tööd</h2>
|
||||
<p class="text-xl text-gray-600">Vaata, mida oleme varem loonud</p>
|
||||
</div>
|
||||
|
||||
<Grid columns={3} gap="var(--space-5)">
|
||||
{#each projects as project}
|
||||
<Card variant="animated-neutral">
|
||||
{#if project.photo}
|
||||
<div class="mb-4 overflow-hidden rounded-lg">
|
||||
<img
|
||||
src={`/assets/ourwork-images/optimised/${project.photo}`}
|
||||
alt={getLangText(project, 'title', $currentLang)}
|
||||
class="w-full h-48 object-cover hover:scale-105 transition-transform duration-300"
|
||||
on:error={(e) => {
|
||||
e.target.src = '/assets/ourwork-images/original/' + project.photo;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<h3 class="text-xl font-bold mb-2">{getLangText(project, 'title', $currentLang)}</h3>
|
||||
|
||||
{#if project.description}
|
||||
<p class="text-gray-600 text-sm mb-4">{getLangText(project, 'description', $currentLang)}</p>
|
||||
{/if}
|
||||
|
||||
{#if project.url}
|
||||
<a
|
||||
href={project.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="inline-flex items-center gap-2 text-orange-500 hover:text-orange-600 font-semibold"
|
||||
>
|
||||
Vaata projekti <ExternalLink size={16} />
|
||||
</a>
|
||||
{/if}
|
||||
</Card>
|
||||
{/each}
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<Section background="orange">
|
||||
<Center>
|
||||
<div class="text-center max-w-4xl text-white">
|
||||
<h2 class="text-4xl font-bold mb-6">Alustame koostööd?</h2>
|
||||
<p class="text-xl mb-8">
|
||||
Võta ühendust ja arutame, kuidas saame sinu ideed ellu viia!
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-4 justify-center">
|
||||
<a
|
||||
href="mailto:lapikud@lapikud.ee"
|
||||
class="inline-flex items-center gap-2 px-8 py-3 bg-white text-orange-500 hover:bg-gray-100 font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
Saada e-kiri <ArrowRight size={20} />
|
||||
</a>
|
||||
<a
|
||||
href="/contact"
|
||||
class="inline-flex items-center gap-2 px-8 py-3 bg-transparent border-2 border-white hover:bg-white hover:text-orange-500 font-semibold rounded-lg transition-colors"
|
||||
>
|
||||
Kontaktandmed
|
||||
</a>
|
||||
</div>
|
||||
</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>
|
||||
210
src/routes/Student.svelte
Normal file
210
src/routes/Student.svelte
Normal file
@@ -0,0 +1,210 @@
|
||||
<script>
|
||||
import {
|
||||
Section,
|
||||
Grid,
|
||||
Card,
|
||||
Center,
|
||||
Container,
|
||||
} from "$components";
|
||||
import { onMount } from "svelte";
|
||||
import yaml from 'js-yaml';
|
||||
|
||||
import Users from "lucide-svelte/icons/users";
|
||||
import GraduationCap from "lucide-svelte/icons/graduation-cap";
|
||||
import Code from "lucide-svelte/icons/code";
|
||||
import Calendar from "lucide-svelte/icons/calendar";
|
||||
import Lightbulb from "lucide-svelte/icons/lightbulb";
|
||||
import Trophy from "lucide-svelte/icons/trophy";
|
||||
|
||||
let members = { junior: [], senior: [] };
|
||||
|
||||
onMount(async () => {
|
||||
const response = await fetch('/_data/members.yml');
|
||||
const yamlText = await response.text();
|
||||
members = 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">Liitu Meiega!</h1>
|
||||
<p class="text-2xl leading-relaxed">
|
||||
Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.
|
||||
</p>
|
||||
</div>
|
||||
</Center>
|
||||
</Section>
|
||||
|
||||
<!-- Benefits Section -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Miks Lapikutega liituda?</h2>
|
||||
<p class="text-xl text-gray-600">Siin on mõned põhjused, miks meie kogukond on suurepärane koht arenguks</p>
|
||||
</div>
|
||||
|
||||
<Grid columns={3} gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Code size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Praktilised projektid</h3>
|
||||
<p class="text-gray-600">
|
||||
Osale reaalsetel tarkvaraarenduse projektidel. Omanda kogemust, mida ei õpeta ühelgi kursusel.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Users size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Tugev kogukond</h3>
|
||||
<p class="text-gray-600">
|
||||
Liitu sõbralike ja ambitsioonikate tudengitega. Leia oma meeskond ja loo püsivaid sõprussuhteid.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<GraduationCap size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Mentorlus</h3>
|
||||
<p class="text-gray-600">
|
||||
Saa juhendamist kogenud tudengitelt ja arendajatelt. Õpi parimate käest ja arene kiiremini.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Calendar size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Üritused</h3>
|
||||
<p class="text-gray-600">
|
||||
Osale huvitavatel üritustel, hackathonidel ja koolitustel. Laienda oma silmaringi ja võrgustikku.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Lightbulb size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Lõputööd</h3>
|
||||
<p class="text-gray-600">
|
||||
Meie projektidest kasvavad välja huvitavad lõputööd. Leia oma teema ja juhendaja meie seast.
|
||||
</p>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
||||
<Trophy size={48} strokeWidth={1.5} />
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold mb-3">Töökogemus</h3>
|
||||
<p class="text-gray-600">
|
||||
Aktiivsed liikmed saavad võimaluse teenida oma esimest töökogemust ja palka meie projektides.
|
||||
</p>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- What You'll Do Section -->
|
||||
<Section background="neutral">
|
||||
<Grid gap="var(--space-5)">
|
||||
<Card variant="glass">
|
||||
<h2 class="text-4xl font-bold mb-4">Mida saad teha?</h2>
|
||||
<div class="space-y-4 text-lg">
|
||||
<p>
|
||||
<strong>Tarkvara arendus:</strong> Töötad reaalsetel projektidel kasutades kaasaegseid tehnoloogiaid.
|
||||
Õpid koodi kirjutamist meeskonnas, versioonihaldustööriistade kasutamist ja tarkvara kvaliteedi tagamist.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Helpdesk:</strong> Aita tudengeid ja õppejõude IT-probleemide lahendamisel.
|
||||
Arenda oma tehnilisi oskuseid ja õpi suhtlemist klientidega.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Projektijuhtimine:</strong> Võta vastutus projekti koordineerimise eest.
|
||||
Õpi planeerimist, meeskonna juhtimist ja suhtlemist klientidega.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Turundus ja disain:</strong> Aita meie projektide ja ürituste turundamisel.
|
||||
Loo sisu sotsiaalmeedias, disaini materjale ja jälgi tulemusi.
|
||||
</p>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card variant="glass">
|
||||
<h2 class="text-4xl font-bold mb-4">Kuidas liituda?</h2>
|
||||
<div class="space-y-4 text-lg">
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">1.</div>
|
||||
<div>
|
||||
<strong>Võta ühendust</strong><br/>
|
||||
Kirjuta meile e-posti aadressil <a href="mailto:lapikud@lapikud.ee" class="text-orange-500 hover:underline">lapikud@lapikud.ee</a>
|
||||
või tule meie kontorisse Akadeemia tee 5.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">2.</div>
|
||||
<div>
|
||||
<strong>Tutvumine</strong><br/>
|
||||
Kohtu meie meeskonnaga, tutvusta ennast ja räägi oma huvidest. Näitame sulle meie projekte ja võimalusi.
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-start gap-4">
|
||||
<div class="text-3xl font-bold" style="color: var(--orange)">3.</div>
|
||||
<div>
|
||||
<strong>Alusta tööd</strong><br/>
|
||||
Leia endale sobiv projekt või meeskond ja hakka tegutsema! Meie mentorid aitavad sind iga sammu juures.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</Grid>
|
||||
</Section>
|
||||
|
||||
<!-- Members Section -->
|
||||
<Section>
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-4xl font-bold mb-4">Meie liikmed</h2>
|
||||
<p class="text-xl text-gray-600">Suurepärased inimesed, kes moodustavad meie kogukonna</p>
|
||||
</div>
|
||||
|
||||
{#if members.senior && members.senior.length > 0}
|
||||
<div class="mb-12">
|
||||
<h3 class="text-3xl font-bold mb-6 text-center">Senior liikmed</h3>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{#each members.senior as member}
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
|
||||
<p class="text-center font-medium">{member}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if members.junior && members.junior.length > 0}
|
||||
<div>
|
||||
<h3 class="text-3xl font-bold mb-6 text-center">Junior liikmed</h3>
|
||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{#each members.junior as member}
|
||||
<div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
|
||||
<p class="text-center font-medium">{member}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</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>
|
||||
@@ -2,7 +2,72 @@
|
||||
// examples: '/page', '/page/:id'
|
||||
|
||||
import Home from './Home.svelte'
|
||||
import Student from './Student.svelte'
|
||||
import Mentors from './Mentors.svelte'
|
||||
import Helpdesk from './Helpdesk.svelte'
|
||||
import OurWork from './OurWork.svelte'
|
||||
import AboutUs from './AboutUs.svelte'
|
||||
import Contact from './Contact.svelte'
|
||||
|
||||
// Route mapping for language switching
|
||||
export const routeMap = {
|
||||
// Home
|
||||
'/': { est: '/', en: '/' },
|
||||
|
||||
// Student/Tudengile
|
||||
'/tudengile': { est: '/tudengile', en: '/student' },
|
||||
'/student': { est: '/tudengile', en: '/student' },
|
||||
|
||||
// Mentors/Mentorid
|
||||
'/mentorid': { est: '/mentorid', en: '/mentors' },
|
||||
'/mentors': { est: '/mentorid', en: '/mentors' },
|
||||
|
||||
// Helpdesk
|
||||
'/helpdesk': { est: '/helpdesk', en: '/helpdesk' },
|
||||
|
||||
// OurWork/Ettevõttele
|
||||
'/ettevottele': { est: '/ettevottele', en: '/ourwork' },
|
||||
'/ourwork': { est: '/ettevottele', en: '/ourwork' },
|
||||
|
||||
// AboutUs/Lapikutest
|
||||
'/lapikutest': { est: '/lapikutest', en: '/aboutus' },
|
||||
'/aboutus': { est: '/lapikutest', en: '/aboutus' },
|
||||
|
||||
// Contact/Kontakt
|
||||
'/kontakt': { est: '/kontakt', en: '/contact' },
|
||||
'/contact': { est: '/kontakt', en: '/contact' },
|
||||
};
|
||||
|
||||
// Detect language from route
|
||||
export function getLanguageFromRoute(path) {
|
||||
const estRoutes = ['/tudengile', '/mentorid', '/ettevottele', '/lapikutest', '/kontakt'];
|
||||
const enRoutes = ['/student', '/mentors', '/ourwork', '/aboutus', '/contact'];
|
||||
|
||||
if (estRoutes.includes(path)) return 'est';
|
||||
if (enRoutes.includes(path)) return 'en';
|
||||
|
||||
// Default to Estonian
|
||||
return 'est';
|
||||
}
|
||||
|
||||
// Get translated route
|
||||
export function getTranslatedRoute(currentPath, targetLang) {
|
||||
const mapping = routeMap[currentPath];
|
||||
if (!mapping) return currentPath;
|
||||
return mapping[targetLang] || currentPath;
|
||||
}
|
||||
|
||||
export const routes = {
|
||||
'/': Home,
|
||||
'/tudengile': Student,
|
||||
'/student': Student,
|
||||
'/mentorid': Mentors,
|
||||
'/mentors': Mentors,
|
||||
'/helpdesk': Helpdesk,
|
||||
'/ettevottele': OurWork,
|
||||
'/ourwork': OurWork,
|
||||
'/lapikutest': AboutUs,
|
||||
'/aboutus': AboutUs,
|
||||
'/kontakt': Contact,
|
||||
'/contact': Contact,
|
||||
}
|
||||
Reference in New Issue
Block a user