From 2f94311b5ce88d37530090a056c88c3bac949068 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Mon, 12 Oct 2020 00:50:50 +0900
Subject: [PATCH 1/7] initial work on carousel for press

---
 web/src/components/press/PressCarousel.vue | 70 ++++++++++++++++++++++
 web/src/views/Home.vue                     |  4 +-
 2 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 web/src/components/press/PressCarousel.vue

diff --git a/web/src/components/press/PressCarousel.vue b/web/src/components/press/PressCarousel.vue
new file mode 100644
index 00000000..7ff8ab62
--- /dev/null
+++ b/web/src/components/press/PressCarousel.vue
@@ -0,0 +1,70 @@
+<template>
+  <v-carousel
+    cycle
+    height="400"
+    hide-delimiter-background
+    show-arrows-on-hover
+  >
+    <v-carousel-item
+      v-for="(item, i) in press"
+      :key="i"
+    >
+      <v-sheet
+        :color="colors[i]"
+        height="100%"
+      >
+        <v-container
+          fluid
+          fill-height
+        >
+          <v-row>
+            <v-col>
+              <v-row
+                justify="center"
+                class="mb-5"
+              >
+                <v-img
+                  max-width="500"
+                  :src="item.image"
+                />
+              </v-row>
+              <v-row justify="center">
+                {{ item.quote }}
+              </v-row>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-sheet>
+    </v-carousel-item>
+  </v-carousel>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      colors: [
+        '#7e2c85',
+        '#c33764',
+        '#7e2c85',
+        '#842b5f',
+      ],
+      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?
+          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://cdn.japantimes.2xx.jp/wp-content/uploads/2017/03/new-JT-logo.jpg',
+          quote: 'Lorum Ipsum',
+          link: 'http://www.example.com',
+        },
+      ],
+    };
+  },
+  methods: {
+
+  },
+};
+</script>
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 3b93e7be..3f9c1352 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -28,7 +28,7 @@
     </v-parallax>
     <br>
     <Summary id="summary" />
-    <v-divider class="my-10" />
+    <press-carousel />
     <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 PressCarousel from '@/components/press/PressCarousel.vue';
 
 export default {
   name: 'Home',
   components: {
     Illustration,
     CallToAction,
+    PressCarousel,
     Summary,
     FindSpeaker,
   },

From f275794fbf56fe70a2252d15b5dc8e7af6048fa8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Mon, 12 Oct 2020 01:01:09 +0900
Subject: [PATCH 2/7] add title and spacing

---
 web/src/components/about/Summary.vue      |  2 +-
 web/src/components/press/PressSection.vue | 21 +++++++++++++++++++++
 web/src/views/Home.vue                    |  7 ++++---
 3 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 web/src/components/press/PressSection.vue

diff --git a/web/src/components/about/Summary.vue b/web/src/components/about/Summary.vue
index f413b051..e71f7984 100644
--- a/web/src/components/about/Summary.vue
+++ b/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
diff --git a/web/src/components/press/PressSection.vue b/web/src/components/press/PressSection.vue
new file mode 100644
index 00000000..2c54ab8a
--- /dev/null
+++ b/web/src/components/press/PressSection.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <v-row
+      justify="center"
+      class="mt-10 mb-6"
+    >
+      <h2>Press coverage</h2>
+    </v-row>
+    <press-carousel class="mb-10" />
+  </div>
+</template>
+
+<script>
+import PressCarousel from '@/components/press/PressCarousel.vue';
+
+export default {
+  components: {
+    PressCarousel,
+  },
+};
+</script>
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 3f9c1352..18694b27 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -28,7 +28,8 @@
     </v-parallax>
     <br>
     <Summary id="summary" />
-    <press-carousel />
+    <v-divider />
+    <press-section />
     <find-speaker id="find-speaker" />
   </div>
 </template>
@@ -38,14 +39,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 PressCarousel from '@/components/press/PressCarousel.vue';
+import PressSection from '@/components/press/PressSection.vue';
 
 export default {
   name: 'Home',
   components: {
     Illustration,
     CallToAction,
-    PressCarousel,
+    PressSection,
     Summary,
     FindSpeaker,
   },

From 52ff32f5f3e94eb01c920dc4f49d6730e355cc45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Sat, 31 Oct 2020 16:15:47 +0900
Subject: [PATCH 3/7] add another source

---
 web/src/components/press/PressCarousel.vue | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/components/press/PressCarousel.vue b/web/src/components/press/PressCarousel.vue
index 7ff8ab62..5f7eb5cb 100644
--- a/web/src/components/press/PressCarousel.vue
+++ b/web/src/components/press/PressCarousel.vue
@@ -8,6 +8,7 @@
     <v-carousel-item
       v-for="(item, i) in press"
       :key="i"
+      eager
     >
       <v-sheet
         :color="colors[i]"
@@ -24,12 +25,17 @@
                 class="mb-5"
               >
                 <v-img
+                  max-height="200"
                   max-width="500"
+                  contain
                   :src="item.image"
                 />
               </v-row>
               <v-row justify="center">
-                {{ item.quote }}
+                <i>{{ item.quote }}</i>
+              </v-row>
+              <v-row justify="center">
+                {{ item.name }}
               </v-row>
             </v-col>
           </v-row>
@@ -52,13 +58,15 @@ export default {
       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://cdn.japantimes.2xx.jp/wp-content/uploads/2017/03/new-JT-logo.jpg',
-          quote: 'Lorum Ipsum',
-          link: 'http://www.example.com',
+          image: 'https://japanbyrivercruise.com/assets/images/image01.png?v88719225713061',
+          name: 'Japan By River Cruise Podcast',
+          quote: 'A List of Women (w/Yan Fan)',
+          link: 'https://share.transistor.fm/s/f53eaea0',
         },
       ],
     };

