feat(event): one more banner

website/client/src/components/settings/index.vue

@@ -45,18 +45,91 @@
         {{ $t('notifications') }}
       </router-link>
     </secondary-menu>
+    <div
+      class="g1g1-banner d-flex justify-content-center"
+      v-if="$route.name === 'subscription' && promo === 'g1g1'"
+    >
+      <div
+        v-once
+        class="svg-icon svg-gifts left-gift"
+        v-html="icons.gifts"
+      >
+      </div>
+      <div class="d-flex flex-column align-items-center text-center">
+        <strong
+          class="mt-auto mb-1"
+        > {{ $t('g1g1Event') }} </strong>
+        <p
+          class="mb-auto"
+        > {{ $t('g1g1Details') }} </p>
+      </div>
+      <div
+        v-once
+        class="svg-icon svg-gifts right-gift"
+        v-html="icons.gifts"
+      >
+      </div>
+    </div>
     <div class="col-12">
       <router-view />
     </div>
   </div>
 </template>
 
+<style scoped lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  strong {
+    font-size: 1rem;
+    line-height: 1.25;
+  }
+
+  .g1g1-banner {
+    color: $white;
+    width: 100%;
+    height: 5.75rem;
+    background-image: linear-gradient(90deg, $teal-50 0%, $purple-400 100%);
+  }
+
+  .left-gift {
+    margin: auto 3rem auto auto;
+  }
+
+  .right-gift {
+    margin: auto auto auto 3rem;
+    filter: flipH;
+    transform: scaleX(-1);
+  }
+
+  .svg-gifts {
+    width: 3.5rem;
+  }
+</style>
+
 <script>
+import { mapState } from '@/libs/store';
 import SecondaryMenu from '@/components/secondaryMenu';
+import gifts from '@/assets/svg/gifts-vertical.svg';
 
 export default {
   components: {
     SecondaryMenu,
   },
+  data () {
+    return {
+      icons: Object.freeze({
+        gifts,
+      }),
+    };
+  },
+  computed: {
+    ...mapState({
+      currentEvent: 'worldState.data.currentEvent',
+    }),
+    promo () {
+      if (!this.currentEvent || !this.currentEvent.promo) return 'none';
+      return this.currentEvent.promo;
+    },
+  },
 };
 </script>