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%;
+}