From 0e298e4fcc46012be78385382bb634b1f190bcf5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Sat, 31 Oct 2020 16:25:26 +0900
Subject: [PATCH 4/7] link + quote fix

---
 web/src/components/press/PressCarousel.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/web/src/components/press/PressCarousel.vue b/web/src/components/press/PressCarousel.vue
index 5f7eb5cb..3b1dcd78 100644
--- a/web/src/components/press/PressCarousel.vue
+++ b/web/src/components/press/PressCarousel.vue
@@ -8,6 +8,8 @@
     <v-carousel-item
       v-for="(item, i) in press"
       :key="i"
+      :href="item.link"
+      target="_blank"
       eager
     >
       <v-sheet
@@ -65,7 +67,8 @@ export default {
         {
           image: 'https://japanbyrivercruise.com/assets/images/image01.png?v88719225713061',
           name: 'Japan By River Cruise Podcast',
-          quote: 'A List of Women (w/Yan Fan)',
+          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',
         },
       ],

From e7e100e7e8f4a0f8d63039298388253e3cbd06a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Sat, 31 Oct 2020 16:46:39 +0900
Subject: [PATCH 5/7] mobile fix

---
 web/src/components/press/PressCarousel.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/web/src/components/press/PressCarousel.vue b/web/src/components/press/PressCarousel.vue
index 3b1dcd78..267a76ae 100644
--- a/web/src/components/press/PressCarousel.vue
+++ b/web/src/components/press/PressCarousel.vue
@@ -17,10 +17,10 @@
         height="100%"
       >
         <v-container
-          fluid
           fill-height
+          fluid
         >
-          <v-row>
+          <v-row class="mx-3">
             <v-col>
               <v-row
                 justify="center"
@@ -28,7 +28,7 @@
               >
                 <v-img
                   max-height="200"
-                  max-width="500"
+                  :max-width="$vuetify.breakpoint.mdAndUp ? '500' : '300'"
                   contain
                   :src="item.image"
                 />

From c26cb1ffcba5897559e093307e7490cd2a71d8bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Sat, 31 Oct 2020 17:03:28 +0900
Subject: [PATCH 6/7] checkpoint

---
 web/src/components/press/PressCarousel.vue |  2 +-
 web/src/components/press/PressSection.vue  | 13 ++++++++++---
 web/src/i18n/locales/en.json               |  3 +++
 web/src/styles/main.scss                   |  5 +++++
 web/src/views/Home.vue                     |  1 -
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/web/src/components/press/PressCarousel.vue b/web/src/components/press/PressCarousel.vue
index 267a76ae..c5c130d5 100644
--- a/web/src/components/press/PressCarousel.vue
+++ b/web/src/components/press/PressCarousel.vue
@@ -20,7 +20,7 @@
           fill-height
           fluid
         >
