feat: set org landing page background (#471)

* landing page background settings

* translations

* worrked on the reviews

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/components/Org/LandingPage/index.svelte

@@ -147,6 +147,21 @@
     }
   }
 
+  function getBgImage(settings) {
+    const { show, image } = settings.header.background || {
+      show: true,
+      image: '/images/org-landingpage-banner.jpeg'
+    };
+
+    if (!show) {
+      return undefined;
+    }
+
+    if (image) {
+      return `url('${image}')`;
+    }
+  }
+
   $: initPlyr(player, $landingPageSettings.header?.banner?.video);
   $: setDefault(org?.landingpage);
 </script>
@@ -165,7 +180,15 @@
   <main>
     <!-- Header Section -->
     {#if $landingPageSettings.header.show}
-      <header id="header" class="banner w-full h-[100vh] md:h-[90vh] mb-10 relative">
+      <header
+        id="header"
+        class={`w-full h-[100vh] md:h-[90vh] mb-10 relative ${
+          $landingPageSettings.header.background.show
+            ? 'bg-cover bg-center'
+            : 'border-b border-gray-300'
+        }`}
+        style="background-image: {getBgImage($landingPageSettings)}"
+      >
         <Navigation
           logo={org.avatar_url}
           orgName={org.name}
@@ -585,13 +608,3 @@
     {/if}
   </main>
 {/if}
-
-<style>
-  .banner {
-    background: url('/images/org-landingpage-banner.jpeg') no-repeat center center fixed;
-    -webkit-background-size: cover;
-    -moz-background-size: cover;
-    -o-background-size: cover;
-    background-size: cover;
-  }
-</style>

apps/dashboard/src/lib/components/Org/Settings/LandingpageSettings.svelte

@@ -109,6 +109,10 @@
         landingpage.header.banner = $landingPageSettings.header.banner;
       }
 
+      if (!landingpage?.header?.background) {
+        landingpage.header.background = $landingPageSettings.header.background;
+      }
+
       $landingPageSettings = {
         ...landingpage
       };
@@ -218,6 +222,39 @@
       {#if $handleOpenWidget.open && widgetKey === 'banner'}
         <UploadWidget bind:imageURL={$landingPageSettings.header.banner.image} />
       {/if}
+
+      <!-- background -->
+
+      <div class="mt-4">
+        <p class="font-bold mb-4">{$t('settings.landing_page.background.title')}</p>
+        <PrimaryButton
+          variant={VARIANTS.OUTLINED}
+          label={$t('settings.landing_page.about.select_image')}
+          className="mt-3"
+          onClick={() => widgetControl('background')}
+        />
+
+        {#if $landingPageSettings.header.background?.image}
+          <img
+            alt="backgroundImage"
+            src={$landingPageSettings.header.background.image}
+            class="mt-2 rounded-md w-full"
+          />
+        {/if}
+
+        <Toggle bind:toggled={$landingPageSettings.header.background.show} size="sm">
+          <span slot="labelA" style="color: gray"
+            >{$t('settings.landing_page.background.hide_background')}</span
+          >
+          <span slot="labelB" style="color: gray"
+            >{$t('settings.landing_page.background.show_background')}</span
+          >
+        </Toggle>
+
+        {#if $handleOpenWidget.open && widgetKey === 'background'}
+          <UploadWidget bind:imageURL={$landingPageSettings.header.background.image} />
+        {/if}
+      </div>
     </Column>
   </Row>
 

apps/dashboard/src/lib/components/Org/Settings/store.ts

@@ -17,6 +17,10 @@ export interface OrgLandingPageJson {
       type: string;
       show: boolean;
     };
+    background?: {
+      image: string;
+      show: boolean;
+    };
     show: boolean;
   };
   aboutUs: {
@@ -81,6 +85,10 @@ export const landingPageSettings: Writable<OrgLandingPageJson> = writable({
       type: 'video',
       show: true
     },
+    background: {
+      image: '',
+      show: true
+    },
     show: true
   },
   aboutUs: {

apps/dashboard/src/lib/utils/translations/de.json

@@ -1218,6 +1218,11 @@
           "video": "Video",
           "image": "Bild"
         }
+      },
+      "background": {
+        "title": "Hintergrundbild",
+        "show_background": "Hintergrund anzeigen",
+        "hide_background": "Hintergrund ausblenden"
       }
     },
     "organization": {

apps/dashboard/src/lib/utils/translations/en.json

@@ -128,6 +128,11 @@
       "title": "Title",
       "title_highlight": "Title-Highlight",
       "subtitle": "Subtitle",
+      "background": {
+        "title": "Background Image",
+        "show_background": "Show background",
+        "hide_background": "Hide background"
+      },
       "actions": {
         "heading": "Actions",
         "label": "Label",
@@ -139,6 +144,7 @@
           "video": "Video",
           "image": "Image"
         },
+
         "show_banner": "Show banner",
         "hide_banner": "Hide banner"
       },

apps/dashboard/src/lib/utils/translations/es.json

@@ -1218,6 +1218,11 @@
           "video": "Video",
           "image": "Imagen"
         }
+      },
+      "background": {
+        "title": "Imagen de fondo",
+        "show_background": "Mostrar fondo",
+        "hide_background": "Ocultar fondo"
       }
     },
     "organization": {

apps/dashboard/src/lib/utils/translations/fr.json

@@ -1218,6 +1218,11 @@
           "video": "Vidéo",
           "image": "Image"
         }
+      },
+      "background": {
+        "title": "Image d'arrière-plan",
+        "show_background": "Afficher l'arrière-plan",
+        "hide_background": "Masquer l'arrière-plan"
       }
     },
     "organization": {

apps/dashboard/src/lib/utils/translations/hi.json

@@ -1218,6 +1218,11 @@
           "video": "वीडियो",
           "image": "छवि"
         }
+      },
+      "background": {
+        "title": "पृष्ठभूमि छवि",
+        "show_background": "पृष्ठभूमि दिखाएँ",
+        "hide_background": "पृष्ठभूमि छिपाएँ"
       }
     },
     "organization": {

apps/dashboard/src/lib/utils/translations/pt.json

@@ -1218,6 +1218,11 @@
           "video": "Vídeo",
           "image": "Imagem"
         }
+      },
+      "background": {
+        "title": "Imagem de fundo",
+        "show_background": "Mostrar plano de fundo",
+        "hide_background": "Ocultar plano de fundo"
       }
     },
     "organization": {

apps/dashboard/src/lib/utils/translations/ru.json

@@ -1218,6 +1218,11 @@
           "video": "видео",
           "image": "Изображение"
         }
+      },
+      "background": {
+        "title": "Фоновое изображение",
+        "show_background": "Показать фон",
+        "hide_background": "Скрыть фон"
       }
     },
     "organization": {

apps/dashboard/src/lib/utils/translations/vi.json

@@ -1218,6 +1218,11 @@
           "video": "Băng hình",
           "image": "Hình ảnh"
         }
+      },
+      "background": {
+        "title": "Hình nền",
+        "show_background": "Hiển thị nền",
+        "hide_background": "Ẩn nền"
       }
     },
     "organization": {