Merge pull request #188 from vuejs-jp/feature/access-section

AccessPageSection

apps/web/app/components/AccessPageSection.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { useColor, useTypography } from '@vuejs-jp/composable'
+const { fontWeight, fontSize } = useTypography()
+const { color } = useColor()
+</script>
+
+
+<template>
+  <section class="access-section">
+    <div class="access-section-body">
+      <VFTitle id="access" class="title">
+        {{ $t('access.title') }}
+      </VFTitle>
+
+      <h3
+        :style="{
+          fontWeight: fontWeight('heading/800'),
+          fontSize: fontSize('body/400'),
+          color: color('vue-blue')
+        }"
+        class="place-name"
+      >
+        {{ $t('access.name') }}
+      </h3>
+
+      <div
+        class="place-address"
+        :style="{
+          color: color('vue-blue')
+        }"
+      >
+        <p
+          :style="{
+            fontWeight: fontWeight('body/300'),
+            fontSize: fontSize('body/300'),
+          }"
+        >
+          {{ $t('access.address') }}
+        </p>
+        <NuxtLink
+          :to="$t('access.hp')" target="_blank" :style="{
+          fontWeight: fontWeight('body/300'),
+          fontSize: fontSize('body/300'),
+          color: color('vue-blue')
+        }">
+          {{ $t('access.hp') }}
+        </NuxtLink>
+      </div>
+
+      <ul
+        class="place_route" :style="{
+        color: color('vue-blue')
+      }">
+        <li>{{ $t('access.route_1') }}</li>
+        <li>{{ $t('access.route_2') }}</li>
+      </ul>
+
+
+      <div class="button">
+        <VFLinkButton :href="$t('access.map')" target="_blank" rel="noreferrer" background-color="vue-green/200" color="white">
+          {{ $t('access.map_text') }}
+        </VFLinkButton>
+      </div>
+
+      <figure class="place_image">
+        <img src="/access/fig_access01.jpg" alt="" />
+        <img src="/access/fig_access02.jpg" alt="" />
+      </figure>
+
+    </div>
+  </section>
+</template>
+
+
+<style scoped>
+@import url('~/assets/media.css');
+
+.access-section {
+  background-image: url('/access/bg_access.png');
+  background-size: 12px;
+  background-color: #ffffff;
+  display: grid;
+  place-items: center;
+  padding: 60px 0;
+  line-height: 1.6;
+
+
+  @media (--tablet) {
+    padding: 30px 1.5%;
+  }
+
+  .title {
+    text-align: center;
+  }
+
+  .access-section-body {
+    max-width: 960px;
+    width: 100%;
+    display: grid;
+    padding: 60px 96px;
+    gap: 40px;
+    background: linear-gradient(to bottom, #ffffff, rgba(255, 255, 255, .75) 52%, transparent);
+
+    @media (--tablet) {
+      padding: 30px calc(var(--unit) *1.5);
+      gap: 30px;
+    }
+  }
+
+  .place_route {
+    margin: 0;
+    padding: 0;
+  }
+
+  .place_image {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 40px;
+
+    @media (--tablet) {
+      gap: 15px;
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .button {
+    display: block;
+    width: 100%;
+    max-width: 260px;
+    margin: 0 auto;
+
+    @media (--tablet) {
+      max-width: 100%;
+      font-size: 1.125rem;
+    }
+  }
+
+  .button a {
+    --height-button: 66px;
+
+    @media (--tablet) {
+      --height-button: 58px;
+    }
+
+    height: var(--height-button);
+
+
+  }
+}
+</style>

apps/web/app/lang/en.json

@@ -71,6 +71,16 @@
     "media": "Media",
     "tool": "Tool"
   },
+  "access": {
+    "title": "Access",
+    "name": "Place：OTEMACHI PLACE HALL & CONFERENCE",
+    "address": "1F/2F, OTEMACHI PLACE(EAST TOWER), 2-3-1, OTEMACHI, CHIYODA-KU, TOKYO",
+    "hp": "https://otemachi-place-hc.jp/",
+    "route_1": "Walk 7 minutes from the Marunouchi North Exit of Tokyo Station from the JR Yamanote Line, Keihin Tohoku Line, Tokaido Shinkansen etc.",
+    "route_2": "Directly connected to Exit A5 of Otemachi Station on the Tokyo Metro Marunouchi Line, Tozai Line, Chiyoda Line, Hanzomon Line and the Toei Mita Line",
+    "map": "https://maps.app.goo.gl/ohaSGdrjQ3pt152C9",
+    "map_text": "View on Google Maps"
+  },
   "partner": {
     "title": "Partners"
   },
@@ -98,4 +108,4 @@
     "title": "Privacy Policy",
     "button": "Back to Top"
   }
-}
+}

apps/web/app/lang/ja.json

@@ -89,7 +89,16 @@
     "media": "メディア",
     "tool": "ツール"
   },
-
+  "access": {
+    "title": "アクセス",
+    "name": "会場：大手町プレイス ホール＆カンファレンス",
+    "address": "東京都千代田区大手町2-3-1 大手町プレイス（イーストタワー）1F/2F",
+    "hp": "https://otemachi-place-hc.jp/",
+    "route_1": "JR山手線・京浜東北線・東海道新幹線など「東京」駅 丸の内北口より徒歩7分",
+    "route_2": "東京メトロ丸の内線・東西線・千代田線・半蔵門線「大手町」駅 都営三田線「大手町」駅 A5出口直結",
+    "map": "https://maps.app.goo.gl/ohaSGdrjQ3pt152C9",
+    "map_text": "Googleマップを見る"
+  },
   "partner": {
     "title": "協力パートナー"
   },
@@ -117,4 +126,4 @@
     "title": "プライバシーポリシー",
     "button": "トップに戻る"
   }
-}
+}

apps/web/app/pages/index.vue

@@ -20,6 +20,7 @@ useHead({
   <VolunteerPageSection v-if="locale === 'ja'" />
   <StorePageSection v-if="config.public.showStore" />
   <SponsorPageSection />
+  <AccessPageSection />
   <TicketPageSection v-if="config.public.enableRegisterTicket" />
   <CooperationPartnerSection />
   <FormPageSection />