From e4effa5157f70ad60df676f4e322e15efc73bc74 Mon Sep 17 00:00:00 2001
From: Israel Ugbodaga <israelugbodaga@gmail.com>
Date: Fri, 3 Nov 2023 14:19:30 +0100
Subject: [PATCH] feat: update banner

---
 .../theme/components/VueMasteryBanner.vue     | 55 +++++++++++++++++--
 src/public/vuemastery/banner-bg.svg           | 16 ++++++
 2 files changed, 66 insertions(+), 5 deletions(-)
 create mode 100644 src/public/vuemastery/banner-bg.svg

diff --git a/.vitepress/theme/components/VueMasteryBanner.vue b/.vitepress/theme/components/VueMasteryBanner.vue
index e43a1582ef..cf6605884e 100644
--- a/.vitepress/theme/components/VueMasteryBanner.vue
+++ b/.vitepress/theme/components/VueMasteryBanner.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="vuemastery-banner-wrapper" role="banner" v-if="isVisible">
+    <div
+      :class="{ 'show-flash': showFlash }"
+      class="vuemastery-background-dim"
+      ref="vuemastery-banner-flash"
+    ></div>
     <a
       id="vm-free-weekend"
       href="https://www.vuemastery.com/free-weekend"
@@ -38,6 +43,7 @@ import { ref, onMounted } from 'vue'
 import { VTIconPlus } from '@vue/theme'
 
 const isVisible = ref<Boolean>(true)
+const showFlash = ref<Boolean>(false)
 const nameStorage = 'VUEMASTERY-BANNER--FREE-WEEKEND-MARCH-2023'
 
 const closeBanner = () => {
@@ -52,6 +58,9 @@ onMounted(() => {
   isVisible.value = !localStorage.getItem(nameStorage)
   if (isVisible.value) {
     document.documentElement.classList.add('vuemastery-menu-fixed')
+    setTimeout(() => {
+      showFlash.value = true
+    }, 1000)
   }
 })
 </script>
@@ -66,12 +75,20 @@ onMounted(() => {
   width: 100%;
   height: 100%;
   max-height: 70px;
-  background: url(/vuemastery/background-vuemastery.svg) left center
-    no-repeat;
+  /* background: url(/vuemastery/banner-bg.svg) left center no-repeat; */
+  background: linear-gradient(45deg, #0a2b4e, #835ec2);
   overflow: hidden;
   padding: 12px;
   margin: 0;
   background-size: cover;
+  /*  */
+  background-size: 110%;
+  background-position: 50% 50%;
+  transition: background-size 0.25s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+
+.vuemastery-banner-wrapper:hover {
+  background-size: 100%;
 }
 
 .vuemastery-banner-wrapper:before {
@@ -102,11 +119,11 @@ onMounted(() => {
 }
 
 .vuemastery-banner-wrapper:hover {
-  background-size: 150% auto;
+  /* background-size: 150% auto; */
 }
 
 .vuemastery-banner-wrapper:hover:before {
-  transform: scale(1);
+  /* transform: scale(1); */
 }
 
 .vuemastery-banner-wrapper:hover:after {
@@ -216,7 +233,7 @@ onMounted(() => {
 
 @media (max-width: 850px) {
   .vuemastery-banner-wrapper:after {
-    background: none;
+    /* background: none; */
   }
 }
 @media (max-width: 767px) {
@@ -243,6 +260,34 @@ onMounted(() => {
     margin: 0;
   }
 }
+
+.vuemastery-background-dim {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  /* background: rgba(50, 49, 49, 0.329); */
+  top: 0;
+  left: 0;
+}
+.vuemastery-background-dim:after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  transition: 0.5s;
+  transition-delay: 0.5s;
+}
+.vuemastery-background-dim.show-flash:after {
+  left: 100%;
+}
 </style>
 
 <style>
diff --git a/src/public/vuemastery/banner-bg.svg b/src/public/vuemastery/banner-bg.svg
new file mode 100644
index 0000000000..261382a9de
--- /dev/null
+++ b/src/public/vuemastery/banner-bg.svg
@@ -0,0 +1,16 @@
+<svg width="1680" height="86" viewBox="0 0 1680 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_7)">
+<rect width="1680" height="86" fill="#0B2B4E"/>
+<rect x="148" y="42.501" width="169" height="169" transform="rotate(-45 148 42.501)" fill="#0B2542"/>
+<rect x="46" y="42.501" width="169" height="169" transform="rotate(-45 46 42.501)" fill="#0A1B32"/>
+<rect x="-54" y="42.501" width="169" height="169" transform="rotate(-45 -54 42.501)" fill="#091221"/>
+<rect width="169" height="169" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 1529 42.501)" fill="#0B2542"/>
+<rect width="169" height="169" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 1631 42.501)" fill="#0A1B32"/>
+<rect width="169" height="169" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 1731 42.501)" fill="#091221"/>
+</g>
+<defs>
+<clipPath id="clip0_1_7">
+<rect width="1680" height="86" fill="white"/>
+</clipPath>
+</defs>
+</svg>