mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-08-08 21:29:14 +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>
|
||||
Reference in New Issue
Block a user