initial home page ready

src/components/Svg.svelte

@@ -1,17 +1,43 @@
 <script context="module">
-  export const VARIANTS = ['instagram','facebook','github','connector','mirrorV','mirrorH','mirrorVH','branch','branchH'];
+  export const VARIANTS = [
+    'instagram',
+    'facebook',
+    'github',
+    'connector',
+    'connector_2',
+    'mirrorV',
+    'mirrorH',
+    'mirrorVH',
+    'mirrorHR',
+    'branch',
+    'branchH',
+    'straight_tiny',
+    'straightH',
+    'straightHS',
+    'connectorHL',
+    'straightL_connectorL',
+    'straight_connector',
+    ];
 </script>
 
 <script>
   export let type;
 </script>
 
+<!-- Circuitboard connectors-->
+
 {#if type === "connector"}
   <svg viewBox="0 0 182 66" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M0 63.5H67.5L102.5 15.5H156" stroke="currentColor" stroke-width="5"/>
     <circle cx="166" cy="15.5" r="10" stroke="currentColor" stroke-width="5"/>
   </svg>
 
+{:else if type === "connector_2"}
+  <svg viewBox="0 0 170 37" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 2.5H67.5L87 27.5H153.5" stroke="currentColor" stroke-width="5"/>
+    <circle cx="161" cy="27.5" r="6.5" stroke="currentColor" stroke-width="5"/>
+  </svg>
+
 {:else if type === "mirrorV"}
   <svg viewBox="0 0 182 66" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
     <g transform="scale(1,-1) translate(0,-66)">
@@ -28,6 +54,12 @@
     </g>
   </svg>
 
+{:else if type === "mirrorHR"}
+  <svg viewBox="0 0 66 182" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M63.5 0V67.5L15.5 102.5V156" stroke="currentColor" stroke-width="5"/>
+    <circle cx="15.5" cy="166" r="10" stroke="currentColor" stroke-width="5"/>
+  </svg>
+
 {:else if type === "mirrorVH"}
   <svg viewBox="0 0 182 66" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
     <g transform="scale(-1,-1) translate(-182,-66)">
@@ -36,6 +68,12 @@
     </g>
   </svg>
 
+{:else if type === "connectorHL"}
+  <svg viewBox="0 0 80 380" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15.5 0 V200 L63.5 235 V355" stroke="currentColor" stroke-width="5"/>
+    <circle cx="63.5" cy="365" r="10" stroke="currentColor" stroke-width="5"/>
+  </svg>
+
 {:else if type === "branch"}
   <svg viewBox="0 0 75 74" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M0 31.4784H46L68 1.47842M45.5 30.9784L66.5 63.9784"
@@ -52,6 +90,43 @@
     </g>
   </svg>
 
+{:else if type === "straight_tiny"}
+  <svg viewBox="0 0 58 18" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="48.0312" cy="9" r="6.5" stroke="currentColor" stroke-width="5"/>
+    <path d="M0.03125 9.5L40.0312 9" stroke="currentColor" stroke-width="5"/>
+  </svg>
+
+{:else if type === "straightH"}
+  <svg viewBox="0 0 30 150" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 0 V125" stroke="currentColor" stroke-width="5"/>
+    <circle cx="15" cy="135" r="10" stroke="currentColor" stroke-width="5"/>
+  </svg>
+
+{:else if type === "straightHS"}
+  <svg viewBox="0 0 30 90" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 0 V65" stroke="currentColor" stroke-width="5"/>
+    <circle cx="15" cy="75" r="10" stroke="currentColor" stroke-width="5"/>
+  </svg>
+
+{:else if type === "straightL_connectorL"}
+  <svg viewBox="0 0 1025 56" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="789.075" cy="45.7383" r="7.0785" stroke="currentColor" stroke-width="5"/>
+    <path d="M0.000976562 46L780.363 45.738" stroke="currentColor" stroke-width="5"/>
+    <circle cx="1014.5" cy="9.801" r="7.0785" stroke="currentColor" stroke-width="5"/>
+    <path d="M482.521 45.1935L539.149 9.80103H1006.87" stroke="currentColor" stroke-width="5"/>
+  </svg>
+
+{:else if type === "straight_connector"}
+  <svg viewBox="0 0 391 41" class={$$props.class ?? ''} fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="266.005" cy="32" r="6.5" stroke="currentColor" stroke-width="5"/>
+    <circle cx="382.005" cy="9" r="6.5" stroke="currentColor" stroke-width="5"/>
+    <path d="M0.00485229 32.5L258.005 32" stroke="currentColor" stroke-width="5"/>
+    <path d="M193.005 32L217.005 9H373.505" stroke="currentColor" stroke-width="5"/>
+  </svg>
+
+<!-- End of circuitboard connectors -->
+<!-- Social media icons --> 
+
 {:else if type === "instagram"}
   <svg class="w-8 h-8 {$$props.class ?? ''}" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
       <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
@@ -69,6 +144,8 @@
       <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
   </svg>
 
+<!-- Social media icons -->
+
 {:else}
   <div>Unknown type: {type}</div>
 {/if}

src/lib/locales/en/Home.json

@@ -1,9 +1,43 @@
 {
-	"homeAbout": {
+	"hero": {
+		"imageAlt": "Lapikud homepage background image",
+		"logoAlt": "Lapikud NGO",
+		"description": "Lapikud is TalTech's software development club, bringing together current and former students interested in IT.",
+		"joinButton": "Join LAPikud!"
+	},
+	"services": {
+		"student": {
+			"title": "For students",
+			"description": "Develop your skills, make great friends, and gain practical experience through real projects.",
+			"imageAlt": "For students image"
+		},
+		"helpdesk": {
+			"title": "Helpdesk",
+			"description": "HELPDESK is a computer support service provided by Lapikud for students, lecturers, and everyone interested.",
+			"imageAlt": "Helpdesk image"
+		},
+		"company": {
+			"title": "For companies",
+			"description": "We help bring your ideas to life. Our experienced students are ready to deliver your projects.",
+			"imageAlt": "For companies image"
+		}
+	},
+	"aboutSection": {
 		"title": "About us",
 		"description": "Our main goal is to create professional added value for TalTech IT students. We involve students in practical solutions where ideas can be implemented in real life and technical skills can be used in meaningful ways. Our projects often grow into useful and exciting thesis topics with clear practical value.",
 		"moreInfo": "More info",
 		"contact": "Contact",
 		"imageAlt": "Lapikud students working on a project"
+	},
+	"whatWeDo": {
+		"title": "What we do",
+		"description": "We help companies and organizations bring ideas to life by building modern digital and software solutions. Our student-led team works on real projects to deliver practical value while developing the next generation of IT talent.",
+		"moreInfo": "More info",
+		"contact": "Contact",
+		"imageAlt": "Digital solutions created by Lapikud"
+	},
+	"partners": {
+		"title": "Partners",
+		"moreInfo": "More info about partnerships"
 	}
 }

src/lib/locales/est/Home.json

@@ -1,9 +1,43 @@
 {
-	"homeAbout": {
+	"hero": {
+		"imageAlt": "Lapikute avalehe taustapilt",
+		"logoAlt": "MTÜ Lapikud",
+		"description": "MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi ja praegusi IT huvilisi tudengeid.",
+		"joinButton": "Liitu LAPikutega!"
+	},
+	"services": {
+		"student": {
+			"title": "Tudengile",
+			"description": "Tule arenda oma oskuseid ja saa ägedaid sõpru! Omanda praktilist kogemust reaalsetest projektidest.",
+			"imageAlt": "Tudengile pilt"
+		},
+		"helpdesk": {
+			"title": "Helpdesk",
+			"description": "HELPDESK on MTÜ Lapikute poolt pakutav arvutiabiteenus. Teenus on suunatud tudengitele, õppejõududele ning kõikidele huvilistele.",
+			"imageAlt": "Helpdeski pilt"
+		},
+		"company": {
+			"title": "Ettevõttele",
+			"description": "Aitame sinu ideed ellu viia! Meie kogenud tudengid on valmis teie projekte realiseerima.",
+			"imageAlt": "Ettevõttele pilt"
+		}
+	},
+	"aboutSection": {
 		"title": "Meist",
 		"description": "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.",
 		"moreInfo": "Rohkem infot",
 		"contact": "Kontakt",
 		"imageAlt": "Lapikute tudengid projekti kallal"
+	},
+	"whatWeDo": {
+		"title": "Keda ja kuidas kaasame",
+		"description": "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.",
+		"moreInfo": "Rohkem infot",
+		"contact": "Liitu meiega",
+		"imageAlt": "Lapikud parandamas riistvara"
+	},
+	"partners": {
+		"title": "Koostööpartnerid",
+		"moreInfo": "Rohkem infot partnerluste kohta"
 	}
 }

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"
+        src="/assets/home-page-images/hero.jpg"
-        alt="illustrative hero image"
+        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
+            {$text["hero"]?.description || "MTÜ Lapikud on Tallinna Tehnikaülikooli Tarkvaraarendusklubi, mis ühendab endisi ja praegusi IT huvilisi tudengeid."}
-            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>
+      <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">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">{$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>
+      <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">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">{$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>
+      <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">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">{$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"
+          src="/assets/home-page-images/about_us.png"
-          alt={$text["homeAbout"]?.imageAlt || "Lapikud team"}
+          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>

src/stories/Svg.stories.svelte

@@ -8,9 +8,16 @@
   });
 </script>
 
+<Story name="instagram" args={{ type: 'instagram' }} />
+<Story name="facebook" args={{ type: 'facebook' }} />
+<Story name="github" args={{ type: 'github' }} />
 <Story name="connector" args={{ type: 'connector' }} />
 <Story name="mirrorV" args={{ type: 'mirrorV' }} />
 <Story name="mirrorH" args={{ type: 'mirrorH' }} />
 <Story name="mirrorVH" args={{ type: 'mirrorVH' }} />
+<Story name="mirrorHR" args={{ type: 'mirrorHR' }} />
 <Story name="branch" args={{ type: 'branch' }} />
 <Story name="branchH" args={{ type: 'branchH' }} />
+<Story name="straightH" args={{ type: 'straightH' }} />
+<Story name="straightHS" args={{ type: 'straightHS' }} />
+<Story name="connectorHL" args={{ type: 'connectorHL' }} />