New newHome page

src/components/layout/Grid.svelte

@@ -1,11 +1,13 @@
 <script>
   export let min = "220px";        // min column width (used when columns not set)
   export let columns = null;       // fixed number of columns for desktop
+  export let largeColumns = null;  // fixed number of columns for large desktop
   export let mobileColumns = null; // fixed number of columns for mobile
   export let gap = "gap-3";
   export let className = "";
 
   $: desktopColumns = columns ? `repeat(${columns}, 1fr)` : '1fr';
+  $: largeDesktopColumns = largeColumns ? `repeat(${largeColumns}, 1fr)` : desktopColumns;
   $: mobileCols = mobileColumns ? `repeat(${mobileColumns}, 1fr)` : '1fr';
 </script>
 
@@ -14,6 +16,7 @@
   style="
     --min: {min}; 
     --desktop-columns: {desktopColumns};
+    --large-desktop-columns: {largeDesktopColumns};
     --mobile-columns: {mobileCols};
     grid-template-columns: var(--mobile-columns);
   "
@@ -38,4 +41,10 @@
       grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr)) !important;
     }
   }
+
+  @media (min-width: 1024px) {
+    .grid {
+      grid-template-columns: var(--large-desktop-columns) !important;
+    }
+  }
 </style>

src/layout/Navbar.svelte

@@ -171,14 +171,15 @@
       </nav>
 
       <!-- Mobile Hamburger Button - Fixed position -->
