small fixes, hero and navbar

2026-08-08 14:29:13 +00:00 · 2026-04-06 02:55:39 +03:00
parent 837057a976
commit 78f70458e2
5 changed files with 115 additions and 98 deletions
--- a/src/layout/Footer.svelte
+++ b/src/layout/Footer.svelte
@@ -6,6 +6,7 @@ import {
    Center,
    Svg,
  } from "$components";
+import { text } from "$lib";

 </script>

@@ -15,24 +16,24 @@ import {
            <h3 class="text-3xl font-light pb-4">MTÜ Lapikud</h3>
            <Container center={false}>
                <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/>
-                    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/>
-                    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/>
-                    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>
                <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/>
-                    Swedbank EE812200221019551756
+                    {$text.footer?.bank || "Swedbank"} EE812200221019551756
                </div>
            </Container>
        </div>
        <div>
        <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">
                <a href="https://www.instagram.com/lapikud/" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="transition-opacity duration-200">
                    <Svg type="instagram"/>
@@ -47,5 +48,5 @@ import {
        </Container>
        </div>
    </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>
--- a/src/layout/Navbar.svelte
+++ b/src/layout/Navbar.svelte
@@ -128,78 +128,78 @@
  <Container maxWidth={true} center={false} class="py-0">
    {#if $text && Object.keys($text).length > 0}
      <div class="flex items-center w-full relative min-h-10">
-      <!-- Logo -->
-      {#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">
-          <Button onClick={() => handleNavigation("/")} class="border-transparent">
-            <img src="assets/LapLogo_black_white.png" alt="Lapikud Logo" class="h-14" />
-          </Button>
-        </div>
-      {/if}
+        <!-- Logo -->
+        {#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">
+            <Button onClick={() => handleNavigation("/")} class="border-transparent">
+              <img src="assets/LapLogo_black_white.png" alt="Lapikud Logo" class="h-14" />
+            </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 || '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
+        <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="rounded-[5px] 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("/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="rounded-[5px] 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("/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')}
            >
-            <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>
+              {$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>
+          <!-- 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}
  </Container>
@@ -290,18 +290,18 @@

        <!-- Direct Links -->
        <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
            onClick={() => handleNavigation("/helpdesk")}
            class="text-left text-2xl font-semibold transition-colors bg-transparent hover:text-orange-500 border-transparent"
          >
            {$text.helpdesk}
          </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>
        <!-- Language Switcher -->
        <Stack gap="gap-3">
--- a/src/lib/locales/en/Footer.json
+++ b/src/lib/locales/en/Footer.json
@@ -1,7 +1,13 @@
 {
-  "address": "Address: ",
-  "mail": "E-mail: ",
-  "messenger": "Messenger: ",
-  "reg": "Reg. code: ",
-  "socials": "Social Media"
+  "footer": {
+    "address": "Address: ",
+    "addressValue": "Akadeemia tee 5, 12616 Tallinn, Estonia",
+    "mail": "E-mail: ",
+    "phone": "Phone: ",
+    "messenger": "Messenger: ",
+    "reg": "Reg. code: ",
+    "bank": "Swedbank",
+    "socials": "Social Media",
+    "organization": "Lapikud NGO"
+  }
 }
--- a/src/lib/locales/est/Footer.json
+++ b/src/lib/locales/est/Footer.json
@@ -1,7 +1,13 @@
 {
-  "address": "Aadress: ",
-  "mail": "E-post: ",
-  "messenger": "Messenger: ",
-  "reg": "Reg. kood: ",
-  "socials": "Sotsiaalmeedia"
+  "footer": {
+    "address": "Aadress: ",
+    "addressValue": "Akadeemia tee 5, 12616 Tallinn, Eesti",
+    "mail": "E-post: ",
+    "phone": "Tel: ",
+    "messenger": "Messenger: ",
+    "reg": "Reg. kood: ",
+    "bank": "Swedbank",
+    "socials": "Sotsiaalmeedia",
+    "organization": "MTÜ Lapikud"
+  }
 }
--- a/src/routes/Home.svelte
+++ b/src/routes/Home.svelte
@@ -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="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={$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">
          <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."}
@@ -173,7 +177,7 @@

          <div class="flex items-center gap-4">
            <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")}
            >
              {$text["aboutSection"]?.contact || "Kontakt"}
@@ -184,7 +188,7 @@
      </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">
        <Image
          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)]"
    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">
        <Image
          src="/assets/home-page-images/temp.png"
-          alt={$text["whatWeDo"]?.imageAlt || "Lapikute arendatud projekt"}
+          alt={$text["whatWeDo"]?.imageAlt || "Lapikud parandamas riistvara"}
          objectFit="cover"
          class="h-full w-full max-w-none!"
          pictureClass="block h-full w-full"
@@ -320,8 +324,8 @@
          <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} />
            <Button
-              class="rounded-md 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")}
+              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" ? "/student" : "/tudengile")}
            >
              {$text["whatWeDo"]?.contact || "Kontakt"}
            </Button>