new home page design (Hero and first section)

src/components/layout/Section.svelte

@@ -1,9 +1,12 @@
 <script>
-  export let bg = "";
-  export let padding = "normal";
-  export let fullWidth = false;
-  export let id = "";
-  export let className = "";
+  let { 
+    bg = "", 
+    padding = "normal", 
+    fullWidth = true, 
+    id = "", 
+    className = "",
+    children
+  } = $props();
 
   const paddingClasses = {
     none: "py-0",
@@ -19,6 +22,6 @@
   class="w-full {paddingClasses[padding]} {bg} {className}"
 >
   <div class="{fullWidth ? '' : 'max-w-[1200px]'} mx-auto">
-    <slot />
+    {@render children?.()}
   </div>
 </section>

src/layout/Navbar.svelte

@@ -106,21 +106,21 @@
 </style>
 
 <header class="fixed inset-x-0 top-0 z-50 text-white">
-  <Container maxWidth={true} center={false} className="py-2 md:py-3">
+  <Container maxWidth={true} center={false} className="py-0">
     {#if $text && Object.keys($text).length > 0}
-      <div class="flex items-center w-full relative min-h-12">
+      <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("/")}>
-            <img src="assets/LapLogo_black_white.png" alt="Lapikud Logo" class="h-16" />
+            <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">
+      <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-2 justify-end text-xl">
+        <nav class="z-10 hidden md:flex gap-1 justify-end text-lg">
           <Dropdown
             name={$text.about || 'Meist'}
             buttonClass="rounded-[5px] hover:text-white"

src/routes/NewHome.svelte

@@ -1,9 +1,11 @@
 <script>
-import {Section, Grid, Center, Image, Svg} from "$components";
+import {Section, Stack, Grid, Center, Image, Svg} from "$components";
 </script>
 
+<!-- TODO: grid gap dynamic -->
+
 <!-- Hero Section -->
-<Section className="relative min-h-screen overflow-hidden" padding="none" fullWidth={true}>
+<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">
       <Image
@@ -15,16 +17,16 @@ import {Section, Grid, Center, Image, Svg} from "$components";
       />
     </div>
     <div
-      class="pointer-events-none absolute inset-0 bg-gray-900 [clip-path:polygon(75%_0,100%_0,100%_100%,25%_100%)]"
+      class="pointer-events-none absolute inset-0 bg-gray-900 [clip-path:polygon(58%_0,100%_0,100%_100%,35%_100%)]"
       aria-hidden="true"
     ></div>
     <div
-      class="pointer-events-none absolute inset-0 bg-orange-500/75 [clip-path:polygon(0_0,75%_0,25%_100%,0_100%)]"
+      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,75%_0,25%_100%,0_100%)]"
+      class="pointer-events-none absolute inset-0 [clip-path:polygon(0_0,58%_0,35%_100%,0_100%)]"
       aria-hidden="true"
     >
       <Svg
@@ -45,18 +47,78 @@ import {Section, Grid, Center, Image, Svg} from "$components";
       class="pointer-events-none absolute inset-x-0 bottom-[6%] z-10 hidden md:flex w-full flex-col items-end gap-3"
       aria-hidden="true"
     >
-      <div class="h-6 w-[50%] bg-orange-500/90"></div>
-      <div class="h-4 w-[60%] bg-orange-500/90"></div>
+      <div class="h-6 w-[45%] bg-orange-500/90"></div>
+      <div class="h-4 w-[55%] bg-orange-500/90"></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-16 text-center text-2xl leading-[200%] p-8 text-white">
+      <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
+      type="connector"
+      className="absolute left-0 w-[clamp(130px,14vw,230px)] text-orange-500"
+    />
+    <Svg
+      type="mirrorH"
+      className="absolute right-0 w-[clamp(130px,14vw,230px)] text-orange-500"
+    />
+  </div>
+
+  <Grid columns={3} className="relative z-10 px-3 items-start max-w-6xl mx-auto mt-20" gap="gap-40">
+    <Center dir="col" className="w-full max-w-sm justify-start">
+      <div class="w-full 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"
+          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>
+      <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>
+    </Center>
+
+    <Center dir="col" className="w-full max-w-sm justify-start">
+      <div class="w-full 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"
+          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>
+      <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>
+    </Center>
+
+    <Center dir="col" className="w-full max-w-sm justify-start">
+      <div class="w-full aspect-square rounded-full overflow-hidden">
+        <Image
+          src="/assets/helpdesk/469521237_1574639476758835_7853856396417097536_n.jpg"
+          webpSrc=""
+          alt="Ettevõttele Pilt"
+          objectFit="cover"
+          className="w-full h-full rounded-full"
+          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>
+      <p class="w-full text-center text-xs leading-[160%]">Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis tejie projekte realiseerima.</p>
+    </Center>
+  </Grid>
+</Section>