155 press

web/src/components/about/Summary.vue

@@ -13,7 +13,7 @@
 
         <v-row
           justify="center"
-          class="mt-10"
+          class="mt-10 mb-6"
         >
           <v-btn
             outlined

web/src/components/press/PressCarousel.vue

@@ -0,0 +1,76 @@
+<template>
+  <v-carousel
+    cycle
+    height="400"
+    hide-delimiter-background
+    show-arrows-on-hover
+  >
+    <v-carousel-item
+      v-for="(item, i) in press"
+      :key="i"
+      :href="item.link"
+      target="_blank"
+      eager
+    >
+      <v-container
+        fill-height
+        fluid
+      >
+        <v-row class="mx-1">
+          <v-col>
+            <v-row
+              justify="center"
+              class="mb-5"
+            >
+              <v-img
+                max-height="200"
+                :max-width="$vuetify.breakpoint.mdAndUp ? '500' : '300'"
+                contain
+                :src="item.image"
+              />
+            </v-row>
+            <v-row
+              justify="center"
+              class="carousel-text"
+            >
+              <i>{{ item.quote }}</i>
+            </v-row>
+            <v-row
+              justify="center"
+              class="carousel-text"
+            >
+              {{ item.name }}
+            </v-row>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-carousel-item>
+  </v-carousel>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      press: [
+        {
+          image: 'https://cdn.japantimes.2xx.jp/wp-content/uploads/2017/03/new-JT-logo.jpg', // TODO: Is this okay to fetch from their CDN?
+          name: 'The Japan Times',
+          quote: '"...SpeakHer aims to assist event organizers by providing a free bilingual database of public speakers in Japan who are women."',
+          link: 'https://www.japantimes.co.jp/community/2020/09/28/issues/speakher-manels-women/',
+        },
+        {
+          image: 'https://japanbyrivercruise.com/assets/images/image01.png?v88719225713061',
+          name: 'Japan By River Cruise Podcast',
+          quote: `"...If more women see women being respresented, 
+            see women speaking, then they'll go, oh, that's a place I can be active too!"`,
+          link: 'https://share.transistor.fm/s/f53eaea0',
+        },
+      ],
+    };
+  },
+  methods: {
+
+  },
+};
+</script>

web/src/components/press/PressSection.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-parallax
+    height="500"
+    dark
+    src="../../assets/background.svg"
+    class="mb-10"
+  >
+    <v-row
+      justify="center"
+      align="center"
+      class="mt-10 mb-6"
+    >
+      <h2 class="dark-section-title">
+        {{ $t('press.title') }}
+      </h2>
+    </v-row>
+    <press-carousel />
+  </v-parallax>
+</template>
+
+<script>
+import PressCarousel from '@/components/press/PressCarousel.vue';
+
+export default {
+  components: {
+    PressCarousel,
+  },
+};
+</script>

web/src/i18n/locales/en.json

@@ -106,6 +106,9 @@
         "website": "Website",
         "priorPresentation": "Link to a prior presentation"
     },
+    "press": {
+        "title": "Press Coverage"
+    },
     "validations": {
         "allRequired": "All fields are required",
         "bioLength": "Please write at least {0} characters",

web/src/styles/main.scss

@@ -17,6 +17,11 @@ h2{
   font-weight: 390;
 }
 
+.dark-section-title {
+  color: white;
+  font-weight: 500;
+}
+
 .location {
   font-size: 1rem;
   font-weight: 390;
@@ -47,4 +52,8 @@ h2{
 
 .v-expansion-panel-content__wrap {
   padding: 12px 12px 0px !important;
+}
+
+.carousel-text {
+  color: white; 
 }

web/src/views/Home.vue

@@ -28,7 +28,7 @@
     </v-parallax>
     <br>
     <Summary id="summary" />
-    <v-divider class="my-10" />
+    <press-section />
     <find-speaker id="find-speaker" />
   </div>
 </template>
@@ -38,12 +38,14 @@ import Illustration from '@/components/hero/Illustration.vue';
 import CallToAction from '@/components/hero/CallToAction.vue';
 import Summary from '@/components/about/Summary.vue';
 import FindSpeaker from '@/views/FindSpeaker.vue';
+import PressSection from '@/components/press/PressSection.vue';
 
 export default {
   name: 'Home',
   components: {
     Illustration,
     CallToAction,
+    PressSection,
     Summary,
     FindSpeaker,
   },