mirror of
https://github.com/Lapikud/lapikud.github.io.git
synced 2026-08-08 20:29:12 +00:00
rename newHome to Home and remove old Home
This commit is contained in:
Henri
@@ -1,156 +1,115 @@
|
|||||||
<script>
|
<script>
|
||||||
import {
|
import {Section, Stack, Grid, Center, Image, Svg, Button} from "$components";
|
||||||
Section,
|
import { navigate } from "$lib/router/router.js";
|
||||||
Grid,
|
|
||||||
Card,
|
|
||||||
Center,
|
|
||||||
} from "$components";
|
|
||||||
import { onMount } from "svelte";
|
|
||||||
import yaml from 'js-yaml';
|
|
||||||
|
|
||||||
// Import Lucide icons
|
|
||||||
import Wrench from "lucide-svelte/icons/wrench";
|
|
||||||
import Users from "lucide-svelte/icons/users";
|
|
||||||
import HeartHandshake from "lucide-svelte/icons/heart-handshake";
|
|
||||||
import ArrowRight from "lucide-svelte/icons/arrow-right";
|
|
||||||
|
|
||||||
// Partners data
|
|
||||||
let partners = [];
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
const response = await fetch('/_data/partners.yml');
|
|
||||||
const yamlText = await response.text();
|
|
||||||
partners = yaml.load(yamlText);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Header Section -->
|
<!-- Hero Section -->
|
||||||
<Section bg="bg-orange-500">
|
<Section className="relative min-h-screen overflow-hidden" padding="none" bg="bg-gray-900" id="hero">
|
||||||
<Grid>
|
<div class="relative min-h-screen flex items-center">
|
||||||
<Center>
|
<div class="absolute inset-0 left-1/2 w-screen -translate-x-1/2" aria-hidden="true">
|
||||||
<img src="/assets/LapLogo_black_white.png" alt="MTÜ Lapikud" class="max-w-md w-full h-auto p-4"/>
|
<Image
|
||||||
</Center>
|
src="/assets/hero.jpg"
|
||||||
<p class="text-3xl leading-relaxe p-4">
|
alt="illustrative hero image"
|
||||||
MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
|
objectFit="cover"
|
||||||
ja praegusi IT huvilisi tudengeid.
|
className="w-full h-full"
|
||||||
</p>
|
pictureClass="block w-full h-full"
|
||||||
</Grid>
|
/>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="pointer-events-none absolute inset-0 left-1/2 hidden w-screen -translate-x-1/2 md:block [clip-path:polygon(42%_0,100%_0,100%_100%,65%_100%)]"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<Svg
|
||||||
|
type="mirrorH"
|
||||||
|
className="absolute right-0 top-[16%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
|
||||||
|
/>
|
||||||
|
<Svg
|
||||||
|
type="branchH"
|
||||||
|
className="absolute right-0 top-[52%] -translate-y-1/2 w-[clamp(3.5rem,6vw,5.875rem)] text-[#E18E38]"
|
||||||
|
/>
|
||||||
|
<Svg
|
||||||
|
type="mirrorVH"
|
||||||
|
className="absolute right-0 bottom-[12%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="pointer-events-none absolute inset-y-0 left-1/2 w-screen -translate-x-1/2 bg-linear-to-r from-black/65 via-black/35 to-transparent" aria-hidden="true"></div>
|
||||||
|
<div class="relative z-20 flex min-h-screen w-full items-stretch py-8 md:py-12">
|
||||||
|
<div class="flex w-full max-w-115 flex-col justify-between">
|
||||||
|
<img src="/assets/LapLogo_white_orange.png" alt="MTÜ Lapikud" class="w-full max-w-55 md:max-w-65 h-auto"/>
|
||||||
|
<div class="flex flex-col items-start gap-5">
|
||||||
|
<p class="w-full max-w-110 text-left text-lg leading-[165%] text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)] md:max-w-125 md:text-xl">
|
||||||
|
MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
|
||||||
|
ja praegusi IT huvilisi tudengeid.
|
||||||
|
</p>
|
||||||
|
<Button
|
||||||
|
class="rounded-lg border-orange-500 bg-orange-500 px-6 py-3 text-gray-900 transition-colors hover:border-orange-300 hover:bg-orange-300"
|
||||||
|
onClick={() => navigate("/tudengile")}
|
||||||
|
>
|
||||||
|
Liitu LAPikutega!
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<Section>
|
|
||||||
<Grid gap="gap-5">
|
|
||||||
<Card variant="blur" href="/tudengile">
|
|
||||||
<div class="feature-icon text-orange-500">
|
|
||||||
<Users size={32} strokeWidth={1.5} />
|
|
||||||
</div>
|
|
||||||
<h3 class="feature-title">Tudengile</h3>
|
|
||||||
<p class="feature-description">
|
|
||||||
Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.
|
|
||||||
</p>
|
|
||||||
<div class="mt-4 font-semibold flex items-center gap-2 text-orange-500">
|
|
||||||
Liitu meiega <ArrowRight size={16} />
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card variant="blur" href="/helpdesk">
|
<Section className="relative overflow-hidden">
|
||||||
<div class="feature-icon text-orange-500">
|
<div class="pointer-events-none absolute inset-x-0 left-1/2 top-15 z-0 w-screen -translate-x-1/2" aria-hidden="true">
|
||||||
<Wrench size={32} strokeWidth={1.5} />
|
<Svg
|
||||||
</div>
|
type="connector"
|
||||||
<h3 class="feature-title">Helpdesk</h3>
|
className="absolute left-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
|
||||||
<p class="feature-description">
|
/>
|
||||||
HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.
|
<Svg
|
||||||
</p>
|
type="mirrorH"
|
||||||
<div class="mt-4 font-semibold flex items-center gap-2 text-orange-500">
|
className="absolute right-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
|
||||||
Vaata teenuseid <ArrowRight size={16} />
|
/>
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card variant="blur" href="/ourwork">
|
|
||||||
<div class="feature-icon text-orange-500">
|
|
||||||
<HeartHandshake size={32} strokeWidth={1.5} />
|
|
||||||
</div>
|
|
||||||
<h3 class="feature-title">Ettevõttele</h3>
|
|
||||||
<p class="feature-description">
|
|
||||||
Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.
|
|
||||||
</p>
|
|
||||||
<div class="mt-4 font-semibold flex items-center gap-2 text-orange-500">
|
|
||||||
Tehtud tööd <ArrowRight size={16} />
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<!-- What We Do Section -->
|
|
||||||
<Section>
|
|
||||||
<Grid gap="gap-4">
|
|
||||||
<Card variant="blur">
|
|
||||||
<h2 class="pb-4 text-4xl font-bold">Mida me loome</h2>
|
|
||||||
<p>Meie põhieesmärgiks on Tallinna Tehnikaülikooli IT tudengitele erialase lisandväärtuse loomine. Kaasame tudengeid praktilistesse lahendustesse, kus saab ideid reaalselt ellu viia ja oma oskusi päriselt kasutada. Meie projektidest kasvavad välja huvitavad ja tarvilikud lõputööd, millel on selge praktiline väärtus.</p>
|
|
||||||
</Card>
|
|
||||||
<Card variant="blur">
|
|
||||||
<h2 class="pb-4 text-4xl font-bold">Keda ja kuidas kaasame</h2>
|
|
||||||
<p>Pakume nutikatele ja motiveeritud tudengitele võimalust saada meie juures esimene töökogemus ning arendada end meeskonnas töötades. Lapikud ei ole ainult IT-tudengite organisatsioon, kaasame projektidesse ka majandusteaduskonna tudengeid, et tehniliste lahenduste kõrval oleks esindatud ka äriline vaade.</p>
|
|
||||||
</Card>
|
|
||||||
</Grid>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
<!-- Partners Section -->
|
|
||||||
<Section>
|
|
||||||
<div class="text-center mb-12">
|
|
||||||
<h2 class="text-5xl text-orange-500">
|
|
||||||
Koostööpartnerid
|
|
||||||
</h2>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Center className="flex-wrap">
|
<Grid columns={2} largeColumns={3} mobileColumns={1} className="relative z-10 items-start mt-12 md:mt-20" gap="gap-12 md:gap-16 lg:gap-24">
|
||||||
{#each partners as partner}
|
<Center dir="col" className="w-full max-w-sm justify-start mx-auto">
|
||||||
{#if partner.url}
|
<div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
|
||||||
<a href={partner.url} target="_blank" rel="noopener noreferrer" class="partner-item" title={partner.name}>
|
<Image
|
||||||
{#if partner.image}
|
src="/assets/student-images/image_1.jpg"
|
||||||
<img src={`/assets/partners/${partner.image}`} alt={partner.name} />
|
webpSrc=""
|
||||||
{:else}
|
alt="Tudengile Pilt"
|
||||||
<span class="partner-name">{partner.name}</span>
|
objectFit="cover"
|
||||||
{/if}
|
className="w-full h-full rounded-full object-[center_35%]"
|
||||||
</a>
|
pictureClass="block w-full h-full"
|
||||||
{:else}
|
/>
|
||||||
<div class="partner-item">
|
</div>
|
||||||
{#if partner.image}
|
<h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Tudengile</h3>
|
||||||
<img src={`/assets/partners/${partner.image}`} alt={partner.name} />
|
<p class="w-full max-w-[26ch] text-center text-base leading-[160%]">Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.</p>
|
||||||
{:else}
|
</Center>
|
||||||
<span class="partner-name">{partner.name}</span>
|
|
||||||
{/if}
|
<Center dir="col" className="w-full max-w-sm justify-start mx-auto">
|
||||||
</div>
|
<div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
|
||||||
{/if}
|
<Image
|
||||||
{/each}
|
src="/assets/helpdesk/helpdesk_bg.jpg"
|
||||||
</Center>
|
webpSrc=""
|
||||||
|
alt="Helpdesk Pilt"
|
||||||
|
objectFit="cover"
|
||||||
|
className="w-full h-full rounded-full object-[center_38%]"
|
||||||
|
pictureClass="block w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Helpdesk</h3>
|
||||||
|
<p class="w-full max-w-[26ch] text-center text-base leading-[160%]">HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.</p>
|
||||||
|
</Center>
|
||||||
|
|
||||||
|
<Center dir="col" className="w-full max-w-sm justify-start mx-auto md:col-span-2 lg:col-span-1">
|
||||||
|
<div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
|
||||||
|
<Image
|
||||||
|
src="/assets/asi-karikas-2023-images/miina_harma.jpeg"
|
||||||
|
webpSrc=""
|
||||||
|
alt="Ettevõttele Pilt"
|
||||||
|
objectFit="cover"
|
||||||
|
className="w-full h-full rounded-full object-[center_25%]"
|
||||||
|
pictureClass="block w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Ettevõttele</h3>
|
||||||
|
<p class="w-full max-w-[26ch] text-center text-base leading-[160%]">Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.</p>
|
||||||
|
</Center>
|
||||||
|
</Grid>
|
||||||
</Section>
|
</Section>
|
||||||
|
|
||||||
<style>
|
|
||||||
/* PARTNERS SECTION */
|
|
||||||
.partner-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
text-decoration: none;
|
|
||||||
padding: var(--space-3);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
height: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
a.partner-item:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.partner-item img {
|
|
||||||
width: auto;
|
|
||||||
object-fit: contain;
|
|
||||||
max-height: 150px;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.partner-name {
|
|
||||||
font-size: var(--fs-sm);
|
|
||||||
font-weight: 600;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -1,115 +0,0 @@
|
|||||||
<script>
|
|
||||||
import {Section, Stack, Grid, Center, Image, Svg, Button} from "$components";
|
|
||||||
import { navigate } from "$lib/router/router.js";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<!-- Hero Section -->
|
|
||||||
<Section className="relative min-h-screen overflow-hidden" padding="none" bg="bg-gray-900" id="hero">
|
|
||||||
<div class="relative min-h-screen flex items-center">
|
|
||||||
<div class="absolute inset-0 left-1/2 w-screen -translate-x-1/2" aria-hidden="true">
|
|
||||||
<Image
|
|
||||||
src="/assets/hero.jpg"
|
|
||||||
alt="illustrative hero image"
|
|
||||||
objectFit="cover"
|
|
||||||
className="w-full h-full"
|
|
||||||
pictureClass="block w-full h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="pointer-events-none absolute inset-0 left-1/2 hidden w-screen -translate-x-1/2 md:block [clip-path:polygon(42%_0,100%_0,100%_100%,65%_100%)]"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<Svg
|
|
||||||
type="mirrorH"
|
|
||||||
className="absolute right-0 top-[16%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
|
|
||||||
/>
|
|
||||||
<Svg
|
|
||||||
type="branchH"
|
|
||||||
className="absolute right-0 top-[52%] -translate-y-1/2 w-[clamp(3.5rem,6vw,5.875rem)] text-[#E18E38]"
|
|
||||||
/>
|
|
||||||
<Svg
|
|
||||||
type="mirrorVH"
|
|
||||||
className="absolute right-0 bottom-[12%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="pointer-events-none absolute inset-y-0 left-1/2 w-screen -translate-x-1/2 bg-linear-to-r from-black/65 via-black/35 to-transparent" aria-hidden="true"></div>
|
|
||||||
<div class="relative z-20 flex min-h-screen w-full items-stretch py-8 md:py-12">
|
|
||||||
<div class="flex w-full max-w-115 flex-col justify-between">
|
|
||||||
<img src="/assets/LapLogo_white_orange.png" alt="MTÜ Lapikud" class="w-full max-w-55 md:max-w-65 h-auto"/>
|
|
||||||
<div class="flex flex-col items-start gap-5">
|
|
||||||
<p class="w-full max-w-110 text-left text-lg leading-[165%] text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)] md:max-w-125 md:text-xl">
|
|
||||||
MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
|
|
||||||
ja praegusi IT huvilisi tudengeid.
|
|
||||||
</p>
|
|
||||||
<Button
|
|
||||||
class="rounded-lg border-orange-500 bg-orange-500 px-6 py-3 text-gray-900 transition-colors hover:border-orange-300 hover:bg-orange-300"
|
|
||||||
onClick={() => navigate("/tudengile")}
|
|
||||||
>
|
|
||||||
Liitu LAPikutega!
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Section>
|
|
||||||
|
|
||||||
|
|
||||||
<Section className="relative overflow-hidden">
|
|
||||||
<div class="pointer-events-none absolute inset-x-0 left-1/2 top-15 z-0 w-screen -translate-x-1/2" aria-hidden="true">
|
|
||||||
<Svg
|
|
||||||
type="connector"
|
|
||||||
className="absolute left-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
|
|
||||||
/>
|
|
||||||
<Svg
|
|
||||||
type="mirrorH"
|
|
||||||
className="absolute right-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Grid columns={2} largeColumns={3} mobileColumns={1} className="relative z-10 items-start mt-12 md:mt-20" gap="gap-12 md:gap-16 lg:gap-24">
|
|
||||||
<Center dir="col" className="w-full max-w-sm justify-start mx-auto">
|
|
||||||
<div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
|
|
||||||
<Image
|
|
||||||
src="/assets/student-images/image_1.jpg"
|
|
||||||
webpSrc=""
|
|
||||||
alt="Tudengile Pilt"
|
|
||||||
objectFit="cover"
|
|
||||||
className="w-full h-full rounded-full object-[center_35%]"
|
|
||||||
pictureClass="block w-full h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Tudengile</h3>
|
|
||||||
<p class="w-full max-w-[26ch] text-center text-base leading-[160%]">Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.</p>
|
|
||||||
</Center>
|
|
||||||
|
|
||||||
<Center dir="col" className="w-full max-w-sm justify-start mx-auto">
|
|
||||||
<div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
|
|
||||||
<Image
|
|
||||||
src="/assets/helpdesk/helpdesk_bg.jpg"
|
|
||||||
webpSrc=""
|
|
||||||
alt="Helpdesk Pilt"
|
|
||||||
objectFit="cover"
|
|
||||||
className="w-full h-full rounded-full object-[center_38%]"
|
|
||||||
pictureClass="block w-full h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Helpdesk</h3>
|
|
||||||
<p class="w-full max-w-[26ch] text-center text-base leading-[160%]">HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.</p>
|
|
||||||
</Center>
|
|
||||||
|
|
||||||
<Center dir="col" className="w-full max-w-sm justify-start mx-auto md:col-span-2 lg:col-span-1">
|
|
||||||
<div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
|
|
||||||
<Image
|
|
||||||
src="/assets/asi-karikas-2023-images/miina_harma.jpeg"
|
|
||||||
webpSrc=""
|
|
||||||
alt="Ettevõttele Pilt"
|
|
||||||
objectFit="cover"
|
|
||||||
className="w-full h-full rounded-full object-[center_25%]"
|
|
||||||
pictureClass="block w-full h-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Ettevõttele</h3>
|
|
||||||
<p class="w-full max-w-[26ch] text-center text-base leading-[160%]">Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.</p>
|
|
||||||
</Center>
|
|
||||||
</Grid>
|
|
||||||
</Section>
|
|
||||||
Reference in New Issue
Block a user