wip: Add team page

app/[locale]/company/company-detail.tsx

@@ -0,0 +1,175 @@
+'use client';
+import clsx from 'clsx';
+import VideoPlayer from 'components/video/video-player';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+import { useEffect, useState } from 'react';
+import CompanyImage001 from './images/irie.webp';
+import CompanyImage002 from './images/kou.webp';
+import CompanyImage003 from './images/yamano.webp';
+
+export default function CompanyDetail() {
+  const t = useTranslations('Index');
+  const [hasWindow, setHasWindow] = useState(false);
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setHasWindow(true);
+    }
+  }, []);
+
+  return (
+    <div className="w-full px-6">
+      <div
+        className={clsx(
+          'mx-auto flex w-full flex-col space-y-24',
+          'py-12 font-serif md:py-24',
+          'mx-auto max-w-4xl'
+        )}
+      >
+        <h2 className="mx-auto max-w-sm text-center text-4xl md:text-4xl">{t('company.title')}</h2>
+
+        <div>
+          <h3 className="text-2xl">{t('company.subtitle001')}</h3>
+          <ul className="font-multilingual flex flex-col space-y-4 py-4 text-xl font-extralight">
+            <li className="border-t border-white/20 py-4">
+              <div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
+                <div className="w-1/3">{t('company.name.label')}</div>
+                <div className="grow">{t('company.name.value')}</div>
+              </div>
+            </li>
+            <li className="border-t border-white/20 py-4">
+              <div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
+                <div className="w-1/3">{t('company.director.label')}</div>
+                <div className="grow">{t('company.director.value')}</div>
+              </div>
+            </li>
+            <li className="border-t border-white/20 py-4">
+              <div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
+                <div className="w-1/3">{t('company.since.label')}</div>
+                <div className="grow">{t('company.since.value')}</div>
+              </div>
+            </li>
+            <li className="border-t border-white/20 py-4">
+              <div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
+                <div className="w-1/3">{t('company.address.label')}</div>
+                <div className="grow">{t('company.address.value')}</div>
+              </div>
+            </li>
+            <li className="border-t border-white/20 py-4">
+              <div className="flex flex-col space-y-2 md:flex-row md:space-x-3 md:space-y-0">
+                <div className="w-1/3">{t('company.telephone.label')}</div>
+                <div className="grow">{t('company.telephone.value')}</div>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h3 className="pb-4 text-2xl">{t('company.subtitle002')}</h3>
+          <div className="grid grid-cols-1 gap-4 border-t border-white/20 md:grid-cols-3">
+            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+              <div className="relative aspect-square">
+                <Image
+                  src={CompanyImage001}
+                  priority={true}
+                  alt="A picture of Irie Masayuki."
+                  className={clsx('h-full w-full object-cover')}
+                />
+              </div>
+              <div className="pt-2">{t('company.irie.japanese')}</div>
+              <div className="pb-4">{t('company.irie.english')}</div>
+              <div className="text-base">{t('company.irie.role')}</div>
+            </div>
+
+            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+              <div className="relative aspect-square">
+                <Image
+                  src={CompanyImage001}
+                  priority={true}
+                  alt="A picture of Masataka Nishikawa."
+                  className={clsx('h-full w-full object-cover')}
+                />
+              </div>
+              <div className="pt-2">{t('company.nishikawa.japanese')}</div>
+              <div className="pb-4">{t('company.nishikawa.english')}</div>
+              <div className="text-base">{t('company.nishikawa.role')}</div>
+            </div>
+
+            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+              <div className="relative aspect-square">
+                <Image
+                  src={CompanyImage002}
+                  priority={true}
+                  alt="A picture of Kou Sundberg."
+                  className={clsx('h-full w-full object-cover')}
+                />
+              </div>
+              <div className="pt-2">{t('company.sundberg.japanese')}</div>
+              <div className="pb-4">{t('company.sundberg.english')}</div>
+              <div className="text-base">{t('company.sundberg.role')}</div>
+            </div>
+
+            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+              <div className="relative aspect-square">
+                <Image
+                  src={CompanyImage003}
+                  priority={true}
+                  alt="A picture of Takatoshi Yamano."
+                  className={clsx('h-full w-full object-cover')}
+                />
+              </div>
+              <div className="pt-2">{t('company.yamano.japanese')}</div>
+              <div className="pb-4">{t('company.yamano.english')}</div>
+              <div className="text-base">{t('company.yamano.role')}</div>
+            </div>
+
+            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+              <div className="relative aspect-square">
+                <Image
+                  src={CompanyImage001}
+                  priority={true}
+                  alt="A picture of Alisa Yoshida."
+                  className={clsx('h-full w-full object-cover')}
+                />
+              </div>
+              <div className="pt-2">{t('company.yoshida.japanese')}</div>
+              <div className="pb-4">{t('company.yoshida.english')}</div>
+              <div className="text-base">{t('company.yoshida.role')}</div>
+            </div>
+
+            <div className="font-multilingual col-span-1 py-4 text-lg font-extralight">
+              <div className="relative aspect-square">
+                <Image
+                  src={CompanyImage001}
+                  priority={true}
+                  alt="A picture of Shinya Ikegaya."
+                  className={clsx('h-full w-full object-cover')}
+                />
+              </div>
+              <div className="pt-2">{t('company.ikegaya.japanese')}</div>
+              <div className="pb-4">{t('company.ikegaya.english')}</div>
+              <div className="text-base">{t('company.ikegaya.role')}</div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <h3 className="pb-4 text-2xl">{t('company.subtitle003')}</h3>
+          <div className="border-t border-white/20 pb-4"></div>
+          <div className=" bg-white/10 text-white">
+            {hasWindow && (
+              <VideoPlayer
+                url="https://player.vimeo.com/video/617871561?h=eefc1fe226"
+                // playing={isPlayingVideo}
+                autoplay={false}
+                loop={false}
+                controls={true}
+                volume={0.5}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/company/layout.tsx

@@ -0,0 +1,5 @@
+import { Suspense } from 'react';
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return <Suspense>{children}</Suspense>;
+}

app/[locale]/company/page.tsx

@@ -0,0 +1,41 @@
+import Footer from 'components/layout/footer';
+import { SupportedLocale } from 'components/layout/navbar/language-control';
+
+import Navbar from 'components/layout/navbar';
+import { getCart } from 'lib/shopify';
+import { cookies } from 'next/headers';
+import { Suspense } from 'react';
+import CompanyDetail from './company-detail';
+
+export const runtime = 'edge';
+const { SITE_NAME } = process.env;
+
+export const metadata = {
+  title: SITE_NAME,
+  description: SITE_NAME,
+  openGraph: {
+    type: 'website'
+  }
+};
+
+export default async function Page({ params }: { params: { locale?: SupportedLocale } }) {
+  const cartId = cookies().get('cartId')?.value;
+  let cart;
+
+  if (cartId) {
+    cart = await getCart(cartId);
+  }
+
+  return (
+    <div>
+      <Navbar cart={cart} locale={params?.locale} compact />
+      <div className="pt-12">
+        <CompanyDetail />
+      </div>
+
+      <Suspense>
+        <Footer cart={cart} />
+      </Suspense>
+    </div>
+  );
+}

app/[locale]/concept/concept-detail.tsx

@@ -22,7 +22,7 @@ export default function ConceptDetail() {
 
       <div
         className={clsx(
-          'font-multilingual mx-auto flex w-full flex-col space-y-12 py-12 text-left font-extralight md:flex-row md:space-x-6 md:space-y-0 md:py-24 md:pb-24'
+          'font-multilingual mx-auto flex w-full flex-col space-y-12 py-12 text-left font-extralight md:flex-row md:space-x-6 md:space-y-0 md:py-24'
         )}
       >
         <div className="md:w-1/2">

app/[locale]/css/video.module.css

@@ -0,0 +1,7 @@
+.reactPlayerWrap iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}

components/video/video-player.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import { FC, useEffect, useState } from 'react';
+
+import ReactPlayer from 'react-player/';
+import { VimeoConfig } from 'react-player/vimeo';
+import { YouTubeConfig } from 'react-player/youtube';
+
+import styles from '../../app/[locale]/css/video.module.css';
+
+type VideoPlayerProps = {
+  url: string;
+  playing?: boolean;
+  controls?: boolean;
+  loop?: boolean;
+  autoplay?: boolean;
+  volume?: number;
+  pip?: boolean;
+  width?: string;
+  height?: string;
+  showTitle?: boolean;
+  showPortrait?: boolean;
+  showByline?: boolean;
+  className?: string;
+  onLoaded?: () => void;
+};
+
+const VideoPlayer: FC<VideoPlayerProps> = (props) => {
+  const {
+    url,
+    playing,
+    controls = false,
+    loop = true,
+    autoplay = true,
+    volume = 0,
+    pip = false,
+    width = '100%',
+    height = '100%',
+    showTitle,
+    showPortrait,
+    showByline,
+    className = `relative w-full h-full ${styles.reactPlayerWrap} aspect-video`,
+    onLoaded = (params: any) => params
+  } = props;
+
+  const [config, setConfig] = useState<{ vimeo: VimeoConfig; youtube: YouTubeConfig }>();
+
+  useEffect(() => {
+    const localConfig = {
+      vimeo: {
+        playerOptions: {
+          showTitle,
+          showPortrait,
+          showByline
+        }
+      },
+      youtube: {
+        embedOptions: {
+          autoplay: 0,
+          controls,
+          loop: 0,
+          modestbranding: true,
+          width: '1440px',
+          height: '810px'
+        }
+      }
+    };
+    setConfig(localConfig);
+  }, [autoplay, controls, loop, showTitle, showPortrait, showByline]);
+
+  return (
+    <ReactPlayer
+      url={url}
+      playing={playing}
+      loop={loop}
+      className={className}
+      config={config}
+      volume={volume}
+      controls={controls}
+      pip={pip}
+      width={width}
+      height={height}
+      onReady={(params) => onLoaded(params)}
+    />
+  );
+};
+
+export default VideoPlayer;

messages/en.json

@@ -193,6 +193,62 @@
       "para008": "These are small steps, but we believe that these efforts will lead to the future.",
       "para009": "One of our challenges is to become an “open brewery”. Our brewery is adjacent to an old private house on the same site and the restaurant of BYAKU Narai, an accommodation facility that was partially renovated from a former sake brewery. The brewery is separated from the restaurant by a single large glass partition, and we believe that this will provide an opportunity for visitors to experience the sake brewing process up close, which is usually difficult to see, and to develop an interest in sake.",
       "para010": "Finally, the brand name “narai” was chosen with the hope that our sake will be a catalyst for people around the world to learn about and visit the charming inn town of Naraijuku. We would be happy if you could stop by suginomori brewery when you come to Narai."
+    },
+    "company": {
+      "title": "company",
+      "subtitle001": "information",
+      "name": {
+        "label": "company name",
+        "value": "suginomori brewery"
+      },
+      "director": {
+        "label": "ceo",
+        "value": "Kou Sundberg William"
+      },
+      "since": {
+        "label": "Founded",
+        "value": "1793"
+      },
+      "address": {
+        "label": "Address",
+        "value": "551-1 Narai, Shiojiri, Nagano, Japan 399-6303"
+      },
+      "telephone": {
+        "label": "Phone Number",
+        "value": "+81 264-24-0340"
+      },
+      "subtitle002": "our team",
+      "irie": {
+        "japanese": "入江将之",
+        "english": "Masayuki Irie",
+        "role": "杜氏"
+      },
+      "nishikawa": {
+        "japanese": "西川正貴",
+        "english": "Masataka Nishikawa",
+        "role": "番頭"
+      },
+      "sundberg": {
+        "japanese": "サンドバーグ弘",
+        "english": "Kou Sundberg",
+        "role": "蔵元"
+      },
+      "yamano": {
+        "japanese": "山野恭稔",
+        "english": "Takatoshi Yamano",
+        "role": "クリエイティブディレクター"
+      },
+      "yoshida": {
+        "japanese": "吉田有紗",
+        "english": "Alisa Yoshida",
+        "role": "PR・マーケティング"
+      },
+      "ikegaya": {
+        "japanese": "池谷晋也",
+        "english": "Shinya Ikegaya",
+        "role": "営業戦略"
+      },
+      "subtitle003": "movie"
     }
   }
 }

