update: 20231213

components/Awards.vue

 <template>
-  <div class="awards-wrap" :class="{ active: showAwards }">
+  <div class="awards-wrap">
     <div class="title">Hi! Our team got</div>
     <div class="prize-wrap">
       <div class="medal">
@@ -50,20 +50,7 @@
 </template>
 
 <script>
-export default {
-  data() {
-    const showAwards = true;
-
-    return {
-      showAwards,
-    };
-  },
-  mounted() {
-    const timer = setTimeout(() => {
-      this.showAwards = false;
-    }, 1000);
-  },
-};
+export default {}
 </script>
 
 <style lang='scss' scoped>
@@ -114,48 +101,5 @@ export default {
     text-align: center;
     transition: all 1s;
   }
-
-  &.active {
-    top: 40%;
-    left: 30vw;
-    right: 30vw;
-    height: 200px;
-    font-size: 200%;
-    border-radius: 20px;
-    background-color: rgba(255, 255, 255, 0.8);
-
-    .prize-wrap {
-        height: 50%;
-    }
-
-    .title {
-        font-size: 100%;
-        height: 100%;
-    }
-  }
-}
-
-@media (max-width: 991px) {
-    .awards-wrap {
-        &.active {
-            left: 5vw;
-            right: 5vw;
-            font-size: 150%;
-            height: 250px;
-
-            .prize-wrap {
-                height: 40%;
-                
-                .text {
-                    font-size: 150%;
-                }
-            }
-
-           .title {
-                font-size: 100%;
-                height: fit-content;
-            }
-        }
-    }
 }
 </style>
\ No newline at end of file

components/Menu.vue

@@ -171,6 +171,10 @@ export default {
         text: "Awards",
         url: false,
         children: [
+          {
+            text: "Awards",
+            url: "award",
+          },
           {
             text: "Judging",
             url: "judging",

pages/award.vue

+<template>
+  <Header :title="page"></Header>
+  <Banner
+    img="https://static.igem.wiki/teams/4774/wiki/static/img/banner-placeholder-h-2.jpg"
+    >{{ page }}</Banner
+  >
+  <div class="main">
+    <Sidebar class="sidebar" :title="page" />
+    <div class="content-wrap">
+      <ContentBlock :id="0">
+        <template #abstract></template>
+      </ContentBlock>
+      <ContentBlock :id="1">
+        <template #subtitle> Silver Medal </template>
+        <Figure url="https://static.igem.wiki/teams/4774/wiki/static/img/award/award-2.jpg"></Figure>
+      </ContentBlock>
+      <ContentBlock :id="2">
+        <template #subtitle> Winner of 2023 Impact Grant </template>
+        <p>We are thrilled to share that we won the 2023 Impact Grant, which is among the 90 teams out of more than 240 iGEM teams from all over the world. The application of the 2023 Impact Grant was reviewed by the iGEM Impact Commission members using a set of criteria based on novelty and impact on synthetic biology. We received a grant of $2,500 USD to facilitate our preparative work for the iGEM competition.</p>
+        <Figure url="https://static.igem.wiki/teams/4774/wiki/static/img/award/award-3-2.jpg"></Figure>
+      </ContentBlock>
+      <ContentBlock :id="3">
+        <template #subtitle> Best Hackathon Project Finalist </template>
+        <p>
+          Evan Chan and Dave Li took an active role as representatives from our
+        team in the iGEM Hackathon during the Jamboree. Their outstanding
+        performance led them to achieve an impressive top 3 ranking among all
+        the participating teams. The Hackathon is a unique event held at the
+        Grand Jamboree 2023, brought together a dynamic community of
+        programmers, designers, and technology enthusiasts. This side
+        competition provided us with an invaluable opportunity to engage with
+        mentors, participate in workshops, and collaborate with Karyo Studios,
+        offering a meaningful and enriching experience for our team.
+        </p>
+        <Figure url="https://static.igem.wiki/teams/4774/wiki/static/img/award/award-4.jpg"></Figure>
+      </ContentBlock>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      page: "Awards",
+    };
+  },
+};
+</script>
+
+<style lang='scss' scoped>
+</style>
\ No newline at end of file