Merge pull request #315 from vuejs-jp/develop

jiyuujin · web-flow · commit a2009b5efc83 · 2022-10-15T15:54:26.000+09:00
release
diff --git a/app/components/IchimatsuDividedBar.vue b/app/components/IchimatsuDividedBar.vue
@@ -3,7 +3,7 @@ import type { CustomPropType } from '~/types/shims-vue'
 
 const props = defineProps({
   color: {
-    type: String as CustomPropType<'white' | 'vue-blue' | 'hiwamoegi' | 'silver-tree' | 'sangosyu' | 'tohoh' | 'asagi' | 'timetable' | 'typescript-blue'>,
+    type: String as CustomPropType<'white' | 'vue-blue' | 'hiwamoegi' | 'silver-tree' | 'sangosyu' | 'tohoh' | 'asagi' | 'timetable' | 'typescript-blue' | 'white-green'>,
     required: true,
   },
 })
@@ -28,6 +28,8 @@ const colorClass = computed(() => {
     return 'bg-ichimatsu-timetable'
   case 'typescript-blue':
     return 'bg-ichimatsu-typescript-blue'
+  case 'white-green':
+    return 'bg-ichimatsu-white-green'
   default:
     return 'bg-ichimatsu-white'
   }
diff --git a/app/components/TopPageSection.vue b/app/components/TopPageSection.vue
@@ -1,23 +1,46 @@
 <template>
   <section class="pb-7">
-    <div class="relative pb-[18vw] mx-auto max-w-[1920px] md:pb-[15vw] lg:pb-[11vw]">
+    <div class="relative mx-auto max-w-[1920px]">
       <div class="px-5">
         <div
           class="aspect-[648/384] mx-auto mb-[6.23vw] max-w-[1176px] md:aspect-[780/384] lg:aspect-[1176/384] lg:mb-9"
         >
           <top-animation />
         </div>
-        <h1
-          class="mb-[2.6vw] text-[7.01vw] font-extrabold leading-none text-center text-vue-blue lg:mb-2.5 lg:text-[4.0625rem]"
-        >
-          {{ conferenceTitle }}
-        </h1>
-        <p
-          class="mb-[6.49vw] text-[3.9vw] text-center text-vue-blue lg:mb-[3.125rem] lg:text-[2.5rem]"
-        >
-          {{ eventDate }}
+        <div class="flex flex-wrap gap-x-8 gap-y-2.5 justify-center items-baseline mb-8 md:mb-16">
+          <h1
+            class="text-[7.01vw] font-extrabold leading-none text-center text-vue-blue lg:text-[4.0625rem]"
+          >
+            {{ conferenceTitle }}
+          </h1>
+          <p
+            class="text-[3.9vw] text-center text-vue-blue lg:text-[2.5rem]"
+          >
+            {{ eventDate }}
+          </p>
+        </div>
+        <p class="text-[5.7vw] font-bold text-center text-vue-blue md:text-[2.5rem]">
+          {{ streamingNow }}
         </p>
-        <div class="text-right md:text-center">
+        <div class="flex flex-wrap gap-x-[3.125rem] gap-y-4 justify-center mt-4 mb-12 md:gap-y-7 lg:gap-y-7 lg:mt-6">
+          <a
+            v-for="track in tracks"
+            :key="track.id"
+            :href="track.url"
+            target="_blank"
+            rel="noopener"
+            class="hover:opacity-80 transition-opacity"
+          >
+            <div
+              class="flex flex-col justify-center w-[67vw] max-w-[30rem] h-16 font-bold rounded-full shadow-card md:w-[30rem] md:h-[6.75rem] lg:w-[30rem] lg:h-[6.75rem]"
+              :class="track.bgClass"
+            >
+              <p class="text-base font-bold text-center text-white md:text-2xl lg:text-2xl">{{ track.name }}</p>
+              <p class="text-sm font-normal text-center text-white md:text-xl lg:text-xl">{{ track.hashTag }}</p>
+            </div>
+          </a>
+        </div>
+        <div class="text-right lg:mb-4">
           <TweetButtonField
             :title-label="tweetLabel"
             @on-click="tweet"
@@ -34,7 +57,7 @@
           media="(min-width: 771px)"
         >
         <img
-          class="absolute bottom-0 left-1/2 -z-10 -translate-x-1/2"
+          class="absolute bottom-0 left-1/2 -z-10 opacity-40 -translate-x-1/2"
           src="/img/wave_sm.png"
           alt=""
         >
@@ -45,7 +68,7 @@
 
 <script setup lang="ts">
 import TweetButtonField from '~/components/forms/customize/TweetButtonField.vue'
-import { conferenceTitle, eventDate, tweetLabel, tweetUrl } from '~/utils/constants'
+import { conferenceTitle, eventDate, streamingNow, tracks, tweetLabel, tweetUrl } from '~/utils/constants'
 import TopAnimation from '~/components/TopAnimation.vue'
 
 const tweet = () => {
diff --git a/app/components/forms/customize/TweetButtonField.vue b/app/components/forms/customize/TweetButtonField.vue
@@ -21,7 +21,7 @@ const handleClick = () => {
 <template>
   <button
     type="submit"
-    class="w-[56.62vw] h-[9.48vw] text-[3.38vw] text-center text-vue-blue bg-transparent rounded-4xl border border-vue-blue hover:opacity-60 transition-opacity md:w-[48.98vw] md:h-[6.43vw] md:text-[2.45vw] lg:w-[26.875rem] lg:h-[3.9375rem] lg:text-[1.5rem]"
+    class="w-[56.62vw] h-[9.48vw] text-[3.38vw] text-center text-vue-blue bg-white rounded-4xl border border-vue-blue hover:opacity-60 transition-opacity md:w-[48.98vw] md:h-[6.43vw] md:text-[2.45vw] lg:w-[26.875rem] lg:h-[3.9375rem] lg:text-[1.5rem]"
     @click="handleClick"
   >
     <div class="flex justify-center items-center align-middle">
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -29,27 +29,26 @@ useNuxt2Meta({
   <div>
     <nav-page-section />
     <top-page-section />
-    <ichimatsu-divided-bar color="white" />
-    <message-page-section />
-    <ichimatsu-divided-bar color="white" />
-    <speaker-page-section />
     <template v-if="SHOW_TIMETABLE">
       <ichimatsu-divided-bar color="timetable" />
       <timetable-page-section />
     </template>
+    <speaker-page-section />
     <ichimatsu-divided-bar color="typescript-blue" />
     <events-page-section />
-    <template v-if="SHOW_TICKET">
-      <ichimatsu-divided-bar color="tohoh" />
-      <ticket-page-section />
-    </template>
     <template v-if="SHOW_STORE">
       <ichimatsu-divided-bar color="asagi" />
       <store-page-section />
     </template>
+    <template v-if="SHOW_TICKET">
+      <ichimatsu-divided-bar color="tohoh" />
+      <ticket-page-section />
+    </template>
     <ichimatsu-divided-bar color="hiwamoegi" />
     <sponsors-page-section />
-    <ichimatsu-divided-bar color="silver-tree" />
+    <ichimatsu-divided-bar color="white-green" />
+    <message-page-section />
+    <ichimatsu-divided-bar color="white" />
     <form-page-section />
     <template v-if="SHOW_TEAM">
       <ichimatsu-divided-bar color="sangosyu" />
diff --git a/app/utils/constants.ts b/app/utils/constants.ts
@@ -18,6 +18,32 @@ export const vuefesTwitterID = '@vuefes'
 
 export const eventDate = '2022.10.16 SUN'
 
+export const streamingNow = '＼YouTube Live配信予定！／'
+
+export const tracks = [
+  {
+    id: 1,
+    name: 'メドピアトラック',
+    hashTag: '#vuefes_medpeer',
+    url: 'https://www.youtube.com/watch?v=HsBTx36c_kA',
+    bgClass: 'bg-track-a'
+  },
+  {
+    id: 2,
+    name: 'FUTURE トラック',
+    hashTag: '#vuefes_future',
+    url: 'https://www.youtube.com/watch?v=dtD4p89ogKM',
+    bgClass: 'bg-track-b'
+  },
+  {
+    id: 3,
+    name: 'クラウドサイントラック',
+    hashTag: '#vuefes_cloudsign',
+    url: 'https://www.youtube.com/watch?v=eOJZ_3W4kaQ',
+    bgClass: 'bg-track-c'
+  }
+]
+
 export const message1 =
   'Vue Fes Japan は 2018 年に誕生した日本最大級の Vue.js カンファレンスです。文字通り Fes = お祭りのように Vue.js を共に盛り上げ、共に学び、そしてなによりも共に楽しむために誕生しました。'
 
@@ -198,11 +224,11 @@ export const websiteLinks = [
 ]
 
 export const menuLinks = [
-  { displayName: 'Speakers', uri: '#speakers' },
   { displayName: 'TimeTable', uri: '#timetable' },
+  { displayName: 'Speakers', uri: '#speakers' },
   { displayName: 'Events', uri: '#events' },
-  { displayName: 'Ticket', uri: '#ticket' },
   { displayName: 'Store', uri: '#store' },
+  { displayName: 'Ticket', uri: '#ticket' },
   { displayName: 'Sponsors', uri: '#sponsors' },
   { displayName: 'Contact', uri: '#form' },
   { displayName: 'Team', uri: '#team' },
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -103,6 +103,8 @@ module.exports = {
         'linear-gradient(45deg, #33A6B8 25%, transparent 25%, transparent 75%, #33A6B8 75%), linear-gradient(45deg, #33A6B8 25%, transparent 25%, transparent 75%, #33A6B8 75%)',
       'ichimatsu-typescript-blue':
         'linear-gradient(45deg, #4374AA 25%, transparent 25%, transparent 75%, #4374AA 75%), linear-gradient(45deg, #4374AA 25%, transparent 25%, transparent 75%, #4374AA 75%)',
+      'ichimatsu-white-green':
+        'linear-gradient(45deg, #fff 25%, transparent 25%, transparent 75%, #fff 75%), linear-gradient(45deg, #fff 25%, #5ab088 25%, #5ab088 75%, #fff 75%)',
       sponsors: 'linear-gradient(180deg, #90b44b 0%, #5ab088 100%)',
       events: 'linear-gradient(180deg, #4374AA 0%, rgba(255, 255, 255, 0) 100%)',
       store: 'linear-gradient(180deg, #33A6B8 0%, rgba(255, 255, 255, 0) 100%)',

Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@ const handleClick = () => {`
`21`	`21`	`<template>`
`22`	`22`	`<button`
`23`	`23`	`type="submit"`
`24`		`- class="w-[56.62vw] h-[9.48vw] text-[3.38vw] text-center text-vue-blue bg-transparent rounded-4xl border border-vue-blue hover:opacity-60 transition-opacity md:w-[48.98vw] md:h-[6.43vw] md:text-[2.45vw] lg:w-[26.875rem] lg:h-[3.9375rem] lg:text-[1.5rem]"`
	`24`	`+ class="w-[56.62vw] h-[9.48vw] text-[3.38vw] text-center text-vue-blue bg-white rounded-4xl border border-vue-blue hover:opacity-60 transition-opacity md:w-[48.98vw] md:h-[6.43vw] md:text-[2.45vw] lg:w-[26.875rem] lg:h-[3.9375rem] lg:text-[1.5rem]"`
`25`	`25`	`@click="handleClick"`
`26`	`26`	`>`
`27`	`27`	`<div class="flex justify-center items-center align-middle">`