small fixes, hero and navbar

This commit is contained in:
Henri
2026-04-06 02:55:39 +03:00
parent 837057a976
commit 78f70458e2
5 changed files with 115 additions and 98 deletions

View File

@@ -6,6 +6,7 @@ import {
Center, Center,
Svg, Svg,
} from "$components"; } from "$components";
import { text } from "$lib";
</script> </script>
@@ -15,24 +16,24 @@ import {
<h3 class="text-3xl font-light pb-4">MTÜ Lapikud</h3> <h3 class="text-3xl font-light pb-4">MTÜ Lapikud</h3>
<Container center={false}> <Container center={false}>
<address class="not-italic pb-4"> <address class="not-italic pb-4">
Aadress: <a href="https://maps.app.goo.gl/1pCDMVNaMD29G7y78" class="text-orange-500">Akadeemia tee 5, 12616 Tallinn, Eesti</a> {$text.footer?.address || "Aadress: "}<a href="https://maps.app.goo.gl/1pCDMVNaMD29G7y78" class="text-orange-500">{$text.footer?.addressValue || "Akadeemia tee 5, 12616 Tallinn, Eesti"}</a>
<br/> <br/>
E-post: <a href="mailto:lapikud@lapikud.ee" class="text-orange-500">lapikud@lapikud.ee</a> {$text.footer?.mail || "E-post: "}<a href="mailto:lapikud@lapikud.ee" class="text-orange-500">lapikud@lapikud.ee</a>
<br/> <br/>
Tel: <a href="tel:+37258160799" class="text-orange-500">+372 58 160 799</a> {$text.footer?.phone || "Tel: "}<a href="tel:+37258160799" class="text-orange-500">+372 58 160 799</a>
<br/> <br/>
Messenger: <a href="https://m.me/Lapikud" target="_blank" rel="noopener noreferrer" class="text-orange-500">m.me/Lapikud</a> {$text.footer?.messenger || "Messenger: "}<a href="https://m.me/Lapikud" target="_blank" rel="noopener noreferrer" class="text-orange-500">m.me/Lapikud</a>
</address> </address>
<div> <div>
Reg. kood: <a href="https://ariregister.rik.ee/est/company/80167145/" class="text-orange-500">80167145</a> {$text.footer?.reg || "Reg. kood: "}<a href="https://ariregister.rik.ee/est/company/80167145/" class="text-orange-500">80167145</a>
<br/> <br/>
Swedbank EE812200221019551756 {$text.footer?.bank || "Swedbank"} EE812200221019551756
</div> </div>
</Container> </Container>
</div> </div>
<div> <div>
<Container center={false}> <Container center={false}>
<h3 class="text-3xl font-light flex justify-center pb-4">Sotsiaalmeedia</h3> <h3 class="text-3xl font-light flex justify-center pb-4">{$text.footer?.socials || "Sotsiaalmeedia"}</h3>
<div class="flex items-center justify-center gap-4"> <div class="flex items-center justify-center gap-4">
<a href="https://www.instagram.com/lapikud/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="transition-opacity duration-200"> <a href="https://www.instagram.com/lapikud/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="transition-opacity duration-200">
<Svg type="instagram"/> <Svg type="instagram"/>
@@ -47,5 +48,5 @@ import {
</Container> </Container>
</div> </div>
</Grid> </Grid>
<Center><small class="text-orange-500 pt-6">© 2026 MTÜ Lapikud</small></Center> <Center><small class="text-orange-500 pt-6">© 2026 {$text.footer?.organization || "MTÜ Lapikud"}</small></Center>
</Section> </Section>

View File

@@ -128,78 +128,78 @@
<Container maxWidth={true} center={false} class="py-0"> <Container maxWidth={true} center={false} class="py-0">
{#if $text && Object.keys($text).length > 0} {#if $text && Object.keys($text).length > 0}
<div class="flex items-center w-full relative min-h-10"> <div class="flex items-center w-full relative min-h-10">
<!-- Logo --> <!-- Logo -->
{#if currentPath !== "/"} {#if currentPath !== "/"}
<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 md:relative md:left-auto md:translate-x-0 md:top-auto md:translate-y-0"> <div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2 md:relative md:left-auto md:translate-x-0 md:top-auto md:translate-y-0">
<Button onClick={() => handleNavigation("/")} class="border-transparent"> <Button onClick={() => handleNavigation("/")} class="border-transparent">
<img src="assets/LapLogo_black_white.png" alt="Lapikud Logo" class="h-14" /> <img src="assets/LapLogo_black_white.png" alt="Lapikud Logo" class="h-14" />
</Button> </Button>
</div>
{/if}
<div class="flex items-center justify-end ml-auto w-full md:w-auto md:border-b-3 md:border-white backdrop-blur-lg bg-black/35">
<!-- Desktop Navigation -->
<nav class="z-10 hidden md:flex gap-1 justify-end text-lg">
<Dropdown
name={$text.about}
buttonClass="hover:text-orange-500 border-transparent"
panelClass="bg-white text-black"
>
<Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/lapikutest")}
>{$text.aboutPages.info}</Button
>
<Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/tudengile")}
><Bot />{$text.aboutPages.join}</Button
>
<Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/mentorid")}
><HandHeart />{$text.aboutPages.mentors}</Button
>
<Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/juhatus")}
><Lectern />{$text.aboutPages.board}</Button
>
</Dropdown>
<Dropdown
name={$text.events}
buttonClass="hover:text-orange-500 border-transparent"
panelClass="bg-white text-black"
>
<Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/koolitused")}
><Presentation />{$text.eventsPages.workshops}</Button
>
<Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
><Trophy />ASI Karikas</Button
>
<Button class="bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
><Coffee />{$text.eventsPages.repair}</Button
>
</Dropdown>
<Button class="hover:text-orange-500 border-transparent" onClick={() => navigate("/helpdesk")}
>{$text.helpdesk}
</Button>
<Button class="hover:text-orange-500 border-transparent" onClick={() => navigate("/kontakt")}
>{$text.contact}
</Button>
<!-- Language Switcher -->
<Button
class="px-3 py-1 text-sm ml-4 hover:text-orange-500 border-transparent"
onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
>
{$currentLang === 'est' ? 'EN' : 'EST'}
</Button>
</nav>
<!-- Mobile Hamburger Button - Fixed position -->
{#if !mobileMenuOpen}
<Button
onClick={toggleMobileMenu}
class="mobile-only p-2 text-white transition-colors bg-transparent absolute right-0 hover:text-white border-transparent"
aria-label="Toggle navigation menu"
>
<Menu size={32} />
</Button>
{/if}
</div> </div>
{/if}
<div class="flex items-center justify-end ml-auto w-full md:w-auto md:border-b-3 md:border-white backdrop-blur-lg bg-black/35">
<!-- Desktop Navigation -->
<nav class="z-10 hidden md:flex gap-1 justify-end text-lg">
<Dropdown
name={$text.about || 'Meist'}
buttonClass="rounded-[5px] hover:text-white border-transparent"
panelClass="bg-white text-black"
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/lapikutest")}
>{$text.aboutPages.info}</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/tudengile")}
><Bot />{$text.aboutPages.join}</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/mentorid")}
><HandHeart />{$text.aboutPages.mentors}</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/juhatus")}
><Lectern />{$text.aboutPages.board}</Button
>
</Dropdown>
<Dropdown
name={$text.events}
buttonClass="rounded-[5px] hover:text-white border-transparent"
panelClass="bg-white text-black"
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("/koolitused")}
><Presentation />{$text.eventsPages.workshops}</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("https://asikarikas.ee/", { external: true })}
><Trophy />ASI Karikas</Button
>
<Button class="rounded-[5px] bg-transparent hover:text-orange-500 border-transparent" onClick={() => navigate("https://remondikohvik.lapikud.ee/", { external: true })}
><Coffee />{$text.eventsPages.repair}</Button
>
</Dropdown>
<Button class="rounded-[5px] hover:text-white border-transparent" onClick={() => navigate("/kontakt")}
>{$text.contact}
</Button>
<Button class="rounded-[5px] hover:text-white border-transparent" onClick={() => navigate("/helpdesk")}
>{$text.helpdesk}
</Button>
<!-- Language Switcher -->
<Button
class="rounded-[5px] px-3 py-1 text-sm ml-4 hover:text-white border-transparent"
onClick={() => switchLanguageRoute($currentLang === 'est' ? 'en' : 'est')}
>
{$currentLang === 'est' ? 'EN' : 'EST'}
</Button>
</nav>
<!-- Mobile Hamburger Button - Fixed position -->
{#if !mobileMenuOpen}
<Button
onClick={toggleMobileMenu}
class="mobile-only p-2 text-white transition-colors bg-transparent absolute right-0 hover:text-white border-transparent"
aria-label="Toggle navigation menu"
>
<Menu size={32} />
</Button>
{/if}
</div>
</div> </div>
{/if} {/if}
</Container> </Container>
@@ -290,18 +290,18 @@
<!-- Direct Links --> <!-- Direct Links -->
<Stack gap="gap-3"> <Stack gap="gap-3">
<Button
onClick={() => handleNavigation("/kontakt")}
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent"
>
{$text.contact}
</Button>
<Button <Button
onClick={() => handleNavigation("/helpdesk")} onClick={() => handleNavigation("/helpdesk")}
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent" class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent"
> >
{$text.helpdesk} {$text.helpdesk}
</Button> </Button>
<Button
onClick={() => handleNavigation("/kontakt")}
class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent"
>
{$text.contact}
</Button>
</Stack> </Stack>
<!-- Language Switcher --> <!-- Language Switcher -->
<Stack gap="gap-3"> <Stack gap="gap-3">

View File

@@ -1,7 +1,13 @@
{ {
"address": "Address: ", "footer": {
"mail": "E-mail: ", "address": "Address: ",
"messenger": "Messenger: ", "addressValue": "Akadeemia tee 5, 12616 Tallinn, Estonia",
"reg": "Reg. code: ", "mail": "E-mail: ",
"socials": "Social Media" "phone": "Phone: ",
"messenger": "Messenger: ",
"reg": "Reg. code: ",
"bank": "Swedbank",
"socials": "Social Media",
"organization": "Lapikud NGO"
}
} }

View File

@@ -1,7 +1,13 @@
{ {
"address": "Aadress: ", "footer": {
"mail": "E-post: ", "address": "Aadress: ",
"messenger": "Messenger: ", "addressValue": "Akadeemia tee 5, 12616 Tallinn, Eesti",
"reg": "Reg. kood: ", "mail": "E-post: ",
"socials": "Sotsiaalmeedia" "phone": "Tel: ",
"messenger": "Messenger: ",
"reg": "Reg. kood: ",
"bank": "Swedbank",
"socials": "Sotsiaalmeedia",
"organization": "MTÜ Lapikud"
}
} }

View File

@@ -56,7 +56,11 @@
<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="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="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"> <div class="flex w-full max-w-115 flex-col justify-between">
<img src="/assets/LapLogo_white_orange.png" alt={$text["hero"]?.logoAlt || "MTÜ Lapikud"} class="w-full max-w-55 md:max-w-65 h-auto"/> <Image
src="/assets/LapLogo_white_orange.png"
alt={$text["hero"]?.logoAlt || "MTÜ Lapikud"}
class="w-full max-w-65 md:max-w-80 h-auto pt-5 md:pt-10"
/>
<div class="flex flex-col items-start gap-5"> <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"> <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">
{$text["hero"]?.description || "MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi ja praegusi IT huvilisi tudengeid."} {$text["hero"]?.description || "MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi ja praegusi IT huvilisi tudengeid."}
@@ -173,7 +177,7 @@
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<Button <Button
class="rounded-md border-orange-500 bg-orange-500 px-20 py-2 transition-colors hover:border-orange-300 hover:bg-orange-300" class="border-orange-500 bg-orange-500 px-20 py-2 transition-colors hover:border-orange-300 hover:bg-orange-300"
onClick={() => navigate($currentLang === "en" ? "/contact" : "/kontakt")} onClick={() => navigate($currentLang === "en" ? "/contact" : "/kontakt")}
> >
{$text["aboutSection"]?.contact || "Kontakt"} {$text["aboutSection"]?.contact || "Kontakt"}
@@ -184,7 +188,7 @@
</div> </div>
</div> </div>
<div class="relative overflow-hidden min-h-80 md:min-h-0 md:h-full md:self-stretch"> <div class="relative overflow-hidden min-h-90 md:h-full md:self-stretch">
<div class="absolute inset-0"> <div class="absolute inset-0">
<Image <Image
src="/assets/home-page-images/about_us.png" src="/assets/home-page-images/about_us.png"
@@ -283,11 +287,11 @@
gap="gap-y-0 md:gap-x-[clamp(5.75rem,9vw,9.75rem)] lg:gap-x-[clamp(6rem,9vw,10.5rem)]" gap="gap-y-0 md:gap-x-[clamp(5.75rem,9vw,9.75rem)] lg:gap-x-[clamp(6rem,9vw,10.5rem)]"
class="pb-10" class="pb-10"
> >
<div class="relative overflow-hidden min-h-80 md:min-h-0 md:h-full md:self-stretch"> <div class="relative overflow-hidden min-h-90 md:min-h-0 md:h-full md:self-stretch">
<div class="absolute inset-0"> <div class="absolute inset-0">
<Image <Image
src="/assets/home-page-images/temp.png" src="/assets/home-page-images/temp.png"
alt={$text["whatWeDo"]?.imageAlt || "Lapikute arendatud projekt"} alt={$text["whatWeDo"]?.imageAlt || "Lapikud parandamas riistvara"}
objectFit="cover" objectFit="cover"
class="h-full w-full max-w-none!" class="h-full w-full max-w-none!"
pictureClass="block h-full w-full" pictureClass="block h-full w-full"
@@ -320,8 +324,8 @@
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<ArrowLeft class="h-12 w-12 text-orange-500 md:h-14 md:w-14" strokeWidth={2.4} /> <ArrowLeft class="h-12 w-12 text-orange-500 md:h-14 md:w-14" strokeWidth={2.4} />
<Button <Button
class="rounded-md border-orange-500 bg-orange-500 px-20 py-2 transition-colors hover:border-orange-300 hover:bg-orange-300" class="border-orange-500 bg-orange-500 px-20 py-2 transition-colors hover:border-orange-300 hover:bg-orange-300"
onClick={() => navigate($currentLang === "en" ? "/contact" : "/kontakt")} onClick={() => navigate($currentLang === "en" ? "/student" : "/tudengile")}
> >
{$text["whatWeDo"]?.contact || "Kontakt"} {$text["whatWeDo"]?.contact || "Kontakt"}
</Button> </Button>