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