feat: early bird notice

Author: whyhugo

my-app/src/page/Info.js

@@ -7,6 +7,9 @@ export const Info = () => {
 
   return (
     <div class="attend_info_">
+      <div class="early_bird-notice">
+        <p>早鳥優惠進行中</p>
+      </div>
       <section class="lesson">
         <div>
           <h2>日期</h2>
@@ -48,7 +51,10 @@ export const Info = () => {
           <p>
             新臺幣 9500 元整<br></br>
             <div class="early_bird">
-              早鳥優惠：新臺幣 8900 元整（113 年 4 月 20 日 至 113 年 4 月 30 日）
+              <span class="early_bird-label">進行中</span>
+              <span class="early_bird_text">
+                早鳥優惠：新臺幣 8900 元整（113 年 4 月 20 日 至 113 年 4 月 30 日）
+              </span>
             </div>
           </p>
         </div>

my-app/src/style/_info.scss

@@ -307,6 +307,85 @@
     }
   }
 }
-.early_bird {
-  color: rgb(247, 180, 36);
+
+.early_bird_text {
+  position: relative;
+  color: $yellow-1;
+  font-weight: bold;
+  line-height: 1.8;
+  top: 1.1px;
+}
+
+.early_bird-notice p {
+  position: relative;
+  display: flex;
+  margin: 5vh auto;
+  padding: 5px 5px 6px 27px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 199px;
+  color: #fff;
+  background-color: green;
+  border-radius: 100px;
+  letter-spacing: 1.5px;
+}
+
+.early_bird-notice p::before {
+  content: "";
+  position: absolute;
+  width: 11px;
+  height: 11px;
+  margin-left: -82%;
+  margin-top: 0em;
+  background-color: #fff;
+  border-radius: 50%;
+  animation: pulse 2s infinite alternate;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1.5);
+  }
+}
+
+.early_bird-label {
+  display: inline-block;
+  position: relative;
+  margin-right: 8px;
+  font-size: 0.7em;
+  padding: 0.15em 5px 0.25em 24px;
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  color: #fff;
+  background-color: green;
+  border-radius: 100px;
+  letter-spacing: 1.5px;
+}
+
+.early_bird-label::before {
+  content: "";
+  position: absolute;
+  z-index: 3;
+  width: 0.7em;
+  height: 0.7em;
+  margin-left: -1.2em;
+  margin-top: 0.45em;
+  background-color: #fff;
+  border-radius: 50%;
+  animation: pulse-small 2s infinite alternate;
+}
+
+@keyframes pulse-small {
+  0% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1.3);
+  }
 }