about us section ready

src/routes/Home.svelte

@@ -1,17 +1,31 @@
 <script>
-import {Section, Stack, Grid, Center, Image, Svg, Button} from "$components";
-import { navigate } from "$lib/router/router.js";
+  import {Section, Stack, Grid, Center, Image, Svg, Button} from "$components";
+  import { navigate } from "$lib/router/router.js";
+  import { text, currentLang } from "$lib";
+  import { onMount } from "svelte";
+  import yaml from 'js-yaml';
+
+  import ArrowRight from "lucide-svelte/icons/arrow-right";
+
+  // Partners data
+  let partners = [];
+
+  onMount(async () => {
+    const response = await fetch('/_data/partners.yml');
+    const yamlText = await response.text();
+    partners = yaml.load(yamlText);
+  });
 </script>
 
 <!-- Hero Section -->
-<Section className="relative min-h-screen overflow-hidden" padding="none" bg="bg-gray-900" id="hero">
+<Section class="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="absolute inset-0 left-1/2 w-screen -translate-x-1/2" aria-hidden="true">
       <Image
         src="/assets/hero.jpg"
         alt="illustrative hero image"
         objectFit="cover"
-        className="w-full h-full"
+        class="w-full h-full"
         pictureClass="block w-full h-full"
       />
     </div>
@@ -21,15 +35,15 @@ import { navigate } from "$lib/router/router.js";
     >
       <Svg
         type="mirrorH"
-        className="absolute right-0 top-[16%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
+        class="absolute right-0 top-[16%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
       />
       <Svg
         type="branchH"
-        className="absolute right-0 top-[52%] -translate-y-1/2 w-[clamp(3.5rem,6vw,5.875rem)] text-[#E18E38]"
+        class="absolute right-0 top-[52%] -translate-y-1/2 w-[clamp(3.5rem,6vw,5.875rem)] text-[#E18E38]"
       />
       <Svg
         type="mirrorVH"
-        className="absolute right-0 bottom-[12%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
+        class="absolute right-0 bottom-[12%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
       />
     </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>
@@ -53,63 +67,205 @@ import { navigate } from "$lib/router/router.js";
   </div>
 </Section>
 
-
-<Section className="relative overflow-hidden">
+<!-- Second Section -->
+<Section class="relative overflow-hidden" id="services">
   <div class="pointer-events-none absolute inset-x-0 left-1/2 top-15 z-0 w-screen -translate-x-1/2" aria-hidden="true">
     <Svg
       type="connector"
-      className="absolute left-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
+      class="absolute left-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
     />
     <Svg
       type="mirrorH"
-      className="absolute right-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
+      class="absolute right-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
     />
   </div>
 
-  <Grid columns={2} largeColumns={3} mobileColumns={1} className="relative z-10 items-start mt-12 md:mt-20" gap="gap-12 md:gap-16 lg:gap-24">
-    <Center dir="col" className="w-full max-w-sm justify-start mx-auto">
+  <Grid columns={2} largeColumns={3} mobileColumns={1} class="relative z-10 items-start mt-12 md:mt-20" gap="gap-12 md:gap-16 lg:gap-24">
+    <Center dir="col" class="w-full max-w-sm justify-start mx-auto">
       <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 object-[center_35%]"
+          class="w-full h-full rounded-full object-[center_35%]"
           pictureClass="block w-full h-full"
         />
       </div>
       <h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Tudengile</h3>
-      <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>
+      <p class="w-full max-w-[26ch] text-center text-base">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 mx-auto">
+    <Center dir="col" class="w-full max-w-sm justify-start mx-auto">
       <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 object-[center_38%]"
+          class="w-full h-full rounded-full object-[center_38%]"
           pictureClass="block w-full h-full"
         />
       </div>
       <h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">Helpdesk</h3>
-      <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>
+      <p class="w-full max-w-[26ch] text-center text-base">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 mx-auto md:col-span-2 lg:col-span-1">
+    <Center dir="col" class="w-full max-w-sm justify-start mx-auto md:col-span-2 lg:col-span-1">
       <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/asi-karikas-2023-images/miina_harma.jpeg"
           webpSrc=""
           alt="Ettevõttele Pilt"
           objectFit="cover"
-          className="w-full h-full rounded-full object-[center_25%]"
+          class="w-full h-full rounded-full object-[center_25%]"
           pictureClass="block w-full h-full"
         />
       </div>
       <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 max-w-[26ch] text-center text-base leading-[160%]">Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.</p>
+      <p class="w-full max-w-[26ch] text-center text-base">Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.</p>
     </Center>
   </Grid>
 </Section>