messages/ja.json

@@ -193,6 +193,62 @@
       "para008": "・・・小さなことの積み重ねですが、これらの取り組みが未来に繋がると信じています。",
       "para009": "またこれらに関連し、私たちが挑戦したことの１つが、「開かれた酒蔵」としての在り方です。弊蔵は、同敷地内の古民家や、旧酒蔵の一部を改修した宿泊施設(BYAKU Narai)のレストランに隣接しています。大きなガラスの仕切り１枚で仕切られており、普段はなかなか見ることの出来ない酒造りを間近で感じられることは、日本酒に興味を持って頂くきっかけになると信じています。",
       "para010": "最後に、ブランド名の【narai】は、「私たちのsakeをきっかけに、奈良井宿という魅力的な宿場町を世界の人に知ってもらい、足を運んで頂きたい」という想いを込めて名付けました。奈良井に来られる際には、suginomori breweryに立ち寄って頂けたら嬉しいです。"
+    },
+    "company": {
+      "title": "会社概要",
+      "subtitle001": "information",
+      "name": {
+        "label": "社名",
+        "value": "杉の森酒造株式会社"
+      },
+      "director": {
+        "label": "代表取締役",
+        "value": "サンドバーグ弘ウィリアム"
+      },
+      "since": {
+        "label": "創業",
+        "value": "1793年"
+      },
+      "address": {
+        "label": "所在地",
+        "value": "〒399-6303長野県塩尻市奈良井551-1"
+      },
+      "telephone": {
+        "label": "電話番号",
+        "value": "0264-24-0340"
+      },
+      "subtitle002": "our team",
+      "irie": {
+        "japanese": "入江将之",
+        "english": "Masayuki Irie",
+        "role": "杜氏"
+      },
+      "nishikawa": {
+        "japanese": "西川正貴",
+        "english": "Masataka Nishikawa",
+        "role": "番頭"
+      },
+      "sundberg": {
+        "japanese": "サンドバーグ弘",
+        "english": "Kou Sundberg",
+        "role": "蔵元"
+      },
+      "yamano": {
+        "japanese": "山野恭稔",
+        "english": "Takatoshi Yamano",
+        "role": "クリエイティブディレクター"
+      },
+      "yoshida": {
+        "japanese": "吉田有紗",
+        "english": "Alisa Yoshida",
+        "role": "PR・マーケティング"
+      },
+      "ikegaya": {
+        "japanese": "池谷晋也",
+        "english": "Shinya Ikegaya",
+        "role": "営業戦略"
+      },
+      "subtitle003": "movie"
     }
   }
 }

