initial home page ready

src/routes/Home.svelte

@@ -6,9 +6,16 @@
   import yaml from 'js-yaml';
 
   import ArrowRight from "lucide-svelte/icons/arrow-right";
+  import ArrowLeft from "lucide-svelte/icons/arrow-left";
 
   // Partners data
   let partners = [];
+  let textData = {};
+
+  // Subscribe to text store updates
+  text.subscribe(value => {
+    textData = value;
+  });
 
   onMount(async () => {
     const response = await fetch('/_data/partners.yml');
@@ -22,8 +29,8 @@
   <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"
+        src="/assets/home-page-images/hero.jpg"
+        alt={$text["hero"]?.imageAlt || "illustrative hero image"}
         objectFit="cover"
         class="w-full h-full"
         pictureClass="block w-full h-full"
@@ -35,31 +42,30 @@
     >
       <Svg
         type="mirrorH"
-        class="absolute right-0 top-[16%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
+        class="absolute right-0 top-[16%] w-[14vw] text-[#E18E38]"
       />
       <Svg
         type="branchH"
-        class="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-[6vw] text-[#E18E38]"
       />
       <Svg
         type="mirrorVH"
-        class="absolute right-0 bottom-[12%] w-[clamp(8.125rem,14vw,14.375rem)] text-[#E18E38]"
+        class="absolute right-0 bottom-[12%] w-[14vw] 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>
     <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="MTÜ Lapikud" class="w-full max-w-55 md:max-w-65 h-auto"/>
+        <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"/>
         <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">
-            MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi
-            ja praegusi IT huvilisi tudengeid.
+            {$text["hero"]?.description || "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"
+            class="rounded-lg border-orange-500 bg-orange-500 px-3 py-2 text-gray-900 transition-colors hover:border-orange-300 hover:bg-orange-300"
             onClick={() => navigate("/tudengile")}
           >
-            Liitu LAPikutega!
+            {$text["hero"]?.joinButton || "Liitu LAPikutega!"}
           </Button>
         </div>
       </div>
@@ -72,11 +78,11 @@
   <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"
-      class="absolute left-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
+      class="absolute left-0 w-[14vw] text-orange-500"
     />
     <Svg
       type="mirrorH"
-      class="absolute right-0 w-[clamp(8.125rem,14vw,14.375rem)] text-orange-500"
+      class="absolute right-0 w-[14vw] text-orange-500"
     />
   </div>
 
@@ -86,14 +92,14 @@
         <Image
           src="/assets/student-images/image_1.jpg"
           webpSrc=""
-          alt="Tudengile Pilt"
+          alt={$text["services"]?.student?.imageAlt || "Tudengile Pilt"}
           objectFit="cover"
           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">Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.</p>
+      <h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">{$text["services"]?.student?.title || "Tudengile"}</h3>
+      <p class="w-full max-w-[26ch] text-center text-base">{$text["services"]?.student?.description || "Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest."}</p>
     </Center>
 
     <Center dir="col" class="w-full max-w-sm justify-start mx-auto">
@@ -101,14 +107,14 @@
         <Image
           src="/assets/helpdesk/helpdesk_bg.jpg"
           webpSrc=""
-          alt="Helpdesk Pilt"
+          alt={$text["services"]?.helpdesk?.imageAlt || "Helpdesk Pilt"}
           objectFit="cover"
           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">HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.</p>
+      <h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">{$text["services"]?.helpdesk?.title || "Helpdesk"}</h3>
+      <p class="w-full max-w-[26ch] text-center text-base">{$text["services"]?.helpdesk?.description || "HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele."}</p>
     </Center>
 
     <Center dir="col" class="w-full max-w-sm justify-start mx-auto md:col-span-2 lg:col-span-1">
@@ -116,14 +122,14 @@
         <Image
           src="/assets/asi-karikas-2023-images/miina_harma.jpeg"
           webpSrc=""
-          alt="Ettevõttele Pilt"
+          alt={$text["services"]?.company?.imageAlt || "Ettevõttele Pilt"}
           objectFit="cover"
           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">Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.</p>
+      <h3 class="w-full min-h-10 text-center text-2xl font-semibold flex items-center justify-center">{$text["services"]?.company?.title || "Ettevõttele"}</h3>
+      <p class="w-full max-w-[26ch] text-center text-base">{$text["services"]?.company?.description || "Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima."}</p>
     </Center>
   </Grid>
 </Section>
@@ -150,10 +156,10 @@
       <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"}
+            {$text["aboutSection"]?.title || "Meist"}
           </h2>
           <p class="text-base">
-            {$text["homeAbout"]?.description || "Viga teksti laadimisel. Palun proovi lehte uuesti laadida."}
+            {$text["aboutSection"]?.description || "Viga teksti laadimisel. Palun proovi lehte uuesti laadida."}
           </p>
         </div>
 
@@ -162,7 +168,7 @@
             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"}
+            {$text["aboutSection"]?.moreInfo || "Rohkem infot"}
           </Button>
 
           <div class="flex items-center gap-4">
@@ -170,7 +176,7 @@
               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"}
+              {$text["aboutSection"]?.contact || "Kontakt"}
             </Button>
             <ArrowRight class="h-12 w-12 text-orange-500 md:h-14 md:w-14" strokeWidth={2.4} />
           </div>
@@ -181,8 +187,8 @@
     <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"}
+          src="/assets/home-page-images/about_us.png"
+          alt={$text["aboutSection"]?.imageAlt || "Lapikud team"}
           objectFit="cover"
           class="h-full w-full max-w-none!"
           pictureClass="block h-full w-full"
@@ -208,15 +214,129 @@
 <Section bg="bg-orange-500" class="h-3"/>
 
 <!-- What we do -->
-<Section>
+<Section
+  class="relative overflow-hidden"
+  padding="none"
+  fullWidth={true}
+  contentClass="!px-0 !py-0"
+>
+  <!-- Decorative SVGs -->
+  <div class="pointer-events-none absolute left-[43%] top-0 z-20 hidden -translate-x-1/2 md:block" aria-hidden="true">
+    <Svg
+      type="straightH"
+      class="w-[2vw] text-orange-500"
+    />
+  </div>
 
+  <div class="pointer-events-none absolute left-[47%] top-0 z-20 hidden -translate-x-1/2 md:block" aria-hidden="true">
+    <Svg
+      type="connectorHL"
+      class="w-[5vw] text-orange-500"
+    />
+  </div>
+
+  <div class="pointer-events-none absolute left-[48.7%] top-0 z-20 hidden -translate-x-1/2 md:block" aria-hidden="true">
+    <Svg
+      type="straightHS"
+      class="w-[2vw] text-orange-500"
+    />
+  </div>
+
+  <div class="pointer-events-none absolute left-1/2 top-0 z-20 hidden -translate-x-1/2 md:block" aria-hidden="true">
+    <Svg
+      type="mirrorHR"
+      class="w-[5vw] text-orange-500"
+    />
+  </div>
+
+  <!-- Left side start SVGs -->
+  <div class="pointer-events-none absolute bottom-[10%] left-0 z-20 hidden md:block" aria-hidden="true">
+    <Svg
+      type="connector_2"
+      class="w-[17vw] text-orange-500"
+    />
+  </div>
+  <div class="pointer-events-none absolute bottom-[10%] left-0 z-20 hidden md:block" aria-hidden="true">
+    <Svg
+      type="straight_tiny"
+      class="w-[5vw] text-orange-500"
+    />
+  </div>
+  <div class="pointer-events-none absolute bottom-[5%] left-0 z-20 hidden md:block" aria-hidden="true">
+    <Svg
+      type="straight_connector"
+      class="w-[40vw] text-orange-500"
+    />
+  </div>
+  <div class="pointer-events-none absolute bottom-0 left-0 z-20 hidden md:block" aria-hidden="true">
+    <Svg
+      type="straightL_connectorL"
+      class="w-[95vw] text-orange-500"
+    />
+  </div>
+  <!-- End of Decorative SVGs -->
+
+  <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="pb-10"
+  >
+    <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/home-page-images/temp.png"
+          alt={$text["whatWeDo"]?.imageAlt || "Lapikute arendatud projekt"}
+          objectFit="cover"
+          class="h-full w-full max-w-none!"
+          pictureClass="block h-full w-full"
+        />
+      </div>
+    </div>
+
+    <div
+      class="relative flex items-center py-12 md:py-16 lg:py-20 pl-(--page-padding-inline)"
+      style="padding-right: max(var(--page-padding-inline), calc((100vw - var(--page-max-width)) / 2 + var(--page-padding-inline)));"
+    >
+      <div class="ml-auto flex max-w-[54ch] flex-col justify-center gap-8 text-right">
+        <div class="space-y-5">
+          <h2 class="text-4xl font-semibold text-orange-500">
+            {$text["whatWeDo"]?.title || "Mida teeme"}
+          </h2>
+          <p class="text-base">
+            {$text["whatWeDo"]?.description || "Viga teksti laadimisel. Palun proovi lehte uuesti laadida."}
+          </p>
+        </div>
+
+        <div class="flex flex-col items-end 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" ? "/ourwork" : "/ettevottele")}
+          >
+            {$text["whatWeDo"]?.moreInfo || "Rohkem infot"}
+          </Button>
+
+          <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")}
+            >
+              {$text["whatWeDo"]?.contact || "Kontakt"}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Grid>
 </Section>
 
 <!-- Partners Section -->
 <Section>
   <div class="text-center mb-12">
     <h2 class="text-3xl text-orange-500">
-      Koostööpartnerid
+      {$text["partners"]?.title || "Koostööpartnerid"}
     </h2>
   </div>
   
@@ -262,7 +382,7 @@
       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
+      {$text["partners"]?.moreInfo || "Rohkem infot partnerluste kohta"}
     </Button>
   </Center>
 </Section>