Home, card, mentors page update

src/components/layout/Card.svelte

@@ -1,6 +1,6 @@
 <script>
   export let href = "";
-  export let variant = "default"; // 'default' | 'animated' | 'animated-neutral' | 'glass'
+  export let variant = "default"; // 'default' | 'animated' | 'animated-neutral' | 'glass' | 'blur'
   export let className = "";
 
   const variantClasses = {
@@ -8,6 +8,7 @@
     animated: "card-animated",
     "animated-neutral": "card-animated-neutral",
     glass: "card-glass",
+    blur: "card-blur",
   };
 </script>
 
@@ -80,6 +81,35 @@
     transform: none;
   }
 
+  .card-blur {
+    background: rgba(255, 255, 255, 0.68);
+    backdrop-filter: blur(18px) saturate(160%);
+    -webkit-backdrop-filter: blur(18px) saturate(160%);
+    border: 1px solid rgba(255, 255, 255, 0.55);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
+    isolation: isolate;
+  }
+
+  .card-blur::before {
+    content: "";
+    position: absolute;
+    inset: -12px;
+    border-radius: calc(var(--radius-lg) + 12px);
+    background: radial-gradient(
+      120% 120% at 50% 50%,
+      rgba(245, 245, 245, 0.95) 45%,
+      rgba(245, 245, 245, 0.55) 65%,
+      rgba(245, 245, 245, 0) 82%
+    );
+    filter: blur(10px);
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .card-blur:hover {
+    background: rgba(255, 255, 255, 0.78);
+  }
+
   @media (max-width: 768px) {
     .card {
       padding: var(--space-4);

src/layout/Navbar.svelte

@@ -195,11 +195,11 @@
 <!-- Full Screen Mobile Menu -->
 {#if mobileMenuOpen}
   <div 
-    class="fixed inset-0 z-100 bg-(--off-black) md:hidden overflow-hidden"
+    class="fixed inset-0 z-100 bg-(--off-black) md:hidden overflow-y-auto"
     class:menu-opening={!isClosing}
     class:menu-closing={isClosing}
   >
-    <Stack className="h-full">
+    <Stack className="min-h-full">
       <div class="absolute top-8 right-0 px-(--site-padding)">
         <Button
           onClick={closeMobileMenu}
@@ -212,7 +212,7 @@
       </div>
 
       <!-- Menu Content -->
-      <Stack gap="var(--space-5)" className="flex-1 px-8 pb-8 text-white text-xl justify-center">
+      <Stack gap="var(--space-5)" className="flex-1 px-8 pt-24 pb-12 text-white text-xl">
         <!-- About Section -->
         <Stack gap="var(--space-3)">
           <h3 class="text-2xl font-bold" style="color: var(--orange)">{$text.about}</h3>

src/routes/Home.svelte

@@ -39,7 +39,7 @@
 
 <Section>
   <Grid gap="var(--space-5)">
-    <Card variant="animated-neutral" href="/tudengile">
+    <Card variant="blur" href="/tudengile">
       <div class="feature-icon" style="color: var(--orange)">
         <Users size={32} strokeWidth={1.5} />
       </div>
@@ -52,7 +52,7 @@
       </div>
     </Card>
 
-    <Card variant="animated-neutral" href="/helpdesk">
+    <Card variant="blur" href="/helpdesk">
       <div class="feature-icon" style="color: var(--orange)">
         <Wrench size={32} strokeWidth={1.5} />
       </div>
@@ -65,7 +65,7 @@
       </div>
     </Card>
 
-    <Card variant="animated-neutral" href="/ourwork">
+    <Card variant="blur" href="/ourwork">
       <div class="feature-icon" style="color: var(--orange)">
         <HeartHandshake size={32} strokeWidth={1.5} />
       </div>
@@ -83,11 +83,11 @@
 <!-- What We Do Section -->
 <Section>
   <Grid gap="var(--space-4)">
-    <Card variant="glass">
+    <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="glass">
+    <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>

src/routes/Mentors.svelte

@@ -1,12 +1,7 @@
 <script>
-  import {
+    import { Section, Card, Center } from "$components";
-    Section,
-    Grid,
-    Card,
-    Center,
-  } from "$components";
     import { onMount } from "svelte";
-  import yaml from 'js-yaml';
+    import yaml from "js-yaml";
     import { currentLang, getLangText } from "$lib";
 
     import Mail from "lucide-svelte/icons/mail";
@@ -17,16 +12,21 @@
     let mentors = [];
 
     onMount(async () => {
-    const response = await fetch('/_data/mentors.yml');
+        const response = await fetch("/_data/mentors.yml");
         const yamlText = await response.text();
         mentors = yaml.load(yamlText);
     });
 
     function getContactIcon(contactType) {
         const type = contactType.toLowerCase();
-    if (type.includes('email') || type.includes('e-post')) return Mail;
+        if (type.includes("email") || type.includes("e-post")) return Mail;
-    if (type.includes('phone') || type.includes('telefon')) return Phone;
+        if (type.includes("phone") || type.includes("telefon")) return Phone;
-    if (type.includes('messenger') || type.includes('discord') || type.includes('facebook')) return MessageCircle;
+        if (
+            type.includes("messenger") ||
+            type.includes("discord") ||
+            type.includes("facebook")
+        )
+            return MessageCircle;
         return User;
     }
 
@@ -34,14 +34,15 @@
         const type = method.name.toLowerCase();
         const value = method.value;
 
-    if (type.includes('email')) return `mailto:${value}`;
+        if (type.includes("email")) return `mailto:${value}`;
-    if (type.includes('phone') || type.includes('telefon')) return `tel:${value}`;
+        if (type.includes("phone") || type.includes("telefon"))
-    if (type.includes('messenger') || type.includes('facebook')) {
+            return `tel:${value}`;
-      return value.startsWith('http') ? value : `https://m.me/${value}`;
+        if (type.includes("messenger") || type.includes("facebook")) {
+            return value.startsWith("http") ? value : `https://m.me/${value}`;
         }
-    if (type.includes('discord')) return '#';
+        if (type.includes("discord")) return "#";
 
-    return value.startsWith('http') ? value : '#';
+        return value.startsWith("http") ? value : "#";
     }
 </script>
 
@@ -51,7 +52,8 @@
         <div class="text-center max-w-4xl">
             <h1 class="text-5xl font-bold mb-6">Meie Mentorid</h1>
             <p class="text-2xl leading-relaxed">
-        Kogenud tudengid, kes aitavad sind areneda ja jagavad oma teadmisi
+                Kogenud tudengid, kes aitavad sind areneda ja jagavad oma
+                teadmisi
             </p>
         </div>
     </Center>
@@ -60,13 +62,17 @@
 <!-- Mentors Grid -->
 <Section>
     <div class="text-center mb-12">
-    <h2 class="text-4xl font-bold mb-4">Tutvuge meie mentorite meeskonnaga</h2>
+        <h2 class="text-4xl font-bold mb-4">
-    <p class="text-xl text-gray-600">Igaüks neist on spetsialist omas valdkonnas ja valmis sind aitama</p>
+            Tutvuge meie mentorite meeskonnaga
+        </h2>
+        <p class="text-xl text-gray-600">
+            Igaüks neist on spetsialist omas valdkonnas ja valmis sind aitama
+        </p>
     </div>
 
-  <Grid columns={2} gap="var(--space-6)">
+    <div class="flex flex-col gap-8">
         {#each mentors as mentor}
-      <Card variant="glass" class="overflow-hidden">
+            <div>
                 <div class="flex flex-col md:flex-row gap-6">
                     <!-- Mentor Photo -->
                     {#if mentor.photo}
@@ -74,9 +80,11 @@
                             <img
                                 src={`/assets/mentors-images/optimised/${mentor.photo}`}
                                 alt={mentor.name}
-                class="w-full md:w-48 h-48 object-cover rounded-lg"
+                                class="w-full md:w-48 h-48 object-cover"
                                 on:error={(e) => {
-                  e.target.src = '/assets/mentors-images/original/' + mentor.photo;
+                                    e.target.src =
+                                        "/assets/mentors-images/original/" +
+                                        mentor.photo;
                                 }}
                             />
                         </div>
@@ -87,35 +95,60 @@
                         <h3 class="text-2xl font-bold mb-2">{mentor.name}</h3>
 
                         {#if mentor.age}
-              <p class="text-gray-600 mb-2">Vanus: {mentor.age}</p>
+                            <p class="text-gray-600 mb-2">
+                                Vanus: {mentor.age}
+                            </p>
                         {/if}
 
                         {#if mentor.speciality}
-              <p class="text-lg font-semibold mb-2" style="color: var(--orange)">
+                            <p
-                {getLangText(mentor, 'speciality', $currentLang)}
+                                class="text-lg font-semibold mb-2"
+                                style="color: var(--orange)"
+                            >
+                                {getLangText(
+                                    mentor,
+                                    "speciality",
+                                    $currentLang,
+                                )}
                             </p>
                         {/if}
 
                         {#if mentor.teams && mentor.teams.length > 0}
                             <div class="mb-3">
                                 <span class="font-semibold">Meeskonnad: </span>
-                <span class="text-gray-700">{mentor.teams.join(', ')}</span>
+                                <span class="text-gray-700"
+                                    >{mentor.teams.join(", ")}</span
+                                >
                             </div>
                         {/if}
 
                         {#if mentor.term}
-              <p class="text-gray-600 mb-3">Ametiperiood: {mentor.term} {mentor.term === 1 ? 'aasta' : 'aastat'}</p>
+                            <p class="text-gray-600 mb-3">
+                                Ametiperiood: {mentor.term}
+                                {mentor.term === 1 ? "aasta" : "aastat"}
+                            </p>
                         {/if}
 
                         {#if mentor.description}
-              <p class="text-sm font-semibold mb-2" style="color: var(--orange)">
+                            <p
-                Otsin: {getLangText(mentor, 'description', $currentLang)}
+                                class="text-sm font-semibold mb-2"
+                                style="color: var(--orange)"
+                            >
+                                Otsin: {getLangText(
+                                    mentor,
+                                    "description",
+                                    $currentLang,
+                                )}
                             </p>
                         {/if}
 
                         {#if mentor.activities}
-              <p class="text-gray-700 text-sm mb-4 line-clamp-3">
+                            <p class="text-gray-700 text-sm mb-4">
-                {getLangText(mentor, 'activities', $currentLang)}
+                                {getLangText(
+                                    mentor,
+                                    "activities",
+                                    $currentLang,
+                                )}
                             </p>
                         {/if}
 
@@ -123,35 +156,48 @@
                         {#if mentor.contactMethods && mentor.contactMethods.length > 0}
                             <div class="flex flex-wrap gap-2 mt-4">
                                 {#each mentor.contactMethods as method}
-                  {@const IconComponent = getContactIcon(method.name)}
+                                    {@const IconComponent = getContactIcon(
+                                        method.name,
+                                    )}
                                     <a
                                         href={getContactLink(method)}
                                         class="inline-flex items-center gap-2 px-3 py-2 bg-orange-100 hover:bg-orange-200 rounded-lg transition-colors text-sm"
                                         title={method.name}
-                    target={method.value.startsWith('http') ? '_blank' : '_self'}
+                                        target={method.value.startsWith("http")
-                    rel={method.value.startsWith('http') ? 'noopener noreferrer' : ''}
+                                            ? "_blank"
+                                            : "_self"}
+                                        rel={method.value.startsWith("http")
+                                            ? "noopener noreferrer"
+                                            : ""}
+                                    >
+                                        <svelte:component
+                                            this={IconComponent}
+                                            size={16}
+                                        />
+                                        <span class="capitalize"
+                                            >{method.name}</span
                                         >
-                    <svelte:component this={IconComponent} size={16} />
-                    <span class="capitalize">{method.name}</span>
                                     </a>
                                 {/each}
                             </div>
                         {/if}
                     </div>
                 </div>
-      </Card>
+            </div>
         {/each}
-  </Grid>
+    </div>
 </Section>
 
 <!-- Become a Mentor Section -->
 <Section background="neutral">
     <Center>
         <Card variant="glass" class="max-w-3xl">
-      <h2 class="text-4xl font-bold mb-6 text-center">Taha saada mentoriks?</h2>
+            <h2 class="text-4xl font-bold mb-6 text-center">
+                Taha saada mentoriks?
+            </h2>
             <p class="text-lg text-center mb-6">
-        Kui oled kogenud tudeng ja soovid jagada oma teadmisi ning aidata uusi liikmeid, 
+                Kui oled kogenud tudeng ja soovid jagada oma teadmisi ning
-        siis võta meiega ühendust!
+                aidata uusi liikmeid, siis võta meiega ühendust!
             </p>
             <div class="text-center">
                 <a
@@ -165,12 +211,3 @@
     </Center>
 </Section>
 
-<style>
-  .line-clamp-3 {
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

src/routes/Student.svelte

@@ -171,7 +171,7 @@
   
   {#if members.senior && members.senior.length > 0}
     <div class="mb-12">
-      <h3 class="text-3xl font-bold mb-6 text-center">Senior liikmed</h3>
+      <h3 class="text-3xl font-bold mb-6 text-center">Vanemliikmed</h3>
       <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
         {#each members.senior as member}
           <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">
@@ -184,7 +184,7 @@
 
   {#if members.junior && members.junior.length > 0}
     <div>
-      <h3 class="text-3xl font-bold mb-6 text-center">Junior liikmed</h3>
+      <h3 class="text-3xl font-bold mb-6 text-center">Noorliikmed</h3>
       <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
         {#each members.junior as member}
           <div class="bg-white rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow">