use new graphic for intro video

Author: usrbinsam

src/components/SpeechArea.vue

@@ -1,13 +1,11 @@
 <template>
  <div class="speech-area">
  <div class="speech-graphic"></div>
-
  <div class="speech-head">
  <div class="speech-title">
  <slot name="title" />
  </div>
  </div>
-
  <div class="speech-body">
  <slot name="default" />
  </div>
@@ -43,6 +41,8 @@ export default {
  position: relative
  left: -60px
  top: -8px
+ font-family: "Seymour One", sans-serif
+ text-transform: uppercase
 
  .speech-body
  z-index: 1

src/views/Quiz/QuizIntro.vue

@@ -1,43 +1,45 @@
 <template>
  <div class="mt-6">
  <v-row justify="center">
- <quiz-scroll>
- <template v-slot:title>Welcome Hero</template>
- <template v-slot:default>
- <p class="text-center">Watch the video</p>
- <p class="text-center">
- <iframe
- width="400px"
- height="300px"
- src="https://www.youtube.com/embed/G1LcHvSJL8M"
- frameborder="0"
- allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
- allowfullscreen
- ></iframe>
- </p>
- <p class="text-center">
- <v-btn color="secondary darken-2" @click="onClick" x-large
- >OK!</v-btn
- >
- </p>
- </template>
- </quiz-scroll>
+ <div class="container">
+ <speech-area>
+ <template v-slot:title>Welcome</template>
+ <template v-slot:default>
+ <p class="text-center">Watch the video</p>
+ <p class="text-center">
+ <iframe
+ width="500px"
+ height="360px"
+ src="https://www.youtube.com/embed/G1LcHvSJL8M"
+ frameborder="0"
+ allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+ allowfullscreen
+ ></iframe>
+ </p>
+ <p class="text-center">
+ <v-btn color="secondary darken-2" @click="onClick" x-large
+ >OK!
+ </v-btn>
+ </p>
+ </template>
+ </speech-area>
+ </div>
  </v-row>
  </div>
 </template>
 
 <script>
-import QuizScroll from "@/components/QuizScroll";
+import SpeechArea from "@/components/SpeechArea";
 
 export default {
  name: "quiz",
  components: {
- QuizScroll
+ SpeechArea
  },
  methods: {
  async onClick() {
  await this.$store.dispatch("Quiz/markAsSeen");
- this.$router.push({ name: "quiz" });
+ await this.$router.push({ name: "quiz" });
  }
  }
 };