package.json

@@ -37,7 +37,8 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "react": "latest",
     "react-dom": "latest",
-    "react-intersection-observer": "^9.5.2"
+    "react-intersection-observer": "^9.5.2",
+    "react-player": "^2.12.0"
   },
   "devDependencies": {
     "@tailwindcss/container-queries": "^0.1.1",

tailwind.config.js

@@ -18,7 +18,8 @@ module.exports = {
         japan: ['var(--font-noto)', 'serif']
       },
       aspectRatio: {
-        tall: '596 / 845'
+        tall: '596 / 845',
+        video: '1792 / 750'
       },
       keyframes: {
         fadeIn: {

yarn.lock

@@ -1314,6 +1314,7 @@ __metadata:
     react: latest
     react-dom: latest
     react-intersection-observer: ^9.5.2
+    react-player: ^2.12.0
     tailwindcss: ^3.3.3
     typescript: 5.1.6
   languageName: unknown
@@ -1404,6 +1405,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"deepmerge@npm:^4.0.0":
+  version: 4.3.1
+  resolution: "deepmerge@npm:4.3.1"
+  checksum: 2024c6a980a1b7128084170c4cf56b0fd58a63f2da1660dcfe977415f27b17dbe5888668b59d0b063753f3220719d5e400b7f113609489c90160bb9a5518d052
+  languageName: node
+  linkType: hard
+
 "default-browser-id@npm:^3.0.0":
   version: 3.0.0
   resolution: "default-browser-id@npm:3.0.0"
@@ -3118,6 +3126,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"load-script@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "load-script@npm:1.0.0"
+  checksum: 8458e3f07b4a86f8d9d66e47a987811491a5d013af23ba7b371c6d3c9dc899885b072ccf65abf7874c10cb197d4975eacd8a7a125bfb38dbbcb267539f5dc1e9
+  languageName: node
+  linkType: hard
+
 "locate-path@npm:^5.0.0":
   version: 5.0.0
   resolution: "locate-path@npm:5.0.0"
@@ -3233,6 +3248,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"memoize-one@npm:^5.1.1":
+  version: 5.2.1
+  resolution: "memoize-one@npm:5.2.1"
+  checksum: a3cba7b824ebcf24cdfcd234aa7f86f3ad6394b8d9be4c96ff756dafb8b51c7f71320785fbc2304f1af48a0467cbbd2a409efc9333025700ed523f254cb52e3d
+  languageName: node
+  linkType: hard
+
 "merge-stream@npm:^2.0.0":
   version: 2.0.0
   resolution: "merge-stream@npm:2.0.0"
@@ -4126,7 +4148,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:^15.8.1":
+"prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies:
@@ -4163,6 +4185,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-fast-compare@npm:^3.0.1":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 2071415b4f76a3e6b55c84611c4d24dcb12ffc85811a2840b5a3f1ff2d1a99be1020d9437ee7c6e024c9f4cbb84ceb35e48cf84f28fcb00265ad2dfdd3947704
+  languageName: node
+  linkType: hard
+
 "react-intersection-observer@npm:^9.5.2":
   version: 9.5.2
   resolution: "react-intersection-observer@npm:9.5.2"
@@ -4179,6 +4208,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-player@npm:^2.12.0":
+  version: 2.12.0
+  resolution: "react-player@npm:2.12.0"
+  dependencies:
+    deepmerge: ^4.0.0
+    load-script: ^1.0.0
+    memoize-one: ^5.1.1
+    prop-types: ^15.7.2
+    react-fast-compare: ^3.0.1
+  peerDependencies:
+    react: ">=16.6.0"
+  checksum: 77d3e55ed67cd9c1e2300a990d8015d270072daad41f8a0750c32748f3fbfbc5bd2a2f06e78ac6828c2260b84537b9571d0abac31d3e888b74a3dccb59a56365
+  languageName: node
+  linkType: hard
+
 "react@npm:latest":
   version: 18.2.0
   resolution: "react@npm:18.2.0"