-      <Button
+      {#if !mobileMenuOpen}
-        onClick={toggleMobileMenu}
+        <Button
-        class="md:hidden p-2 text-white transition-colors bg-transparent absolute right-0 hover:text-white"
+          onClick={toggleMobileMenu}
-        style="opacity: {mobileMenuOpen ? '0' : '1'}; pointer-events: {mobileMenuOpen ? 'none' : 'auto'};"
+          class="md:hidden p-2 text-white transition-colors bg-transparent absolute right-0 hover:text-white"
-        aria-label="Toggle menu"
+          aria-label="Toggle menu"
-      >
+        >
-        <Menu size={32} />
+          <Menu size={32} />
-      </Button>
+        </Button>
+      {/if}
       </div>
       </div>
     {/if}
@@ -188,12 +189,12 @@
 <!-- Full Screen Mobile Menu -->
 {#if mobileMenuOpen}
   <div 
-    class="fixed inset-0 z-100 bg-(--off-black) md:hidden overflow-y-auto"
+    class="fixed inset-0 z-100 bg-black/95 md:hidden overflow-y-auto"
     class:menu-opening={!isClosing}
     class:menu-closing={isClosing}
   >
     <Stack className="min-h-full">
-      <div class="absolute top-8 right-0">
+      <div class="absolute top-6 right-4">
         <Button
           onClick={closeMobileMenu}
           class="ml-auto p-2 transition-colors flex bg-transparent hover:text-orange-500"
@@ -244,7 +245,7 @@
           <h3 class="text-2xl font-bold text-orange-500">{$text.events}</h3>
           <Stack gap="gap-2" className="pl-4">
             <Button
-              onClick={() => handleNavigation("/mentorid")}
+              onClick={() => handleNavigation("/koolitused")}
               class="text-left transition-colors flex items-center gap-2 bg-transparent hover:text-orange-500"
             >
               <Presentation size={20} />

src/routes/NewHome.svelte

@@ -1,5 +1,6 @@
 <script>
-import {Section, Stack, Grid, Center, Image, Svg} from "$components";
+import {Section, Stack, Grid, Center, Image, Svg, Button} from "$components";
+import { navigate } from "$lib/router/router.js";
 </script>
 
 <!-- TODO: grid gap dynamic -->
@@ -7,9 +8,9 @@ import {Section, Stack, Grid, Center, Image, Svg} from "$components";
 <!-- Hero Section -->
 <Section className="relative min-h-screen overflow-hidden" padding="none" bg="bg-gray-900" id="hero">
   <div class="relative min-h-screen flex items-center">
-    <div class="pointer-events-none absolute inset-0" aria-hidden="true">
+    <div class="absolute inset-0" aria-hidden="true">
       <Image
-        src="/assets/carousel-images/1.jpg"
+        src="/assets/BSidesTLN25-KerstinTälli-128.jpg"
         alt=""
         objectFit="cover"
         className="w-full h-full"
@@ -17,52 +18,44 @@ import {Section, Stack, Grid, Center, Image, Svg} from "$components";
       />
     </div>
     <div
-      class="pointer-events-none absolute inset-0 bg-gray-900 [clip-path:polygon(58%_0,100%_0,100%_100%,35%_100%)]"
+      class="pointer-events-none absolute inset-0 hidden md:block [clip-path:polygon(42%_0,100%_0,100%_100%,65%_100%)]"
-      aria-hidden="true"
-    ></div>
-    <div
-      class="pointer-events-none absolute inset-0 bg-orange-500/75 [clip-path:polygon(0_0,58%_0,35%_100%,0_100%)]"
-      aria-hidden="true"
-    ></div>
-
-    <div
-      class="pointer-events-none absolute inset-0 [clip-path:polygon(0_0,58%_0,35%_100%,0_100%)]"
       aria-hidden="true"
     >
       <Svg
-        type="connector"
+        type="mirrorH"
-        className="absolute left-0 top-[16%] w-[clamp(130px,14vw,230px)] text-white/95"
+        className="absolute right-0 top-[16%] w-[clamp(130px,14vw,230px)] text-[#E18E38]"
       />
       <Svg
-        type="branch"
+        type="branchH"
-        className="absolute left-0 top-[52%] -translate-y-1/2 w-[clamp(56px,6vw,94px)] text-white/95"
+        className="absolute right-0 top-[52%] -translate-y-1/2 w-[clamp(56px,6vw,94px)] text-[#E18E38]"
       />
       <Svg
-        type="mirrorV"
+        type="mirrorVH"
-        className="absolute left-0 bottom-[12%] w-[clamp(130px,14vw,230px)] text-white/95"
+        className="absolute right-0 bottom-[12%] w-[clamp(130px,14vw,230px)] text-[#E18E38]"
       />
     </div>
-
+    <div class="pointer-events-none absolute inset-y-0 left-0 w-[70%] bg-linear-to-r from-black/65 via-black/35 to-transparent" aria-hidden="true"></div>
-    <div
+    <div class="relative z-20 flex min-h-screen w-full items-stretch px-6 py-8 md:px-10 md:py-12">
-      class="pointer-events-none absolute inset-x-0 bottom-[6%] z-10 hidden md:flex w-full flex-col items-end gap-3"
+      <div class="flex w-full max-w-[460px] flex-col justify-between">
-      aria-hidden="true"
+        <img src="/assets/LapLogo_white_orange.png" alt="MTÜ Lapikud" class="w-full max-w-[220px] md:max-w-[260px] h-auto"/>
-    >
+        <div class="flex flex-col items-start gap-5">
-      <div class="h-6 w-[45%] bg-orange-500/90"></div>
+          <p class="w-full max-w-[440px] text-left text-lg leading-[165%] text-white drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)] md:max-w-[500px] md:text-xl">
-      <div class="h-4 w-[55%] bg-orange-500/90"></div>
+            MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
+            ja praegusi IT huvilisi tudengeid.
+          </p>
+          <Button
+            class="rounded-lg border-orange-500 bg-orange-500 px-6 py-3 text-gray-900 transition-colors hover:border-orange-300 hover:bg-orange-300"
+            onClick={() => navigate("/tudengile")}
+          >
+            Liitu LAPikutega!
+          </Button>
+        </div>
+      </div>
     </div>
-
-    <Grid columns={2} className="relative z-20 items-center">
-      <Center className="self-center md:-translate-y-8">
-        <img src="/assets/LapLogo_black_white.png" alt="MTÜ Lapikud" class="max-w-lg w-full h-auto p-4"/>
-      </Center>
-      <p class="self-center md:translate-y-14 text-center text-2xl leading-[200%] p-8 text-white">
-        MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
-        ja praegusi IT huvilisi tudengeid.
-      </p>
-    </Grid>
   </div>
 </Section>
 
+
 <Section className="relative overflow-hidden">
   <div class="pointer-events-none absolute inset-x-0 top-15 z-0" aria-hidden="true">
     <Svg
@@ -75,50 +68,50 @@ import {Section, Stack, Grid, Center, Image, Svg} from "$components";
     />
   </div>
 
-  <Grid columns={3} className="relative z-10 px-3 items-start max-w-6xl mx-auto mt-20" gap="gap-40">
+  <Grid columns={2} largeColumns={3} mobileColumns={1} className="relative z-10 items-start max-w-6xl mx-auto mt-12 px-4 md:mt-20 md:px-6" gap="gap-12 md:gap-16 lg:gap-24">
-    <Center dir="col" className="w-full max-w-sm justify-start">
+    <Center dir="col" className="w-full max-w-sm justify-start mx-auto">
-      <div class="w-full aspect-square rounded-full overflow-hidden">
+      <div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
         <Image
           src="/assets/student-images/image_1.jpg"
           webpSrc=""
           alt="Tudengile Pilt"
           objectFit="cover"
-          className="w-full h-full rounded-full"
+          className="w-full h-full rounded-full object-[center_35%]"
           pictureClass="block w-full h-full"
         />
       </div>
-      <h3 class="w-full min-h-[2.5rem] text-center text-2xl font-semibold flex items-center justify-center">Tudengile</h3>
+      <h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Tudengile</h3>
-      <p class="w-full text-center text-xs leading-[160%]">Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.</p>
+      <p class="w-full max-w-[26ch] text-center text-base leading-[160%]">Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.</p>
     </Center>
 
-    <Center dir="col" className="w-full max-w-sm justify-start">
+    <Center dir="col" className="w-full max-w-sm justify-start mx-auto">
-      <div class="w-full aspect-square rounded-full overflow-hidden">
+      <div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
         <Image
           src="/assets/helpdesk/helpdesk_bg.jpg"
           webpSrc=""
           alt="Helpdesk Pilt"
           objectFit="cover"
-          className="w-full h-full rounded-full"
+          className="w-full h-full rounded-full object-[center_38%]"
           pictureClass="block w-full h-full"
         />
       </div>
-      <h3 class="w-full min-h-[2.5rem] text-center text-2xl font-semibold flex items-center justify-center">Helpdesk</h3>
+      <h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Helpdesk</h3>
-      <p class="w-full text-center text-xs leading-[160%]">HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.</p>
+      <p class="w-full max-w-[26ch] text-center text-base leading-[160%]">HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.</p>
     </Center>
 
-    <Center dir="col" className="w-full max-w-sm justify-start">
+    <Center dir="col" className="w-full max-w-sm justify-start mx-auto md:col-span-2 lg:col-span-1">
-      <div class="w-full aspect-square rounded-full overflow-hidden">
+      <div class="w-[min(72vw,240px)] md:w-[min(26vw,280px)] lg:w-[min(23vw,300px)] aspect-square rounded-full overflow-hidden">
         <Image
-          src="/assets/helpdesk/469521237_1574639476758835_7853856396417097536_n.jpg"
+          src="/assets/asi-karikas-2023-images/miina_harma.jpeg"
           webpSrc=""
           alt="Ettevõttele Pilt"
           objectFit="cover"
-          className="w-full h-full rounded-full"
+          className="w-full h-full rounded-full object-[center_25%]"
           pictureClass="block w-full h-full"
         />
       </div>
-      <h3 class="w-full min-h-[2.5rem] text-center text-2xl font-semibold flex items-center justify-center">Ettevõttele</h3>
+      <h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Ettevõttele</h3>
-      <p class="w-full text-center text-xs leading-[160%]">Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis tejie projekte realiseerima.</p>
+      <p class="w-full max-w-[26ch] text-center text-base leading-[160%]">Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.</p>
     </Center>
   </Grid>
 </Section>