From 8839dcdc936d62635cce52057e36877a53b3ebd5 Mon Sep 17 00:00:00 2001
From: Henri <henrikarba@gmail.com>
Date: Mon, 24 Nov 2025 19:25:14 +0200
Subject: [PATCH] more components

---
 src/components/Image.svelte                  | 46 ++++++++++++++++++++
 src/components/layout/FullWidthBanner.svelte | 18 ++++++++
 src/lib/i18n.js                              |  4 --
 3 files changed, 64 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Image.svelte
 create mode 100644 src/components/layout/FullWidthBanner.svelte

diff --git a/src/components/Image.svelte b/src/components/Image.svelte
new file mode 100644
index 0000000..634e2d1
--- /dev/null
+++ b/src/components/Image.svelte
@@ -0,0 +1,46 @@
+<!--
+Multi-purpose image/SVG component with optional link wrapper,
+hover effects, size variants, and object-fit options.
+-->
+
+<script>
+  export let src = "";
+  export let alt = "";
+  export let href = null; // optional link URL
+  export let target = "_blank";
+  export let rel = "noopener noreferrer";
+  export let objectFit = "contain"; // 'contain' | 'cover' | 'fill' | 'none' | 'scale-down'
+  export let hover = false;
+  export let className = "";
+  
+  $: objectFitClass = {
+    contain: "object-contain",
+    cover: "object-cover",
+    fill: "object-fill",
+    none: "object-none",
+    "scale-down": "object-scale-down"
+  }[objectFit];
+
+  $: hoverClasses = hover ? "transition-all duration-200 hover:scale-105 hover:opacity-90" : "";
+</script>
+
+{#if href}
+  <a
+    {href}
+    {target}
+    {rel}
+    class="inline-block leading-none"
+  >
+    <img
+      {src}
+      {alt}
+      class="block h-auto max-w-full {objectFitClass} {hoverClasses} {className}"
+    />
+  </a>
+{:else}
+  <img
+    {src}
+    {alt}
+    class="block h-auto max-w-full {objectFitClass} {hoverClasses} {className}"
+  />
+{/if}
\ No newline at end of file
diff --git a/src/components/layout/FullWidthBanner.svelte b/src/components/layout/FullWidthBanner.svelte
new file mode 100644
index 0000000..29fa42e
--- /dev/null
+++ b/src/components/layout/FullWidthBanner.svelte
@@ -0,0 +1,18 @@
+<!--
+Full-width colored section with configurable background and padding.
+Content is projected via the default slot.
+-->
+
+<script>
+  export let background = "var(--orange)";
+  export let paddingX = "var(--site-padding)";
+  export let paddingY = "var(--space-4)";
+  export let className = "";
+</script>
+
+<div
+  class="w-screen relative left-1/2 right-1/2 -ml-[50vw] -mr-[50vw] flex justify-center {className}"
+  style="background: {background}; padding: {paddingY} {paddingX};"
+>
+  <slot />
+</div>
\ No newline at end of file
diff --git a/src/lib/i18n.js b/src/lib/i18n.js
index 25fff8d..e5fa286 100644
--- a/src/lib/i18n.js
+++ b/src/lib/i18n.js
@@ -5,13 +5,11 @@ const savedLang = typeof window !== 'undefined'
     ? localStorage.getItem('language') || 'est'
     : 'est';
 
-// Store for current language
 export const currentLang = writable(savedLang);
 
 // Store for translations
 export const text = writable({});
 
-// Load translations for a specific language
 async function loadTranslations(lang) {
     try {
         const response = await fetch(`/locales/${lang}.json`);
@@ -22,10 +20,8 @@ async function loadTranslations(lang) {
     }
 }
 
-// Initialize translations
 loadTranslations(savedLang);
 
-// Function to switch language
 export function switchLang(lang) {
     currentLang.set(lang);
     loadTranslations(lang);