forked from lapikud/lapikud.github.io
77 lines
3.1 KiB
Svelte
77 lines
3.1 KiB
Svelte
<script>
|
|
// Data imports (JSON)
|
|
import pastManagement from "$lib/data/pastManagement.json";
|
|
import currentManagement from "$lib/data/currentManagement.json";
|
|
|
|
// Icon imports (Lucide)
|
|
import Mailbox from "lucide-svelte/icons/mailbox";
|
|
import Phone from "lucide-svelte/icons/phone";
|
|
</script>
|
|
|
|
<div class="max-w-[96rem] mx-auto flex flex-col py-8 px-8">
|
|
<h1 class="text-4xl font-light pb-4 text-center">Praegune juhtkond</h1>
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
{#each currentManagement as member}
|
|
<div class="flex flex-col lg:flex-row items-center p-4">
|
|
<div class="w-full h-auto max-w-[250px] aspect-square mb-2">
|
|
<img
|
|
src={`src/lib/assets/management-images/${member.photo}`}
|
|
alt={member.name}
|
|
class="w-full h-full object-cover rounded-md"
|
|
/>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-2xl">{member.name}</h3>
|
|
<p class="text-xl">{member.role} - {member.subrole}</p>
|
|
<a
|
|
href="mailto:{member.email}"
|
|
class="text-lg flex items-center gap-4 text-[#f0941d]"
|
|
><Mailbox />{member.email}</a
|
|
>
|
|
<a
|
|
href="tel:{member.phone}"
|
|
class="text-lg flex items-center gap-4 text-[#f0941d]"
|
|
><Phone />{member.phone}</a
|
|
>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="max-w-[96rem] mx-auto flex flex-col py-8 px-8">
|
|
<h1 class="text-4xl font-light pb-4 text-center">
|
|
Organisatsiooni juhtinud inimesed läbi aegade
|
|
</h1>
|
|
{#each pastManagement as yearData}
|
|
<div class="py-8">
|
|
<div class="flex items-center pb-4 lg:px-16">
|
|
<h2 class="text-3xl font-light text-[#f0941d]">
|
|
{yearData.year}
|
|
</h2>
|
|
<hr class="border-t-2 border-[#f0941d] flex-grow ml-4" />
|
|
</div>
|
|
<div
|
|
class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2 justify-center"
|
|
>
|
|
{#each yearData.members as member}
|
|
<div class="flex flex-col items-center">
|
|
<div
|
|
class="w-full h-auto max-w-[150px] mx-auto aspect-square mb-2"
|
|
>
|
|
<img
|
|
src={`src/lib/assets/past-management-images/optimised/${member.image}`}
|
|
alt={member.name}
|
|
class="w-full h-full object-cover rounded-md"
|
|
/>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-center">
|
|
{member.name}
|
|
</h3>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|