+
+<!-- About Us Section -->
+<Section
+  bg="bg-gray-900"
+  class="relative overflow-hidden text-white"
+  padding="none"
+  fullWidth={true}
+  contentClass="!px-0 !py-0"
+>
+  <Grid
+    columns={2}
+    largeColumns={2}
+    mobileColumns={1}
+    gap="gap-y-0 md:gap-x-[clamp(5.75rem,9vw,9.75rem)] lg:gap-x-[clamp(6rem,9vw,10.5rem)]"
+    class=""
+  >
+    <div
+      class="relative flex items-center py-12 md:py-16 lg:py-20 pr-(--page-padding-inline)"
+      style="padding-left: max(var(--page-padding-inline), calc((100vw - var(--page-max-width)) / 2 + var(--page-padding-inline)));"
+    >
+      <div class="flex max-w-[54ch] flex-col justify-center gap-8">
+        <div class="space-y-5">
+          <h2 class="text-4xl font-semibold text-orange-500">
+            {$text["homeAbout"]?.title || "Meist"}
+          </h2>
+          <p class="text-base">
+            {$text["homeAbout"]?.description || "Viga teksti laadimisel. Palun proovi lehte uuesti laadida."}
+          </p>
+        </div>
+
+        <div class="flex flex-col items-start gap-6">
+          <Button
+            class="rounded-md border-3 border-orange-500 bg-transparent px-10 py-2 transition-colors hover:bg-orange-500/10"
+            onClick={() => navigate($currentLang === "en" ? "/aboutus" : "/lapikutest")}
+          >
+            {$text["homeAbout"]?.moreInfo || "Rohkem infot"}
+          </Button>
+
+          <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"
+              onClick={() => navigate($currentLang === "en" ? "/contact" : "/kontakt")}
+            >
+              {$text["homeAbout"]?.contact || "Kontakt"}
+            </Button>
+            <ArrowRight class="h-12 w-12 text-orange-500 md:h-14 md:w-14" strokeWidth={2.4} />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="relative overflow-hidden min-h-80 md:min-h-0 md:h-full md:self-stretch">
+      <div class="absolute inset-0">
+        <Image
+          src="/assets/image.png"
+          alt={$text["homeAbout"]?.imageAlt || "Lapikud team"}
+          objectFit="cover"
+          class="h-full w-full max-w-none!"
+          pictureClass="block h-full w-full"
+        />
+      </div>
+
+      <div class="pointer-events-none absolute inset-0 bg-black/50"></div>
+
+      <div class="pointer-events-none absolute bottom-3 inset-x-0 z-10 hidden w-full lg:block" aria-hidden="true">
+        <div class="ml-auto h-5 w-[84%] bg-orange-500 mb-3"></div>
+        <div class="ml-auto h-3 w-[96%] bg-orange-500"></div>
+      </div>
+    </div>
+  </Grid>
+
+  <div class="pointer-events-none absolute inset-y-0 left-1/2 z-20 hidden -translate-x-1/2 items-center gap-3 md:flex" aria-hidden="true">
+    <div class="h-[82%] w-3 bg-orange-500/50"></div>
+    <div class="h-[88%] w-8 bg-orange-500/50"></div>
+  </div>
+</Section>
+
+<!-- Spacer-->
+<Section bg="bg-orange-500" class="h-3"/>
+
+<!-- What we do -->
+<Section>
+
+</Section>
+
+<!-- Partners Section -->
+<Section>
+  <div class="text-center mb-12">
+    <h2 class="text-3xl text-orange-500">
+      Koostööpartnerid
+    </h2>
+  </div>
+  
+  <Center class="flex-wrap">
+    {#each partners as partner}
+      {#if partner.url}
+        <a
+          href={partner.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="flex h-[170px] items-center justify-center p-3 no-underline transition-all duration-300 hover:scale-105"
+          title={partner.name}
+        >
+          {#if partner.image}
+            <Image
+              src={`/assets/partners/${partner.image}`}
+              alt={partner.name}
+              objectFit="contain"
+              class="w-auto max-h-[150px] transition-all duration-300"
+            />
+          {:else}
+            <span class="font-semibold text-center">{partner.name}</span>
+          {/if}
+        </a>
+      {:else}
+        <div class="flex h-[170px] items-center justify-center p-3 transition-all duration-300">
+          {#if partner.image}
+            <Image
+              src={`/assets/partners/${partner.image}`}
+              alt={partner.name}
+              objectFit="contain"
+              class="w-auto max-h-[150px] transition-all duration-300"
+            />
+          {:else}
+            <span class="font-semibold text-center">{partner.name}</span>
+          {/if}
+        </div>
+      {/if}
+    {/each}
+  </Center>
+  <Center class="m-10">
+    <Button
+      class="rounded-md border-orange-500 bg-transparent px-20 py-3 transition-colors hover:bg-orange-500/10"
+      onClick={() => navigate("/partners")}
+    >
+      Rohkem infot partnerluste kohta
+    </Button>
+  </Center>
+</Section>
+
+<!-- Spacer-->
+<Section bg="bg-orange-500" class="h-3"/>