New sveltekit version of page

This commit is contained in:
2025-07-11 20:38:06 +03:00
parent 2f637407fd
commit cbbe43a691
300 changed files with 2286 additions and 0 deletions

74
src/routes/+layout.svelte Normal file
View File

@@ -0,0 +1,74 @@
<script>
// Importing dropdown component
import Dropdown from '$lib/dropdown.svelte';
// Importing page store
import { page } from '$app/stores';
import '../app.css';
import logo from '$lib/assets/logo.svg';
// Icon imports (Lucide)
import Coffee from 'lucide-svelte/icons/coffee';
import CalendarClock from 'lucide-svelte/icons/calendar-clock';
import Presentation from 'lucide-svelte/icons/presentation';
import Swords from 'lucide-svelte/icons/swords';
import Lectern from 'lucide-svelte/icons/lectern';
import Bot from 'lucide-svelte/icons/bot';
import HandHeart from 'lucide-svelte/icons/hand-heart';
import Trophy from 'lucide-svelte/icons/trophy';
let { children } = $props();
</script>
<nav class="w-full fixed z-20 inline-flex items-center h-32 p-8 justify-evenly bg-white">
{#if $page.url.pathname === '/'}
<div>
<img src={logo} alt="Logo" class="collapse w-72" />
</div>
{:else}
<a href="/">
<img src={logo} alt="Logo" class="w-72" />
</a>
{/if}
<div class="flex gap-x-4 text-xl z-20">
<Dropdown name="Meist">
<a href="/meist" class="block px-4 py-2 hover:bg-[#f0941d]">Mis teeme?</a>
<a href="/meist#liitu" class="flex gap-2 items-center px-4 py-2 hover:bg-[#f0941d]"><Bot />Liitu meiega</a>
<a href="/mentorid" class="flex gap-2 items-center px-4 py-2 hover:bg-[#f0941d]"><HandHeart />Mentorid</a>
<a href="/juhatus" class="flex gap-2 items-center px-4 py-2 hover:bg-[#f0941d]"><Lectern />Juhatus</a>
</Dropdown>
<Dropdown name="Üritused">
<a href="/kalender" class="flex gap-2 items-center px-4 py-2 border-b-[1px] hover:bg-[#f0941d]"><CalendarClock />Ürituste kalender</a>
<a href="https://asikarikas.ee/" class="flex gap-2 items-center px-4 py-2 hover:bg-[#f0941d]"><Trophy />ASI karikas</a>
<a href="/koolitused" class="flex gap-2 items-center px-4 py-2 hover:bg-[#f0941d]"><Presentation />Koolitused</a>
<a href="/rebased" class="flex gap-2 items-center px-4 py-2 hover:bg-[#f0941d]"><Swords />Rebaste ristimine</a>
<a href="/remondikohvik" class="flex gap-2 items-center px-4 py-2 hover:bg-[#f0941d]"><Coffee />Remondikohvik</a>
</Dropdown>
<a class="w-auto px-4 py-2 hover:bg-[#f0941d] rounded-md" href="/kontakt">Kontakt</a>
<a class="w-auto flex gap-2 items-center px-4 py-2 hover:bg-[#f0941d] rounded-md" href="/helpdesk">Helpdesk</a>
</div>
</nav>
<div class="pt-32">
{@render children()}
</div>
<footer class="w-full bg-black text-[#f0941d] text-center p-8">
<div class="grid grid-cols-2 max-w-[64rem] mx-auto">
<div class="text-left">
<h3 class="pb-4 text-2xl">MTÜ Lapikud</h3>
<p>Aadress: Akadeemia tee 5, 12616 Tallinn, Eesti</p>
<p>E-post: +372 58 160 799</p>
<p>Messenger: m.me/Lapikud</p>
<p>Reg. kood: 801 67 145</p>
<p>Swedbank: EE812200221019551756</p>
</div>
<div class="text-left">
<h3 class="pb-4 text-2xl">Meie sotsiaalid!</h3>
<p>Facebook: <a href="https://www.facebook.com/Lapikud">Lapikud</a></p>
<p>Instagram: <a href="https://www.instagram.com/lapikud/">@Lapikud</a></p>
</div>
</div>
<p class="py-8">&copy; 2025 MTÜ Lapikud</p>
</footer>

100
src/routes/+page.svelte Normal file
View File

@@ -0,0 +1,100 @@
<script>
// Image and logo imports
import logo from '$lib/assets/LAP_logo_v3_transp.png';
import robotiklubi from '$lib/assets/partners/robotiklubi.png';
import taltech_it_tk from '$lib/assets/partners/taltech_it_teaduskond_logo.png';
import taltech from '$lib/assets/partners/taltech_logo.png';
import eul from '$lib/assets/partners/eul.jpg';
import hextech from '$lib/assets/partners/hextech_logo.svg';
import eis from '$lib/assets/partners/eis.svg';
import tehnopol from '$lib/assets/partners/tehnopollogo.png';
import ituk from '$lib/assets/partners/ituk.svg';
// Icon imports (Lucide)
import Rocket from 'lucide-svelte/icons/rocket';
import CalendarClock from 'lucide-svelte/icons/calendar-clock';
</script>
<div class="w-screen bg-[#f0941d] justify-center flex px-4 md:px-16">
<div class="flex md:flex-row flex-col items-center max-w-[112rem] md:gap-16">
<img src={logo} alt="Logo" class="w-[16rem] lg:w-[28rem] my-8 md:my-16"/>
<h1 class="text-xl mb-8 md:mb-0 lg:mb-0 lg:text-3xl">MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi ja praegusi IT huvilisi tudengeid.</h1>
</div>
</div>
<div class="max-w-[96rem] mx-auto flex flex-col py-4 px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16 py-8">
<div class="flex flex-col">
<h2 class="text-4xl font-light pb-4">Kes me oleme?</h2>
<p class="text-lg">Organisatsioon loodi 2002. aastal informaatika tudengite poolt, kelle erialatunnuseks oli “LAP”. Targad mehed otsustasid, et järelikult on nad “Lapikud”. </p>
</div>
<div class="flex flex-col justify-center">
<h2 class="text-4xl font-light pb-4">Millega tegeleme?</h2>
<p class="text-lg">Meie põhieesmärgiks on Tallinna Tehnikaülikooli IT tudengite erialase lisandväärtuse loomine. Kaasame tudengeid huvitavatesse IT projektidesse ning anname tudengitele võimaluse midagi reaalset oma käega midagi ära teha. Meie projektidest kooruvad välja huvitavad ja tarvilikud lõputööd. Pakume nutikatele tudengitele võimalust saada meie juures esimene töökogemus. Lapikud ei ole ainult IT tudengite organisatsioon püüame kaasata oma tegevusse ka majandusteaduskonna tudengeid, et projektides oleks esindatud ka äriline pool.</p>
</div>
</div>
<div class="grid gap-16 py-8">
<div class="flex flex-col">
<h2 class="text-4xl font-light pb-4">Kas midagi huvitavat toimub?</h2>
<p class="text-lg">
Meie tegevuste hulka kuulub magus ja mõnus Remondikohvik, kus elektroonika saab uue elu. Lisaks pakume erinevaid koolitusi, alates Gitist ja andmebaasidest kuni riistvara paranduse ja tarkvaraarenduse põhitõdedeni mis on ka koostöös vahel ITÜKiga. <br>
Traditsioonid elavad edasi LapLanil, kus võtab mõõtu näiteks Factorio <i>speedrun</i>. Samuti korraldame DnD päevi, kareokeõhtuid, talve- ja suvepäevi ning palju muid meeldejäävaid sündmusi. <br>
Eraldi tõstame esile ka ASI Karika, mida korraldavad Tallinna Tehnikaülikooli Arvutisüsteemide Instituut ja tarkvaraarendusklubi MTÜ Lapikud. See on ideaalne võimalus panna oma koodikirjutamise oskused proovile ja lahendada praktilisi muresid!
</p>
<div class="flex text-xl items-center text-[#f0941d] font-bold flex-row gap-x-4 py-8">
<Rocket size="40"/>
<div class="flex items-center flex-col gap-4">
<p>Tule ja avasta, mida kõike põnevat meil pakkuda on!</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col py-8">
<h2 class="text-4xl font-light pb-4">Lahedad koostööpartnerid</h2>
<div class="grid md:grid-cols-4 gap-8">
<div class="flex justify-center items-center">
<a href="https://eis.ee/">
<img src={eis} alt="Enterprise Estonia logo" class="w-96"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://www.eyl.ee">
<img src={eul} alt="Eesti Üliõpilaskondade Liit logo" class="w-48"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://hextech.ee">
<img src={hextech} alt="Hextech logo" class="w-48"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://ituk.ee/">
<img src={ituk} alt="ITÜK logo" class="w-48"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://www.robotiklubi.ee">
<img src={robotiklubi} alt="Tallinna Tehnikaülikooli robotiklubi logo" class="w-48 p-8"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://taltech.ee">
<img src={taltech} alt="Tallinna Tehnikaülikooli (TalTech) logo" class="w-48"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://taltech.ee/infotehnoloogia-teaduskond">
<img src={taltech_it_tk} alt="Tallinna Tehnikaülikooli (TalTech) infotehnoloogia teaduskonna logo" class="w-48"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://tehnopol.ee/">
<img src={tehnopol} alt="Technopol logo" class="w-48"/>
</a>
</div>
</div>
<div>
<h2 class="text-4xl font-light pb-4">EIS projekt</h2>
<p class="text-lg">MTÜ Lapikud projekti "Mobiilne Droonituvastussüsteem" rahastatakse riigieelarvest teadus- ja arendustegevuse rahastamise vahenditest 100 000 € ulatuses, eesmärgiga luua füüsilised droonituvastusseadmed, mis tagavad kasutajale droonialase olukorra teadlikkuse. Projekti lõpptulemusena valmib kaks teineteisest eraldiseisvat seadet spektrianalüüsi ning Direct Remote Identification tööpõhimõttel toimivad seadmed.</p>
</div>
</div>
</div>

View File

@@ -0,0 +1,13 @@
<script>
import helpdeskbg from '$lib/assets/458396300_921856893308127_7829656149477072375_n.jpg';
import helpdesk from '$lib/assets/helpdesk-on-black.png';
</script>
<div class="flex flex-col pb-8">
<div class="w-full bg-black">
<div class="flex absolute justify-center items-center flex-row w-full h-[60vh] px-4">
<img src={helpdesk} alt="Helpdesk logo" class="z-10"/>
</div>
<img class="h-[60vh] object-cover object-left w-full opacity-50 blur-[1.5px]" src={helpdeskbg} alt="Helpdesk"/>
</div>
</div>

View File

@@ -0,0 +1,50 @@
<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-4">
<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-4">
<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>

View File

@@ -0,0 +1,4 @@
<div class="flex flex-col h-screen md:w-9/12 mx-auto px-4 py-16">
<h1 class="text-4xl font-light items-start pb-8">Ürituste kalender</h1>
<iframe class="flex" title="Google Calendar" style="border: 0;" src="https://www.google.com/calendar/embed?src=lapikud%40gmail.com&amp;ctz=Europe/Tallinn&showTitle=0&showPrint=0&showCalendars=0&showTz=0&wkst=2&mode=AGENDA" height="800" frameborder="0" scrolling="no"></iframe>
</div>

View File

View File

@@ -0,0 +1,51 @@
<script>
import koolitusebanner from '$lib/assets/469521237_1574639476758835_7853856396417097536_n.jpg';
import graafik from '$lib/data/koolitusteGraafik.json';
let uritused = graafik.plannedEvents;
</script>
<div class="flex flex-col">
<div class="w-full bg-black">
<div class="flex absolute justify-center items-center flex-row w-full h-[60vh] px-4">
<h1 class="text-8xl font-bold text-[#f0941d] z-10 -translate-x-4 block">Koolitused</h1>
</div>
<img class="h-[60vh] object-cover w-[920rem] opacity-50 blur-[1.5px]" src={koolitusebanner} alt="Koolituste banner"/>
</div>
</div>
<div class="max-w-[96rem] mx-auto flex flex-col py-4 px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-16 py-16">
<div class="flex flex-col">
<h2 class="text-4xl font-light pb-4">Mis on plaanis?</h2>
<ul class="space-y-4">
{#each uritused as uritus}
<li class="text-lg bg-white p-4 rounded-lg shadow-md border-l-4 border-[#f0941d]">
<h3 class="font-semibold text-xl text-[#f0941d]">{uritus.eventName}</h3>
<div class="text-gray-800">
<span class="font-medium">Kuupäev:</span> {new Date(uritus.date).toLocaleDateString('et-EE')}
</div>
<div class="text-gray-800">
<span class="font-medium">Kellaaeg:</span> {uritus.time}
</div>
<div class="text-gray-800">
<span class="font-medium">Asukoht:</span> {uritus.location}
</div>
{#if uritus.collaborator}
<div class="text-gray-800">
<span class="font-medium">Koostööpartner:</span> {uritus.collaborator}
</div>
{/if}
</li>
{/each}
</ul>
</div>
<div class="flex flex-col">
<h2 class="text-4xl font-light pb-4">Mis on koolituste mõtte?</h2>
<p class="text-lg">
Meie koolituste eesmärk on pakkuda Tallinna Tehnikaülikooli IT tudengitele praktilisi ja väärtuslikke kogemusi, mis aitavad neil oma erialaseid oskusi arendada. Koolituste kaudu saavad tudengid osaleda põnevates IT projektides, kus nad saavad oma teadmisi rakendada ja uusi oskusi omandada.
<br><br>
Lapikud ei ole ainult IT-tudengite organisatsioon me püüame kaasata ka majandus- ja inseneriteaduskonna tudengeid, et projektides oleks esindatud äriline kui ka praktiline pool. Meie koolitused ja üritused on suurepärane võimalus kohtuda sarnaselt mõtlevate inimestega, luua uusi kontakte ja saada osa meie aktiivsest ja toetavast kogukonnast.
</p>
</div>
</div>
</div>

View File

@@ -0,0 +1,4 @@
<h1>Mis teeme?</h1>
<h1 id="liitu">Liitumine</h1>
<h1 id="mentorid">Mentorid</h1>

View File

@@ -0,0 +1,67 @@
<script>
// Data imports (JSON)
import mentorid from '$lib/data/mentorid.json';
// Icon imports (Lucide)
import Mailbox from 'lucide-svelte/icons/mailbox';
import Phone from 'lucide-svelte/icons/phone';
import MessageCircle from 'lucide-svelte/icons/message-circle';
import Linkedin from 'lucide-svelte/icons/linkedin';
import Facebook from 'lucide-svelte/icons/facebook';
import Send from 'lucide-svelte/icons/send';
</script>
<div class="max-w-[96rem] mx-auto flex flex-col py-8 px-4">
<h1 class="text-4xl font-light pb-4 text-center">Lahedad mentorid</h1>
<div class="grid grid-cols-1 gap-0 lg:gap-4">
{#each mentorid as mentor}
<div class="flex flex-col lg:flex-row items-start lg:items-center py-4 {mentorid.indexOf(mentor) === mentorid.length - 1 ? '' : 'border-b-2 border-[#f0941d]'}">
<div class="w-80 h-80 aspect-square mb-2">
<img src={`src/lib/assets/mentors-images/optimised/${mentor.photo}`} alt={mentor.name} class="w-full h-full object-cover rounded-md"/>
</div>
<div class="ml-0 lg:ml-4 flex flex-col gap-4 lg:flex-row">
<div class="flex flex-col min-w-80">
<h3 class="text-4xl font-light pb-4">{mentor.name}</h3>
<p class="text-lg pb-4">Vanus: {mentor.age}</p>
<p class="text-lg">{mentor.speciality}{mentor.term ? ` - ${mentor.term}. kursus` : ''}</p>
<ul class="text-lg flex flex-row gap-1 pb-4">
<li>{mentor.teams.length > 1 ? 'Tiimid:' : 'Tiim:'}</li>
{#each mentor.teams as team, index}
<li>{team}{#if index < mentor.teams.length - 1}, {/if}</li>
{/each}
</ul>
{#each mentor.contactMethods as method}
{#if method.name.toLowerCase() === 'email'}
<a href='mailto:{method.value}' class="text-lg flex items-center gap-2 text-[#f0941d]"><Mailbox />{method.value}</a>
{/if}
{#if method.name.toLowerCase() === 'telefoninumber'}
<a href='tel:{method.value}' class="text-lg flex items-center gap-2 text-[#f0941d]"><Phone />{method.value}</a>
{/if}
{#if method.name.toLowerCase() === 'discord'}
<a href='https://discord.com/users/{method.value}' class="text-lg flex items-center gap-2 text-[#f0941d]"><svg role="img" class="fill-current w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"/></svg>{method.value}</a>
{/if}
{#if method.name.toLowerCase() === 'linkedin'}
<a href='https://www.linkedin.com/in/{method.value}' class="text-lg flex items-center gap-2 text-[#f0941d]"><Linkedin />{method.value}</a>
{/if}
{#if method.name.toLowerCase() === 'messenger'}
<a href='https://m.me/{method.value}' class="text-lg flex items-center gap-2 text-[#f0941d]"><svg role="img" class="fill-current w-6" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M.001 11.639C.001 4.949 5.241 0 12.001 0S24 4.95 24 11.639c0 6.689-5.24 11.638-12 11.638-1.21 0-2.38-.16-3.47-.46a.96.96 0 00-.64.05l-2.39 1.05a.96.96 0 01-1.35-.85l-.07-2.14a.97.97 0 00-.32-.68A11.39 11.389 0 01.002 11.64zm8.32-2.19l-3.52 5.6c-.35.53.32 1.139.82.75l3.79-2.87c.26-.2.6-.2.87 0l2.8 2.1c.84.63 2.04.4 2.6-.48l3.52-5.6c.35-.53-.32-1.13-.82-.75l-3.79 2.87c-.25.2-.6.2-.86 0l-2.8-2.1a1.8 1.8 0 00-2.61.48z"/></svg>{method.value}</a>
{/if}
{#if method.name.toLowerCase() === 'facebook'}
<a href='{method.value}' class="text-lg flex items-center gap-2 text-[#f0941d]"><Facebook />Facebook</a>
{/if}
{#if method.name.toLowerCase() === 'telegram'}
<a href='https://t.me/{method.value}' class="text-lg flex items-center gap-2 text-[#f0941d]"><Send />{method.value}</a>
{/if}
{/each}
</div>
<div class="flex flex-col gap-2">
<h3 class="text-xl">Milliseid inimesi ootan oma piksliteks?</h3>
<p class="text-lg">{mentor.description}</p>
<h3 class="text-xl">Milline Lapik olen ise?</h3>
<p class="text-lg">{mentor.activities}</p>
</div>
</div>
</div>
{/each}
</div>
</div>

View File

@@ -0,0 +1,53 @@
<script>
import rk1 from '$lib/assets/remondikohvik/rk-1.jpg';
import rk2 from '$lib/assets/remondikohvik/rk-2.jpg';
import rk3 from '$lib/assets/remondikohvik/rk-3.jpg';
import rklogo from '$lib/assets/remondikohvik/rk-logo.png';
import robotiklubi from '$lib/assets/partners/robotiklubi.png';
import tthk from '$lib/assets/partners/tthk.png';
import taltech_it_tk from '$lib/assets/partners/taltech_it_teaduskond_logo.png';
</script>
<div class="flex flex-col pb-8">
<div class="w-full grid grid-cols-2 md:grid-cols-3 bg-black">
<div class="flex absolute justify-center items-center z-10 pointer-events-none -translate-y-8 flex-row w-full h-[60vh] px-4">
<img src={rklogo} alt="Remondikohviku logo" class="w-[20rem]"/>
<h1 class="text-8xl font-bold text-[#ffa80d] translate-y-10 -translate-x-4 lg:block hidden">Remondikohvik</h1>
</div>
<img class="h-[60vh] object-cover opacity-50 hover:opacity-80 transition-all hover:blur-none blur-[1.5px]" src={rk1} alt="Remondikohvik 2025"/>
<img class="hidden md:block h-[60vh] object-cover opacity-50 hover:opacity-80 transition-all hover:blur-none blur-[1.5px]" src={rk2} alt="Remondikohvik 2025"/>
<img class="h-[60vh] object-cover opacity-50 hover:opacity-80 transition-all hover:blur-none blur-[1.5px]" src={rk3} alt="Remondikohvik 2025"/>
</div>
<div class="max-w-[96rem] mx-auto flex flex-col py-8 px-4">
<div class="grid lg:grid-cols-2 gap-0 lg:gap-16">
<div class="flex flex-col">
<h2 class="text-4xl font-light pb-4">Mis on remondikohvik?</h2>
<p class="text-lg">Remondikohvik on koht, kuhu saab tulla julgelt nõu küsima, ise käed külge lüüa parandamisel või lasta asjatundlikemal üle vaadata parandust vajavad esemed. Teid ootavad sõbralikud ja heatujulised abilised, kellega saab ka niisama kohvitades juttu vesta. ☕️ </p>
</div>
<div class="flex flex-col">
<h2 class="text-4xl font-light pb-4">Kuidas sai remondikohvik alguse?</h2>
<p class="text-lg">Remondikohvik ei toimu üldsegi mitte esimest korda! See sai alguse juba 2013. aastal Skeemipesa, Lapikute ja kohviku Pööning koostöös. Vahelduva eduga on üritust korraldatud aastate jooksul mitu korda. Tegelikult ei ole ka remondikohviku idee üldsegi uudne, vaid selletaolised üritused on mitmel pool maailmas päris palju populaarsust kogunud. Sellest on kujunenud lausa kogukond, mis toob regulaarselt naabruskonna ühtekokku, et aidata üksteisel korda teha asjad, mille parandamine tüütu või lootusetuna tundub ning samal ajal ka lõbusalt aega veeta. Loodame, et meie unistus täitub ning näeme sellise kogukonna teket ka Tallinnas.</p>
</div>
</div>
<div>
<h1 class="text-4xl font-light pb-4">Koostööpartnerid</h1>
<div class="flex flex-row gap-x-4">
<div class="flex justify-center items-center">
<a href="https://www.tthk.ee/">
<img src={tthk} alt="Tallinna Tööstushariduskeskus logo" class="w-48 p-4"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://www.robotiklubi.ee">
<img src={robotiklubi} alt="Tallinna Tehnikaülikooli robotiklubi logo" class="w-48 p-8"/>
</a>
</div>
<div class="flex justify-center items-center">
<a href="https://taltech.ee/infotehnoloogia-teaduskond">
<img src={taltech_it_tk} alt="Tallinna Tehnikaülikooli infotehnoloogia teaduskonna logo" class="w-64"/>
</a>
</div>
</div>
</div>
</div>
</div>