mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-08-08 16:29:14 +00:00
for student page done
This commit is contained in:
Henri
@@ -1,81 +1,104 @@
|
|||||||
{
|
{
|
||||||
"hero": {
|
"hero": {
|
||||||
"title": "Join Us!",
|
"bgWord": "Lapikud",
|
||||||
"description": "Develop your skills, make great friends, and gain practical experience through real projects."
|
"tagline": "TalTech IT student organization",
|
||||||
|
"title": "IT student?",
|
||||||
|
"emphasis": "You have a place here.",
|
||||||
|
"description": "Lapikud is an organization with three teams where you can do real work — build software, help people with tech, or organize events. Joining does not commit you to anything.",
|
||||||
|
"cta": "See how to join",
|
||||||
|
"aside": "or first read what we do ↓"
|
||||||
},
|
},
|
||||||
"benefits": {
|
"teams": {
|
||||||
"title": "Why join Lapikud?",
|
"kicker": "Three teams",
|
||||||
"subtitle": "Here are a few reasons why our community is a great place to grow",
|
"title": "Choose what truly fits you.",
|
||||||
|
"subtitle": "Each team has its own focus. You do not need to do everything — join the team that matches you.",
|
||||||
"items": [
|
"items": [
|
||||||
{
|
{
|
||||||
"title": "Practical projects",
|
"number": "01",
|
||||||
"description": "Work on real software projects and gain experience you don't get from classes alone."
|
"title": "Software",
|
||||||
|
"short": "Real projects, real team.",
|
||||||
|
"about": [
|
||||||
|
"The software team builds things people actually use. We work on external projects like TipLAN, do code reviews, and use the same workflow as in real jobs — Git, PRs, and architecture discussions.",
|
||||||
|
"This is where your CV gets meaningful content. You do not need to be experienced — senior members will help you get started."
|
||||||
|
],
|
||||||
|
"tags": ["Git & collaboration", "Code review", "Real projects", "Hackathons"],
|
||||||
|
"whatTitle": "What we do",
|
||||||
|
"what": [
|
||||||
|
"Build new features for external projects",
|
||||||
|
"Do code reviews and learn from each other",
|
||||||
|
"Discuss architecture and technical debt",
|
||||||
|
"Participate in hackathons and external events"
|
||||||
|
],
|
||||||
|
"eventsTitle": "Recurring events",
|
||||||
|
"events": [
|
||||||
|
"Weekly development sessions",
|
||||||
|
"Demo nights — show what you built",
|
||||||
|
"Workshops for new members"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Strong community",
|
"number": "02",
|
||||||
"description": "Join friendly and ambitious students, find your team, and build lasting friendships."
|
"title": "Helpdesk",
|
||||||
|
"short": "IT support for people who need it.",
|
||||||
|
"about": [
|
||||||
|
"Helpdesk covers what lectures do not teach — diagnostics, hardware, operating system installation, and workstation setup. You work with real issues, not simulations.",
|
||||||
|
"We also run a public repair event with Remondiköök, where Tallinn residents can bring broken devices."
|
||||||
|
],
|
||||||
|
"tags": ["Diagnostics", "Hardware", "IT support", "Remondiköök"],
|
||||||
|
"whatTitle": "What we do",
|
||||||
|
"what": [
|
||||||
|
"Diagnose and repair computers and other devices",
|
||||||
|
"Set up workstations and install software",
|
||||||
|
"Document solutions in a knowledge base",
|
||||||
|
"Support events from the IT side"
|
||||||
|
],
|
||||||
|
"eventsTitle": "Recurring events",
|
||||||
|
"events": [
|
||||||
|
"Open support hours on campus",
|
||||||
|
"Remondiköök — public repair event",
|
||||||
|
"IT questions Q&A sessions"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Mentorship",
|
"number": "03",
|
||||||
"description": "Get guidance from experienced students and developers, and improve faster."
|
"title": "Culture",
|
||||||
},
|
"short": "A community does not maintain itself.",
|
||||||
{
|
"about": [
|
||||||
"title": "Events",
|
"The culture team handles everything that keeps Lapikud alive outside of code. We plan events, manage social media channels, design materials in Canva and Figma, and organize larger events like ASI Karikas.",
|
||||||
"description": "Take part in exciting events, hackathons, and trainings to expand your network."
|
"If you enjoy how organizations operate — communication, logistics, visuals — this is your team."
|
||||||
},
|
],
|
||||||
{
|
"tags": ["Event organizing", "Social media", "Figma & Canva"],
|
||||||
"title": "Thesis opportunities",
|
"whatTitle": "What we do",
|
||||||
"description": "Interesting thesis topics grow from our projects. Find your topic and supervisor with us."
|
"what": [
|
||||||
},
|
"Plan and run team and public events",
|
||||||
{
|
"Manage social media channels",
|
||||||
"title": "Work experience",
|
"Design materials in Canva and Figma",
|
||||||
"description": "Active members can gain their first paid work experience through our projects."
|
"Support onboarding for new members"
|
||||||
}
|
],
|
||||||
]
|
"eventsTitle": "Recurring events",
|
||||||
},
|
"events": [
|
||||||
"activities": {
|
"Community evenings and team days",
|
||||||
"title": "What can you do?",
|
"ASI Karikas and other major events",
|
||||||
"items": [
|
"Public inspiration sessions"
|
||||||
{
|
]
|
||||||
"title": "Software development:",
|
|
||||||
"description": "Work on real projects with modern technologies and learn team collaboration and quality practices."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Helpdesk:",
|
|
||||||
"description": "Help students and lecturers solve IT issues while improving your technical and communication skills."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Project management:",
|
|
||||||
"description": "Take responsibility for project coordination and learn planning, leadership, and client communication."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Marketing and design:",
|
|
||||||
"description": "Support project and event promotion, create social content, design materials, and track results."
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"join": {
|
"join": {
|
||||||
"title": "How to join?",
|
"bgWord": "Join",
|
||||||
"steps": [
|
"kicker": "Joining",
|
||||||
{
|
"title": "Ready to join?",
|
||||||
"title": "Get in touch",
|
"titleLine2": "Fill in the form.",
|
||||||
"description": "Write to us at",
|
"description": "No prior experience is required in any team, even if it can be helpful. We try to find tasks suitable for every level, and if needed, we will squeeze some knowledge out of our own brains for you — meaning we will teach you how to do things.",
|
||||||
"descriptionEnd": "or visit our office at Akadeemia tee 5."
|
"cta": "Fill in the form →",
|
||||||
},
|
"contactPrefix": "or write to",
|
||||||
{
|
"email": "lapikud@lapikud.ee"
|
||||||
"title": "Introduction",
|
|
||||||
"description": "Meet our team, introduce yourself, and share your interests. We'll show you our projects and opportunities."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Start contributing",
|
|
||||||
"description": "Find a suitable project or team and get started. Our mentors will support you at every step."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"members": {
|
"members": {
|
||||||
"title": "Our members",
|
"kicker": "Our people",
|
||||||
"subtitle": "Great people who make up our community",
|
"title": "Members",
|
||||||
"senior": "Senior members",
|
"senior": "Senior members",
|
||||||
"junior": "Junior members"
|
"junior": "Junior members",
|
||||||
|
"graduates": "Alumni"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,81 +1,99 @@
|
|||||||
{
|
{
|
||||||
"hero": {
|
"hero": {
|
||||||
"title": "Liitu Meiega!",
|
"bgWord": "Lapikud",
|
||||||
"description": "Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest."
|
"tagline": "TalTech IT tudengite organisatsioon",
|
||||||
|
"title": "IT-tudeng?",
|
||||||
|
"emphasis": "Sul on koht siin.",
|
||||||
|
"description": "Lapikud on kolmest tiimist koosnev organisatsioon, kus saad päriselt midagi teha — arendada tarkvara, aidata inimesi tehnikaga või korraldada üritusi. Liitumine ei kohusta millegagi.",
|
||||||
|
"cta": "Vaata, kuidas liituda",
|
||||||
|
"aside": "või loe esmalt, mida me teeme ↓"
|
||||||
},
|
},
|
||||||
"benefits": {
|
"teams": {
|
||||||
"title": "Miks Lapikutega liituda?",
|
"kicker": "Kolm tiimi",
|
||||||
"subtitle": "Siin on mõned põhjused, miks meie kogukond on suurepärane koht arenguks",
|
"title": "Vali, mis sind päriselt kõnetab.",
|
||||||
|
"subtitle": "Igal tiimil on oma fookus. Sa ei pea kõigega tegelema — liitud tiimiga, mis sobib.",
|
||||||
"items": [
|
"items": [
|
||||||
{
|
{
|
||||||
"title": "Praktilised projektid",
|
"title": "Tarkvara",
|
||||||
"description": "Osale reaalsetel tarkvaraarenduse projektidel. Omanda kogemust, mida ei õpeta ühelgi kursusel."
|
"short": "Päris projektid, päris meeskond.",
|
||||||
|
"about": [
|
||||||
|
"Tarkvaratiim arendab päris kasutatavat tarkvara: veebilehti, mänge ja muid süsteeme (nt TipiLAN, mikrokontrollerid). Töötame ka välisprojektidega ning kasutame päris arendustöö töövoogu (Git, PR-id, code review).",
|
||||||
|
"Siin saad praktilise kogemuse tiimitööst ja arendusest, arendades nii tehnilisi kui ka suhtlusoskusi. Uued liikmed saavad tuge ja koolitusi, et sisse elada."
|
||||||
|
],
|
||||||
|
"tags": ["Git & koostöö", "Code review", "Päris projektid", "Hackathonid"],
|
||||||
|
"whatTitle": "Mida tehakse",
|
||||||
|
"what": [
|
||||||
|
"Arendatakse veebilehti ja rakendusi (nt TipiLAN)",
|
||||||
|
"Töötatakse välisprojektide ja tellimustega",
|
||||||
|
"Tehakse koodiülevaatusi ja arutatakse arhitektuuri",
|
||||||
|
"Arendatakse mikrokontrollerite ja mängude projekte"
|
||||||
|
],
|
||||||
|
"eventsTitle": "Korduvad üritused",
|
||||||
|
"events": [
|
||||||
|
"Iganädalased arendussessioonid",
|
||||||
|
"Demoõhtud ja projektide esitlused",
|
||||||
|
"Töötoad ja uute liikmete koolitused"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Tugev kogukond",
|
"title": "Helpdesk",
|
||||||
"description": "Liitu sõbralike ja ambitsioonikate tudengitega. Leia oma meeskond ja loo püsivaid sõprussuhteid."
|
"short": "IT-tugi inimestele, kes seda vajavad.",
|
||||||
|
"about": [
|
||||||
|
"Helpdesk tegeleb arvutite ja muu tehnika hoolduse ning parandamisega — diagnostika, riistvara remont, jootmine, puhastus ja tarkvara installimine.",
|
||||||
|
"Lisaks pakume tudengisõbralikku IT-abi ning korraldame Remondikohviku, kus inimesed saavad oma katkise tehnika parandada koos meie juhendamisega."
|
||||||
|
],
|
||||||
|
"tags": ["Diagnostika", "Riistvara", "IT-tugi", "Remondiköök"],
|
||||||
|
"whatTitle": "Mida tehakse",
|
||||||
|
"what": [
|
||||||
|
"Diagnoositakse ja parandatakse arvuteid ja seadmeid",
|
||||||
|
"Installitakse ja seadistatakse operatsioonisüsteeme",
|
||||||
|
"Teostatakse riistvara hooldust (jootmine, puhastus)",
|
||||||
|
"Hallatakse IT-tuge ja kasutajate probleeme"
|
||||||
|
],
|
||||||
|
"eventsTitle": "Korduvad üritused",
|
||||||
|
"events": [
|
||||||
|
"Ava-abi tunnid campus'es",
|
||||||
|
"Remondiköök – avalik remondiüritus",
|
||||||
|
"IT-küsimuste ja abi sessioonid"
|
||||||
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"title": "Mentorlus",
|
"title": "Kultuur",
|
||||||
"description": "Saa juhendamist kogenud tudengitelt ja arendajatelt. Õpi parimate käest ja arene kiiremini."
|
"short": "Kogukond ei püsi ise üleval.",
|
||||||
},
|
"about": [
|
||||||
{
|
"Kultuuritiim ühendab ürituste korraldamise ja turundustegevuse. Meie eesmärk on hoida Lapikute kogukonna elu aktiivsena ka väljaspool õppetööd, et peale pikka ja teadmisterohket koolipäeva saaks koos mõnusalt aega veeta.",
|
||||||
"title": "Üritused",
|
"Kultuuritiim tegeleb nii väiksemate kui ka suurürituste korraldamise ja nende turundamisega ning aitab hoida Lapikute nähtavust ja aktiivsust."
|
||||||
"description": "Osale huvitavatel üritustel, hackathonidel ja koolitustel. Laienda oma silmaringi ja võrgustikku."
|
],
|
||||||
},
|
"tags": ["Ürituste korraldus", "Turundus", "Sotsiaalmeedia", "Figma & Canva"],
|
||||||
{
|
"whatTitle": "Mida tehakse",
|
||||||
"title": "Lõputööd",
|
"what": [
|
||||||
"description": "Meie projektidest kasvavad välja huvitavad lõputööd. Leia oma teema ja juhendaja meie seast."
|
"Planeeritakse ja korraldatakse üritusi",
|
||||||
},
|
"Hallatakse turundust ja sotsiaalmeediat",
|
||||||
{
|
"Disainitakse visuaale ja materjale"
|
||||||
"title": "Töökogemus",
|
],
|
||||||
"description": "Aktiivsed liikmed saavad võimaluse teenida oma esimest töökogemust ja palka meie projektides."
|
"eventsTitle": "Näited üritustest",
|
||||||
}
|
"events": [
|
||||||
]
|
"LAN-id ja mänguõhtud",
|
||||||
},
|
"Filmi- ja seriaalide ühisvaatamised",
|
||||||
"activities": {
|
"Väljasõidud ja avastusretked",
|
||||||
"title": "Mida saad teha?",
|
"Temaatilised peod"
|
||||||
"items": [
|
]
|
||||||
{
|
|
||||||
"title": "Tarkvara arendus:",
|
|
||||||
"description": "Töötad reaalsetel projektidel kasutades kaasaegseid tehnoloogiaid. Õpid koodi kirjutamist meeskonnas, versioonihaldustööriistade kasutamist ja tarkvara kvaliteedi tagamist."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Helpdesk:",
|
|
||||||
"description": "Aita tudengeid ja õppejõude IT-probleemide lahendamisel. Arenda oma tehnilisi oskuseid ja õpi suhtlemist klientidega."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Projektijuhtimine:",
|
|
||||||
"description": "Võta vastutus projekti koordineerimise eest. Õpi planeerimist, meeskonna juhtimist ja suhtlemist klientidega."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Turundus ja disain:",
|
|
||||||
"description": "Aita meie projektide ja ürituste turundamisel. Loo sisu sotsiaalmeedias, disaini materjale ja jälgi tulemusi."
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"join": {
|
"join": {
|
||||||
"title": "Kuidas liituda?",
|
"bgWord": "Liitu",
|
||||||
"steps": [
|
"kicker": "Liitumine",
|
||||||
{
|
"title": "Valmis liituma?",
|
||||||
"title": "Võta ühendust",
|
"titleLine2": "Täida ankeet.",
|
||||||
"description": "Kirjuta meile e-posti aadressil",
|
"description": "Üheski tiimis pole varasemat kogemust vaja, isegi kui see tuleks kasuks. Üritame leida igale tasemele vastavaid ülesandeid ning vajadusel pigistame teie jaoks enda ajudest ka tarkust välja ehk õpetame, kuidas midagi teha.",
|
||||||
"descriptionEnd": "või tule meie kontorisse Akadeemia tee 5."
|
"cta": "Täida ankeet →"
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Tutvumine",
|
|
||||||
"description": "Kohtu meie meeskonnaga, tutvusta ennast ja räägi oma huvidest. Näitame sulle meie projekte ja võimalusi."
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"title": "Alusta tööd",
|
|
||||||
"description": "Leia endale sobiv projekt või meeskond ja hakka tegutsema! Meie mentorid aitavad sind iga sammu juures."
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
"members": {
|
"members": {
|
||||||
"title": "Meie liikmed",
|
"kicker": "Meie inimesed",
|
||||||
"subtitle": "Suurepärased inimesed, kes moodustavad meie kogukonna",
|
"title": "Liikmed",
|
||||||
"senior": "Vanemliikmed",
|
"senior": "Vanemliikmed",
|
||||||
"junior": "Noorliikmed"
|
"junior": "Noorliikmed",
|
||||||
|
"graduates": "Vilistlased"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,155 +2,180 @@
|
|||||||
import {
|
import {
|
||||||
Section,
|
Section,
|
||||||
Grid,
|
Grid,
|
||||||
Card,
|
Button,
|
||||||
Center,
|
|
||||||
} from "$components";
|
} from "$components";
|
||||||
import { onMount, onDestroy } from "svelte";
|
import { onMount, onDestroy } from "svelte";
|
||||||
import yaml from 'js-yaml';
|
import yaml from 'js-yaml';
|
||||||
import { createPageTextStore } from "$lib";
|
import { createPageTextStore } from "$lib";
|
||||||
|
|
||||||
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: [] };
|
let members = { junior: [], senior: [] };
|
||||||
const text = createPageTextStore("Student");
|
const text = createPageTextStore("Student");
|
||||||
|
const joinFormUrl = "https://forms.google.com/#LINK";
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
const response = await fetch('/_data/members.yml');
|
try {
|
||||||
const yamlText = await response.text();
|
const response = await fetch('/_data/members.yml');
|
||||||
members = yaml.load(yamlText);
|
const yamlText = await response.text();
|
||||||
|
members = yaml.load(yamlText) || { junior: [], senior: [] };
|
||||||
|
} catch {
|
||||||
|
members = { junior: [], senior: [] };
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
onDestroy(() => {
|
onDestroy(() => {
|
||||||
text.destroy();
|
text.destroy();
|
||||||
});
|
});
|
||||||
|
|
||||||
$: benefits = [
|
const scrollToJoin = () => {
|
||||||
{ icon: Code, ...($text["benefits"]?.items?.[0] || { title: "Praktilised projektid", description: "Osale reaalsetel tarkvaraarenduse projektidel. Omanda kogemust, mida ei õpeta ühelgi kursusel." }) },
|
document.getElementById("liitu")?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
{ icon: Users, ...($text["benefits"]?.items?.[1] || { title: "Tugev kogukond", description: "Liitu sõbralike ja ambitsioonikate tudengitega. Leia oma meeskond ja loo püsivaid sõprussuhteid." }) },
|
};
|
||||||
{ icon: GraduationCap, ...($text["benefits"]?.items?.[2] || { title: "Mentorlus", description: "Saa juhendamist kogenud tudengitelt ja arendajatelt. Õpi parimate käest ja arene kiiremini." }) },
|
|
||||||
{ icon: Calendar, ...($text["benefits"]?.items?.[3] || { title: "Üritused", description: "Osale huvitavatel üritustel, hackathonidel ja koolitustel. Laienda oma silmaringi ja võrgustikku." }) },
|
const openJoinForm = () => {
|
||||||
{ icon: Lightbulb, ...($text["benefits"]?.items?.[4] || { title: "Lõputööd", description: "Meie projektidest kasvavad välja huvitavad lõputööd. Leia oma teema ja juhendaja meie seast." }) },
|
window.open(joinFormUrl, "_blank", "noopener,noreferrer");
|
||||||
{ icon: Trophy, ...($text["benefits"]?.items?.[5] || { title: "Töökogemus", description: "Aktiivsed liikmed saavad võimaluse teenida oma esimest töökogemust ja palka meie projektides." }) },
|
};
|
||||||
|
|
||||||
|
$: teamSections = ($text["teams"]?.items || []).map((team, index) => ({
|
||||||
|
...team,
|
||||||
|
number: team.number || `0${index + 1}`,
|
||||||
|
}));
|
||||||
|
|
||||||
|
$: memberSections = [
|
||||||
|
{ key: "junior", label: $text["members"]?.junior || "" },
|
||||||
|
{ key: "senior", label: $text["members"]?.senior || "" },
|
||||||
|
{ key: "graduates", label: $text["members"]?.graduates || "" },
|
||||||
];
|
];
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="safe-area-navbar">
|
<div class="safe-area-navbar">
|
||||||
<!-- Hero Section -->
|
<Section class="overflow-hidden bg-[#0f0f0f]" padding="none" fullWidth={true} contentClass="relative !px-0">
|
||||||
<Section background="orange">
|
<div class="relative overflow-hidden py-[clamp(3rem,8vw,6rem)]">
|
||||||
<Center>
|
<div class="relative z-10 mx-auto w-full max-w-(--page-max-width) px-(--page-padding-inline)">
|
||||||
<div class="text-center max-w-4xl">
|
<div class="relative z-10 w-full max-w-3xl">
|
||||||
<h1 class="text-5xl font-bold mb-6">{$text["hero"]?.title || "Liitu Meiega!"}</h1>
|
<h1 class="mb-6 text-[clamp(2.5rem,7vw,4.75rem)] leading-[1.03] font-medium text-white">
|
||||||
<p class="text-2xl leading-relaxed">
|
{$text["hero"]?.title || ""}<br />
|
||||||
{$text["hero"]?.description || "Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest."}
|
<span class="italic text-orange-500">{$text["hero"]?.emphasis || ""}</span>
|
||||||
|
</h1>
|
||||||
|
<p class="mb-10 max-w-2xl text-base leading-8 text-white/55">
|
||||||
|
{$text["hero"]?.description || ""}
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap items-center gap-4">
|
||||||
|
<Button onClick={scrollToJoin} class="border-transparent bg-orange-500 px-8 py-3 text-sm font-semibold text-white hover:opacity-90">
|
||||||
|
{$text["hero"]?.cta || ""}
|
||||||
|
</Button>
|
||||||
|
<span class="text-sm text-white/40">{$text["hero"]?.aside || ""}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pointer-events-none select-none absolute right-0 bottom-0 translate-y-1/4 text-[clamp(8rem,20vw,14rem)] leading-none italic text-white/4">
|
||||||
|
{$text["hero"]?.bgWord || "Lapikud"}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<div class="mx-(--page-padding-inline) border-t border-orange-500/30"></div>
|
||||||
|
|
||||||
|
<Section id="tiimid" class="bg-white" padding="large">
|
||||||
|
<div class="mb-14">
|
||||||
|
<p class="mb-3 text-xs font-semibold uppercase tracking-[0.13em] text-orange-500">{$text["teams"]?.kicker || ""}</p>
|
||||||
|
<h2 class="mb-4 max-w-4xl text-[clamp(2rem,4vw,3rem)] leading-tight font-medium text-black">
|
||||||
|
{$text["teams"]?.title || ""}
|
||||||
|
</h2>
|
||||||
|
<p class="max-w-2xl text-base leading-8 text-black/60">
|
||||||
|
{$text["teams"]?.subtitle || ""}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</Center>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<!-- Benefits Section -->
|
<div class="flex flex-col">
|
||||||
<Section>
|
{#each teamSections as team, index}
|
||||||
<div class="text-center mb-12">
|
<div class="grid border-t border-black/10 py-12 last:border-b xl:grid-cols-[240px_1fr_1fr]">
|
||||||
<h2 class="text-4xl font-bold mb-4">{$text["benefits"]?.title || "Miks Lapikutega liituda?"}</h2>
|
<div class="pr-10">
|
||||||
<p class="text-xl text-gray-600">{$text["benefits"]?.subtitle || "Siin on mõned põhjused, miks meie kogukond on suurepärane koht arenguks"}</p>
|
<h3 class="my-3 text-4xl leading-none font-medium text-black">{team.title}</h3>
|
||||||
</div>
|
<p class="text-sm leading-5 text-black/55">{team.short || ""}</p>
|
||||||
|
</div>
|
||||||
<Grid columns={3} gap="gap-5">
|
|
||||||
{#each benefits as benefit}
|
|
||||||
<Card variant="glass">
|
|
||||||
<div class="feature-icon mb-4" style="color: var(--orange)">
|
|
||||||
<svelte:component this={benefit.icon} size={48} strokeWidth={1.5} />
|
|
||||||
</div>
|
|
||||||
<h3 class="text-2xl font-bold mb-3">{benefit.title}</h3>
|
|
||||||
<p class="text-gray-600">{benefit.description}</p>
|
|
||||||
</Card>
|
|
||||||
{/each}
|
|
||||||
</Grid>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<!-- What You'll Do Section -->
|
<div class="pt-8 xl:border-l xl:border-black/10 xl:px-12 xl:pt-0">
|
||||||
<Section background="neutral">
|
{#each team.about || [] as paragraph}
|
||||||
<Grid gap="gap-5">
|
<p class="mb-5 text-[0.95rem] leading-8 text-black/80 last:mb-0">{paragraph}</p>
|
||||||
<Card variant="glass">
|
{/each}
|
||||||
<h2 class="text-4xl font-bold mb-4">{$text["activities"]?.title || "Mida saad teha?"}</h2>
|
<div class="mt-6 flex flex-wrap gap-2">
|
||||||
<div class="space-y-4 text-lg">
|
{#each team.tags || [] as tag}
|
||||||
{#each $text["activities"]?.items || [] as item}
|
<span class="px-3 py-1.5 text-xs font-medium text-orange-500">{tag}</span>
|
||||||
<p>
|
{/each}
|
||||||
<strong>{item.title}</strong> {item.description}
|
|
||||||
</p>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card variant="glass">
|
|
||||||
<h2 class="text-4xl font-bold mb-4">{$text["join"]?.title || "Kuidas liituda?"}</h2>
|
|
||||||
<div class="space-y-4 text-lg">
|
|
||||||
{#each $text["join"]?.steps || [] as step, index}
|
|
||||||
<div class="flex items-start gap-4">
|
|
||||||
<div class="text-3xl font-bold" style="color: var(--orange)">{index + 1}.</div>
|
|
||||||
<div>
|
|
||||||
<strong>{step.title}</strong><br/>
|
|
||||||
{#if index === 0}
|
|
||||||
{step.description || "Kirjuta meile e-posti aadressil"} <a href="mailto:lapikud@lapikud.ee" class="text-orange-500 hover:underline">lapikud@lapikud.ee</a> {step.descriptionEnd || "või tule meie kontorisse Akadeemia tee 5."}
|
|
||||||
{:else}
|
|
||||||
{step.description}
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<!-- Members Section -->
|
<div class="pt-8 xl:border-l xl:border-black/10 xl:pl-12 xl:pt-0">
|
||||||
<Section>
|
<h4 class="mb-4 text-xs font-semibold uppercase tracking-widest text-black">{team.whatTitle || ""}</h4>
|
||||||
<div class="text-center mb-12">
|
<ul class="mb-8 space-y-2">
|
||||||
<h2 class="text-4xl font-bold mb-4">{$text["members"]?.title || "Meie liikmed"}</h2>
|
{#each team.what || [] as item}
|
||||||
<p class="text-xl text-gray-600">{$text["members"]?.subtitle || "Suurepärased inimesed, kes moodustavad meie kogukonna"}</p>
|
<li class="relative pl-4 text-sm leading-6 text-black/80 before:absolute before:left-0 before:top-0.5 before:text-[0.65rem] before:text-orange-500 before:content-['—']">
|
||||||
</div>
|
{item}
|
||||||
|
</li>
|
||||||
{#if members.senior && members.senior.length > 0}
|
{/each}
|
||||||
<div class="mb-12">
|
</ul>
|
||||||
<h3 class="text-3xl font-bold mb-6 text-center">{$text["members"]?.senior || "Vanemliikmed"}</h3>
|
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
<h4 class="mb-4 text-xs font-semibold uppercase tracking-widest text-black">{team.eventsTitle || ""}</h4>
|
||||||
{#each members.senior as member}
|
<ul class="space-y-2">
|
||||||
<div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
|
{#each team.events || [] as event}
|
||||||
<p class="text-center font-medium">{member}</p>
|
<li class="relative pl-4 text-sm leading-6 text-black/80 before:absolute before:left-0 before:top-0.5 before:text-[0.65rem] before:text-black/50 before:content-['↻']">
|
||||||
|
{event}
|
||||||
|
</li>
|
||||||
|
{/each}
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</Section>
|
||||||
|
|
||||||
|
<Section id="liitu" class="overflow-hidden bg-orange-500" padding="large">
|
||||||
|
<div class="relative grid max-w-5xl items-center gap-10 lg:grid-cols-[1fr_auto]">
|
||||||
|
<div class="pointer-events-none select-none absolute -right-6 -top-10 text-[clamp(7rem,16vw,12rem)] leading-none italic text-black/10">
|
||||||
|
{$text["join"]?.bgWord || ""}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<p class="mb-3 text-xs font-semibold uppercase tracking-[0.13em] text-black/45">{$text["join"]?.kicker || ""}</p>
|
||||||
|
<h2 class="mb-4 text-[clamp(2rem,4vw,3.3rem)] leading-tight font-medium text-black">
|
||||||
|
{$text["join"]?.title || ""}<br />{$text["join"]?.titleLine2 || ""}
|
||||||
|
</h2>
|
||||||
|
<p class="max-w-2xl text-base leading-8 text-black/70">
|
||||||
|
{$text["join"]?.description || ""}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="relative">
|
||||||
|
<Button onClick={openJoinForm} class="border-transparent bg-black px-9 py-3 text-base font-semibold text-white hover:opacity-90">
|
||||||
|
{$text["join"]?.cta || ""}
|
||||||
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</Section>
|
||||||
|
|
||||||
{#if members.junior && members.junior.length > 0}
|
<div class="mx-(--page-padding-inline) border-t border-black/10"></div>
|
||||||
<div>
|
|
||||||
<h3 class="text-3xl font-bold mb-6 text-center">{$text["members"]?.junior || "Noorliikmed"}</h3>
|
<Section id="liikmed" class="bg-[#f7f6f3]" padding="large">
|
||||||
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
<div class="mb-10">
|
||||||
{#each members.junior as member}
|
<p class="mb-3 text-xs font-semibold uppercase tracking-[0.13em] text-orange-500">{$text["members"]?.kicker || ""}</p>
|
||||||
<div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
|
<h2 class="text-[clamp(2rem,3.6vw,2.9rem)] leading-tight font-medium text-black">
|
||||||
<p class="text-center font-medium">{member}</p>
|
{$text["members"]?.title || ""}
|
||||||
</div>
|
</h2>
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
|
||||||
</Section>
|
{#each memberSections as section, idx}
|
||||||
|
{#if members[section.key] && members[section.key].length > 0}
|
||||||
|
<div class={idx < memberSections.length - 1 ? "mb-12" : ""}>
|
||||||
|
<h3 class="mb-5 border-b border-orange-500/30 pb-3 text-xs font-semibold uppercase tracking-widest text-orange-500">
|
||||||
|
{section.label}
|
||||||
|
</h3>
|
||||||
|
<Grid columns={5} tabletColumns={4} mobileColumns={2} gap="gap-x-4 gap-y-2">
|
||||||
|
{#each members[section.key] as member}
|
||||||
|
<span class="py-1 text-sm leading-6 text-black/80">{member}</span>
|
||||||
|
{/each}
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</Section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user