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/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: {