-          <v-row class="mx-3">
+          <v-row class="mx-1">
             <v-col>
               <v-row
                 justify="center"
diff --git a/web/src/components/press/PressSection.vue b/web/src/components/press/PressSection.vue
index 2c54ab8a..19e95efa 100644
--- a/web/src/components/press/PressSection.vue
+++ b/web/src/components/press/PressSection.vue
@@ -1,13 +1,20 @@
 <template>
-  <div>
+  <v-sheet
+    color="#41278C"
+    height="100%"
+    class="pt-1"
+  >
     <v-row
       justify="center"
+      align="center"
       class="mt-10 mb-6"
     >
-      <h2>Press coverage</h2>
+      <h2 class="dark-section-title">
+        {{ $t('press.title') }}
+      </h2>
     </v-row>
     <press-carousel class="mb-10" />
-  </div>
+  </v-sheet>
 </template>
 
 <script>
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 75ff0574..33092fa0 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -103,6 +103,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",
diff --git a/web/src/styles/main.scss b/web/src/styles/main.scss
index d9192271..257f10cc 100644
--- a/web/src/styles/main.scss
+++ b/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;
diff --git a/web/src/views/Home.vue b/web/src/views/Home.vue
index 18694b27..2ab59fb7 100644
--- a/web/src/views/Home.vue
+++ b/web/src/views/Home.vue
@@ -28,7 +28,6 @@
     </v-parallax>
     <br>
     <Summary id="summary" />
-    <v-divider />
     <press-section />
     <find-speaker id="find-speaker" />
   </div>

From d58484644dc2d1f25b06f8b199a8173803cbfe48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ann=20=E6=9D=8F=20Kilzer?= <akilzer@gmail.com>
Date: Sat, 31 Oct 2020 17:14:46 +0900
Subject: [PATCH 7/7] good first draft

---
 web/src/components/press/PressCarousel.vue | 67 ++++++++++------------
 web/src/components/press/PressSection.vue  | 13 +++--
 web/src/styles/main.scss                   |  4 ++
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/web/src/components/press/PressCarousel.vue b/web/src/components/press/PressCarousel.vue
index c5c130d5..3ac075ac 100644
--- a/web/src/components/press/PressCarousel.vue
+++ b/web/src/components/press/PressCarousel.vue
@@ -12,37 +12,38 @@
       target="_blank"
       eager
     >
-      <v-sheet
-        :color="colors[i]"
-        height="100%"
+      <v-container
+        fill-height
+        fluid
       >
-        <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">
-                <i>{{ item.quote }}</i>
-              </v-row>
-              <v-row justify="center">
-                {{ item.name }}
-              </v-row>
-            </v-col>
-          </v-row>
-        </v-container>
-      </v-sheet>
+        <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>
@@ -51,12 +52,6 @@
 export default {
   data() {
     return {
-      colors: [
-        '#7e2c85',
-        '#c33764',
-        '#7e2c85',
-        '#842b5f',
-      ],
       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?
diff --git a/web/src/components/press/PressSection.vue b/web/src/components/press/PressSection.vue
index 19e95efa..fa24eba4 100644
--- a/web/src/components/press/PressSection.vue
+++ b/web/src/components/press/PressSection.vue
@@ -1,8 +1,9 @@
 <template>
-  <v-sheet
-    color="#41278C"
-    height="100%"
-    class="pt-1"
+  <v-parallax
+    height="500"
+    dark
+    src="../../assets/background.svg"
+    class="mb-10"
   >
     <v-row
       justify="center"
@@ -13,8 +14,8 @@
         {{ $t('press.title') }}
       </h2>
     </v-row>
-    <press-carousel class="mb-10" />
-  </v-sheet>
+    <press-carousel />
+  </v-parallax>
 </template>
 
 <script>
diff --git a/web/src/styles/main.scss b/web/src/styles/main.scss
index 257f10cc..c28f21f1 100644
--- a/web/src/styles/main.scss
+++ b/web/src/styles/main.scss
@@ -52,4 +52,8 @@ h2{
 
 .v-expansion-panel-content__wrap {
   padding: 12px 12px 0px !important;
+}
+
+.carousel-text {
+  color: white; 
 }
\ No newline at end of file